diff --git a/plugins/notifications/src/components/NotificationsTable/DefaultNotificationDescription.tsx b/plugins/notifications/src/components/NotificationsTable/DefaultNotificationDescription.tsx new file mode 100644 index 0000000000..d2f93038ee --- /dev/null +++ b/plugins/notifications/src/components/NotificationsTable/DefaultNotificationDescription.tsx @@ -0,0 +1,61 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Text, Button } from '@backstage/ui'; +import { useState } from 'react'; +import { NotificationDescriptionProps } from './NotificationDescription'; + +const MAX_LENGTH = 100; + +export const DefaultNotificationDescription = ( + props: NotificationDescriptionProps, +) => { + const { description } = props; + const [shown, setShown] = useState(false); + const isLong = description.length > MAX_LENGTH; + + if (!isLong) { + return {description}; + } + + if (shown) { + return ( + + {description}{' '} + + + ); + } + return ( + + {description.substring(0, MAX_LENGTH)}...{' '} + + + ); +}; diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx index dc023031a3..a88d62b9c5 100644 --- a/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx +++ b/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx @@ -13,8 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Text, Button } from '@backstage/ui'; -import { useState } from 'react'; import { createSwappableComponent } from '@backstage/frontend-plugin-api'; /** @@ -26,49 +24,6 @@ export interface NotificationDescriptionProps { description: string; } -const MAX_LENGTH = 100; - -const DefaultNotificationDescription = ( - props: NotificationDescriptionProps, -) => { - const { description } = props; - const [shown, setShown] = useState(false); - const isLong = description.length > MAX_LENGTH; - - if (!isLong) { - return {description}; - } - - if (shown) { - return ( - - {description}{' '} - - - ); - } - return ( - - {description.substring(0, MAX_LENGTH)}...{' '} - - - ); -}; - /** * Swappable component that renders the description of a notification in the * notifications table. Apps can override this to customize how descriptions @@ -79,5 +34,8 @@ const DefaultNotificationDescription = ( export const NotificationDescription = createSwappableComponent({ id: 'notifications.notification-description', - loader: () => DefaultNotificationDescription, + loader: () => + import('./DefaultNotificationDescription').then( + m => m.DefaultNotificationDescription, + ), });