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

package/src/components/form/fields/schema-definition/Hint.tsx

@@ -1,22 +0,0 @@
-/**
- * Lightweight stand-in for qorus-ide's dismissible `Hint`. Renders an
- * inline info callout — the toolkit has no per-user "remembered hint"
- * persistence, so the `id` is accepted for API parity and ignored.
- */
-import { ReqoreMessage } from '@qoretechnologies/reqore';
-import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
-import { ReactNode } from 'react';
-
-export interface IHintProps {
-  /** Stable id — accepted for parity with the app's `Hint`; unused here. */
-  id?: string;
-  title?: string;
-  icon?: IReqoreIconName;
-  children?: ReactNode;
-}
-
-export const Hint = ({ title, icon, children }: IHintProps) => (
-  <ReqoreMessage intent='info' icon={icon} flat minimal size='small' title={title}>
-    {children}
-  </ReqoreMessage>
-);

package/src/components/form/fields/schema-definition/InlineValidationBanner.tsx

@@ -1,138 +0,0 @@
-/**
- * Inline validation banner — sits above the editor tabs and surfaces
- * three classes of warning (plan §1.8):
- *
- *   1. **Name mismatch** — `definition.schema.name` differs from the
- *      wrapper name. Offers a one-click "Sync name".
- *   2. **Version-bump hint** — a structural section changed since the
- *      editor mounted but `schema.version` was not bumped. Offers
- *      "Add migration block".
- *   3. **Last-save error** — the backend rejected the previous save;
- *      the exact path + message stay visible until the user fixes it.
- *
- * Renders nothing when there is nothing to flag.
- */
-import {
-  ReqoreButton,
-  ReqoreCallout,
-  ReqoreControlGroup,
-  ReqoreP,
-} from '@qoretechnologies/reqore';
-import { memo } from 'react';
-import { IDataSchemaDefinition, ISchemaSaveError } from './types';
-
-export interface IInlineValidationBannerProps {
-  definition: IDataSchemaDefinition;
-  wrapperName?: string;
-  /** `true` when a structural section changed since the editor mounted. */
-  structureDirty?: boolean;
-  /** `schema.version` captured at mount — compared to the current one. */
-  baselineVersion?: string;
-  saveError?: ISchemaSaveError;
-  onSyncName: () => void;
-  onAddMigration: () => void;
-  readOnly?: boolean;
-}
-
-export const InlineValidationBanner = memo(
-  ({
-    definition,
-    wrapperName,
-    structureDirty,
-    baselineVersion,
-    saveError,
-    onSyncName,
-    onAddMigration,
-    readOnly,
-  }: IInlineValidationBannerProps) => {
-    const schemaName = definition.schema?.name ?? '';
-    const nameMismatch =
-      !!wrapperName &&
-      !!schemaName &&
-      schemaName !== wrapperName;
-
-    const currentVersion = definition.schema?.version ?? '';
-    const versionStale =
-      !!structureDirty &&
-      !!baselineVersion &&
-      currentVersion === baselineVersion;
-
-    if (!nameMismatch && !versionStale && !saveError) {
-      return null;
-    }
-
-    return (
-      <ReqoreControlGroup vertical fluid gapSize='small'>
-        {nameMismatch ? (
-          <ReqoreCallout
-            intent='warning'
-            flat
-            icon='ErrorWarningLine'
-            label='Schema name does not match the interface name'
-            description={
-              <ReqoreControlGroup vertical gapSize='small'>
-                <ReqoreP size='small'>
-                  {`The DataSchema name is "${schemaName}" but the schema object is named "${wrapperName}". The server requires them to match.`}
-                </ReqoreP>
-                {!readOnly ? (
-                  <ReqoreButton
-                    icon='CheckLine'
-                    size='small'
-                    fixed
-                    minimal
-                    intent='warning'
-                    onClick={onSyncName}
-                  >
-                    Sync name
-                  </ReqoreButton>
-                ) : null}
-              </ReqoreControlGroup>
-            }
-          />
-        ) : null}
-
-        {versionStale ? (
-          <ReqoreCallout
-            intent='warning'
-            flat
-            icon='GitBranchLine'
-            label='Structure changed — bump the schema version'
-            description={
-              <ReqoreControlGroup vertical gapSize='small'>
-                <ReqoreP size='small'>
-                  {`Tables, sequences, or reference data changed but schema.version is still "${currentVersion}". Bump the version and add a migration block so existing databases can be aligned.`}
-                </ReqoreP>
-                {!readOnly ? (
-                  <ReqoreButton
-                    icon='AddLine'
-                    size='small'
-                    fixed
-                    minimal
-                    intent='warning'
-                    onClick={onAddMigration}
-                  >
-                    Add migration block
-                  </ReqoreButton>
-                ) : null}
-              </ReqoreControlGroup>
-            }
-          />
-        ) : null}
-
-        {saveError ? (
-          <ReqoreCallout
-            intent='danger'
-            flat
-            icon='CloseCircleLine'
-            label='The last save was rejected'
-            description={
-              saveError.path
-                ? `${saveError.path}: ${saveError.message}`
-                : saveError.message
-            }
-          />
-        ) : null}
-      </ReqoreControlGroup>
-    );
-  }
-);

