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

package/src/components/supportTicket/ReferencePicker.tsx

@@ -1,237 +0,0 @@
-import { ReqoreInput, ReqoreMenu, ReqoreMenuItem, ReqoreSpinner } from '@qoretechnologies/reqore';
-import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
-import { ReactNode, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { thinScrollbar } from '../../helpers/scrollbar';
-import { defaultInterfaceIcon, IInterfaceReference } from './meta';
-
-/*
- * The two-pane interface browser: kinds down the left, the selected kind's interfaces
- * on the right, and one search field that scopes both. Sits above a ticket composer,
- * toggled by the composer's "Reference interfaces" action.
- *
- * The host owns the data. Which kinds exist and what lives under one are questions only
- * the surrounding app can answer — the IDE lists them off the customer's live instance,
- * a story hands over fixtures — so this component takes `kinds` and the selected kind's
- * `items` and does the rest: selection, search, and turning a click into a reference.
- */
-
-/** How many interfaces the right pane shows before it scrolls. */
-const PANE_MAX_HEIGHT = 180;
-const KIND_PANE_WIDTH = 150;
-
-/*
- * A scroll pane with the thin, unobtrusive scrollbar the Qonsole surfaces use
- * (transparent track, translucent rounded thumb) rather than the raw browser one.
- * webkit-only, like those surfaces: setting `scrollbar-width` as well would let
- * Chromium override this custom 6px with its own, wider, "thin".
- */
-const Pane = styled.div<{ $right?: boolean }>`
-  ${({ $right }) =>
-    $right
-      ? 'flex: 1; min-width: 0;'
-      : `width: ${KIND_PANE_WIDTH}px; flex: none; border-right: 1px solid rgba(123, 104, 238, 0.25);`}
-  max-height: ${PANE_MAX_HEIGHT}px;
-  overflow-y: auto;
-  padding: 4px;
-
-  ${thinScrollbar}
-`;
-
-const Frame = styled.div`
-  border: 1px solid rgba(123, 104, 238, 0.25);
-  border-radius: 8px;
-  overflow: hidden;
-`;
-
-const Panes = styled.div`
-  display: flex;
-`;
-
-/*
- * An underline search field. The input itself is borderless (`flat transparent`) and
- * this wrapper carries the single bottom border, so the search reads as a line rather
- * than a full grey box — including on focus, where Reqore's default is a 2px outline
- * around the whole control. Suppressing that outline and brightening the underline
- * instead keeps a focus cue without the box. The selector is scoped under this wrapper,
- * so it outranks Reqore's without `!important`.
- */
-const Search = styled.div<{ $accent: string }>`
-  padding: 6px 4px 4px;
-  border-bottom: 1px solid ${({ $accent }) => `${$accent}80`};
-  transition: border-color 0.15s ease-out;
-
-  .reqore-control-wrapper:focus-within {
-    outline: none;
-  }
-  &:focus-within {
-    border-bottom-color: ${({ $accent }) => $accent};
-  }
-`;
-
-const Note = styled.div`
-  opacity: 0.4;
-  padding: 8px 6px;
-  font-size: 12px;
-`;
-
-const DEFAULT_ACCENT = '#762f7e';
-
-export interface IReferencePickerProps {
-  /** the interface kinds listed down the left pane */
-  kinds: string[];
-  /** the kind whose interfaces `items` holds */
-  kind: string;
-  onKindChange: (kind: string) => void;
-  /**
-   * The selected kind's interfaces, by name. Fetching is the host's job — it knows
-   * where they come from and how to cache them.
-   */
-  items: string[];
-  /** `items` is still being fetched, so the right pane shows a spinner rather than
-   *  claiming the kind is empty */
-  loading?: boolean;
-  /**
-   * The host's fetch for this kind failed. Shown in place of the list, because an
-   * empty pane would otherwise read as "this instance has no workflows" — which is a
-   * different and much more alarming statement than "we couldn't ask".
-   */
-  error?: string;
-  /** Retry the failed fetch. The error state is pressable when given. */
-  onRetry?: () => void;
-  /** Already-picked references. Anything of the current kind that is already picked is
-   *  dropped from the right pane, so a reference can't be added twice. */
-  picked?: IInterfaceReference[];
-  onAdd: (reference: IInterfaceReference) => void;
-  /** the whole picker is inert (e.g. a reply is in flight) */
-  disabled?: boolean;
-  /** Per-kind icon. Consumers with their own icon vocabulary (the IDE) pass one; the
-   *  built-in per-kind default is used when omitted. */
-  resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
-  /** the underline / selected-kind colour. Defaults to the support surfaces' violet. */
-  accent?: string;
-  /** shown above the panes — the composer's picked-reference chips, typically */
-  header?: ReactNode;
-}
-
-export const ReferencePicker = ({
-  kinds,
-  kind,
-  onKindChange,
-  items,
-  loading,
-  error,
-  onRetry,
-  picked,
-  onAdd,
-  disabled,
-  resolveInterfaceIcon = defaultInterfaceIcon,
-  accent = DEFAULT_ACCENT,
-  header,
-}: IReferencePickerProps) => {
-  const [query, setQuery] = useState<string>('');
-  const needle = query.trim().toLowerCase();
-
-  const visibleKinds = useMemo(
-    () => (needle ? kinds.filter((k) => k.toLowerCase().includes(needle)) : kinds),
-    [kinds, needle]
-  );
-
-  /*
-   * The right pane drops what's already been picked and then applies the search. When
-   * the KIND itself matches the search ("workflow"), its interfaces all stay — you
-   * searched for the kind, so you want to see what's in it.
-   */
-  const visibleItems = useMemo(() => {
-    const already = new Set(
-      (picked ?? [])
-        .filter((reference) => reference.interface_kind === kind)
-        .map((reference) => reference.interface_name)
-    );
-    const kindMatches = kind.toLowerCase().includes(needle);
-    return items.filter(
-      (name) =>
-        !already.has(name) && (!needle || kindMatches || name.toLowerCase().includes(needle))
-    );
-  }, [items, picked, kind, needle]);
-
-  return (
-    <Frame>
-      {header}
-      <Search $accent={accent}>
-        <ReqoreInput
-          value={query}
-          onChange={(event) => setQuery((event.target as HTMLInputElement).value)}
-          placeholder='Search kinds and interfaces…'
-          icon='SearchLine'
-          minimal
-          flat
-          transparent
-          fluid
-          disabled={disabled}
-          onClearClick={query ? () => setQuery('') : undefined}
-        />
-      </Search>
-      <Panes>
-        {/* Both panes are `ReqoreMenu`s of `ReqoreMenuItem`s — a vertical selectable
-            list is exactly what Menu is, so the selection (`selected`), the left-icon +
-            right-icon, and the item chrome come from reqore rather than hand-styled
-            buttons. The Pane wrapper still owns the scroll (fixed/flex width +
-            thinScrollbar); the menus render transparent inside it. */}
-        <Pane>
-          {visibleKinds.length ? (
-            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
-              {visibleKinds.map((option) => (
-                <ReqoreMenuItem
-                  key={option}
-                  icon={resolveInterfaceIcon(option)}
-                  label={option}
-                  selected={option === kind}
-                  disabled={disabled}
-                  onClick={() => onKindChange(option)}
-                />
-              ))}
-            </ReqoreMenu>
-          ) : (
-            <Note>No kinds</Note>
-          )}
-        </Pane>
-        <Pane $right>
-          {error ? (
-            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
-              <ReqoreMenuItem
-                icon='ErrorWarningLine'
-                rightIcon={onRetry ? 'RefreshLine' : undefined}
-                intent='danger'
-                label={`Couldn't load ${kind}s`}
-                /* the specific failure is the tooltip — the pane states the outcome */
-                tooltip={error}
-                onClick={onRetry}
-              />
-            </ReqoreMenu>
-          ) : loading ? (
-            <ReqoreSpinner iconColor='info' size='small' centered>
-              Loading {kind}s…
-            </ReqoreSpinner>
-          ) : visibleItems.length ? (
-            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
-              {visibleItems.map((name) => (
-                <ReqoreMenuItem
-                  key={name}
-                  icon={resolveInterfaceIcon(kind)}
-                  rightIcon='AddLine'
-                  label={name}
-                  disabled={disabled}
-                  tooltip={`Reference ${kind} ${name}`}
-                  onClick={() => onAdd({ interface_kind: kind, interface_name: name })}
-                />
-              ))}
-            </ReqoreMenu>
-          ) : (
-            <Note>No matching {kind}</Note>
-          )}
-        </Pane>
-      </Panes>
-    </Frame>
-  );
-};

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

@@ -1,122 +0,0 @@
-import { ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn } from 'storybook/test';
-import { ReactNode } from 'react';
-import { StoryMeta } from '../../types';
-import { ITicketThreadMessage, TicketThread } from '../ticketThread/TicketThread';
-import { InterfaceReferenceTags } from './InterfaceReferenceTags';
-import { TicketReplyBox } from './TicketReplyBox';
-
-/**
- * The full ticket surface — the shared `<TicketThread>` conversation above the
- * `<TicketReplyBox>` composer, the way a ticket detail (customer) or the staff
- * drawer stacks them. Shown under the Qorus theme so the `custom1` accent renders.
- */
-const meta = {
-  component: TicketReplyBox,
-  title: 'Components/TicketConversation',
-  args: { onSend: fn() },
-} as StoryMeta<typeof TicketReplyBox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const CUSTOMER: ITicketThreadMessage = {
-  message_id: 'm1',
-  author_type: 'customer',
-  author_id: 'ops@acme.io',
-  body: 'Since upgrading to 3.2 our nightly SFTP transfer to the partner endpoint times out after about 30 seconds. It ran fine on 3.1 with the same connection config.',
-  created: '2026-07-16T09:12:00Z',
-  referenced_interfaces: [{ interface_kind: 'connection', interface_name: 'sftp-partner' }],
-};
-const STAFF: ITicketThreadMessage = {
-  message_id: 'm2',
-  author_type: 'staff',
-  author_id: 'nick',
-  body: "Thanks for the detailed report — we've reproduced the timeout and a fix is in review. In the meantime, can you confirm the datasource pool size configured for the sftp-partner connection?",
-  created: '2026-07-16T10:03:00Z',
-};
-const INTERNAL: ITicketThreadMessage = {
-  message_id: 'm3',
-  author_type: 'staff',
-  author_id: 'nick',
-  internal: true,
-  body: 'Root cause: the connection-pool default silently dropped from 4 to 1 in the 3.2 migration. Patch is in review against develop.',
-  created: '2026-07-16T10:05:00Z',
-};
-
-const themed = (node: ReactNode) => (
-  <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-    <div style={{ padding: 20, background: '#121212', maxWidth: 780 }}>{node}</div>
-  </ReqoreUIProvider>
-);
-
-const refs = (
-  <InterfaceReferenceTags
-    size='tiny'
-    customTheme={{ main: 'custom1' }}
-    references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
-  />
-);
-
-/**
- * Staff view — the thread with `viewerRole='staff'` (internal notes show, amber)
- * above the staff composer with the split send.
- */
-export const StaffConversation: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the staff view — the thread with viewerRole='staff' (internal notes visible, amber) stacked above the staff composer with its split send.",
-      },
-    },
-  },
-  render: () =>
-    themed(
-      <>
-        <TicketThread viewerRole='staff' messages={[CUSTOMER, STAFF, INTERNAL]} />
-        <div style={{ marginTop: 16 }}>
-          <TicketReplyBox allowInternalNote onSend={fn()} aboveInput={refs} />
-        </div>
-      </>
-    ),
-  async play({ canvasElement }) {
-    await expect(canvasElement.textContent).toContain('reproduced the timeout');
-    // the internal note is visible to staff
-    await expect(canvasElement.textContent).toContain('Root cause');
-    // the composer (rich editor) renders below the thread
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
-  },
-};
-
-/**
- * Customer view — the same thread as the customer sees it (`viewerRole='customer'`,
- * staff shown as "Qorus Support", no internal notes) above their reply composer.
- */
-export const CustomerConversation: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the customer view — the same thread with viewerRole='customer' (staff shown as 'Qorus Support', no internal notes) stacked above the customer's reply composer.",
-      },
-    },
-  },
-  render: () =>
-    themed(
-      <>
-        <TicketThread viewerRole='customer' messages={[CUSTOMER, STAFF]} />
-        <div style={{ marginTop: 16 }}>
-          <TicketReplyBox onSend={fn()} aboveInput={refs} />
-        </div>
-      </>
-    ),
-  async play({ canvasElement }) {
-    await expect(canvasElement.textContent).toContain('reproduced the timeout');
-    // the internal note is not in the customer's messages
-    await expect(canvasElement.textContent).not.toContain('Root cause');
-    // the composer (rich editor) renders below the thread
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
-  },
-};

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

