add support for enterprise-only notifications (#40264) (#41145)

gravitational · May 6, 2024 · ef34145 · ef34145
1 parent 61054d1
commit ef34145
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 237 deletions.
diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
@@ -1,21 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render clusters 1`] = `
-.c16 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.c19 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(255,255,255,0.72);
-  margin-left: 8px;
-  margin-right: -8px;
-}
-
 .c0 {
   box-sizing: border-box;
   padding-left: 40px;
@@ -70,6 +55,21 @@ exports[`render clusters 1`] = `
   cursor: auto;
 }
 
+.c16 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c19 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,0.72);
+  margin-left: 8px;
+  margin-right: -8px;
+}
+
 .c6 {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/web/packages/teleport/src/Notifications/Notification.story.tsx b/web/packages/teleport/src/Notifications/Notification.story.tsx
@@ -18,30 +18,21 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import {
-  subSeconds,
-  subMinutes,
-  subHours,
-  subDays,
-  subWeeks,
-  subMonths,
-} from 'date-fns';
+import { subSeconds, subMinutes, subHours, subDays } from 'date-fns';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { rest } from 'msw';
 
 import { Flex } from 'design';
 
-import {
-  NotificationSubKind,
-  Notification as NotificationType,
-} from 'teleport/services/notifications';
+import { NotificationSubKind } from 'teleport/services/notifications';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import cfg from 'teleport/config';
 
 import { ContextProvider } from '..';
 
 import { Notification } from './Notification';
-import { Notifications as NotificationsComponent } from './Notifications';
+import { Notifications as NotificationsListComponent } from './Notifications';
+import { notifications as mockNotifications } from './fixtures';
 
 export default {
   title: 'Teleport/Notifications',
@@ -50,150 +41,34 @@ export default {
 
 initialize();
 
-export const Notifications = () => {
+export const NotificationTypes = () => {
+  const ctx = createTeleportContext();
+
   return (
-    <Flex
-      css={`
-        background: ${props => props.theme.colors.levels.surface};
-        padding: 24px;
-        width: fit-content;
-        height: fit-content;
-        flex-direction: column;
-        gap: 24px;
-      `}
-    >
-      {mockNotifications.map(notification => {
-        return (
-          <Notification notification={notification} key={notification.id} />
-        );
-      })}
-    </Flex>
+    <ContextProvider ctx={ctx}>
+      Enterprise notifications can be viewed in the
+      "TeleportE/Notifications/Notification Types E" story.
+      <Flex
+        mt={4}
+        p={4}
+        gap={4}
+        css={`
+          background: ${props => props.theme.colors.levels.surface};
+          width: fit-content;
+          height: fit-content;
+          flex-direction: column;
+        `}
+      >
+        {mockNotifications.map(notification => {
+          return (
+            <Notification notification={notification} key={notification.id} />
+          );
+        })}
+      </Flex>
+    </ContextProvider>
   );
 };
 
-const mockNotifications: NotificationType[] = [
-  {
-    id: '1',
-    title: 'joe approved your access request for 5 resources.',
-    subKind: NotificationSubKind.AccessRequestApproved,
-    createdDate: subSeconds(Date.now(), 30), // 30 seconds ago
-    clicked: false,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-    ],
-  },
-  {
-    id: '2',
-    title: `joe approved your access request for the 'auditor' role,`,
-    subKind: NotificationSubKind.AccessRequestApproved,
-    createdDate: subMinutes(Date.now(), 4), // 4 minutes ago
-    clicked: false,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-    ],
-  },
-  {
-    id: '3',
-    title: `joe denied your access request for the 'auditor' role,`,
-    subKind: NotificationSubKind.AccessRequestDenied,
-    createdDate: subMinutes(Date.now(), 15), // 15 minutes ago
-    clicked: false,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-    ],
-  },
-  {
-    id: '4',
-    title: 'bob requested access to 2 resources.',
-    subKind: NotificationSubKind.AccessRequestPending,
-    createdDate: subHours(Date.now(), 3), // 3 hours ago
-    clicked: true,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-    ],
-  },
-  {
-    id: '5',
-    title: `bob requested access to the 'intern' role.`,
-    subKind: NotificationSubKind.AccessRequestPending,
-    createdDate: subHours(Date.now(), 15), // 15 hours ago
-    clicked: true,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-    ],
-  },
-  {
-    id: '6',
-    title: `2 resources are now available to access.`,
-    subKind: NotificationSubKind.AccessRequestNowAssumable,
-    createdDate: subDays(Date.now(), 1), // 1 day ago
-    clicked: true,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-      { name: 'request-type', value: 'resource' },
-    ],
-  },
-  {
-    id: '7',
-    title: `"node-5" is now available to access.`,
-    subKind: NotificationSubKind.AccessRequestNowAssumable,
-    createdDate: subDays(Date.now(), 3), // 3 days ago
-    clicked: false,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-      { name: 'request-type', value: 'resource' },
-    ],
-  },
-  {
-    id: '8',
-    title: `"auditor" is now ready to assume.`,
-    subKind: NotificationSubKind.AccessRequestNowAssumable,
-    createdDate: subWeeks(Date.now(), 2), // 2 weeks ago
-    clicked: true,
-    labels: [
-      {
-        name: 'request-id',
-        value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
-      },
-      { name: 'request-type', value: 'role' },
-    ],
-  },
-  {
-    id: '9',
-    title: 'This is an example user-created warning notification',
-    subKind: NotificationSubKind.UserCreatedWarning,
-    createdDate: subMonths(Date.now(), 3), // 3 months ago
-    clicked: true,
-    labels: [
-      {
-        name: 'text-content',
-        value: 'This is the text content of a warning notification.',
-      },
-    ],
-  },
-];
-
 export const NotificationsList = () => <ListComponent />;
 NotificationsList.parameters = {
   msw: {
@@ -255,7 +130,7 @@ const ListComponent = () => {
             height: ${p => p.theme.topBarHeight[2]}px;
           `}
         >
-          <NotificationsComponent />
+          <NotificationsListComponent />
         </Flex>
       </ContextProvider>
     </MemoryRouter>

diff --git a/web/packages/teleport/src/Notifications/Notification.tsx b/web/packages/teleport/src/Notifications/Notification.tsx
@@ -36,17 +36,23 @@ import { Theme } from 'design/theme/themes/types';
 
 import { Notification as NotificationType } from 'teleport/services/notifications';
 
-import {
-  NotificationContent,
-  notificationContentFactory,
-} from './notificationContentFactory';
+import { useTeleport } from '..';
+
+import { NotificationContent } from './notificationContentFactory';
 
 export function Notification({
   notification,
 }: {
   notification: NotificationType;
 }) {
-  const content = notificationContentFactory(notification);
+  const ctx = useTeleport();
+
+  const content = ctx.notificationContentFactory(notification);
+
+  // If the notification is unsupported, it should not be shown.
+  if (!content) {
+    return null;
+  }
 
   // Whether to show the text content dialog. This is only ever used for user-created notifications which only contain informational text
   // and don't redirect to any page.