package/src/components/form/fields/schema-definition/Loader.tsx

@@ -1,20 +0,0 @@
-/**
- * Minimal loader used while the schema option catalogue is being
- * fetched. Stands in for qorus-ide's branded `Loader` without its
- * VS Code `apiHost` image dependency.
- */
-import { ReqoreSpinner } from '@qoretechnologies/reqore';
-import { IReqoreSpinnerProps } from '@qoretechnologies/reqore/dist/components/Spinner';
-
-export interface ILoaderProps extends Partial<IReqoreSpinnerProps> {
-  text?: string;
-  inline?: boolean;
-}
-
-const Loader = ({ text = 'Loading…', inline, ...rest }: ILoaderProps) => (
-  <ReqoreSpinner type={5} iconColor='info' size='huge' centered={!inline} {...rest}>
-    {text}
-  </ReqoreSpinner>
-);
-
-export default Loader;

package/src/components/form/fields/schema-definition/MigrationsTab.tsx

@@ -1,187 +0,0 @@
-/**
- * The Migrations tab — an ordered timeline of version blocks (the
- * locked "ordered timeline of version blocks" decision).
- *
- * Each block is a collapsible panel labelled with its version; the body
- * delegates to the generic `CatalogGroupBody`, which renders the
- * block's `version` / `description` leaves plus the `pre_align` /
- * `post_align` step lists. Blocks can be reordered so the timeline
- * always reads oldest-to-newest.
- */
-import {
-  ReqoreButton,
-  ReqoreCallout,
-  ReqoreControlGroup,
-  ReqorePanel,
-  useReqoreProperty,
-} from '@qoretechnologies/reqore';
-import { memo, useCallback } from 'react';
-import { Hint } from './Hint';
-import { CatalogGroupBody } from './CatalogNodeEditor';
-import { moveItem } from '../../../../helpers/common';
-import { ICatalogList } from './types';
-
-export interface IMigrationsTabProps {
-  /** The `migrations` list node from the catalogue. */
-  node: ICatalogList;
-  value: Array<Record<string, unknown>>;
-  onChange: (value: Array<Record<string, unknown>>) => void;
-  readOnly?: boolean;
-}
-
-/** A blank migration block seeded with the given version. */
-export const createMigrationBlock = (
-  version: string
-): Record<string, unknown> => ({ version });
-
-export const MigrationsTab = memo(
-  ({ node, value, onChange, readOnly }: IMigrationsTabProps) => {
-    const blocks = value ?? [];
-    const confirmAction = useReqoreProperty('confirmAction');
-
-    const addBlock = useCallback(() => {
-      onChange([...blocks, createMigrationBlock('')]);
-    }, [blocks, onChange]);
-
-    const confirmRemoveBlock = useCallback(
-      (index: number) => {
-        const block = blocks[index];
-        const version =
-          typeof block?.version === 'string' && block.version
-            ? block.version
-            : `#${index + 1}`;
-        confirmAction({
-          title: 'Remove migration block',
-          description: `Remove migration block "v${version}" and any steps it contains?`,
-          confirmLabel: 'Remove block',
-          intent: 'danger',
-          onConfirm: () =>
-            onChange(blocks.filter((_, i) => i !== index)),
-        });
-      },
-      [blocks, onChange, confirmAction]
-    );
-
-    if (blocks.length === 0) {
-      return (
-        <ReqoreControlGroup vertical fluid gapSize='normal'>
-          <ReqoreCallout intent='info' flat icon='GitBranchLine'>
-            {readOnly
-              ? 'This schema defines no migrations.'
-              : 'No migrations yet. Add a migration block when a schema change needs to be applied to existing databases.'}
-          </ReqoreCallout>
-          {!readOnly ? (
-            <ReqoreButton
-              icon='AddLine'
-              intent='info'
-              minimal
-              fixed
-              onClick={addBlock}
-            >
-              Add migration block
-            </ReqoreButton>
-          ) : null}
-        </ReqoreControlGroup>
-      );
-    }
-
-    return (
-      <ReqoreControlGroup vertical fluid gapSize='small'>
-        {!readOnly ? (
-          <Hint
-            id='hint.schema-migrations'
-            title='When to add a migration'
-            icon='GitBranchLine'
-          >
-            Aligning a schema to an empty datasource just creates
-            everything. A datasource already running an older version
-            needs <b>upgrading</b> — that is what migrations are for.
-            When you change tables, columns, or reference data, bump{' '}
-            <b>schema.version</b> and add a migration block: an ordered
-            list of steps (add column, rename, …) run before and after
-            alignment. Each block targets one version.
-          </Hint>
-        ) : null}
-        {blocks.map((block, index) => {
-          const version =
-            typeof block.version === 'string' && block.version
-              ? block.version
-              : '(no version)';
-          const description =
-            typeof block.description === 'string'
-              ? block.description
-              : undefined;
-          const stepCount = (steps: unknown): number =>
-            Array.isArray(steps) ? steps.length : 0;
-          const totalSteps =
-            stepCount(block.pre_align) + stepCount(block.post_align);
-          return (
-            <ReqorePanel
-              key={version === '(no version)' ? index : version}
-              raised
-              collapsible
-              isCollapsed
-              icon='GitCommitLine'
-              intent={index === blocks.length - 1 ? 'info' : 'success'}
-              label={`v${version}`}
-              description={description}
-              badge={[
-                `${totalSteps} step${totalSteps === 1 ? '' : 's'}`,
-              ]}
-              actions={
-                readOnly
-                  ? undefined
-                  : [
-                      {
-                        icon: 'ArrowUpLine',
-                        minimal: true,
-                        flat: true,
-                        size: 'small',
-                        tooltip: 'Move earlier',
-                        disabled: index === 0,
-                        onClick: () =>
-                          onChange(moveItem(blocks, index, index - 1)),
-                      },
-                      {
-                        icon: 'ArrowDownLine',
-                        minimal: true,
-                        flat: true,
-                        size: 'small',
-                        tooltip: 'Move later',
-                        disabled: index === blocks.length - 1,
-                        onClick: () =>
-                          onChange(moveItem(blocks, index, index + 1)),
-                      },
-                      {
-                        icon: 'DeleteBinLine',
-                        minimal: true,
-                        flat: true,
-                        intent: 'danger',
-                        size: 'small',
-                        tooltip: 'Remove migration block',
-                        onClick: () => confirmRemoveBlock(index),
-                      },
-                    ]
-              }
-            >
-              <CatalogGroupBody
-                name={`migration-${index}`}
-                options={node.options}
-                value={block}
-                onChange={(next) =>
-                  onChange(blocks.map((b, i) => (i === index ? next : b)))
-                }
-                readOnly={readOnly}
-              />
-            </ReqorePanel>
-          );
-        })}
-        {!readOnly ? (
-          <ReqoreButton icon='AddLine' intent='info' minimal fixed onClick={addBlock}>
-            Add migration block
-          </ReqoreButton>
-        ) : null}
-      </ReqoreControlGroup>
-    );
-  }
-);

