@manta-eu/react 0.12.0 → 0.13.0

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

@@ -0,0 +1,290 @@
+import type { GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { Fragment, type ReactNode } from "react";
+import { Link } from "react-router";
+import { valueTypeLabels } from "./schema-form";
+import {
+  clearValueChoice,
+  hasInvalidValues,
+  impactNeedsReview,
+  remapChoiceKey,
+  remapTargets,
+  removedOptionsInUse,
+  type MemorySchemaImpact,
+  type OptionRemapChoices,
+  readableBlockers,
+} from "./schema-impact";
+import { Button } from "#components/button/index";
+import { Checkbox } from "#components/checkbox/index";
+import { Loader } from "#components/loader/index";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "#components/modal/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { getRuleDisplayName, getRuleHref } from "#routes/rules/components/rules.utils";
+
+type ChangeRowProps = { label: string; children: ReactNode; detail?: ReactNode; action?: ReactNode };
+
+function ChangeRow(props: ChangeRowProps) {
+  const { label, children, detail, action } = props;
+  return (
+    <li className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:gap-4">
+      <span className="typography-small-semibold break-words text-default-foreground sm:w-28 sm:shrink-0">{label}</span>
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="typography-small text-default-foreground">{children}</span>
+        {detail && <span className="truncate typography-tiny text-muted-foreground">{detail}</span>}
+      </div>
+      {action && <div className="w-full sm:w-auto sm:shrink-0">{action}</div>}
+    </li>
+  );
+}
+
+function quoted(samples: string[]): string {
+  return samples.map((sample) => `"${sample}"`).join(", ");
+}
+
+export type SchemaChangeReviewDialogProps = {
+  open: boolean;
+  title: string;
+  impact: MemorySchemaImpact | null;
+  proposed: GQLMemorySchemaFieldsFragment | null;
+  remapChoices: OptionRemapChoices;
+  clearUnconvertible: boolean;
+  isChecking: boolean;
+  isApplying: boolean;
+  clearingPath?: string | null;
+  onRemapChange: (key: string, choice: string) => void;
+  onClearUnconvertibleChange: (clear: boolean) => void;
+  onClearValues?: (path: string) => void;
+  onApply: () => void;
+  onCancel: () => void;
+};
+
+export function SchemaChangeReviewDialog(props: SchemaChangeReviewDialogProps) {
+  const {
+    open,
+    title,
+    impact,
+    proposed,
+    remapChoices,
+    clearUnconvertible,
+    isChecking,
+    isApplying,
+    clearingPath = null,
+    onRemapChange,
+    onClearUnconvertibleChange,
+    onClearValues,
+    onApply,
+    onCancel,
+  } = props;
+  const busy = isChecking || isApplying || clearingPath !== null;
+  const removedInUse = impact ? impact.removedProperties.filter((property) => property.memoryCount > 0) : [];
+  const typeChanges = impact ? impact.typeChanges.filter((change) => change.valueCount > 0) : [];
+  const optionsInUse = impact ? removedOptionsInUse(impact) : [];
+  const ruleIris = [...new Set(impact?.ruleReferences.map((reference) => reference.ruleIri) ?? [])];
+  const blocked = isPresent(impact?.blockers);
+  const invalidCount = impact
+    ? impact.typeChanges.reduce((sum, change) => sum + change.unconvertibleCount, 0) +
+      impact.limitViolations.reduce((sum, violation) => sum + violation.invalidCount, 0)
+    : 0;
+  const hasRows =
+    isPresent(removedInUse) ||
+    isPresent(optionsInUse) ||
+    isPresent(impact?.multiValueConflicts) ||
+    isPresent(typeChanges) ||
+    isPresent(impact?.limitViolations);
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && !busy && onCancel()}>
+      <DialogContent className="flex flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle text={title} />
+          <DialogDescription>
+            {impact === null
+              ? "Checking what this change does to stored memories…"
+              : impactNeedsReview(impact)
+                ? impact.memoryCount === 1
+                  ? "1 memory uses this schema. Check what the change does to its values."
+                  : `${humanCount(impact.memoryCount, "memory")} use this schema. Check what the change does to their values.`
+                : "No stored value changes. Apply to update the schema."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="-mx-8 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-8 py-1">
+          {impact === null ? (
+            <div className="flex justify-center py-6">
+              <Loader className="size-6" />
+            </div>
+          ) : (
+            <>
+              {hasRows && (
+                <ul className="flex shrink-0 flex-col divide-y divide-muted-border overflow-hidden rounded-xl border border-muted-border">
+                  {removedInUse.map((property) => (
+                    <ChangeRow
+                      key={property.path}
+                      label={property.label}
+                      action={
+                        onClearValues && (
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            disabled={busy}
+                            onClick={() => onClearValues(property.path)}
+                          >
+                            {clearingPath === property.path ? "Clearing…" : "Clear values"}
+                          </Button>
+                        )
+                      }
+                    >
+                      Removed, but holds a value on {humanCount(property.memoryCount, "memory")}
+                    </ChangeRow>
+                  ))}
+
+                  {optionsInUse.map((option) => {
+                    const key = remapChoiceKey(option);
+                    return (
+                      <ChangeRow
+                        key={key}
+                        label={option.label}
+                        action={
+                          <div className="w-full sm:w-56">
+                            <Select
+                              value={remapChoices[key] ?? ""}
+                              disabled={busy}
+                              onValueChange={(choice) => onRemapChange(key, choice)}
+                            >
+                              <SelectTrigger
+                                label={`Replacement for ${option.value}`}
+                                id={`remap-${key.replace(/[^a-zA-Z0-9]/g, "-")}`}
+                                hiddenLabel
+                              >
+                                <SelectValue placeholder="Choose a replacement" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {remapTargets(proposed, option.path).map((target) => (
+                                  <SelectItem key={target} value={target}>
+                                    Change to &quot;{target}&quot;
+                                  </SelectItem>
+                                ))}
+                                <SelectItem value={clearValueChoice}>Clear the value</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        }
+                      >
+                        &quot;{option.value}&quot; is no longer allowed, on {humanCount(option.memoryCount, "memory")}
+                      </ChangeRow>
+                    );
+                  })}
+
+                  {impact.multiValueConflicts.map((conflict) => (
+                    <ChangeRow key={conflict.path} label={conflict.label} detail="Keep it a list to apply.">
+                      Several values on {humanCount(conflict.memoryCount, "memory")}
+                    </ChangeRow>
+                  ))}
+
+                  {typeChanges.map((change) => (
+                    <ChangeRow
+                      key={change.path}
+                      label={change.label}
+                      detail={
+                        change.unconvertibleCount > 0 &&
+                        `${change.unconvertibleCount} cannot convert${
+                          isPresent(change.unconvertibleSamples) ? `: ${quoted(change.unconvertibleSamples)}` : ""
+                        }`
+                      }
+                    >
+                      {valueTypeLabels[change.from]} to {valueTypeLabels[change.to]},{" "}
+                      {humanCount(change.valueCount, "stored value")}
+                    </ChangeRow>
+                  ))}
+
+                  {impact.limitViolations.map((violation) => (
+                    <ChangeRow
+                      key={violation.path}
+                      label={violation.label}
+                      detail={isPresent(violation.invalidSamples) && quoted(violation.invalidSamples)}
+                    >
+                      New limits, {humanCount(violation.invalidCount, "stored value")} no longer{" "}
+                      {violation.invalidCount === 1 ? "fits" : "fit"}
+                    </ChangeRow>
+                  ))}
+
+                  {hasInvalidValues(impact) && (
+                    <li className="bg-faint px-4 py-3">
+                      <Checkbox
+                        label={
+                          invalidCount === 1
+                            ? "Clear the value that cannot be kept"
+                            : `Clear the ${invalidCount} values that cannot be kept`
+                        }
+                        checked={clearUnconvertible}
+                        disabled={busy}
+                        onCheckedChange={(checked) => onClearUnconvertibleChange(checked === true)}
+                      />
+                    </li>
+                  )}
+                </ul>
+              )}
+
+              {isPresent(ruleIris) && (
+                <p className="typography-small text-muted-foreground">
+                  {ruleIris.length === 1 ? "Rule " : "Rules "}
+                  {ruleIris.map((ruleIri, index) => (
+                    <Fragment key={ruleIri}>
+                      {index > 0 && (index === ruleIris.length - 1 ? " and " : ", ")}
+                      <Link
+                        to={getRuleHref({ ruleIri })}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="typography-small-medium text-default-foreground underline-offset-2 hover:underline"
+                      >
+                        {getRuleDisplayName(ruleIri)}
+                      </Link>
+                    </Fragment>
+                  ))}
+                  {ruleIris.length === 1
+                    ? " reads what changes. Change or remove it first."
+                    : " read what changes. Change or remove them first."}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+
+        {impact !== null && blocked && (
+          <div className="flex shrink-0 flex-col gap-1">
+            <span className="typography-small-medium text-error-foreground">Before you can apply</span>
+            <ul className="flex flex-col gap-0.5">
+              {readableBlockers(impact).map((blocker) => (
+                <li key={blocker} className="typography-tiny text-muted-foreground">
+                  {blocker}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        {impact !== null && !blocked && impactNeedsReview(impact) && (
+          <p className="shrink-0 typography-small text-muted-foreground">
+            Stored values are updated together with the schema.
+          </p>
+        )}
+
+        <DialogFooter>
+          <Button variant="tertiary" disabled={isApplying} onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button disabled={impact === null || blocked || busy} onClick={onApply}>
+            {isApplying ? "Saving…" : isChecking ? "Checking…" : "Apply changes"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "#components/alert-dialog/index";
+import { Button } from "#components/button/index";
+
+export type SchemaConfirmDialogProps = {
+  open: boolean;
+  title: string;
+  description: ReactNode;
+  confirmLabel: string;
+  pendingLabel: string;
+  destructive?: boolean;
+  isPending: boolean;
+  disabled?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+export function SchemaConfirmDialog(props: SchemaConfirmDialogProps) {
+  const {
+    open,
+    title,
+    description,
+    confirmLabel,
+    pendingLabel,
+    destructive = false,
+    isPending,
+    disabled = false,
+    onConfirm,
+    onCancel,
+  } = props;
+
+  return (
+    <AlertDialog open={open} onOpenChange={(next) => !next && !isPending && onCancel()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div>{description}</div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <Button
+            variant={destructive ? "destructive" : "primary"}
+            disabled={disabled || isPending}
+            onClick={onConfirm}
+          >
+            {isPending ? pendingLabel : confirmLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}