@qoretechnologies/reqraft 0.10.13-pr.74.gccefa54 → 0.10.13

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

@@ -1,134 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { InterfaceReferenceTags } from './InterfaceReferenceTags';
-import { IInterfaceReference } from './meta';
-
-// Several references, including two of the same kind (workflow), as `{kind, name}`
-// snapshots — no `resolveInterfaceIcon` is passed, so the built-in per-kind default
-// icons are exercised.
-const REFERENCES: IInterfaceReference[] = [
-  { interface_kind: 'workflow', interface_name: 'order-sync:1.2', reference_id: 'r1' },
-  { interface_kind: 'workflow', interface_name: 'invoice-sync:2.3', reference_id: 'r2' },
-  { interface_kind: 'service', interface_name: 'notification-svc', reference_id: 'r3' },
-  { interface_kind: 'job', interface_name: 'nightly-cleanup', reference_id: 'r4' },
-];
-
-const meta = {
-  component: InterfaceReferenceTags,
-  title: 'Components/InterfaceReferenceTags',
-  args: {
-    references: REFERENCES,
-    label: 'References',
-  },
-} as StoryMeta<typeof InterfaceReferenceTags>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** The ticket-header use: a "References" label followed by one chip per reference. */
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the ticket-header use — a 'References' label followed by one chip per reference.",
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('References')).toBeInTheDocument();
-    await expect(canvas.getByText('order-sync:1.2')).toBeInTheDocument();
-    await expect(canvas.getByText('invoice-sync:2.3')).toBeInTheDocument();
-    await expect(canvas.getByText('notification-svc')).toBeInTheDocument();
-    await expect(canvas.getByText('nightly-cleanup')).toBeInTheDocument();
-  },
-};
-
-/**
- * When `onInterfaceClick` is passed the chips become interactive; clicking one
- * calls it with that reference (the customer view, which can open the interface on
- * its own instance, wires this).
- */
-export const Clickable: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders interactive chips by passing onInterfaceClick — clicking a chip calls it with that reference, as the customer view (which can open the interface on its own instance) wires.',
-      },
-    },
-  },
-  args: { onInterfaceClick: fn() },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByText('invoice-sync:2.3'));
-    await waitFor(() =>
-      expect(args.onInterfaceClick).toHaveBeenCalledWith(
-        expect.objectContaining({
-          interface_kind: 'workflow',
-          interface_name: 'invoice-sync:2.3',
-        })
-      )
-    );
-  },
-};
-
-/** The in-thread use: no label — the chips sit under a message. */
-export const NoLabel: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the in-thread use with label undefined — no label, just the chips as they sit under a message.',
-      },
-    },
-  },
-  args: { label: undefined },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.queryByText('References')).not.toBeInTheDocument();
-    await expect(canvas.getByText('order-sync:1.2')).toBeInTheDocument();
-  },
-};
-
-/**
- * With no references the component renders nothing — no empty header, no chips —
- * so a ticket without references shows a clean gap rather than a stray "References:"
- * label. The dashed frame below is a story-only caption; the empty space inside it
- * is the component.
- */
-export const Empty: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the empty case — with no references the component renders nothing (no header, no chips), shown inside a dashed story-only caption frame.',
-      },
-    },
-  },
-  args: { references: [] },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          border: '1px dashed rgba(150, 150, 150, 0.4)',
-          borderRadius: 6,
-          padding: 12,
-          fontSize: 12,
-          opacity: 0.6,
-        }}
-      >
-        No references → the row renders nothing (no empty header, no chips):
-        <Story />
-      </div>
-    ),
-  ],
-  async play({ canvasElement }) {
-    // The dashed frame + caption are the decorator; the component itself renders
-    // nothing — no header text, no chips.
-    await expect(within(canvasElement).queryByText('References')).not.toBeInTheDocument();
-    await expect(within(canvasElement).queryByText('order-sync:1.2')).not.toBeInTheDocument();
-  },
-};

package/src/components/supportTicket/InterfaceReferenceTags.tsx