package/src/components/form/fields/schema-definition/SchemaDefinitionField.stories.tsx

@@ -1,286 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../../types';
-import { FormEngine } from '../../engine/FormEngine';
-import { FormField } from '../Field';
-import { SchemaDefinitionEditor } from './index';
-import { mockSchemaCatalog, mockSchemaCatalogSandboxed } from './mockCatalog';
-import { mockPopulatedDefinition } from './mockDefinition';
-import { createStarterDefinition } from './starterTemplate';
-import { IDataSchemaDefinition } from './types';
-
-const meta = {
-  component: SchemaDefinitionEditor,
-  title: 'Components/Form/SchemaDefinition',
-  args: {
-    onChange: fn(),
-    // Inject the catalogue directly — no server round-trip in stories.
-    catalogOverride: mockSchemaCatalog,
-  },
-  render(args) {
-    const [value, setValue] = useState<IDataSchemaDefinition | undefined>(args.value);
-    return (
-      <SchemaDefinitionEditor
-        {...args}
-        value={value}
-        onChange={(v) => {
-          args.onChange?.(v);
-          setValue(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof SchemaDefinitionEditor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Empty definition — the catalogue drives the full tab set. */
-export const Empty: Story = {
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor with no existing value — the Schema, Tables, Sequences and Migrations tabs mount straight from the catalogue.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // Tabs come straight from the catalogue's `definition` sections.
-    await expect(await canvas.findByText('Schema')).toBeInTheDocument();
-    await expect(canvas.getByText('Tables')).toBeInTheDocument();
-    await expect(canvas.getByText('Sequences')).toBeInTheDocument();
-    await expect(canvas.getByText('Migrations')).toBeInTheDocument();
-    // The form rows fade in after the chrome — wait for the Schema tab's own
-    // catalogue rows, or the capture shows empty shells where the form goes
-    // (rejected on build #123 for exactly that).
-    await expect(await canvas.findByText('Schema Name')).toBeInTheDocument();
-    await expect(await canvas.findByText('Version')).toBeInTheDocument();
-  },
-};
-
-// Computed outside the story object (convention: no top-level function
-// calls in `args`).
-const starterDefinition = createStarterDefinition('example_schema');
-
-/** The one-table starter seed the IDE's Empty story opens with. */
-export const Starter: Story = {
-  args: {
-    value: starterDefinition,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor seeded with the "example_schema" starter template — the Schema tab shows the single scaffolded table.',
-      },
-    },
-  },
-};
-
-/** A realistic populated schema — two tables, sequence, reference data, migrations. */
-export const Populated: Story = {
-  args: {
-    value: mockPopulatedDefinition,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor with the populated fixture. Opening the Tables tab shows the customers and addresses tables.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // Open the Tables tab → the two table panels render from the value.
-    await userEvent.click(await canvas.findByText('Tables'));
-    await expect(await canvas.findByText('customers')).toBeInTheDocument();
-    await expect(canvas.getByText('addresses')).toBeInTheDocument();
-  },
-};
-
-/** Read-only viewer — every input becomes a typeset display row. */
-export const ReadOnly: Story = {
-  args: {
-    value: mockPopulatedDefinition,
-    readOnly: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor with readOnly enabled — every input becomes a typeset display row and no inputs, textareas or selects are rendered.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByText('Schema')).toBeInTheDocument();
-    // Read-only renders typeset rows — never disabled inputs (IDE parity).
-    await expect(canvasElement.querySelectorAll('input, textarea, select')).toHaveLength(0);
-  },
-};
-
-/** Catalogue fetch failure → a blocking callout instead of a form. */
-export const CatalogError: Story = {
-  args: {
-    catalogError: 'Schema options are unavailable on this server.',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor when the catalogue fetch fails — a "Could not load schema options" callout replaces the form.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByText('Could not load schema options')).toBeInTheDocument();
-  },
-};
-
-/**
- * Dispatcher exposure: rendered through `FormField` with
- * `type="schema-definition"`, the way a schema's `definition` field is
- * wired. `catalogOverride` rides in via `fieldProps`.
- */
-export const ViaFormField: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor through the FormField dispatcher (type="schema-definition"). The catalogue is injected via fieldProps and the Schema and Tables tabs mount as usual.',
-      },
-    },
-  },
-  render: () => {
-    const [value, setValue] = useState<IDataSchemaDefinition | undefined>(mockPopulatedDefinition);
-    return (
-      <FormField
-        type={'schema-definition' as any}
-        value={value}
-        onChange={(v) => setValue(v as IDataSchemaDefinition)}
-        fieldProps={{ catalogOverride: mockSchemaCatalog }}
-      />
-    );
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByText('Schema')).toBeInTheDocument();
-    await expect(canvas.getByText('Tables')).toBeInTheDocument();
-  },
-};
-
-/**
- * The `ui_type` path: a `FormEngine` schema with an option declared
- * `ui_type: 'schema-definition'` renders the editor, the way a schema's
- * `definition` field is wired in a server-driven form. `catalogOverride`
- * rides through `fieldProps` (FormEngine spreads the option → TemplateField
- * → FormField → SchemaDefinitionEditor).
- */
-export const ViaFormEngineUiType: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders a FormEngine schema whose "definition" option declares ui_type: schema-definition — FormEngine flows through TemplateField and FormField and mounts the schema editor with the injected catalogue.',
-      },
-    },
-  },
-  render: () => {
-    const [value, setValue] = useState<any>({
-      definition: { type: 'hash', value: mockPopulatedDefinition },
-    });
-    return (
-      <FormEngine
-        name='schemaForm'
-        options={
-          {
-            definition: {
-              type: 'hash',
-              ui_type: 'schema-definition',
-              display_name: 'Definition',
-              preselected: true,
-              supports_templates: false,
-              fieldProps: { catalogOverride: mockSchemaCatalog },
-            },
-          } as any
-        }
-        value={value}
-        onChange={(_n, v) => setValue(v)}
-      />
-    );
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // The full FormEngine mount can push the editor's first paint past the
-    // 1s default findBy timeout — give it the house-standard 10s.
-    await expect(await canvas.findByText('Schema', undefined, { timeout: 10000 })).toBeInTheDocument();
-    await expect(canvas.getByText('Tables')).toBeInTheDocument();
-  },
-};
-
-/**
- * Ported from qorus-ide `stories/Fields/SchemaDefinition.stories.tsx`
- * (FIELD_STACK_REPORT batch): a sandboxed (untrusted) caller — the Advanced
- * tab and every trusted-only section / option are hidden.
- */
-export const Sandboxed: Story = {
-  args: {
-    catalogOverride: mockSchemaCatalogSandboxed,
-    accessLevel: 'untrusted',
-    wrapperName: 'example_customer_addresses',
-    value: mockPopulatedDefinition,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor for an untrusted (sandboxed) caller using the sandboxed catalogue — the Advanced tab and every trusted-only section are hidden.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByText('Migrations')).toBeInTheDocument();
-    // The Advanced tab must not render for sandboxed callers.
-    await expect(canvas.queryByText('Advanced')).not.toBeInTheDocument();
-  },
-};
-
-/**
- * Ported from qorus-ide: the DataSchema name does not match the interface
- * name — the inline banner flags it and "Sync name" resolves the mismatch.
- */
-export const WithValidationBanner: Story = {
-  args: {
-    catalogOverride: mockSchemaCatalog,
-    wrapperName: 'renamed_schema',
-    value: mockPopulatedDefinition,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SchemaDefinition editor when the wrapper interface name and the DataSchema name differ — the "name does not match" banner is shown, and clicking "Sync name" resolves the mismatch.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // The banner renders the mismatch both as its title and its body text.
-    await waitFor(() =>
-      expect(canvas.queryAllByText(/name does not match/).length).toBeGreaterThan(0)
-    );
-    await userEvent.click(canvas.getByText('Sync name'));
-    await waitFor(() =>
-      expect(canvas.queryAllByText(/name does not match/)).toHaveLength(0)
-    );
-  },
-};