@flamingo-stack/openframe-frontend-core 0.0.383-snapshot.20260708154433 → 0.0.383

package/src/stories/NotificationDrawer.stories.tsx

@@ -1,11 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import * as React from 'react';
 import { Button } from '../components/ui/button';
-import { BracketCurlyIcon } from '../components/icons-v2-generated/coding/bracket-curly-icon';
-import { MonitorIcon } from '../components/icons-v2-generated/devices/monitor-icon';
-import { AlertTriangleIcon } from '../components/icons-v2-generated/interface/alert-triangle-icon';
-import { BannedIcon } from '../components/icons-v2-generated/security/banned-icon';
-import { UserPlusIcon } from '../components/icons-v2-generated/users/user-plus-icon';
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
   ApprovalRequestNotificationTile,
@@ -49,100 +44,47 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Inline avatar stand-in so the image slot renders without network access. */
-const CUSTOMER_AVATAR =
-  'data:image/svg+xml;utf8,' +
-  encodeURIComponent(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect width="32" height="32" fill="#5EFC8D"/><circle cx="16" cy="12" r="6" fill="#212121"/><path d="M4 32c0-6.6 5.4-12 12-12s12 5.4 12 12" fill="#212121"/></svg>',
-  );
-
-/** Seed an approval-request notification in a given resolution state. */
-const approvalSeed = (
-  n: number,
-  resolution: string | null,
-  resolvedByName: string | null,
-  minutesAgo: number,
-): Notification => ({
-  id: `seed-approval-${n}`,
-  variant: 'warning',
-  title: 'Clear stuck print queue',
-  description: 'Mingo wants to restart the Spooler service on SRV-PRINT01.',
-  createdAt: Date.now() - 1_000 * 60 * minutesAgo,
-  read: false,
-  meta: {
-    contextType: ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
-    approvalRequestId: `seed-req-${n}`,
-    approvalType: 'ADMIN',
-    resolution,
-    resolvedByName,
-    toolCalls: [
-      {
-        toolExecutionRequestId: `seed-ter-${n}`,
-        toolName: 'run_command',
-        toolTitle: 'Restart print spooler',
-        toolType: 'OPENFRAME_RMM',
-        toolExplanation: 'Restarts the Spooler service to clear a stuck print queue.',
-        requiresApproval: true,
-        toolCallArguments: { command: 'Restart-Service -Name Spooler -Force' },
-      },
-    ],
-  },
-});
-
 const SEED: Notification[] = [
   {
     id: 'seed-1',
-    severity: 'INFO',
-    type: 'New Customer Created',
-    imageUrl: CUSTOMER_AVATAR,
-    title: 'Acme Corp',
-    description: 'Added by John Smith',
+    variant: 'success',
+    title: 'Device Deployment Complete',
+    description: 'HP EliteBook deployed to Marketing Dept',
     createdAt: Date.now() - 1_000 * 30,
     read: false,
   },
-  approvalSeed(1, null, null, 2),
   {
     id: 'seed-2',
     variant: 'success',
-    type: 'Device Deployment Complete',
-    icon: <MonitorIcon size={16} />,
-    title: 'HP EliteBook',
-    description: 'Deployed to Marketing Dept',
+    title: 'Device Deployment Complete',
+    description: 'HP EliteBook deployed to Marketing Dept',
     createdAt: Date.now() - 1_000 * 60 * 5,
     read: false,
   },
   {
     id: 'seed-3',
-    severity: 'DANGER',
-    type: 'Policy Violation Detected',
-    icon: <BannedIcon size={16} />,
-    title: 'ACME-WS01',
-    description: 'USB storage device connected',
+    variant: 'error',
+    title: 'Policy Violation Detected',
+    description: 'USB storage device connected to ACME-WS01',
     createdAt: Date.now() - 1_000 * 60 * 12,
     read: false,
   },
   {
     id: 'seed-4',
-    severity: 'WARNING',
-    type: 'Disk Space Check Failed',
-    icon: <AlertTriangleIcon size={16} />,
-    title: 'SRV-DB01',
-    description: 'C: drive at 95% capacity',
+    variant: 'error',
+    title: 'Disk Space Check Failed',
+    description: 'C: drive at 95% capacity on SRV-DB01',
     createdAt: Date.now() - 1_000 * 60 * 35,
     read: false,
   },
-  approvalSeed(2, 'APPROVED', 'John Smith', 45),
   {
     id: 'seed-5',
     variant: 'success',
-    type: 'Script Execution Complete',
-    icon: <BracketCurlyIcon size={16} />,
-    title: 'Windows Update',
-    description: 'Script finished on 45 devices',
+    title: 'Script Execution Complete',
+    description: 'Windows Update script finished on 45 devices',
     createdAt: Date.now() - 1_000 * 60 * 60,
     read: false,
   },
-  approvalSeed(3, 'REJECTED', 'Jane Doe', 90),
   {
     id: 'seed-6',
     variant: 'warning',
@@ -151,7 +93,6 @@ const SEED: Notification[] = [
     createdAt: Date.now() - 1_000 * 60 * 60 * 2,
     read: false,
   },
-  approvalSeed(4, 'CANCELLED', null, 180),
 ];
 
 function AutoOpen() {
@@ -163,9 +104,7 @@ function AutoOpen() {
 }
 
 /**
- * Static preview of every tile variant — settled (non-live) state. The `type`
- * header label picks up the variant color; tiles without an icon/image fall
- * back to the severity dot in the header slot.
+ * Static preview of every tile variant — settled (non-live) state.
  */
 export const AllTileVariants: Story = {
   render: () => {
@@ -176,7 +115,6 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-default',
             variant: 'default',
-            type: 'System Notice',
             title: 'Heads up',
             description: 'Neutral notification, no specific status.',
             ...base,
@@ -187,9 +125,8 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-success',
             variant: 'success',
-            type: 'Device Deployment Complete',
-            title: 'HP EliteBook',
-            description: 'Deployed to Marketing Dept',
+            title: 'Device Deployment Complete',
+            description: 'HP EliteBook deployed to Marketing Dept',
             ...base,
           }}
           onComplete={() => {}}
@@ -198,9 +135,8 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-error',
             variant: 'error',
-            type: 'Policy Violation Detected',
-            title: 'ACME-WS01',
-            description: 'USB storage device connected',
+            title: 'Policy Violation Detected',
+            description: 'USB storage device connected to ACME-WS01',
             ...base,
           }}
           onComplete={() => {}}
