canopycms 0.11.1 → 0.12.1

package/dist/editor/components/EditorHeader.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Badge, Box, Button, Group, Menu, Text, Tooltip, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
+import { useLayoutEffect, useRef } from 'react';
+import { Badge, Box, Button, Group, Loader, Menu, Text, Tooltip, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
 import { useMediaQuery, useMergedRef } from '@mantine/hooks';
 import { IconChevronDown, IconLock } from '@tabler/icons-react';
 import { isAdmin, isLockedOutOfBranch, isReviewer } from '../../authorization/helpers.js';
 import { branchBarStatus, describeBranchLock } from '../branch-lock.js';
 import { HOLD_BADGE, branchHoldMessage } from '../branch-status.js';
+import { conflictRecordHeldAdminMessage, conflictRecordHeldMessage, conflictsHoldMessage, conflictsSubmitReason, } from '../conflict-notice.js';
+import { ReleaseHoldButton } from './ReleaseHoldButton.js';
 import { EDITOR_ACTIONS, UNFINISHED_SUBMIT_APPROVE_REASON, rewrittenSubmitReason } from '../copy.js';
 import { reviewRoleOf } from '../../authorization/review-role.js';
 import { SYSTEM_USER_ID } from '../../system-users.js';
@@ -15,13 +17,15 @@ import { TooltipDetail } from './TooltipDetail.js';
 import { ReasonedMenuItem } from './ReasonedMenuItem.js';
 import { UnsavedMark } from './UnsavedMark.js';
 import { DraftStorageWarning, HIDDEN_STYLE, SaveAllButton } from './SaveAllButton.js';
+import { GetLatestChangesButton } from './GetLatestChangesButton.js';
+import { GETTING_LATEST_CHANGES, WAITING_NOTICE, WAITING_SUBMIT_REASON, } from '../base-update-wait.js';
 import { useFocusHandOff, useMenuItemFocusReturn } from '../utils/focus-return.js';
 /**
  * The branch bar: the pill, the branch's status and its unsaved count, then the draft-storage
  * warning, Save all, the way forward and Submit or Withdraw, or to a reviewer of someone else's
  * submission Approve and Request changes. The open entry's own controls are in `EntryHeader`.
  */
-export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchHold, branchApproveBlocked = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
+export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchHold, branchApproveBlocked = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, baseUpdate, latestWait = 'none', openConflicts = 0, conflictRecordHeld, }) {
     const reviewRole = reviewRoleOf({
         status: branchStatus,
         createdBy: branchCreatedBy,
@@ -30,6 +34,12 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         isProtected: branchIsProtected,
         pullRequestState: branchPullRequestState,
     }, userContext);
+    const releaseHold = branchName ? conflictRecordHeld?.onRelease : undefined;
+    const heldMessage = !conflictRecordHeld
+        ? undefined
+        : releaseHold
+            ? conflictRecordHeldAdminMessage
+            : conflictRecordHeldMessage;
     const workflow = workflowAction({
         branchName,
         busy,
@@ -42,6 +52,9 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         savingAll: !!saveAllProgress,
         rewritten: branchHold?.kind === 'rewritten',
         approveBlocked: branchApproveBlocked,
+        waitingForLatest: latestWait === 'waiting',
+        openConflicts,
+        heldReason: heldMessage,
     });
     const lock = {
         branchStatus,
@@ -55,12 +68,19 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
     };
     const branchLockReason = describeBranchLock(lock);
     const status = branchBarStatus({ ...lock, isProtected: branchServerProtected });
+    // A hold of the pull request outranks open conflicts, which only hold the next submit.
+    const conflictsHeld = openConflicts > 0 && branchStatus === 'editing';
     const holdMessage = branchName && branchHold && status.value !== 'loading'
         ? branchHoldMessage(branchHold, {
             role: workflow?.kind === 'review' ? 'review' : workflow?.permitted ? 'withdraw' : 'none',
             isAdmin: isAdmin(userContext?.groups ?? []),
         })
-        : undefined;
+        : branchName && heldMessage && status.value !== 'loading'
+            ? heldMessage
+            : branchName && conflictsHeld && status.value !== 'loading'
+                ? conflictsHoldMessage(openConflicts)
+                : undefined;
+    const holdCount = !branchHold && !conflictRecordHeld && conflictsHeld ? openConflicts : undefined;
     const theme = useMantineTheme();
     // Mantine's own below-`md` query, the one `visibleFrom="md"` hides under.
     const belowMd = `(max-width: ${em(getBreakpointValue('md', theme.breakpoints) - 0.1)})`;
@@ -81,6 +101,20 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         : status.action;
     // Controls come and go as a submit or withdraw changes the lock, and focus follows them.
     const [[wayRef, saveAllRef, workflowRef, secondaryRef], focusTarget] = useFocusHandOff(4);
+    // A release unmounts its confirm with the button that opened it, which leaves focus nowhere: it
+    // goes to the workflow control, which the release has just freed.
+    const releasable = !!releaseHold;
+    const wasReleasable = useRef(releasable);
+    const releasedHere = useRef(false);
+    useLayoutEffect(() => {
+        const active = document.activeElement;
+        if (wasReleasable.current && !releasable && releasedHere.current) {
+            releasedHere.current = false;
+            if (!active || active === document.body)
+                focusTarget(2)?.focus({ preventScroll: true });
+        }
+        wasReleasable.current = releasable;
+    });
     const workflowControl = {
         onSubmit,
         onWithdraw,
@@ -92,14 +126,27 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         returnFocusTo: () => focusTarget(2),
     };
     const caretOnWay = narrow && !!barAction && !!workflow;
-    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchLabel ?? branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason, holdMessage: holdMessage }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
+    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchLabel ?? branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef, 
+                    // Below `md` the bar has no room for it, so the branch's menu offers it.
+                    getLatest: narrow ? baseUpdate : undefined }), _jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [_jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason, holdMessage: holdMessage, holdCount: holdCount, working: latestWait !== 'none' ? GETTING_LATEST_CHANGES : undefined, 
+                            // The bar's button carries the spinner where it shows.
+                            workingSpinner: narrow || !baseUpdate }), releaseHold && (_jsx(ReleaseHoldButton, { branchLabel: branchLabel ?? branchName, onRelease: async () => {
+                                // Marked while in flight: the re-read that clears the hold can land first.
+                                releasedHere.current = true;
+                                const outcome = await releaseHold();
+                                if (!('released' in outcome))
+                                    releasedHere.current = false;
+                                return outcome;
+                            } }))] }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), !narrow && baseUpdate && _jsx(GetLatestChangesButton, { control: baseUpdate }), (!narrow || editable) && (_jsx(SaveAllButton
                 // Its reserved width follows this branch's counts, not the session's largest.
                 , { onSaveAll: onSaveAll, unsavedCount: modifiedCount, blockedReason: branchLockReason ??
                         (!branchName
                             ? 'Open a branch first.'
-                            : entryListFailed && modifiedCount > 0
-                                ? 'The list of entries couldn\'t be loaded, so these changes can\'t be saved yet. Choose "Refresh branch" in the branch menu to try again.'
-                                : undefined), saveAllProgress: saveAllProgress, singleSaving: singleSaving, busy: busy, buttonRef: saveAllRef, caret: split && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined }, branchName)), barAction && (_jsx(BranchWayButton, { action: barAction, buttonRef: wayRef, onClick: barAction === 'newBranch'
+                            : latestWait === 'waiting'
+                                ? WAITING_NOTICE
+                                : entryListFailed && modifiedCount > 0
+                                    ? 'The list of entries couldn\'t be loaded, so these changes can\'t be saved yet. Choose "Refresh branch" in the branch menu to try again.'
+                                    : undefined), saveAllProgress: saveAllProgress, singleSaving: singleSaving, busy: busy, buttonRef: saveAllRef, caret: split && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined }, branchName)), barAction && (_jsx(BranchWayButton, { action: barAction, buttonRef: wayRef, onClick: barAction === 'newBranch'
                         ? onNewBranch
                         : barAction === 'refreshBranch'
                             ? onBranchReloadData
@@ -131,13 +178,18 @@ function unsavedTooltip(status, count, mayWithdraw) {
  * The branch's state beside the pill, heard in words with its reason, but not while it loads. A
  * hold follows it whatever the lock, since a lock doesn't say that the branch is stuck.
  */
-function BranchStatusLabel({ status, reason, holdMessage, }) {
-    const spoken = status.label && status.value !== 'loading'
-        ? [status.label.replace(' · ', ', '), reason].filter(Boolean).join('. ')
-        : '';
+function BranchStatusLabel({ status, reason, holdMessage, holdCount, working, workingSpinner = true, }) {
+    const spoken = [
+        status.label && status.value !== 'loading'
+            ? [status.label.replace(' · ', ', '), reason].filter(Boolean).join('. ')
+            : '',
+        working,
+    ]
+        .filter(Boolean)
+        .join('. ');
     return (
     // Always mounted, so a lock that arrives is announced.
-    _jsxs(Box, { role: "status", style: status.label || holdMessage ? { flexShrink: 0 } : HIDDEN_STYLE, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [status.label && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-status", "data-status": status.value, children: [status.readOnly && _jsx(IconLock, { size: 14 }), _jsx(Text, { span: true, size: "sm", children: status.label })] })), holdMessage && (_jsx(TooltipDetail, { detail: holdMessage, children: _jsx(Badge, { color: HOLD_BADGE.color, variant: "light", "data-testid": "branch-hold-status", children: HOLD_BADGE.label }) }))] }), _jsx(VisuallyHidden, { children: spoken })] }));
+    _jsxs(Box, { role: "status", style: status.label || holdMessage || working ? { flexShrink: 0 } : HIDDEN_STYLE, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [working && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-working-status", children: [workingSpinner && _jsx(Loader, { size: 12 }), _jsx(Text, { span: true, size: "sm", children: working })] })), status.label && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-status", "data-status": status.value, children: [status.readOnly && _jsx(IconLock, { size: 14 }), _jsx(Text, { span: true, size: "sm", children: status.label })] })), holdMessage && (_jsx(TooltipDetail, { detail: holdMessage, children: _jsx(Badge, { color: HOLD_BADGE.color, variant: "light", "data-testid": "branch-hold-status", children: holdCount === undefined ? HOLD_BADGE.label : `${HOLD_BADGE.label} (${holdCount})` }) }))] }), _jsx(VisuallyHidden, { children: spoken })] }));
 }
 const WAY_LABEL = {
     newBranch: `${EDITOR_ACTIONS.newBranch}…`,
@@ -154,7 +206,7 @@ function BranchWayButton({ action, onClick, caret, buttonRef, }) {
  * Submit for review, or Withdraw from review once submitted or approved, or Approve and Request
  * changes to a reviewer of someone else's submission; null when none shows.
  */
-function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, reviewRole, savingAll, rewritten, approveBlocked, }) {
+function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, reviewRole, savingAll, rewritten, approveBlocked, waitingForLatest, openConflicts, heldReason, }) {
     const isSubmitted = branchStatus === 'submitted';
     const isEditing = branchStatus === 'editing';
     // 'approved' withdraws too -- it is the author's way back from
@@ -176,7 +228,7 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
             blocked: !branchName || busy || savingAll,
             permitted: true,
             reason: savingAll ? 'Wait for Save all to finish.' : busy ? BUSY_REASON : '',
-            approveReason: approveBlocked ? UNFINISHED_SUBMIT_APPROVE_REASON : undefined,
+            approveReason: approveBlocked ? UNFINISHED_SUBMIT_APPROVE_REASON : heldReason,
         };
     }
     // Who may submit/withdraw: creator, ACL access, the system branch, or an