@@ -1,183 +0,0 @@
-import { ReqoreButton, ReqoreDropdown } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { TicketMetaTags } from './TicketMetaTags';
-import {
-  TicketAvatar,
-  TicketHeader,
-  TicketHeaderText,
-  TicketPersonValue,
-  ticketInitials,
-} from './TicketHeader';
-
-const meta = {
-  component: TicketHeader,
-  title: 'Components/TicketHeader',
-  args: {
-    subject: 'Workflow deploy fails at the mapper step',
-    reference: '#1001',
-  },
-} as StoryMeta<typeof TicketHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const person = (name: string) => (
-  <TicketPersonValue>
-    <TicketAvatar>{ticketInitials(name)}</TicketAvatar>
-    <TicketHeaderText>{name}</TicketHeaderText>
-  </TicketPersonValue>
-);
-
-/**
- * What a customer sees: the same rail, every value read-only. The properties are the
- * caller's — this is the shorter of the two lists a real surface passes.
- */
-export const Customer: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the customer's header rail — subject, reference, and a short list of read-only property rows, with the status shown from the customer's viewpoint as 'Awaiting your reply'.",
-      },
-    },
-  },
-  args: {
-    properties: [
-      {
-        label: 'Status',
-        value: (
-          <TicketMetaTags
-            ticket={{ status: 'awaiting_customer', priority: 'high', category: 'bug' }}
-            viewerRole='customer'
-          />
-        ),
-      },
-      { label: 'Opened by', value: person('ide-demo@local.dev') },
-      { label: 'References', value: <TicketHeaderText muted>None</TicketHeaderText> },
-    ],
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Workflow deploy fails at the mapper step')).toBeInTheDocument();
-    await expect(canvas.getByText('#1001')).toBeInTheDocument();
-    await expect(canvas.getByText('Awaiting your reply')).toBeInTheDocument();
-  },
-};
-
-/**
- * What staff see: the same frame with pressable values. The row is as tall as a
- * control whether or not it holds one, so a rail that mixes text and dropdowns still
- * reads as a table — that invariant is what the alignment test below pins.
- */
-export const Staff: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the staff header rail — the same frame with pressable values (a status dropdown, assignee and customer people, a references button) alongside plain text.',
-      },
-    },
-  },
-  args: {
-    properties: [
-      {
-        label: 'Status',
-        value: (
-          <ReqoreDropdown
-            size='small'
-            minimal
-            flat
-            label='Open'
-            showCaret={false}
-            rightIcon='ArrowDownSLine'
-            items={[{ label: 'Open', selected: true }, { label: 'Resolved' }]}
-          />
-        ),
-      },
-      { label: 'Assignee', value: person('nick.m@acme.io') },
-      { label: 'Customer', value: person('ide-demo@local.dev') },
-      {
-        label: 'References',
-        value: (
-          <ReqoreButton size='small' minimal flat icon='GitBranchLine'>
-            5 references
-          </ReqoreButton>
-        ),
-      },
-    ],
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('nick.m@acme.io')).toBeInTheDocument();
-    await expect(canvas.getByText('NM')).toBeInTheDocument();
-  },
-};
-
-/**
- * The rail's two layout invariants, measured rather than eyeballed — both have
- * regressed by hand more than once.
- *
- * 1. Every value starts on the same vertical edge, whether it is a control (which
- *    insets its own content by its horizontal padding) or bare text (which does not).
- * 2. Every row is the same height, whether it holds a 32px control or a line of text.
- */
-export const RowsAlign: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the staff rail again to measure its two layout invariants — every value's content starts on the same vertical edge, and every row is the same height, whether the row holds a control or bare text.",
-      },
-    },
-  },
-  args: Staff.args,
-  async play({ canvasElement }) {
-    const rows = Array.from(
-      canvasElement.querySelectorAll<HTMLElement>('.reqore-description-list-row')
-    );
-    await expect(rows.length).toBe(4);
-
-    /* Where the value's CONTENT starts, not where its box does. The inset is padding
-       and it lands on the value itself — the button on a control row, the person span
-       on a text row — so measure that child's padded edge. */
-    const contentLeft = (row: HTMLElement) => {
-      const column = row.querySelector<HTMLElement>('.reqore-description-list-content')!;
-      const value = (column.firstElementChild as HTMLElement | null) ?? column;
-      return Math.round(
-        value.getBoundingClientRect().left + parseFloat(getComputedStyle(value).paddingLeft)
-      );
-    };
-
-    const lefts = rows.map(contentLeft);
-    await expect(new Set(lefts).size, `value content starts at: ${lefts.join(', ')}`).toBe(1);
-
-    const heights = rows.map((row) => Math.round(row.getBoundingClientRect().height));
-    await expect(new Set(heights).size, `row heights: ${heights.join(', ')}`).toBe(1);
-  },
-};
-
-/** `when: false` drops a row, so one list can serve both viewer roles. */
-export const HiddenRow: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a property list where one row is flagged when: false, showing that the flagged Assignee row drops out so a single list can serve both viewer roles.',
-      },
-    },
-  },
-  args: {
-    properties: [
-      { label: 'Status', value: <TicketHeaderText>Open</TicketHeaderText> },
-      { label: 'Assignee', value: <TicketHeaderText>nick.m@acme.io</TicketHeaderText>, when: false },
-      { label: 'Customer', value: <TicketHeaderText>ide-demo@local.dev</TicketHeaderText> },
-    ],
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.queryByText('Assignee')).not.toBeInTheDocument();
-    await expect(canvas.getByText('Customer')).toBeInTheDocument();
-  },
-};