@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.148

package/dist/collections/SetupReview.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describeError } from "@mdbase-dev/sdk/describe";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { actionNotice, problemControl } from "./model.js";
+import { ActionButton, NoticeBlock } from "./parts.js";
+/** Quiet re-plans after a transient refusal (about a minute in all). */
+const TRANSIENT_REPLANS = 15;
+/**
+ * Reviewable setup: `setup.plan()` (read-only, so it starts at once), then
+ * `setup.apply(plan)` only from the person's click. Never configures silently.
+ */
+export function SetupReview({
+  ui
+}) {
+  const {
+    mdbase
+  } = ui.options;
+  const [state, setState] = useState({
+    status: "planning",
+    notice: null
+  });
+  const [request, setRequest] = useState({
+    options: {},
+    notice: null,
+    quiet: false
+  });
+  const [applying, setApplying] = useState(false);
+  const applyingNow = useRef(false);
+  const shown = useRef(state.status);
+  shown.current = state.status;
+  // Readiness re-checks whenever the collection changes (in another tab, or in
+  // the person's own editor). A review planned before that change can be stale:
+  // a restored type may now be upgradable, or a refusal resolved. Plan again,
+  // quietly, each time a re-check settles; an apply in flight owns the screen.
+  const checking = useSyncExternalStore(mdbase.subscribe, () => mdbase.getSnapshot().readiness.checking);
+  const wasChecking = useRef(checking);
+  useEffect(() => {
+    const settled = wasChecking.current && !checking;
+    wasChecking.current = checking;
+    // Only a review on screen is kept: planning or a failure plans again plainly.
+    if (settled && !applyingNow.current) setRequest(current => ({
+      ...current,
+      quiet: shown.current === "ready"
+    }));
+  }, [checking]);
+  useEffect(() => {
+    const controller = new AbortController();
+    let timer = null;
+    // A transient refusal (another tab is finishing setup, the SDK is busy)
+    // clears by itself: plan again quietly, with backoff, before giving up.
+    const attempt = n => {
+      mdbase.setup.plan({
+        ...request.options,
+        signal: controller.signal
+      }).then(plan => {
+        if (controller.signal.aborted) return;
+        setState(current => ({
+          status: "ready",
+          plan,
+          notice: request.quiet ? current.notice : request.notice
+        }));
+      }, cause => {
+        if (controller.signal.aborted) return;
+        const described = describeError(cause);
+        if (request.quiet) return;
+        if (described?.transient && n < TRANSIENT_REPLANS) {
+          timer = setTimeout(() => attempt(n + 1), described.retryAfterMs ?? Math.min(500 * 2 ** n, 5000));
+          return;
+        }
+        setState({
+          status: "failed",
+          notice: actionNotice(described)
+        });
+      });
+    };
+    attempt(0);
+    return () => {
+      controller.abort();
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, [mdbase, request]);
+  const replan = (options, notice = null) => {
+    setState({
+      status: "planning",
+      notice: null
+    });
+    setRequest({
+      options,
+      notice,
+      quiet: false
+    });
+  };
+  // Nothing here can change the collection: check it again, then plan again,
+  // after the person has fixed it elsewhere. Readiness may open it outright.
+  const recheck = () => {
+    void ui.actions.track("assess", () => mdbase.assess()).then(() => replan(request.options), () => {});
+  };
+  const apply = plan => {
+    setApplying(true);
+    applyingNow.current = true;
+    mdbase.setup.apply(plan).then(result => {
+      setApplying(false);
+      applyingNow.current = false;
+      if (result.outcome === "changed") replan(request.options, actionNotice(describeError("setup_changed")));
+    }, cause => {
+      setApplying(false);
+      applyingNow.current = false;
+      const notice = actionNotice(describeError(cause));
+      setState(current => current.status === "ready" ? {
+        ...current,
+        notice
+      } : current);
+    });
+  };
+  if (state.status === "planning") {
+    return _jsxs("p", {
+      className: "mdbase-collections-progress",
+      role: "status",
+      children: [_jsx("span", {
+        className: "mdbase-collections-spinner",
+        "aria-hidden": "true"
+      }), ui.copy.setupChecking]
+    });
+  }
+  if (state.status === "failed") {
+    return _jsxs("div", {
+      className: "mdbase-collections-setup",
+      children: [state.notice && _jsx(NoticeBlock, {
+        notice: state.notice,
+        ui: ui
+      }), _jsx("div", {
+        className: "mdbase-collections-actions",
+        children: _jsx(ActionButton, {
+          tone: "primary",
+          onClick: () => replan(request.options),
+          children: ui.copy.tryAgain
+        })
+      })]
+    });
+  }
+  const {
+    plan
+  } = state;
+  const refusal = plan.refusal ? describeError(plan.refusal.code) : null;
+  const refusalNotice = refusal ? {
+    ...actionNotice(refusal),
+    control: problemControl(refusal, {
+      collectionId: null,
+      signedIn: true,
+      open: true
+    })
+  } : null;
+  const nothing = plan.status === "current" || plan.changes.length === 0 && plan.conflicts.length === 0;
+  const adoptable = Object.keys(plan.adoptable).length > 0;
+  const applicable = !refusal && plan.canApply;
+  // NoticeBlock shows a refusal's own control, except `set_up` (this is setup).
+  const refusalActs = !!refusalNotice?.control && refusalNotice.control.kind !== "set_up";
+  // Never leave the review without a way forward.
+  const stuck = !applicable && !adoptable && !refusalActs;
+  return _jsxs("div", {
+    className: "mdbase-collections-setup",
+    children: [state.notice && _jsx(NoticeBlock, {
+      notice: state.notice,
+      ui: ui,
+      variant: "inline"
+    }), refusalNotice ? _jsx(NoticeBlock, {
+      notice: refusalNotice,
+      ui: ui
+    }) : _jsx("p", {
+      className: "mdbase-collections-setup-summary",
+      children: nothing ? ui.copy.setupNothing : plan.summary
+    }), plan.changes.length > 0 && _jsxs("section", {
+      className: "mdbase-collections-setup-section",
+      children: [_jsx("h3", {
+        children: ui.copy.setupChanges
+      }), _jsx("ul", {
+        className: "mdbase-collections-setup-list",
+        children: plan.changes.map(change => _jsx("li", {
+          children: change.message
+        }, `${change.kind}:${change.target}`))
+      })]
+    }), plan.conflicts.length > 0 && _jsxs("section", {
+      className: "mdbase-collections-setup-section",
+      children: [_jsx("h3", {
+        children: ui.copy.setupConflicts
+      }), _jsx("ul", {
+        className: "mdbase-collections-setup-list",
+        children: plan.conflicts.map(conflict => _jsx("li", {
+          children: conflict.message
+        }, conflict.target))
+      })]
+    }), _jsxs("div", {
+      className: "mdbase-collections-actions",
+      children: [applicable && _jsx(ActionButton, {
+        tone: "primary",
+        progress: applying ? ui.copy.setupApplying : null,
+        onClick: () => apply(plan),
+        children: nothing ? ui.copy.setupContinue : ui.copy.setupApply
+      }), adoptable && _jsx(ActionButton, {
+        tone: "secondary",
+        inert: applying,
+        onClick: () => replan({
+          ...request.options,
+          adopt: plan.adoptable
+        }),
+        children: ui.say("setupUseAppVersion")
+      }), stuck && _jsx(ActionButton, {
+        tone: "primary",
+        inert: ui.busy !== null,
+        progress: ui.busy === "assess" ? ui.copy.setupChecking : null,
+        onClick: recheck,
+        children: ui.copy.tryAgain
+      })]
+    })]
+  });
+}

package/dist/collections/copy.d.ts

@@ -0,0 +1,100 @@
+import "../i18n.js";
+/**
+ * The shared screens' own words. Problem titles and messages are the SDK's
+ * (`describeError`); these are headings, labels and confirmations around them.
+ * `{app}` is the app's name and `{collection}` a collection's name.
+ */
+export declare const defaultCollectionCopy: {
+    readonly startingHeading: string;
+    readonly signedOutHeading: string;
+    readonly signedOutLead: string;
+    readonly signedOutNotice: string;
+    readonly signedOutIncomplete: string;
+    readonly signIn: string;
+    readonly authorizingHeading: string;
+    readonly authorizingSignIn: string;
+    readonly authorizingAdd: string;
+    readonly authorizingApprove: string;
+    readonly openWindowAgain: string;
+    readonly cancel: string;
+    readonly chooseHeading: string;
+    readonly yourCollections: string;
+    readonly emptyHeading: string;
+    readonly emptyLead: string;
+    readonly noCollectionAdded: string;
+    readonly accessNotGiven: string;
+    readonly addCollection: string;
+    readonly addPrivateCollection: string;
+    readonly addingCollection: string;
+    readonly manageAccess: string;
+    readonly signedInAs: string;
+    readonly signOut: string;
+    readonly signingOut: string;
+    readonly openingHeading: string;
+    readonly openingHeadingUnnamed: string;
+    readonly openingSlow: string;
+    readonly openingJoining: string;
+    readonly openingStore: string;
+    readonly openingLog: string;
+    readonly openingSyncing: string;
+    readonly openingSnapshot: string;
+    readonly openingReplaying: string;
+    readonly openingKey: string;
+    readonly openingRead: string;
+    readonly openingSetup: string;
+    readonly chooseAnother: string;
+    readonly approvalHeading: string;
+    readonly approvalHeadingUnnamed: string;
+    readonly approvalLead: string;
+    readonly approvalDeclined: string;
+    readonly reviewAccess: string;
+    readonly setupHeading: string;
+    readonly setupLead: string;
+    readonly setupChecking: string;
+    readonly setupNothing: string;
+    readonly setupApply: string;
+    readonly setupApplying: string;
+    readonly setupContinue: string;
+    readonly setupUseAppVersion: string;
+    readonly setupConflicts: string;
+    readonly setupChanges: string;
+    readonly tryAgain: string;
+    readonly problemHeading: string;
+    readonly problemHeadingUnnamed: string;
+    readonly unavailableHeading: string;
+    readonly closedHeading: string;
+    readonly closedLead: string;
+    readonly reload: string;
+    readonly thisCollection: string;
+    readonly roleOwner: string;
+    readonly roleEditor: string;
+    readonly roleViewer: string;
+    readonly rowOpening: string;
+    readonly openNow: string;
+    readonly idHint: string;
+    readonly privateCollection: string;
+    readonly privateCollectionHint: string;
+    readonly collectionLabel: string;
+    readonly collectionsLabel: string;
+    readonly switchCollection: string;
+    readonly switchCollectionNone: string;
+    readonly findCollection: string;
+    readonly noMatches: string;
+    readonly moreFor: string;
+    readonly removeFromList: string;
+    readonly deleteCollection: string;
+    readonly forgetTitle: string;
+    readonly forgetBody: string;
+    readonly forgetConfirm: string;
+    readonly deleteTitle: string;
+    readonly deleteBody: string;
+    readonly deleteTypeName: string;
+    readonly deleteConfirm: string;
+    readonly deleting: string;
+    readonly signOutAnyway: string;
+    readonly close: string;
+};
+export type CollectionCopyKey = keyof typeof defaultCollectionCopy;
+export type CollectionCopy = Record<CollectionCopyKey, string>;
+/** Replace `{name}` placeholders. Unknown placeholders stay as written. */
+export declare function fill(template: string, values: Readonly<Record<string, string>>): string;