@@ -209,7 +145,6 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-warning',
             variant: 'warning',
-            type: 'Approval Required',
             title: 'Tech Required',
             description: 'Approval is required to execute the command.',
             ...base,
@@ -220,97 +155,12 @@ export const AllTileVariants: Story = {
           notification={{
             id: 't-info',
             variant: 'info',
-            type: 'Agent Update',
             title: 'Update available',
             description: 'A new agent version is ready to install.',
             ...base,
           }}
           onComplete={() => {}}
         />
-        <NotificationTile
-          notification={{
-            id: 't-legacy',
-            variant: 'default',
-            title: 'Legacy notification',
-            description: 'No type, icon or image — header shows the dot fallback.',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
-      </div>
-    );
-  },
-};
-
-/**
- * The new header fields: `severity` colors the type label and icon slot
- * (INFO grey, WARNING amber, DANGER red) and overrides `variant`; `imageUrl`
- * wins over `icon`, which wins over the dot fallback.
- */
-export const SeverityIconAndImage: Story = {
-  render: () => {
-    const base = { createdAt: Date.now() - 60_000, read: true } as const;
-    return (
-      <div className="flex max-w-md flex-col gap-2">
-        <NotificationTile
-          notification={{
-            id: 's-image',
-            severity: 'INFO',
-            type: 'New Customer Created',
-            imageUrl: CUSTOMER_AVATAR,
-            title: 'Acme Corp',
-            description: 'Added by John Smith',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
-        <NotificationTile
-          notification={{
-            id: 's-icon-info',
-            severity: 'INFO',
-            type: 'New User Invited',
-            icon: <UserPlusIcon size={16} />,
-            title: 'jane.doe@acme.com',
-            description: 'Invited by John Smith',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
-        <NotificationTile
-          notification={{
-            id: 's-icon-warning',
-            severity: 'WARNING',
-            type: 'Disk Space Warning',
-            icon: <AlertTriangleIcon size={16} />,
-            title: 'SRV-DB01',
-            description: 'C: drive at 85% capacity',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
-        <NotificationTile
-          notification={{
-            id: 's-icon-danger',
-            severity: 'DANGER',
-            type: 'Policy Violation Detected',
-            icon: <BannedIcon size={16} />,
-            title: 'ACME-WS01',
-            description: 'USB storage device connected',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
-        <NotificationTile
-          notification={{
-            id: 's-dot-danger',
-            severity: 'DANGER',
-            type: 'Agent Offline',
-            title: 'ACME-WS07',
-            description: 'No icon configured — severity dot fallback.',
-            ...base,
-          }}
-          onComplete={() => {}}
-        />
       </div>
     );
   },
@@ -329,11 +179,9 @@ export const LiveTile: Story = {
           key={tick}
           notification={{
             id: 'live-tile',
-            severity: 'INFO',
-            type: 'New Customer Created',
-            imageUrl: CUSTOMER_AVATAR,
-            title: 'Acme Corp',
-            description: 'Added by John Smith',
+            variant: 'success',
+            title: 'Device Deployment Complete',
+            description: 'HP EliteBook deployed to Marketing Dept',
             createdAt: Date.now(),
             read: false,
           }}
@@ -364,9 +212,7 @@ export const DrawerEmpty: Story = {
 
 /**
  * Drawer pre-seeded to mirror the Figma reference, with the toggle row and the
- * history button wired. Includes approval-request notifications in every
- * resolution state: pending (buttons), approved, rejected and cancelled
- * (status tag + resolver name in place of the buttons).
+ * history button wired.
  */
 export const DrawerWithSeedData: Story = {
   render: function DrawerWithSeedDataRender() {
@@ -376,13 +222,11 @@ export const DrawerWithSeedData: Story = {
         onHistoryClick={() => alert('Navigate to /notifications')}
         historyHref="/notifications"
         onShowPopupsChange={(v) => console.log('showPopups →', v)}
-        renderTile={renderApprovalTile}
       >
         <AutoOpen />
         <NotificationDrawer />
         <p className="text-h6 text-ods-text-secondary">
-          Seeded notifications matching the Figma reference, including approvals
-          in all four resolution states.
+          Six seeded notifications matching the Figma reference.
         </p>
       </NotificationsProvider>
     );
@@ -468,13 +312,8 @@ function PlaygroundControls() {
     useNotifications();
   const approvalSeq = React.useRef(0);
 
-  const fire = (
-    variant: NotificationVariant,
-    title: string,
-    description: string,
-    extra?: Partial<Pick<Notification, 'type' | 'icon' | 'imageUrl' | 'severity'>>,
-  ) => {
-    addNotification({ variant, title, description, ...extra });
+  const fire = (variant: NotificationVariant, title: string, description: string) => {
+    addNotification({ variant, title, description });
   };
 
   const fireWithDeepLink = () => {
@@ -578,9 +417,7 @@ function PlaygroundControls() {
         <Button
           variant="accent"
           onClick={() =>
-            fire('success', 'HP EliteBook', 'Deployed to Marketing Dept', {
-              type: 'Device Deployment Complete',
-            })
+            fire('success', 'Device Deployment Complete', 'HP EliteBook deployed to Marketing Dept')
           }
         >
           Fire success
@@ -588,49 +425,23 @@ function PlaygroundControls() {
         <Button
           variant="destructive"
           onClick={() =>
-            fire('error', 'ACME-WS01', 'USB storage device connected', {
-              type: 'Policy Violation Detected',
-              severity: 'DANGER',
-              icon: <BannedIcon size={16} />,
-            })
+            fire('error', 'Policy Violation Detected', 'USB storage device connected to ACME-WS01')
           }
         >
-          Fire danger + icon
+          Fire error
         </Button>
         <Button
           variant="outline"
-          onClick={() =>
-            fire('warning', 'Tech Required', 'Approval is required to execute the command.', {
-              type: 'Approval Required',
-              severity: 'WARNING',
-              icon: <AlertTriangleIcon size={16} />,
-            })
-          }
+          onClick={() => fire('warning', 'Tech Required', 'Approval is required to execute the command.')}
         >
-          Fire warning + icon
+          Fire warning
         </Button>
         <Button
           variant="transparent"
-          onClick={() =>
-            fire('info', 'Update available', 'A new agent version is ready to install.', {
-              type: 'Agent Update',
-            })
-          }
+          onClick={() => fire('info', 'Update available', 'A new agent version is ready to install.')}
         >
           Fire info
         </Button>
-        <Button
-          variant="outline"
-          onClick={() =>
-            fire('info', 'Acme Corp', 'Added by John Smith', {
-              type: 'New Customer Created',
-              severity: 'INFO',
-              imageUrl: CUSTOMER_AVATAR,
-            })
-          }
-        >
-          Fire with image
-        </Button>
         <Button
           variant="outline"
           onClick={() => fire('default', 'Heads up', 'Neutral notification without a specific status.')}