@@ -201,24 +253,34 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
     return {
         kind: isWithdrawable ? 'withdraw' : 'submit',
         // `busy` alone can't hold it: an entry load clears that shared flag mid-run.
-        blocked: !branchName || busy || savingAll || !canPerformAction || (rewritten && isEditing),
+        blocked: !branchName ||
+            busy ||
+            savingAll ||
+            !canPerformAction ||
+            (isEditing && (rewritten || waitingForLatest || openConflicts > 0 || !!heldReason)),
         permitted: canPerformAction,
         reason: savingAll
             ? 'Wait for Save all to finish.'
-            : rewritten && isEditing
-                ? rewrittenSubmitReason(isAdmin(userContext?.groups ?? []))
-                : // No branch data (`branchStatus === undefined`) must not be
-                    // interpolated raw into this label. Guarded explicitly here rather
-                    // than left to the early return above, which hides the action
-                    // today only as a side effect of `branchIsProtected`'s `?? true`
-                    // default -- not a guarantee this arm stays unreachable.
-                    branchStatus === undefined
-                        ? 'Branch details could not be loaded. Use "Refresh branch" to try again.'
-                        : !statusHasAction
-                            ? `This branch is ${branchStatus}, so it can't be submitted for review or withdrawn from review.`
-                            : !userHasPermission
-                                ? 'You do not have permission to submit this branch for review or withdraw it from review. Ask an admin for access.'
-                                : '',
+            : waitingForLatest && isEditing
+                ? WAITING_SUBMIT_REASON
+                : heldReason && isEditing
+                    ? heldReason
+                    : openConflicts > 0 && isEditing
+                        ? conflictsSubmitReason(openConflicts)
+                        : rewritten && isEditing
+                            ? rewrittenSubmitReason(isAdmin(userContext?.groups ?? []))
+                            : // No branch data (`branchStatus === undefined`) must not be
+                                // interpolated raw into this label. Guarded explicitly here rather
+                                // than left to the early return above, which hides the action
+                                // today only as a side effect of `branchIsProtected`'s `?? true`
+                                // default -- not a guarantee this arm stays unreachable.
+                                branchStatus === undefined
+                                    ? 'Branch details could not be loaded. Use "Refresh branch" to try again.'
+                                    : !statusHasAction
+                                        ? `This branch is ${branchStatus}, so it can't be submitted for review or withdrawn from review.`
+                                        : !userHasPermission
+                                            ? 'You do not have permission to submit this branch for review or withdraw it from review. Ask an admin for access.'
+                                            : '',
     };
 }
 function WorkflowButton({ narrow, ...props }) {

package/dist/editor/components/EntryChangesDrawer.d.ts

@@ -6,7 +6,11 @@
 import React from 'react';
 import type { BranchChangeEntry } from '../../api/branch-changes.js';
 import type { FieldConfig } from '../../config/index.js';
+import type { CanopyPathSegment } from '../canopy-path.js';
 import type { EntryChangeState } from '../hooks/useBranchChangesData.js';
+import type { ConflictsState } from '../hooks/useConflictsData.js';
+import type { EntryConflictData } from '../../api/merge-conflicts.js';
+import { type ConflictsGroupProps } from './ConflictsGroup.js';
 /** The entry a drawer compares, as the editor knows it. */
 export interface EntryChangesSubject {
     logicalPath: string;
@@ -41,11 +45,57 @@ export interface EntryChangesDrawerProps {
     onOpenEntry?: () => void;
     /** The branch's pull request, offered where this drawer can't compare. */
     pullRequestUrl?: string;
+    /** Undoing the entry's changes in its form; given only for the open entry. */
+    undo?: EntryChangesUndo;
+    /**
+     * Why this user can't change the entry at all, such as a path rule: its undo, delete and
+     * restore controls are hidden and this one line says why.
+     */
+    noEditReason?: string;
+    /**
+     * Why those controls can't act now, such as a locked branch: they stay, disabled, saying so,
+     * as the form's do.
+     */
+    lockedReason?: string;
+    /** Opens the confirm that deletes an entry added on the branch, closing the drawer first. */
+    onDeleteEntry?: () => void;
+    /** Puts back an entry deleted on the branch; resolves with why it couldn't, when it couldn't. */
+    onRestoreEntry?: () => Promise<RestoreRefusal | undefined>;
+    /** The entry's open conflicts, given while the branch lists any for it. */
+    conflicts?: EntryChangesConflicts;
 }
-/** The drawer's body: its states, then the summary and one card per change. */
-export declare const EntryChangesView: React.FC<Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>>;
+/** What the "Conflicts" group needs beyond the drawer's own props (ConflictsGroup.tsx). */
+export interface EntryChangesConflicts extends Pick<ConflictsGroupProps, 'adminBaseBranch' | 'choices' | 'onChoose' | 'onEdit'> {
+    state: ConflictsState<EntryConflictData | null>;
+    onResolveEntry?: ConflictsGroupProps['onResolveEntry'];
+    /** The entry has a draft, open or not, which an entry-level choice would leave behind. */
+    unsavedEdits?: boolean;
+}
+/** Why "Restore entry" didn't: `warning` where nothing is lost, or the outcome is unknown. */
+export interface RestoreRefusal {
+    message: string;
+    tone: 'warning' | 'error';
+}
+/** The open entry's form value, and the way to change its draft; see `undo-change.ts`. */
+export interface EntryChangesUndo {
+    /** The entry's value as its form holds it, unsaved edits included. */
+    value: Record<string, unknown>;
+    /**
+     * Its saved value as the form loaded it, which a redo puts back: references resolved, so a
+     * redone entry matches its saved state and isn't left unsaved. Else the comparison's saved side.
+     */
+    saved?: Record<string, unknown>;
+    /** Sets the entry's draft to what `update` makes of its value at that moment. */
+    update: (update: (value: Record<string, unknown>) => Record<string, unknown>) => void;
+    /** Open field threads inside a canopy path, which taking out an item there moves to the entry. */
+    threadsWithin?: (path: CanopyPathSegment[]) => number;
+}
+type EntryChangesViewProps = Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>;
+/** The drawer's body: the entry's conflicts, if any, above its changes. */
+export declare const EntryChangesView: React.FC<EntryChangesViewProps>;
 /**
  * A modal right-hand drawer, as the Branches, Comments and Media drawers are: it traps focus,
  * and the form and preview wait behind its backdrop.
  */
 export declare const EntryChangesDrawer: React.FC<EntryChangesDrawerProps>;
+export {};