@@ -1,85 +0,0 @@
-import { ReqoreControlGroup, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
-import { ComponentProps } from 'react';
-import { defaultInterfaceIcon, IInterfaceReference } from './meta';
-
-export interface IInterfaceReferenceTagsProps {
-  references?: IInterfaceReference[];
-  /** Optional leading label, e.g. "References" in a ticket header. Omitted (the
-   *  default) inside the thread, where the chips sit under a message. */
-  label?: string;
-  /** Resolve a per-kind icon. Consumers with their own icon vocabulary (the IDE)
-   *  pass one; when omitted the built-in per-kind default is used. */
-  resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
-  /** Open a referenced interface; chips are static (informational) when omitted —
-   *  e.g. the staff view, which can't reach the customer's instance. */
-  onInterfaceClick?: (reference: IInterfaceReference) => void;
-  size?: TSizes;
-  /** Chip styling — pass `intent`/`customTheme` (e.g. `{ main: 'custom1' }`) to tint
-   *  the reference chips to a surface's accent (the Qonsole/helpdesk composer does). */
-  intent?: ComponentProps<typeof ReqoreTag>['intent'];
-  customTheme?: ComponentProps<typeof ReqoreTag>['customTheme'];
-  /** Resolve a per-reference image — e.g. a qog's trigger-app logo, the way the
-   *  qogs list does. When this (or the reference's own `logo`) returns a value, the
-   *  chip shows the image in place of the kind icon. */
-  resolveInterfaceImage?: (reference: IInterfaceReference) => string | undefined;
-}
-
-/**
- * The chips for the Qorus interfaces a ticket or message references, as
- * `{kind, name}` snapshots. The single renderer for interface references across
- * every support surface — the ticket header (with a "References" label), the
- * thread (per message, no label), and the Qonsole card — so a reference looks
- * identical everywhere. Renders nothing when there are no references.
- */
-export const InterfaceReferenceTags = ({
-  references,
-  label,
-  resolveInterfaceIcon,
-  onInterfaceClick,
-  size = 'small',
-  intent,
-  customTheme,
-  resolveInterfaceImage,
-}: IInterfaceReferenceTagsProps) => {
-  if (!references?.length) {
-    return null;
-  }
-  const resolveIcon = resolveInterfaceIcon ?? defaultInterfaceIcon;
-  return (
-    <ReqoreControlGroup verticalAlign='center' wrap gapSize='small'>
-      {label ? (
-        <ReqoreP size='small' effect={{ opacity: 0.6 }}>
-          {label}
-        </ReqoreP>
-      ) : null}
-      {references.map((reference) => {
-        // an app-triggered qog shows the trigger app's logo (stored, or resolved by
-        // a viewer with the app catalogue); everything else shows its kind glyph.
-        const image = reference.logo ?? resolveInterfaceImage?.(reference);
-        return (
-          <ReqoreTag
-            key={
-              reference.reference_id ??
-              `${reference.interface_kind}:${reference.interface_name}`
-            }
-            icon={image ? undefined : resolveIcon(reference.interface_kind)}
-            leftIconProps={image ? { image } : undefined}
-            labelKey={reference.interface_kind}
-            label={reference.interface_name}
-            size={size}
-            intent={intent}
-            customTheme={customTheme}
-            tooltip={
-              onInterfaceClick
-                ? `Open ${reference.interface_kind} ${reference.interface_name}`
-                : `${reference.interface_kind}: ${reference.interface_name}`
-            }
-            onClick={onInterfaceClick ? () => onInterfaceClick(reference) : undefined}
-          />
-        );
-      })}
-    </ReqoreControlGroup>
-  );
-};

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

@@ -1,296 +0,0 @@
-import { ReqoreButton, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { InterfaceReferenceTags } from './InterfaceReferenceTags';
-import { IInterfaceReference } from './meta';
-import { ReferencePicker } from './ReferencePicker';
-import { TicketReplyBox } from './TicketReplyBox';
-
-/**
- * The two-pane reference browser (master-detail: kinds on the left, that kind's
- * interfaces on the right) with a single search bar that scopes both panes. Rendered
- * **on top** of the composer and toggled by its "Reference interfaces" action.
- */
-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;
-
-const KINDS = [
-  'workflow',
-  'service',
-  'job',
-  'fsm',
-  '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. */
-const CATALOGUE: Record<string, string[]> = {
-  workflow: ['order-sync:1.2', 'invoice-export:2.0', 'partner-recon:1.1'],
-  service: ['notifier', 'audit-logger', 'partner-gateway'],
-  job: ['nightly-recon', 'cleanup-temp', 'sla-report'],
-  fsm: ['onboarding', 'escalation'],
-  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'],
-  '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 }: { withComposer?: boolean }) => {
-  const [kind, setKind] = useState<string>('workflow');
-  const [picked, setPicked] = useState<IInterfaceReference[]>([]);
-  const [open, setOpen] = useState<boolean>(true);
-
-  const picker = (
-    <ReferencePicker
-      kinds={KINDS}
-      kind={kind}
-      onKindChange={setKind}
-      items={CATALOGUE[kind] ?? []}
-      picked={picked}
-      onAdd={(reference) => setPicked((current) => [...current, reference])}
-    />
-  );
-
-  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 ? (
-            <InterfaceReferenceTags size='tiny' customTheme={ACCENT} references={picked} />
-          ) : 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 it stops being offered, so the
- *  same thing can't be referenced twice. */
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the two-pane reference browser and, on picking an interface, adds it as a reference and drops it from the pane so the same thing can't be referenced twice.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await userEvent.click(await canvas.findByRole('button', { name: 'order-sync:1.2' }));
-    // it moves out of the pane once picked
-    await waitFor(() => expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument());
-    // its siblings are untouched
-    await expect(option(canvas, 'invoice-export:2.0')).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, 'connection'));
-    await waitFor(() => expect(option(canvas, 'sftp-partner')).toBeInTheDocument());
-    await expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument();
-  },
-};
-
-/** One search scopes both panes: the kind list and the selected kind's interfaces. */
-export const SearchScopesBothPanes: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the picker and shows its single search box scoping both panes at once — filtering the selected kind's interfaces and the kind list together.",
-      },
-    },
-  },
-  decorators: [darkTheme],
-  render: () => <Hosted />,
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const search = canvasElement.querySelector(
-      'input[placeholder*="Search kinds"]'
-    ) 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: no kind is called "sync", so the kind list empties out
-    await expect(canvas.getByText('No kinds')).toBeInTheDocument();
-
-    // a kind name matches: that kind stays, and every other kind drops away
-    await userEvent.clear(search);
-    await userEvent.type(search, 'connect');
-    await waitFor(() => expect(option(canvas, 'connection')).toBeInTheDocument());
-    await expect(missingOption(canvas, 'workflow')).not.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 matching workflow')).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 matching connection')).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 leaves the pane and surfaces as a chip on the composer
-    await waitFor(() => expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument());
-    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);
-  },
-};