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,
+ ),
});