@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/memories/schemas/AllowedValuesField.tsx

@@ -0,0 +1,188 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { useRef, useState, type KeyboardEvent } from "react";
+import { InfoTip } from "../components/FieldLabel";
+import { memorySchemaOptionLimit, newFormId, type SchemaFormErrors, type SchemaOptionForm } from "./schema-form";
+import { Chip } from "#components/chip/index";
+import { Input } from "#components/input/index";
+import { Popover, PopoverContent, PopoverTrigger } from "#components/popover/index";
+import { cn } from "#lib/utils";
+
+// Escape first clears a value still being typed, so the sheet around the field must not close on that same press.
+export function escapeClearsTypedValue(event: globalThis.KeyboardEvent): boolean {
+  const { target } = event;
+  return target instanceof HTMLInputElement && target.hasAttribute("data-clears-on-escape") && isPresent(target.value);
+}
+
+export function addOption(options: SchemaOptionForm[], raw: string): SchemaOptionForm[] {
+  const value = raw.trim();
+  if (!isPresent(value) || options.some((option) => option.value.trim() === value)) return options;
+  if (options.length >= memorySchemaOptionLimit) return options;
+  return [...options, { id: newFormId(), value, label: "", description: "" }];
+}
+
+type OptionTagProps = {
+  option: SchemaOptionForm;
+  field: string;
+  errors: SchemaFormErrors;
+  disabled?: boolean;
+  onChange: (option: SchemaOptionForm) => void;
+  onRemove: () => void;
+};
+
+function OptionTag(props: OptionTagProps) {
+  const { option, field, errors, disabled, onChange, onRemove } = props;
+  const invalid = [".value", ".label", ".description"].some((part) => errors.has(`${field}${part}`));
+  const shown = isPresent(option.label.trim()) ? option.label : option.value;
+  const showsStored = isPresent(option.label.trim()) && option.label.trim() !== option.value.trim();
+
+  return (
+    <Chip
+      className={cn("bg-secondary px-2 py-1", invalid && "bg-error")}
+      removeLabel={`allowed value ${option.value}`}
+      disabled={disabled}
+      onRemove={onRemove}
+      label={
+        <Popover>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              disabled={disabled}
+              aria-label={`Edit allowed value ${option.value}`}
+              className={cn(
+                "inline-flex max-w-full items-baseline gap-1.5 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-active-border/50",
+                invalid && "text-error-foreground",
+              )}
+            >
+              <span className="truncate">{shown || "(empty)"}</span>
+              {showsStored && <span className="truncate font-mono text-muted-foreground">{option.value}</span>}
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            className="flex w-72 flex-col gap-3 p-3"
+            onOpenAutoFocus={(event) => {
+              event.preventDefault();
+              document.getElementById(`${field}-value`)?.focus();
+            }}
+          >
+            <Input
+              id={`${field}-value`}
+              size="sm"
+              label="Stored value"
+              description="What the agent writes and rules match on."
+              descriptionInLabelTooltip
+              value={option.value}
+              disabled={disabled}
+              error={errors.get(`${field}.value`)}
+              onChange={(e) => onChange({ ...option, value: e.target.value })}
+            />
+            <Input
+              size="sm"
+              label="Shown as"
+              placeholder="Same as stored value"
+              value={option.label}
+              disabled={disabled}
+              error={errors.get(`${field}.label`)}
+              onChange={(e) => onChange({ ...option, label: e.target.value })}
+            />
+            <Input
+              size="sm"
+              label="Description"
+              placeholder="What it means (optional)"
+              value={option.description}
+              disabled={disabled}
+              error={errors.get(`${field}.description`)}
+              onChange={(e) => onChange({ ...option, description: e.target.value })}
+            />
+          </PopoverContent>
+        </Popover>
+      }
+    />
+  );
+}
+
+export type AllowedValuesFieldProps = {
+  id: string;
+  hint: string;
+  options: SchemaOptionForm[];
+  prefix: string;
+  errors: SchemaFormErrors;
+  disabled?: boolean;
+  onChange: (options: SchemaOptionForm[]) => void;
+};
+
+export function AllowedValuesField(props: AllowedValuesFieldProps) {
+  const { id, hint, options, prefix, errors, disabled, onChange } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [pending, setPending] = useState("");
+  const listError = errors.get(`${prefix}.options`);
+  const invalid = isPresent(listError) || [...errors.keys()].some((key) => key.startsWith(`${prefix}.options.`));
+  const atLimit = options.length >= memorySchemaOptionLimit;
+
+  function commit() {
+    const next = addOption(options, pending);
+    if (next !== options) onChange(next);
+    setPending("");
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      commit();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setPending("");
+    } else if (event.key === "Backspace" && !isPresent(pending) && isPresent(options)) {
+      onChange(options.slice(0, -1));
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-end gap-1">
+        <label htmlFor={id} className="typography-small">
+          Allowed values
+        </label>
+        <InfoTip label="Allowed values" hint={hint} />
+      </div>
+      <div
+        onClick={(event) => {
+          if (event.target === event.currentTarget) inputRef.current?.focus();
+        }}
+        className={cn(
+          "flex w-full flex-wrap items-center gap-1.5 rounded-md-v4 border bg-input px-3 py-1.5 min-h-10 typography-caption text-default-foreground",
+          "focus-within:border-active-border focus-within:outline focus-within:outline-1 focus-within:outline-active-border",
+          invalid ? "border-error-border" : "border-input-border",
+          disabled && "pointer-events-none opacity-50",
+        )}
+      >
+        {options.map((option, index) => (
+          <OptionTag
+            key={option.id}
+            option={option}
+            field={`${prefix}.options.${index}`}
+            errors={errors}
+            disabled={disabled}
+            onChange={(next) => onChange(options.map((current, i) => (i === index ? next : current)))}
+            onRemove={() => onChange(options.filter((_, i) => i !== index))}
+          />
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          type="text"
+          value={pending}
+          disabled={disabled || atLimit}
+          aria-invalid={invalid ? true : undefined}
+          data-clears-on-escape=""
+          placeholder={isPresent(options) ? "Add a value" : "Any text. Type a value and press Enter to limit it"}
+          onChange={(event) => setPending(event.currentTarget.value)}
+          onKeyDown={onKeyDown}
+          onBlur={commit}
+          className="min-w-24 flex-1 bg-transparent outline-none placeholder:text-placeholder-foreground"
+        />
+      </div>
+      {listError && <p className="typography-small text-error-foreground">{listError}</p>}
+    </div>
+  );
+}

package/src/routes/memories/schemas/MemorySchemaPage.tsx

@@ -0,0 +1,476 @@
+import {
+  GQLMemorySchemaMutationStatus,
+  GQLMemorySchemaStatus,
+  GQLMemorySchemaTemplateStatus,
+  useMemorySchemaUsageQuery,
+  type GQLMemorySchemaFieldsFragment,
+} from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { Archive, ArchiveRestore, Brain, FileCode2, Pencil, RotateCcw, Save, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+import { RuleDraftDialog } from "../components/RuleDraftDialog";
+import {
+  emptySchemaForm,
+  localSchemaFormErrors,
+  schemaDefinitionInput,
+  schemaFormErrors,
+  schemaFormFromSchema,
+  type SchemaForm,
+  type SchemaFormErrors,
+} from "./schema-form";
+import {
+  findMemorySchemaByRouteName,
+  memorySchemaEditPath,
+  memorySchemaPath,
+  memorySchemasPath,
+  type MemorySchemaView,
+} from "./schema-route";
+import { computedPropertyRuleDraft, schemaRuleDraft, type RuleDraftRequest } from "./schema-rule-context";
+import { SchemaChangeReviewDialog } from "./SchemaChangeReviewDialog";
+import { SchemaConfirmDialog } from "./SchemaConfirmDialog";
+import { SchemaDetailPage } from "./SchemaDetailPage";
+import { SchemaEditorForm } from "./SchemaEditorForm";
+import { useMemorySchemaMutations, type MemorySchemaMutations } from "./useMemorySchemaMutations";
+import { reportFailure, useSchemaChangeReview, type SchemaChangeReview } from "./useSchemaChangeReview";
+import { archiveBlockedReason, deleteBlockedReason, useSchemaLifecycle } from "./useSchemaLifecycle";
+import { Banner } from "#components/banner/index";
+import { Breadcrumbs } from "#components/breadcrumbs/index";
+import { PageBody, PageHeader, PageHeaderActions, type PageHeaderAction } from "#components/layouts/page/index";
+import { useUnsavedChangesWarning } from "#hooks/use-unsaved-changes-warning";
+import { useMantaClient, useNavigationBlocker } from "#providers/index";
+
+type SchemaBreadcrumbsProps = { label?: string; labelHref?: string; current?: string };
+
+function SchemaBreadcrumbs(props: SchemaBreadcrumbsProps) {
+  const { label, labelHref, current } = props;
+  return (
+    <Breadcrumbs
+      aria-label="Breadcrumb"
+      renderLink={({ href, className, children }) => (
+        <Link to={href} className={className}>
+          {children}
+        </Link>
+      )}
+      items={[
+        { label: "Memories", href: "/memories" },
+        { label: "Schemas", href: memorySchemasPath },
+        ...(label ? [{ label, href: current ? labelHref : undefined }] : []),
+        ...(current ? [{ label: current }] : []),
+      ]}
+    />
+  );
+}
+
+type ReviewDialogProps = { review: SchemaChangeReview; onClearValues?: (path: string) => void };
+
+function ReviewDialog(props: ReviewDialogProps) {
+  const { review, onClearValues } = props;
+  const { state } = review;
+  return (
+    <SchemaChangeReviewDialog
+      open={state !== null}
+      title={state?.title ?? ""}
+      impact={state?.impact ?? null}
+      proposed={state?.proposed ?? null}
+      remapChoices={state?.choices ?? {}}
+      clearUnconvertible={state?.clearUnconvertible ?? false}
+      isChecking={review.isChecking}
+      isApplying={review.isApplying}
+      clearingPath={review.clearingPath}
+      onRemapChange={review.setRemapChoice}
+      onClearUnconvertibleChange={review.setClearUnconvertible}
+      onClearValues={onClearValues}
+      onApply={() => void review.apply()}
+      onCancel={review.close}
+    />
+  );
+}
+
+// A clear bumps the schema's revision, so the cached schema is refetched before any later action sends it.
+export function clearRun(mutations: MemorySchemaMutations, iri: string) {
+  return async (path: string, expectedRevision: number) => {
+    const result = (await mutations.clearValues.mutateAsync({ input: { iri, expectedRevision, path } }))
+      .clearMemorySchemaPropertyValues;
+    if (result.status === GQLMemorySchemaMutationStatus.Ok) await mutations.refresh();
+    return result;
+  };
+}
+
+type SchemaEditorViewProps = {
+  schema: GQLMemorySchemaFieldsFragment | null;
+  isNew: boolean;
+};
+
+function SchemaEditorView(props: SchemaEditorViewProps) {
+  const { schema, isNew } = props;
+  const navigate = useNavigate();
+  const mutations = useMemorySchemaMutations();
+  const review = useSchemaChangeReview();
+  const [loadedForm] = useState<SchemaForm>(() => (schema ? schemaFormFromSchema(schema) : emptySchemaForm()));
+  const [form, setForm] = useState<SchemaForm>(loadedForm);
+  const [baseRevision, setBaseRevision] = useState(schema?.revision ?? 0);
+  const [errors, setErrors] = useState<SchemaFormErrors>(new Map());
+  const [notice, setNotice] = useState<string | null>(null);
+  const isSaving = mutations.create.isPending || review.isChecking || review.isApplying;
+  const isDirty = JSON.stringify(form) !== JSON.stringify(loadedForm);
+  useUnsavedChangesWarning(isDirty && !isSaving);
+  const blocker = useNavigationBlocker(isDirty && !isSaving);
+
+  function change(next: SchemaForm) {
+    setForm(next);
+    if (errors.size > 0) setErrors(new Map());
+  }
+
+  async function create() {
+    try {
+      const result = (
+        await mutations.create.mutateAsync({ input: { definition: schemaDefinitionInput(form, { isNew }) } })
+      ).createMemorySchema;
+      if (result.status === GQLMemorySchemaMutationStatus.Invalid) {
+        setErrors(schemaFormErrors(result.validationErrors));
+        return;
+      }
+      if (result.status !== GQLMemorySchemaMutationStatus.Ok || !result.schema) {
+        setNotice(result.error ?? "The schema could not be created");
+        return;
+      }
+      toast.success(`Created ${result.schema.label}`);
+      await mutations.refresh();
+      const created = result.schema;
+      blocker.bypass(() => void navigate(memorySchemaPath(created.iri)));
+    } catch (error) {
+      reportFailure(error, "Failed to create the schema");
+    }
+  }
+
+  function update(current: GQLMemorySchemaFieldsFragment) {
+    const definition = schemaDefinitionInput(form, { isNew: false });
+    void review.start({
+      title: "Review changes",
+      revision: baseRevision,
+      run: async (request) =>
+        (
+          await mutations.update.mutateAsync({
+            input: {
+              iri: current.iri,
+              expectedRevision: request.expectedRevision,
+              definition,
+              optionRemaps: request.optionRemaps,
+              clearUnconvertibleValues: request.clearUnconvertibleValues,
+              dryRun: request.dryRun,
+            },
+          })
+        ).updateMemorySchema,
+      callbacks: {
+        onApplied: async () => {
+          toast.success(`Saved ${form.label.trim() || current.label}`);
+          await mutations.refresh();
+          blocker.bypass(() => void navigate(memorySchemaPath(current.iri)));
+        },
+        onInvalid: (result) => setErrors(schemaFormErrors(result.validationErrors)),
+        onStale: async () => {
+          setNotice("Someone changed this schema since you opened it. Reload the page to edit the latest version.");
+          await mutations.refresh();
+        },
+        onRevisionChange: setBaseRevision,
+      },
+    });
+  }
+
+  function save() {
+    setNotice(null);
+    const local = localSchemaFormErrors(form);
+    if (local.size > 0) {
+      setErrors(local);
+      return;
+    }
+    if (isNew) void create();
+    else if (schema) update(schema);
+  }
+
+  const cancelPath = schema ? memorySchemaPath(schema.iri) : memorySchemasPath;
+  const headerActions: PageHeaderAction[] = [
+    {
+      key: "cancel",
+      label: "Cancel",
+      variant: "tertiary",
+      disabled: isSaving,
+      onClick: () => void navigate(cancelPath),
+    },
+    {
+      key: "save",
+      label: isSaving ? "Saving…" : isNew ? "Create schema" : "Save changes",
+      icon: Save,
+      disabled: isSaving,
+      onClick: save,
+    },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        title={
+          <SchemaBreadcrumbs
+            label={isNew ? "New schema" : schema?.label}
+            labelHref={schema ? memorySchemaPath(schema.iri) : undefined}
+            current={isNew ? undefined : "Edit"}
+          />
+        }
+        icon={Brain}
+        actions={<PageHeaderActions actions={headerActions} />}
+      />
+      <PageBody>
+        <form
+          className="mx-auto flex w-full max-w-4xl flex-col gap-4 pb-8"
+          onSubmit={(event) => {
+            event.preventDefault();
+            save();
+          }}
+        >
+          {notice && <Banner label={notice} />}
+          {errors.size > 0 && <Banner label="Some fields need attention." />}
+          <SchemaEditorForm form={form} errors={errors} isNew={isNew} disabled={isSaving} onChange={change} />
+        </form>
+      </PageBody>
+      {schema && (
+        <ReviewDialog
+          review={review}
+          onClearValues={(path) => void review.clearValues(path, clearRun(mutations, schema.iri))}
+        />
+      )}
+      <SchemaConfirmDialog
+        open={blocker.blocked}
+        title="Discard changes?"
+        description={
+          isNew ? "This schema has not been created yet." : "Your changes to this schema have not been saved."
+        }
+        confirmLabel="Discard"
+        pendingLabel="Discarding…"
+        destructive
+        isPending={false}
+        onConfirm={blocker.proceed}
+        onCancel={blocker.reset}
+      />
+    </>
+  );
+}
+
+type SchemaDetailViewProps = {
+  schema: GQLMemorySchemaFieldsFragment | null;
+  isLoading: boolean;
+  errorMessage: string | null;
+  canManage: boolean;
+};
+
+function SchemaDetailView(props: SchemaDetailViewProps) {
+  const { schema, isLoading, errorMessage, canManage } = props;
+  const navigate = useNavigate();
+  const { mantaClient } = useMantaClient();
+  const lifecycle = useSchemaLifecycle({ onDeleted: () => void navigate(memorySchemasPath) });
+  const { mutations, runStatus } = lifecycle;
+  const review = useSchemaChangeReview();
+  const [ruleDraft, setRuleDraft] = useState<RuleDraftRequest | null>(null);
+  const { data: usageData } = useMemorySchemaUsageQuery(
+    mantaClient,
+    { iri: schema?.iri ?? "" },
+    { enabled: canManage && schema !== null },
+  );
+  const usage = usageData?.memorySchemaUsage.usage ?? null;
+  const isBusy =
+    lifecycle.isPending ||
+    mutations.dismissTemplateUpdate.isPending ||
+    mutations.clearValues.isPending ||
+    review.isChecking ||
+    review.isApplying;
+
+  function resetToTemplate(current: GQLMemorySchemaFieldsFragment, copy: { title: string; success: string }) {
+    void review.start({
+      title: copy.title,
+      revision: current.revision,
+      alwaysReview: true,
+      run: async (request) =>
+        (
+          await mutations.resetToTemplate.mutateAsync({
+            input: {
+              iri: current.iri,
+              expectedRevision: request.expectedRevision,
+              optionRemaps: request.optionRemaps,
+              clearUnconvertibleValues: request.clearUnconvertibleValues,
+              dryRun: request.dryRun,
+            },
+          })
+        ).resetMemorySchemaToTemplate,
+      callbacks: {
+        onApplied: async () => {
+          toast.success(copy.success);
+          await mutations.refresh();
+        },
+        onStale: mutations.refresh,
+      },
+    });
+  }
+
+  const archived = schema?.status === GQLMemorySchemaStatus.Archived;
+  const ruleCount = usage ? new Set(usage.rules.map((reference) => reference.ruleIri)).size : null;
+  const archiveBlocked = archiveBlockedReason(ruleCount);
+  const deleteBlocked = deleteBlockedReason(schema?.memoryCount, ruleCount);
+  const headerActions: PageHeaderAction[] =
+    canManage && schema
+      ? [
+          {
+            key: "edit",
+            label: "Edit",
+            icon: Pencil,
+            variant: "secondary",
+            disabled: isBusy,
+            onClick: () => void navigate(memorySchemaEditPath(schema.iri)),
+          },
+          ...(archived
+            ? []
+            : [
+                {
+                  key: "write-rule",
+                  label: "Write a rule",
+                  icon: FileCode2,
+                  variant: "secondary" as const,
+                  disabled: isBusy,
+                  hint: "Describe a rule over these memories and Manta drafts it for your review",
+                  onClick: () => setRuleDraft(schemaRuleDraft(schema)),
+                },
+              ]),
+          ...(schema.customized && schema.templateStatus === GQLMemorySchemaTemplateStatus.Current
+            ? [
+                {
+                  key: "reset",
+                  label: "Reset to default",
+                  icon: RotateCcw,
+                  variant: "secondary" as const,
+                  disabled: isBusy,
+                  hint: "Replace your edits with the Manta default this schema is based on",
+                  onClick: () =>
+                    resetToTemplate(schema, {
+                      title: "Reset to the Manta default",
+                      success: "Reset to the Manta default",
+                    }),
+                },
+              ]
+            : []),
+          archived
+            ? {
+                key: "unarchive",
+                label: "Restore",
+                icon: ArchiveRestore,
+                variant: "secondary",
+                disabled: isBusy,
+                onClick: () => lifecycle.restore(schema),
+              }
+            : {
+                key: "archive",
+                label: "Archive",
+                icon: Archive,
+                variant: "secondary",
+                disabled: isBusy || archiveBlocked !== null,
+                hint: archiveBlocked ?? undefined,
+                onClick: () => lifecycle.askToArchive(schema),
+              },
+          {
+            key: "delete",
+            label: "Delete",
+            icon: Trash2,
+            variant: "secondary",
+            disabled: isBusy || deleteBlocked !== null,
+            hint: deleteBlocked ?? undefined,
+            onClick: () => lifecycle.askToDelete(schema),
+          },
+        ]
+      : [];
+
+  return (
+    <>
+      <PageHeader
+        title={<SchemaBreadcrumbs label={schema?.label ?? (isLoading ? undefined : "Not found")} />}
+        icon={Brain}
+        actions={isPresent(headerActions) ? <PageHeaderActions actions={headerActions} /> : undefined}
+      />
+      <SchemaDetailPage
+        schema={schema}
+        isLoading={isLoading && schema === null}
+        errorMessage={errorMessage}
+        usage={usage}
+        isBusy={isBusy}
+        onWriteComputingRule={
+          canManage && schema && !archived
+            ? (property) => setRuleDraft(computedPropertyRuleDraft(schema, property))
+            : undefined
+        }
+        onReviewTemplate={
+          canManage && schema?.templateStatus === GQLMemorySchemaTemplateStatus.Updated
+            ? () =>
+                resetToTemplate(schema, { title: "Update to the new default", success: "Updated to the new default" })
+            : undefined
+        }
+        onDismissTemplate={
+          canManage && schema
+            ? () =>
+                void runStatus(
+                  async () =>
+                    (
+                      await mutations.dismissTemplateUpdate.mutateAsync({
+                        input: { iri: schema.iri, expectedRevision: schema.revision },
+                      })
+                    ).dismissMemorySchemaTemplateUpdate,
+                  "Kept your version",
+                )
+            : undefined
+        }
+      />
+
+      {schema && (
+        <>
+          {lifecycle.dialogs}
+          <ReviewDialog
+            review={review}
+            onClearValues={(path) => void review.clearValues(path, clearRun(mutations, schema.iri))}
+          />
+          <RuleDraftDialog request={ruleDraft} onClose={() => setRuleDraft(null)} />
+        </>
+      )}
+    </>
+  );
+}
+
+export type MemorySchemaPageProps = {
+  view: MemorySchemaView;
+  schemas: GQLMemorySchemaFieldsFragment[];
+  isLoading: boolean;
+  errorMessage: string | null;
+  canManage: boolean;
+};
+
+export function MemorySchemaPage(props: MemorySchemaPageProps) {
+  const { view, schemas, isLoading, errorMessage, canManage } = props;
+
+  if (view.kind === "new") {
+    return canManage ? (
+      <SchemaEditorView schema={null} isNew />
+    ) : (
+      <SchemaDetailView
+        schema={null}
+        isLoading={false}
+        errorMessage="Only organization admins can create schemas"
+        canManage={false}
+      />
+    );
+  }
+
+  const schema = findMemorySchemaByRouteName(schemas, view.routeName);
+  if (view.kind === "edit" && canManage) {
+    if (schema === null) {
+      return <SchemaDetailView schema={null} isLoading={isLoading} errorMessage={errorMessage} canManage={canManage} />;
+    }
+    return <SchemaEditorView key={schema.iri} schema={schema} isNew={false} />;
+  }
+  return <SchemaDetailView schema={schema} isLoading={isLoading} errorMessage={errorMessage} canManage={canManage} />;
+}