@qoretechnologies/reqraft 0.10.62 → 0.10.63-pr.142.g0b675cd

package/src/components/supportTicket/ReferencePicker.stories.tsx

@@ -1,584 +0,0 @@
-import { ReqoreButton, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { ComponentProps, useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { InterfaceReferenceTags } from './InterfaceReferenceTags';
-import {
-  STORY_BROKEN_IMAGE,
-  STORY_QOG_IMAGE,
-  storyBrokenKindMark,
-  storyKindMark,
-} from './__fixtures__/kindMarks';
-import { whenImageSettled } from './useLoadedImages';
-import { IInterfaceReference } from './meta';
-import { ReferencePicker, TReferencePickerItem } from './ReferencePicker';
-import { TicketReplyBox } from './TicketReplyBox';
-
-/**
- * The interface browser — kinds on one side, the selected kind's interfaces on the
- * other, one search bar scoping both. Rendered **on top** of the composer and toggled
- * by its "Reference interfaces" action. Search dims non-matching kinds rather than
- * removing them, picked interfaces stay in the list as selected rows, and the two panes
- * collapse into one column (with a modal on phones) when there isn't width for both.
- */
-const meta = {
-  component: ReferencePicker,
-  title: 'Components/ReferencePicker',
-} as StoryMeta<typeof ReferencePicker>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const ACCENT = { main: 'custom1' } as const;
-
-/* The kind ids a host passes — wire values, not labels. `qog` is the customer-facing
- * kind for what the instance still lists as `fsm`; hosts map that at the fetch
- * boundary, so `fsm` never reaches the picker. */
-const KINDS = [
-  'workflow',
-  'service',
-  'job',
-  'connection',
-  'mapper',
-  'class',
-  'value-map',
-  'qog',
-  'ai-collection',
-  'ai-endpoint',
-  'ai-guardrail',
-];
-
-/* Stands in for the host's fetch: in the IDE these come off the customer's live
- * instance one kind at a time. Services carry the richer item shape — a description
- * and a badge — with `partner-gateway` left as a bare string so the plain row and the
- * mixed list both stay on screen. */
-const CATALOGUE: Record<string, TReferencePickerItem[]> = {
-  workflow: ['order-sync:1.2', 'invoice-export:2.0', 'partner-recon:1.1'],
-  service: [
-    {
-      name: 'notifier',
-      description: 'Fans order events out to email and Slack',
-      badge: '3 running',
-    },
-    { name: 'audit-logger', description: 'Writes every state change to the audit table' },
-    'partner-gateway',
-  ],
-  job: ['nightly-recon', 'cleanup-temp', 'sla-report'],
-  connection: ['sftp-partner', 'pgsql-omq', 'salesforce-prod'],
-  mapper: ['csv-to-order', 'order-to-invoice'],
-  class: ['OrderUtils', 'PartnerApi'],
-  'value-map': ['country-codes', 'currency'],
-  qog: ['telegram-intake', 'stripe-billing', 'onboarding', 'escalation'],
-  'ai-collection': ['kb-support'],
-  'ai-endpoint': ['gpt-router'],
-  'ai-guardrail': ['pii-filter'],
-};
-
-const darkTheme = (Story: () => JSX.Element) => (
-  <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-    <div style={{ padding: 20, background: '#121212' }}>
-      <Story />
-    </div>
-  </ReqoreUIProvider>
-);
-
-/** Drives the picker the way a host does: owns the selected kind, resolves that
- *  kind's interfaces, and accumulates what gets picked. */
-const Hosted = ({
-  withComposer,
-  initialKind = 'workflow',
-  ...pickerProps
-}: { withComposer?: boolean; initialKind?: string } & Partial<
-  ComponentProps<typeof ReferencePicker>
->) => {
-  const [kind, setKind] = useState<string>(initialKind);
-  const [picked, setPicked] = useState<IInterfaceReference[]>([]);
-  const [open, setOpen] = useState<boolean>(true);
-
-  const isPicked = (reference: IInterfaceReference) =>
-    picked.some(
-      (existing) =>
-        existing.interface_kind === reference.interface_kind &&
-        existing.interface_name === reference.interface_name
-    );
-
-  const picker = (
-    <ReferencePicker
-      kinds={KINDS}
-      kind={kind}
-      onKindChange={setKind}
-      items={CATALOGUE[kind] ?? []}
-      picked={picked}
-      onAdd={(reference) =>
-        setPicked((current) => (isPicked(reference) ? current : [...current, reference]))
-      }
-      onRemove={(reference) =>
-        setPicked((current) =>
-          current.filter(
-            (existing) =>
-              !(
-                existing.interface_kind === reference.interface_kind &&
-                existing.interface_name === reference.interface_name
-              )
-          )
-        )
-      }
-      {...pickerProps}
-    />
-  );
-
-  if (!withComposer) {
-    return picker;
-  }
-
-  return (
-    <div style={{ maxWidth: 780 }}>
-      {open ? <div style={{ marginBottom: 10 }}>{picker}</div> : null}
-      <TicketReplyBox
-        onSend={fn()}
-        placeholder='Write a reply…'
-        aboveInput={
-          picked.length ? (
-            /* Composer chips are the references you're about to send, so they carry
-               their own remove — and read a size up from the thread's, where they're
-               a record rather than a control. */
-            <InterfaceReferenceTags
-              customTheme={ACCENT}
-              references={picked}
-              onRemove={(reference) =>
-                setPicked((current) =>
-                  current.filter(
-                    (existing) =>
-                      !(
-                        existing.interface_kind === reference.interface_kind &&
-                        existing.interface_name === reference.interface_name
-                      )
-                  )
-                )
-              }
-            />
-          ) : undefined
-        }
-        footerActions={
-          <ReqoreButton
-            className='references-toggle'
-            icon='LinksLine'
-            minimal
-            flat
-            badge={picked.length || undefined}
-            active={open}
-            customTheme={ACCENT}
-            tooltip={open ? 'Hide references' : 'Reference interfaces'}
-            onClick={() => setOpen((shown) => !shown)}
-          />
-        }
-      />
-    </div>
-  );
-};
-
-/*
- * Queried by role, not by text: ReqoreButton renders its label in a pair of spans (an
- * active one and an aria-hidden inactive one) to cross-fade, so getByText matches twice
- * for every button. The accessible name collapses that pair back to one.
- */
-const option = (canvas: ReturnType<typeof within>, name: string) =>
-  canvas.getByRole('button', { name });
-const missingOption = (canvas: ReturnType<typeof within>, name: string) =>
-  canvas.queryByRole('button', { name });
-
-/** Picking an interface adds it as a reference and leaves the row in place, selected. */
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the two-pane reference browser. Picking an interface adds it as a reference and leaves the row in the list, selected and ticked, rather than removing it.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await userEvent.click(await canvas.findByRole('button', { name: 'order-sync:1.2' }));
-    // it stays in the pane, now selected
-    await waitFor(() =>
-      expect(option(canvas, 'order-sync:1.2')).toHaveClass('reqore-reference-picker-picked')
-    );
-    // its siblings are untouched
-    await expect(option(canvas, 'invoice-export:2.0')).toBeInTheDocument();
-  },
-};
-
-/** A picked interface can be un-picked from the list it was picked in. */
-export const DeselectsAPickedInterface: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the browser and picks an interface, then clicks the same row again — the reference comes back off without the user having to click away from the picker.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const row = await canvas.findByRole('button', { name: 'invoice-export:2.0' });
-
-    await userEvent.click(row);
-    await waitFor(() => expect(row).toHaveClass('reqore-reference-picker-picked'));
-
-    await userEvent.click(row);
-    await waitFor(() => expect(row).not.toHaveClass('reqore-reference-picker-picked'));
-  },
-};
-
-/**
- * Interfaces can arrive as bare names or as objects carrying a description and a
- * badge — a name alone often isn't enough to tell two of them apart. A picked row
- * tints rather than filling solid, so the ones still up for choosing stay the loudest
- * things in the list.
- */
-export const WithDescriptionsAndBadges: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a kind whose interfaces carry descriptions and badges alongside one that has neither. Picking a row tints it rather than filling it solid, keeping the unpicked rows the most prominent.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted initialKind='service' />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(
-      await canvas.findByText('Fans order events out to email and Slack')
-    ).toBeInTheDocument();
-    await expect(canvas.getByText('3 running')).toBeInTheDocument();
-
-    // a bare-string item in the same list renders as a plain row
-    await expect(option(canvas, 'partner-gateway')).toBeInTheDocument();
-
-    // picking keeps the description and badge in place
-    await userEvent.click(canvas.getByRole('button', { name: /audit-logger/ }));
-    await waitFor(() =>
-      expect(canvas.getByRole('button', { name: /audit-logger/ })).toHaveClass(
-        'reqore-reference-picker-picked'
-      )
-    );
-    await expect(
-      canvas.getByText('Writes every state change to the audit table')
-    ).toBeInTheDocument();
-  },
-};
-
-/** A description is searchable text too, so the search reads it alongside the name. */
-export const SearchMatchesDescriptions: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders a kind with described interfaces and searches for a word that appears only in a description — the matching row survives even though its name doesn't contain the query.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted initialKind='service' />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const search = canvasElement.querySelector(
-      'input[placeholder*="Search types"]'
-    ) as HTMLInputElement;
-
-    // "Slack" is only in the notifier's description
-    await userEvent.type(search, 'slack');
-    await waitFor(() => expect(missingOption(canvas, 'partner-gateway')).not.toBeInTheDocument());
-    await expect(canvas.getByRole('button', { name: /notifier/ })).toBeInTheDocument();
-  },
-};
-
-/** Selecting a kind on the left swaps the right pane to that kind's interfaces. */
-export const SwitchesKind: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the picker and shows that selecting a kind on the left swaps the right pane to that kind's interfaces.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(option(canvas, 'order-sync:1.2')).toBeInTheDocument();
-    await userEvent.click(option(canvas, 'Connections'));
-    await waitFor(() => expect(option(canvas, 'sftp-partner')).toBeInTheDocument());
-    await expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument();
-  },
-};
-
-/**
- * One search scopes both panes: non-matching kinds drop off the left so the matches
- * are the whole list, and the selected kind stays on — dimmed — even when the query
- * doesn't match it, so the interfaces on the right always have a visible owner.
- */
-export const SearchKeepsTheSelectedKind: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the picker and types a search. Non-matching kinds drop off the left pane, but the selected kind stays on as a dimmed row so the interfaces still listed on the right can be told apart from the kind they belong to.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const search = canvasElement.querySelector(
-      'input[placeholder*="Search types"]'
-    ) as HTMLInputElement;
-
-    await userEvent.type(search, 'sync');
-    // right pane: only the matching interface survives
-    await waitFor(() =>
-      expect(missingOption(canvas, 'invoice-export:2.0')).not.toBeInTheDocument()
-    );
-    await expect(option(canvas, 'order-sync:1.2')).toBeInTheDocument();
-    // left pane: nothing is called "sync", so only the selected kind is left — dimmed,
-    // which is what tells you the surviving interface is a workflow
-    await expect(option(canvas, 'Workflows')).toHaveClass('reqore-reference-picker-dimmed');
-    await expect(missingOption(canvas, 'Services')).not.toBeInTheDocument();
-
-    // a kind name matches: it joins the list at full strength, next to the still-dimmed
-    // selected kind
-    await userEvent.clear(search);
-    await userEvent.type(search, 'connect');
-    await waitFor(() =>
-      expect(option(canvas, 'Connections')).not.toHaveClass(
-        'reqore-reference-picker-dimmed'
-      )
-    );
-    await expect(option(canvas, 'Workflows')).toHaveClass('reqore-reference-picker-dimmed');
-    await expect(missingOption(canvas, 'Jobs')).not.toBeInTheDocument();
-  },
-};
-
-/**
- * Narrow container: the panes collapse into one column and the selected kind's
- * interfaces render directly under its row. The width measured is the picker's own,
- * not the viewport's — this canvas is 320px wide on a desktop-sized screen, which is
- * exactly the case a viewport media query gets wrong.
- */
-export const StacksInANarrowContainer: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the picker in a 320px-wide container on a full-size screen: it collapses to one column on its own measured width, with the selected kind's interfaces indented directly beneath its row instead of in a second pane.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => (
-    <div style={{ width: 320 }}>
-      <Hosted />
-    </div>
-  ),
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const services = option(canvas, 'Services');
-
-    /* Stacked is a claim about ORDER, not just presence: the workflows sit between
-       their own kind row and the next one. Side by side, every kind would come
-       first and the interfaces after — so the comparison tells the two apart
-       without reaching for a marker class. */
-    await waitFor(() => {
-      const workflow = option(canvas, 'order-sync:1.2');
-      expect(
-        workflow.compareDocumentPosition(services) & Node.DOCUMENT_POSITION_FOLLOWING
-      ).toBeTruthy();
-    });
-    await expect(option(canvas, 'Workflows')).toBeInTheDocument();
-  },
-};
-
-/** On a phone the picker lifts into a modal — inline it would own the whole screen. */
-export const OnAPhone: Story = {
-  parameters: {
-    // capture this one at phone size; the modal portals to the viewport, so a
-    // narrow story wrapper wouldn't constrain it
-    qlip: { viewport: { width: 390, height: 844 } },
-    docs: {
-      description: {
-        story:
-          'Renders the phone presentation: the picker lifts out of the composer into a full-width modal with a close action, stacked into a single column.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted presentation='modal' layout='stacked' onClose={fn()} />,
-  async play() {
-    // the modal portals out of the story canvas, so query the document
-    const canvas = within(document.body);
-    await expect(await canvas.findByText('Reference interfaces')).toBeInTheDocument();
-    await expect(await canvas.findByRole('button', { name: 'order-sync:1.2' })).toBeInTheDocument();
-  },
-};
-
-/** The right pane says it's still fetching rather than claiming the kind is empty. */
-export const Loading: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the loading state, where the right pane reports it is still fetching ('Loading workflows…') rather than claiming the kind is empty.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => (
-    <ReferencePicker
-      kinds={KINDS}
-      kind='workflow'
-      onKindChange={fn()}
-      items={[]}
-      loading
-      onAdd={fn()}
-    />
-  ),
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Loading workflows…')).toBeInTheDocument();
-    await expect(canvas.queryByText(/No workflows/)).not.toBeInTheDocument();
-  },
-};
-
-/**
- * The host's fetch failed. The pane says so and offers a retry — an empty list here
- * would read as "this instance has no connections", which is a different and much more
- * alarming claim than "we couldn't ask". The specific failure is the tooltip.
- */
-export const LoadFailed: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the fetch-failure state, where the pane shows the error and a retry action instead of an empty list that would read as 'this instance has no connections'.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => (
-    <ReferencePicker
-      kinds={KINDS}
-      kind='connection'
-      onKindChange={fn()}
-      items={[]}
-      error='Could not reach the Qorus instance'
-      onRetry={fn()}
-      onAdd={fn()}
-    />
-  ),
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const retry = await canvas.findByRole('button', { name: /Couldn't load connections/ });
-    await expect(retry).toBeInTheDocument();
-    // the failure replaces the list rather than sitting alongside an empty one
-    await expect(canvas.queryByText(/No connections/)).not.toBeInTheDocument();
-  },
-};
-
-/** In place: above the composer, toggled by the composer's own action, with the picked
- *  references shown as chips over the input. */
-export const AboveTheComposer: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the picker in place above the composer, toggled by the composer's own action, with picked references surfacing as chips over the input that persist when the picker is closed.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted withComposer />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await userEvent.click(await canvas.findByRole('button', { name: 'order-sync:1.2' }));
-    // the pick stays selected in the pane and surfaces as a chip on the composer
-    await waitFor(() =>
-      expect(option(canvas, 'order-sync:1.2')).toHaveClass('reqore-reference-picker-picked')
-    );
-    await expect(canvas.getAllByText('order-sync:1.2').length).toBeGreaterThan(0);
-
-    const toggle = canvasElement.querySelector('.references-toggle') as HTMLElement;
-    await userEvent.click(toggle);
-    // the picker closes; the chip stays, because the reference is still attached
-    await waitFor(() =>
-      expect(missingOption(canvas, 'invoice-export:2.0')).not.toBeInTheDocument()
-    );
-    await expect(canvas.getAllByText('order-sync:1.2').length).toBeGreaterThan(0);
-  },
-};
-
-/* The kinds for the image stories: Qogs first, then a few font-icon kinds to
- * compare against. */
-const IMAGE_KINDS = ['qog', 'workflow', 'service', 'job'];
-
-const menuImages = (canvasElement: HTMLElement) =>
-  Array.from(canvasElement.querySelectorAll('.reqore-menu-item img')).map((img) =>
-    img.getAttribute('src')
-  );
-
-export const KindImage: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the picker with a host resolver that gives Qogs an image: the Qogs kind and each Qog in the list show the green Qog mark; every other kind keeps its font icon.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  // A short kind list with Qogs first, so the Qogs kind and its mark sit at the
-  // top of the column in the captured frame rather than below its fold.
-  render: () => (
-    <Hosted kinds={IMAGE_KINDS} initialKind='qog' resolveInterfaceIcon={storyKindMark} />
-  ),
-  async play({ canvasElement }) {
-    // the Qogs kind row plus its four interfaces
-    await waitFor(() =>
-      expect(menuImages(canvasElement).filter((src) => src === STORY_QOG_IMAGE)).toHaveLength(5)
-    );
-    // the Qogs kind is the first kind row, so it is in the frame
-    await expect(
-      canvasElement.querySelector('.reqore-menu-item')?.querySelector('img')?.getAttribute('src')
-    ).toBe(STORY_QOG_IMAGE);
-  },
-};
-
-export const KindImageFailsToLoad: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the picker with a Qog image that cannot load: the Qogs kind and its interfaces keep the font icon instead of a broken picture.',
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => (
-    <Hosted kinds={IMAGE_KINDS} initialKind='qog' resolveInterfaceIcon={storyBrokenKindMark} />
-  ),
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await canvas.findByRole('button', { name: 'telegram-intake' });
-    // Once the load has failed, no picture is drawn.
-    await whenImageSettled(STORY_BROKEN_IMAGE);
-    await expect(menuImages(canvasElement)).toEqual([]);
-  },
-};