@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/data-collection/index.tsx

@@ -7,7 +7,6 @@ import { FileDropzone, UploadProgressList, type RejectedDrop } from "#components
 import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { useFileUpload } from "#lib/hooks/useFileUpload";
-import { useAuthContext } from "#providers/AuthContext";
 import { UploadedFilesSection } from "#routes/data-explorer/components/uploads/UploadsPages";
 import { useInvalidateUploads } from "#routes/data-explorer/uploads";
 
@@ -45,17 +44,8 @@ export function DataCollectionUploader() {
 }
 
 export function DataCollectionRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Data collection" icon={FolderUp} />
       <PageBody className="px-4 py-6 sm:px-6">
         <div className="mx-auto flex max-w-4xl flex-col gap-8">

package/src/routes/data-explorer/components/DataExplorerLayout.tsx

@@ -12,7 +12,6 @@ import { SelectionProvider } from "./SelectionProvider";
 import { PageBody, PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
 import { cn } from "#lib/utils";
-import { useAuthContext } from "#providers/AuthContext";
 
 const ontologyStaleTime = 5 * 60 * 1000;
 
@@ -28,8 +27,6 @@ function useExplorerQueryDefaults() {
 }
 
 export function DataExplorerLayout() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   const isIndex = Boolean(useMatch(explorerPath));
   const isCoverage = Boolean(useMatch(coveragePath));
   const isFiles = Boolean(useMatch(filesPath));
@@ -41,14 +38,7 @@ export function DataExplorerLayout() {
   useExplorerQueryDefaults();
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <SelectionProvider>
         <PageHeader
           title="Data Explorer"

package/src/routes/data-explorer/components/class-detail/UsedByRules.tsx

@@ -9,7 +9,7 @@ import { sectionLabelClass } from "#ldo-ui";
 import { cn } from "#lib/utils";
 import { useMantaClient } from "#providers/index";
 import { labelWithinFamily, matchesNameQuery, nameFamilySections } from "#routes/data-explorer/families";
-import { getRuleDisplayName, getRuleRouteName } from "#routes/rules/components/rules.utils";
+import { getRuleDisplayName, getRuleHref } from "#routes/rules/components/rules.utils";
 
 type RuleLinkProps = { ruleIri: string; family?: string };
 
@@ -20,7 +20,7 @@ function RuleLink(props: RuleLinkProps) {
   const label = family ? labelWithinFamily(fullLabel, family) : fullLabel;
 
   return (
-    <LinkRow to={`/rules/${getRuleRouteName(ruleIri)}`}>
+    <LinkRow to={getRuleHref({ ruleIri })}>
       <span className="typography-small-medium min-w-0 flex-1 truncate text-default-foreground">{label}</span>
     </LinkRow>
   );

package/src/routes/datastores/index.tsx

@@ -105,7 +105,8 @@ type DatastoreFilterToggle = {
 };
 
 export function DatastoresRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
+  const { datastore, isOperator, canSwitchDatastore } = useAuthContext();
+
   const { mantaClient } = useMantaClient();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -745,14 +746,7 @@ export function DatastoresRoute() {
   }
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader
         title="Datastores"
         icon={Database}

package/src/routes/explain/index.tsx

@@ -6,23 +6,13 @@ import { parseExplainUrlParams } from "./url-params";
 import { ExplainFact } from "#components/explain-fact/ExplainFact";
 import { PageHeader } from "#components/layouts/page/index";
 import { RouteLayout } from "#components/layouts/RouteLayout";
-import { useAuthContext } from "#providers/AuthContext";
 
 export function ExplainRoute() {
-  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
-
   const [searchParams] = useSearchParams();
   const params = useMemo(() => parseExplainUrlParams(searchParams), [searchParams]);
 
   return (
-    <RouteLayout
-      user={user}
-      datastore={datastore}
-      datastores={datastores}
-      isOperator={isOperator}
-      canSwitchDatastore={canSwitchDatastore}
-      logout={logout}
-    >
+    <RouteLayout>
       <PageHeader title="Explain" icon={Network} />
       <div className="min-h-0 flex-1 p-4">
         {params ? (

package/src/routes/integrations/components/connect-forms/DashConnectForm.tsx

@@ -16,7 +16,6 @@ import { Input } from "#components/input/index";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Dash",
   identityProviderName: "Dash",
   entitySingular: "folder",
   entityPlural: "folders",

package/src/routes/integrations/components/connect-forms/GoogleAdsConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Google Ads",
   identityProviderName: "Google",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/GoogleAnalyticsConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Google Analytics",
   identityProviderName: "Google",
   entitySingular: "property",
   entityPlural: "properties",

package/src/routes/integrations/components/connect-forms/GoogleMerchantCenterConnectForm.tsx

@@ -11,7 +11,6 @@ import type { ConnectFormProps } from "./types";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Merchant Center",
   identityProviderName: "Google",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/InferalCredentialConnectForm.tsx

@@ -37,7 +37,6 @@ export type CredentialStep<Key extends string = string> = {
 };
 
 export type InferalCredentialFormConfig<Key extends string = string> = {
-  providerName: string;
   fieldIdPrefix: string;
   identifier: CredentialField<Key> & { stepTitle: string; stepDescription: string };
   secrets: CredentialStep<Key>;
@@ -240,11 +239,14 @@ export type InferalCredentialConnectFormProps<Key extends string> = ConnectFormP
 
 export function InferalCredentialConnectForm<Key extends string>(props: InferalCredentialConnectFormProps<Key>) {
   const { onBack, onChanged, onDismiss, provider, inferalConfig, config, importNotice } = props;
+  const { name: providerName } = provider;
+
   if (!inferalConfig) {
-    throw new Error(`${config.providerName} is missing its Inferal connection configuration`);
+    throw new Error(`${providerName} is missing its Inferal connection configuration`);
   }
+
   const { deriveStreamName, locationLabels, setupInstructions } = inferalConfig;
-  const { providerName, identifier, secrets, settings, buildProviderInput } = config;
+  const { identifier, secrets, settings, buildProviderInput } = config;
 
   const credentialFields = useMemo(
     () => [identifier, ...secrets.fields, ...(settings?.fields ?? [])],

package/src/routes/integrations/components/connect-forms/KlaviyoConnectForm.tsx

@@ -18,7 +18,6 @@ function looksLikeMetricId(value: string): boolean {
 
 // companyId identifies the integration on our side only — Klaviyo's relay contract never receives it.
 export const klaviyoConfig: InferalCredentialFormConfig<"companyId" | "apiKey" | "conversionMetricId"> = {
-  providerName: "Klaviyo",
   fieldIdPrefix: "klaviyo",
   identifier: {
     key: "companyId",

package/src/routes/integrations/components/connect-forms/MicrosoftAdsConnectForm.tsx

@@ -15,7 +15,6 @@ import type { TreeSelectItem } from "#components/tree-multi-select/index";
 import { useMantaClient } from "#providers/index";
 
 const copy: SetupCopy = {
-  providerName: "Microsoft Ads",
   identityProviderName: "Microsoft",
   entitySingular: "account",
   entityPlural: "accounts",

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -39,9 +39,8 @@ export type OAuthSetup<Row extends SetupRow> = {
 
 export type SetupTreeOptions = Pick<TreeMultiSelectProps, "defaultCollapsed" | "includeDescendants">;
 
-// Every other string is derived from these names and the entity noun.
+// The rest of the copy is derived from the provider name, the identity provider name and the entity noun.
 export type SetupCopy = {
-  providerName: string;
   identityProviderName: string;
   entitySingular: string;
   entityPlural: string;
@@ -76,10 +75,11 @@ export type AlternateSignIn = { label: string; href: string };
 
 export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupConnectFormProps<Row>) {
   const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
-  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } =
-    props;
-  const { alternateSignIns } = props;
-  const { providerName } = copy;
+  const { integration, oauthStartPath, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } = props;
+  const { alternateSignIns, copy: setupCopy } = props;
+  const { name: providerName } = provider;
+
+  const copy = { ...setupCopy, providerName };
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
   const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
@@ -238,7 +238,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 }
 
 type CopyProps = {
-  copy: SetupCopy;
+  copy: SetupCopy & { providerName: string };
 };
 
 type IdleViewProps = CopyProps & {

package/src/routes/integrations/components/connect-forms/TriplewhaleConnectForm.tsx

@@ -2,7 +2,6 @@ import { InferalCredentialConnectForm, type InferalCredentialFormConfig } from "
 import type { ConnectFormProps } from "./types";
 
 export const triplewhaleConfig: InferalCredentialFormConfig<"shopId" | "apiKey"> = {
-  providerName: "Triple Whale",
   fieldIdPrefix: "triplewhale",
   identifier: {
     key: "shopId",

package/src/routes/integrations/components/connect-forms/WoocommerceConnectForm.tsx

@@ -3,7 +3,6 @@ import { InferalCredentialConnectForm, type InferalCredentialFormConfig } from "
 import type { ConnectFormProps } from "./types";
 
 export const woocommerceConfig: InferalCredentialFormConfig<"sourceUrl" | "consumerKey" | "consumerSecret"> = {
-  providerName: "WooCommerce",
   fieldIdPrefix: "woocommerce",
   identifier: {
     key: "sourceUrl",

package/src/routes/integrations/types.ts

@@ -1,10 +1,10 @@
-import type {
-  GQLDataConnectionStatus,
-  GQLGmailIntegrationStatus,
-  GQLIncludedResource,
+import {
   GQLInferalIntegrationProvider,
-  GQLIntegration,
-  GQLRelayIntegrationStatus,
+  type GQLDataConnectionStatus,
+  type GQLGmailIntegrationStatus,
+  type GQLIncludedResource,
+  type GQLIntegration,
+  type GQLRelayIntegrationStatus,
 } from "@manta-eu/client";
 import type { HexColor } from "@manta-eu/lib/color";
 import type { ComponentType, SVGProps } from "react";
@@ -98,3 +98,19 @@ export type ConnectedProvider<Id extends string = ProviderId> = {
   category: string;
   connections: ConnectionView[];
 };
+
+export const inferalProviderNames: Record<`${GQLInferalIntegrationProvider}`, string> = {
+  [GQLInferalIntegrationProvider.GoogleAds]: "Google Ads",
+  [GQLInferalIntegrationProvider.GoogleAnalytics]: "Google Analytics",
+  [GQLInferalIntegrationProvider.GoogleMerchant]: "Merchant Center",
+  [GQLInferalIntegrationProvider.Klaviyo]: "Klaviyo",
+  [GQLInferalIntegrationProvider.Linkedin]: "LinkedIn Ads",
+  [GQLInferalIntegrationProvider.Mailchimp]: "Mailchimp",
+  [GQLInferalIntegrationProvider.Meta]: "Meta",
+  [GQLInferalIntegrationProvider.Microsoftads]: "Microsoft Ads",
+  [GQLInferalIntegrationProvider.Pinterest]: "Pinterest",
+  [GQLInferalIntegrationProvider.Shopify]: "Shopify",
+  [GQLInferalIntegrationProvider.Slack]: "Slack",
+  [GQLInferalIntegrationProvider.Triplewhale]: "Triple Whale",
+  [GQLInferalIntegrationProvider.Woocommerce]: "WooCommerce",
+};

package/src/routes/memories/components/DateValueInput.tsx

@@ -0,0 +1,72 @@
+import { isPresent } from "@manta-eu/lib/present";
+import { format, isValid, parseISO } from "date-fns";
+import { X } from "lucide-react";
+import { Button } from "#components/button/index";
+import { InputDate, InputDateTime } from "#components/input/index";
+
+export function parseDateValue(value: string | null | undefined): Date | undefined {
+  if (!isPresent(value)) return undefined;
+  const parsed = parseISO(value);
+  return isValid(parsed) ? parsed : undefined;
+}
+
+// Dates are stored as a calendar day; date-times as a UTC instant, shown in local time.
+export function formatDateValue(date: Date, withTime: boolean): string {
+  return withTime ? date.toISOString() : format(date, "yyyy-MM-dd");
+}
+
+export type DateValueInputProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  withTime?: boolean;
+  min?: string | null;
+  max?: string | null;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+};
+
+export function DateValueInput(props: DateValueInputProps) {
+  const { id, label, value, onChange, withTime = false, min, max, placeholder, error, disabled } = props;
+  const errorId = `${id}-error`;
+  const pickerProps = {
+    id,
+    selected: parseDateValue(value),
+    minDate: parseDateValue(min),
+    maxDate: parseDateValue(max),
+    allowPast: true,
+    placeholder,
+    disabled,
+    invalid: isPresent(error),
+    "aria-label": label,
+    "aria-describedby": error ? errorId : undefined,
+    onChange: (date: Date) => onChange(formatDateValue(date, withTime)),
+  };
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex flex-wrap items-center gap-2">
+        {withTime ? <InputDateTime {...pickerProps} minuteStep={15} /> : <InputDate {...pickerProps} />}
+        {isPresent(value) && (
+          <Button
+            type="button"
+            variant="tertiary"
+            size="sm"
+            iconOnly
+            icon={X}
+            aria-label={`Clear ${label}`}
+            disabled={disabled}
+            onClick={() => onChange("")}
+          />
+        )}
+      </div>
+      {error && (
+        <p id={errorId} className="typography-small text-error-foreground">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/routes/memories/components/EntityValuePicker.tsx

@@ -0,0 +1,132 @@
+import { compactUri, isValidFullIri } from "@manta-eu/client/shared/rdf-namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { sanitizeSparqlLiteral } from "@manta-eu/rdf-lib/sparql-literal-escape";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { useDebounceValue } from "usehooks-ts";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+} from "#components/combobox/index";
+import { createSelectClassName } from "#components/select/index";
+import { useSparqlSelect } from "#hooks/use-sparql-construct";
+import { cn } from "#lib/utils";
+
+const schemaName = "https://schema.org/name";
+const resultLimit = 20;
+const untypedMinimumSearch = 2;
+
+// Anchored on the class when the property names one; otherwise a name search, which needs a few letters first.
+export function entitySearchQuery(entityClass: string | null, search: string): string | null {
+  const typed = entityClass !== null && isValidFullIri(entityClass);
+  if (!typed && search.trim().length < untypedMinimumSearch) return null;
+  const needle = sanitizeSparqlLiteral(search.trim().toLowerCase());
+  return `SELECT DISTINCT ?iri ?name WHERE {
+  ${typed ? `?iri a <${entityClass}> .` : ""}
+  ?iri <${schemaName}> ?name .
+  FILTER(!isBlank(?iri))
+  FILTER(CONTAINS(LCASE(STR(?name)), "${needle}"))
+} LIMIT ${resultLimit}`;
+}
+
+function entityNameQuery(iri: string): string | null {
+  return isValidFullIri(iri) ? `SELECT ?name WHERE { <${iri}> <${schemaName}> ?name } LIMIT 1` : null;
+}
+
+export type EntityValuePickerProps = {
+  id: string;
+  label: string;
+  value: string;
+  entityClass: string | null;
+  error?: string;
+  onChange: (iri: string) => void;
+};
+
+export function EntityValuePicker(props: EntityValuePickerProps) {
+  const { id, label, value, entityClass, error, onChange } = props;
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebounceValue(search, 300);
+  const searchQuery = entitySearchQuery(entityClass, debouncedSearch);
+  const nameQuery = isPresent(value) ? entityNameQuery(value) : null;
+
+  const { data: results, isFetching } = useSparqlSelect({
+    query: searchQuery ?? "",
+    queryKey: ["memory-entity-search", entityClass, debouncedSearch],
+    enabled: open && searchQuery !== null,
+  });
+  const { data: named } = useSparqlSelect({
+    query: nameQuery ?? "",
+    queryKey: ["memory-entity-name", value],
+    enabled: nameQuery !== null,
+    staleTime: 60_000,
+  });
+
+  const options = (results ?? []).flatMap((binding) => {
+    const iri = binding.get("iri")?.value;
+    return iri ? [{ iri, name: binding.get("name")?.value ?? compactUri(iri) }] : [];
+  });
+  const selectedName = named?.[0]?.get("name")?.value;
+  const errorId = `${id}-error`;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Combobox open={open} onOpenChange={setOpen}>
+        <ComboboxTrigger asChild>
+          <button
+            type="button"
+            id={id}
+            aria-label={`${label}: ${isPresent(value) ? (selectedName ?? compactUri(value)) : "not set"}`}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={error ? errorId : undefined}
+            className={cn(createSelectClassName({ size: "base" }), "w-full min-w-0")}
+          >
+            <span
+              className={cn("min-w-0 flex-1 truncate text-left", !isPresent(value) && "text-placeholder-foreground")}
+            >
+              {isPresent(value) ? (selectedName ?? compactUri(value)) : "Choose a record"}
+            </span>
+            <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+          </button>
+        </ComboboxTrigger>
+        <ComboboxContent align="start" className="w-[var(--radix-popover-trigger-width,320px)]" filter={() => 1}>
+          <ComboboxInput placeholder="Search by name…" value={search} onValueChange={setSearch} />
+          <ComboboxList>
+            <ComboboxEmpty>
+              {searchQuery === null
+                ? `Type at least ${untypedMinimumSearch} letters`
+                : isFetching
+                  ? "Searching…"
+                  : "No matching record"}
+            </ComboboxEmpty>
+            {isPresent(value) && (
+              <ComboboxItem value="__clear__" onSelect={() => onChange("")}>
+                Clear
+              </ComboboxItem>
+            )}
+            {options.map((option) => (
+              <ComboboxItem
+                key={option.iri}
+                value={option.iri}
+                selected={option.iri === value}
+                onSelect={() => onChange(option.iri)}
+              >
+                {option.name}
+              </ComboboxItem>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      {error && (
+        <p id={errorId} className="typography-small text-error-foreground">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/routes/memories/components/FieldLabel.tsx

@@ -0,0 +1,49 @@
+import { HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#components/tooltip/index";
+
+export type InfoTipProps = {
+  label: string;
+  hint: string;
+};
+
+export function InfoTip(props: InfoTipProps) {
+  const { label, hint } = props;
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex shrink-0 text-default-foreground rounded-sm my-auto"
+            aria-label={`${label} description`}
+          >
+            <HelpCircle className="size-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs text-left typography-small">
+          {hint}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export type FieldLabelProps = {
+  label: string;
+  hint: string;
+  htmlFor?: string;
+};
+
+export function FieldLabel(props: FieldLabelProps) {
+  const { label, hint, htmlFor } = props;
+
+  return (
+    <div className="flex items-end gap-1">
+      <label htmlFor={htmlFor} className="typography-small">
+        {label}
+      </label>
+      <InfoTip label={label} hint={hint} />
+    </div>
+  );
+}

package/src/routes/memories/components/ImportanceSlider.tsx

@@ -9,7 +9,7 @@ type ImportanceConfig = {
   label: string;
 };
 
-const importanceSteps = [1, 2, 3, 4, 5] as const;
+export const importanceSteps = [1, 2, 3, 4, 5] as const;
 
 const importanceConfig: Record<number, ImportanceConfig> = {
   1: { icon: Minus, className: "text-muted-foreground/50", label: "Disabled" },
@@ -19,6 +19,10 @@ const importanceConfig: Record<number, ImportanceConfig> = {
   5: { icon: ChevronsUp, className: "text-error-foreground", label: "Critical" },
 };
 
+export function importanceLabel(step: number): string {
+  return importanceConfig[step]?.label ?? String(step);
+}
+
 export type ImportanceSliderProps = {
   value: number;
   onChange: (v: number) => void;

package/src/routes/memories/components/MemoriesFilters.tsx

@@ -1,4 +1,4 @@
-import { GQLMemoryKind, type GQLMemorySchema } from "@manta-eu/client";
+import { GQLMemoryKind, type GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
 import { isPresent } from "@manta-eu/lib/present";
 import type { Table } from "@tanstack/react-table";
 import { ChevronDown, X } from "lucide-react";
@@ -83,7 +83,7 @@ type MemoriesFiltersProps<TData> = {
   table: Table<TData>;
   columnLabels?: Record<string, string>;
   columnDefaultOrder?: string[];
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   schemaFilter?: SchemaFilter;
   onSchemaFilterChange?: (iri: SchemaFilter) => void;
   statusFilters?: Record<StatusFilterKey, boolean>;

package/src/routes/memories/components/MemoriesPanel.tsx

@@ -17,7 +17,7 @@ import { liveContextQueryKey } from "../hooks/useLiveContext";
 import { buildCreateMemoryInput, buildUpdateMemoryInput } from "../memory-mutation-input";
 import { KindBadge, ScopeBadge } from "./badges";
 import type { MemoryFormState } from "./MemoryFields";
-import { MemoryFormDialog } from "./MemoryFormDialog";
+import { MemoryFormDialog, type MemorySaveResult } from "./MemoryFormDialog";
 import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
@@ -54,7 +54,7 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
   }, [queryClient]);
 
   const handleCreate = useCallback(
-    async (form: MemoryFormState, supersedesMemoryIris?: string[]) => {
+    async (form: MemoryFormState, supersedesMemoryIris?: string[]): Promise<MemorySaveResult> => {
       if (!addDialog) return;
       if (!canManageSharedMemories && addDialog.scope !== GQLMemoryScope.User) return;
       try {
@@ -62,6 +62,8 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
           input: buildCreateMemoryInput(form, addDialog.scope, supersedesMemoryIris),
         });
 
+        if (isPresent(result.createMemory.propertyErrors))
+          return { propertyErrors: result.createMemory.propertyErrors };
         if (result.createMemory.error) throw new Error(result.createMemory.error);
 
         toast.success("Memory added");
@@ -76,7 +78,7 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
   );
 
   const handleUpdate = useCallback(
-    async (form: MemoryFormState, supersedesMemoryIris?: string[]) => {
+    async (form: MemoryFormState, supersedesMemoryIris?: string[]): Promise<MemorySaveResult> => {
       if (!editingMemory) return;
       if (!canManageSharedMemories && editingMemory.scope !== GQLMemoryScope.User) return;
       try {
@@ -84,6 +86,8 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
           input: buildUpdateMemoryInput(editingMemory.iri, form, editingMemory.scope, supersedesMemoryIris),
         });
 
+        if (isPresent(result.updateMemory.propertyErrors))
+          return { propertyErrors: result.updateMemory.propertyErrors };
         if (result.updateMemory.error) throw new Error(result.updateMemory.error);
 
         toast.success("Memory updated");

package/src/routes/memories/components/MemoriesTabPanel.tsx

@@ -1,4 +1,4 @@
-import type { GQLMemory, GQLMemorySchema } from "@manta-eu/client";
+import type { GQLMemory, GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
 import { isPresent } from "@manta-eu/lib/present";
 import type { Row, Table } from "@tanstack/react-table";
 import type { ReactNode } from "react";
@@ -25,7 +25,7 @@ export type MemoriesTabPanelProps = {
   emptyState?: ReactNode;
   columnLabels?: Record<string, string>;
   columnDefaultOrder?: string[];
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   schemaFilter?: SchemaFilter;
   onSchemaFilterChange?: (iri: SchemaFilter) => void;
   onRowClick?: (memory: GQLMemory) => void;