feat: [M3-8180] - Notification Menu story

packages/manager/.changeset/pr-10950-added-1727092343272.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Notification Menu story ([#10950](https://github.com/linode/manager/pull/10950))

packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {
+  notificationCenterContext as _notificationContext,
+  useNotificationContext,
+} from 'src/features/NotificationCenter/NotificationCenterContext';
+
+import { NotificationMenu } from './NotificationMenu';
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof NotificationMenu>;
+
+const meta: Meta<typeof NotificationMenu> = {
+  component: NotificationMenu,
+  decorators: [
+    (Story: StoryFn) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const contextValue = useNotificationContext();
+      const NotificationProvider = _notificationContext.Provider;
+      return (
+        <NotificationProvider value={contextValue}>
+          <Story />
+        </NotificationProvider>
+      );
+    },
+  ],
+  render: () => <NotificationMenu />,
+  title: 'Components/Notifications/Notification Menu',
+};
+
+export default meta;
+
+export const Default: Story = {
+  render: (args) => <NotificationMenu />,
+};

packages/manager/src/mocks/serverHandlers.ts

@@ -1574,21 +1574,37 @@ export const handlers = [
       ])
     );
   }),
-
+  http.post('*/seen', () => {
+    return HttpResponse.json({});
+  }),
   http.get(
     '*/events',
     () => {
       const events = eventFactory.buildList(1, {
         action: 'lke_node_create',
-        entity: { id: 999, label: 'linode-1', type: 'linode' },
+        entity: {
+          id: 1,
+          label: 'linode-1',
+          type: 'linode',
+          url: 'https://google.com',
+        },
         message:
           'Rebooting this thing and showing an extremely long event message for no discernible reason other than the fairly obvious reason that we want to do some testing of whether or not these messages wrap.',
         percent_complete: 15,
+        secondary_entity: {
+          id: 1,
+          label: 'my config',
+          type: 'linode',
+          url: 'https://google.com',
+        },
+        status: 'notification',
       });
+
       const dbEvents = eventFactory.buildList(1, {
         action: 'database_low_disk_space',
         entity: { id: 999, label: 'database-1', type: 'database' },
         message: 'Low disk space.',
+        status: 'notification',
       });
       const oldEvents = eventFactory.buildList(20, {
         action: 'account_update',
@@ -1631,15 +1647,15 @@ export const handlers = [
         makeResourcePage([
           ...events,
           ...dbEvents,
-          ...oldEvents,
           ...placementGroupAssignedEvent,
           ...placementGroupCreateEvent,
           eventWithSpecialCharacters,
+          ...oldEvents,
         ])
       );
     },
     {
-      once: true,
+      once: false,
     }
   ),