@byline/admin 3.12.1 → 3.13.0

package/src/forms/form-context.tsx

@@ -20,6 +20,7 @@ import type { DocumentPatch, FieldSetPatch } from '@byline/core/patches'
 // ~85KB chunk that leaks onto the public frontend bundle (form-context is
 // reachable from the layout graph).
 import { get as getNestedValue, set as setNestedValue } from './nested-path'
+import { useTrackedSlot } from './use-tracked-slot'
 
 interface FormError {
   field: string
@@ -168,27 +169,6 @@ export const FormProvider = ({
   const errorListeners = useRef<Set<ErrorsListener>>(new Set())
   const metaListeners = useRef<Set<MetaListener>>(new Set())
 
-  // System path slot — initialised from the loaded version's top-level
-  // `path` (edit mode) or `null` (create mode). Edits via `setSystemPath`
-  // mark the form dirty so the Save button enables.
-  const systemPathRef = useRef<string | null>(
-    typeof initialData?.path === 'string' && (initialData.path as string).length > 0
-      ? (initialData.path as string)
-      : null
-  )
-  const initialSystemPath = useRef<string | null>(systemPathRef.current)
-  const systemPathListeners = useRef<Set<SystemPathListener>>(new Set())
-
-  // System available-locales slot — initialised from the loaded version's
-  // top-level `availableLocales` (edit mode) or `[]` (create mode / not yet
-  // surfaced). Edits via `setSystemAvailableLocales` mark the form dirty so
-  // the Save button enables. Stored as a defensive copy.
-  const systemAvailableLocalesRef = useRef<string[]>(
-    Array.isArray(initialData?.availableLocales) ? [...initialData.availableLocales] : []
-  )
-  const initialSystemAvailableLocales = useRef<string[]>([...systemAvailableLocalesRef.current])
-  const systemAvailableLocalesListeners = useRef<Set<SystemAvailableLocalesListener>>(new Set())
-
   const subscribeField = useCallback((name: string, listener: FieldListener) => {
     if (!fieldListeners.current.has(name)) {
       fieldListeners.current.set(name, new Set())
@@ -240,6 +220,32 @@ export const FormProvider = ({
     })
   }, [])
 
+  // Document-grain system-field slots — dirty-tracked, ref-backed, each with
+  // its own listener set. The `path` slot is initialised from the loaded
+  // version's top-level `path` (edit) or `null` (create); the available-locales
+  // slot from `availableLocales` (edit) or `[]`. Edits toggle the slot's dirty
+  // key so the single Save button can branch. See ./use-tracked-slot.
+  const pathSlot = useTrackedSlot<string | null>({
+    initial:
+      typeof initialData?.path === 'string' && (initialData.path as string).length > 0
+        ? (initialData.path as string)
+        : null,
+    dirtyKey: SYSTEM_PATH_DIRTY_KEY,
+    dirtyFields,
+    notifyMeta: notifyMetaListeners,
+  })
+
+  const availableLocalesSlot = useTrackedSlot<string[]>({
+    initial: Array.isArray(initialData?.availableLocales) ? [...initialData.availableLocales] : [],
+    dirtyKey: SYSTEM_AVAILABLE_LOCALES_DIRTY_KEY,
+    dirtyFields,
+    notifyMeta: notifyMetaListeners,
+    // The slot holds an array; a fresh reference is never `===` its baseline,
+    // so dirty tracking compares membership, not identity. Stored as a copy.
+    isEqual: sameLocaleSet,
+    clone: (value) => [...value],
+  })
+
   const updateFieldStoreInternal = useCallback(
     (name: string, value: any) => {
       const newFieldValues = { ...fieldValues.current }
@@ -330,10 +336,10 @@ export const FormProvider = ({
   const resetHasChanges = useCallback(() => {
     dirtyFields.current.clear()
     patchesRef.current = []
-    initialSystemPath.current = systemPathRef.current
-    initialSystemAvailableLocales.current = [...systemAvailableLocalesRef.current]
+    pathSlot.commitInitial()
+    availableLocalesSlot.commitInitial()
     notifyMetaListeners()
-  }, [notifyMetaListeners])
+  }, [notifyMetaListeners, pathSlot.commitInitial, availableLocalesSlot.commitInitial])
 
   const isDirty = useCallback((fieldName: string) => {
     return dirtyFields.current.has(fieldName)
@@ -367,68 +373,6 @@ export const FormProvider = ({
     return { reason, contentDirty, pathDirty, availableLocalesDirty }
   }, [])
 
-  // -------------------------------------------------------------------------
-  // System path slot
-  // -------------------------------------------------------------------------
-
-  const getSystemPath = useCallback(() => systemPathRef.current, [])
-
-  const setSystemPath = useCallback(
-    (value: string | null) => {
-      systemPathRef.current = value
-      if (value !== initialSystemPath.current) {
-        dirtyFields.current.add(SYSTEM_PATH_DIRTY_KEY)
-      } else {
-        dirtyFields.current.delete(SYSTEM_PATH_DIRTY_KEY)
-      }
-      systemPathListeners.current.forEach((listener) => {
-        listener(value)
-      })
-      notifyMetaListeners()
-    },
-    [notifyMetaListeners]
-  )
-
-  const subscribeSystemPath = useCallback((listener: SystemPathListener) => {
-    systemPathListeners.current.add(listener)
-    return () => {
-      systemPathListeners.current.delete(listener)
-    }
-  }, [])
-
-  // -------------------------------------------------------------------------
-  // System available-locales slot
-  // -------------------------------------------------------------------------
-
-  const getSystemAvailableLocales = useCallback(() => systemAvailableLocalesRef.current, [])
-
-  const setSystemAvailableLocales = useCallback(
-    (value: string[]) => {
-      const next = [...value]
-      systemAvailableLocalesRef.current = next
-      if (!sameLocaleSet(next, initialSystemAvailableLocales.current)) {
-        dirtyFields.current.add(SYSTEM_AVAILABLE_LOCALES_DIRTY_KEY)
-      } else {
-        dirtyFields.current.delete(SYSTEM_AVAILABLE_LOCALES_DIRTY_KEY)
-      }
-      systemAvailableLocalesListeners.current.forEach((listener) => {
-        listener(next)
-      })
-      notifyMetaListeners()
-    },
-    [notifyMetaListeners]
-  )
-
-  const subscribeSystemAvailableLocales = useCallback(
-    (listener: SystemAvailableLocalesListener) => {
-      systemAvailableLocalesListeners.current.add(listener)
-      return () => {
-        systemAvailableLocalesListeners.current.delete(listener)
-      }
-    },
-    []
-  )
-
   // ---------------------------------------------------------------------------
   // Pending uploads (deferred until save)
   // ---------------------------------------------------------------------------
@@ -715,12 +659,12 @@ export const FormProvider = ({
         setFieldUploading,
         getIsFieldUploading,
         subscribeFieldUploading,
-        getSystemPath,
-        setSystemPath,
-        subscribeSystemPath,
-        getSystemAvailableLocales,
-        setSystemAvailableLocales,
-        subscribeSystemAvailableLocales,
+        getSystemPath: pathSlot.get,
+        setSystemPath: pathSlot.set,
+        subscribeSystemPath: pathSlot.subscribe,
+        getSystemAvailableLocales: availableLocalesSlot.get,
+        setSystemAvailableLocales: availableLocalesSlot.set,
+        subscribeSystemAvailableLocales: availableLocalesSlot.subscribe,
       }}
     >
       {children}

package/src/forms/form-modals.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useTranslation } from '@byline/i18n/react'
+import { Button, CloseIcon, IconButton, Modal } from '@byline/ui/react'
+import cx from 'classnames'
+
+import styles from './form-renderer.module.css'
+
+/**
+ * Shown when the editor triggers a guarded action (status change, duplicate,
+ * copy-to-locale) while the form is dirty. Those actions operate on the saved
+ * version, so the editor must save first.
+ */
+export const UnsavedChangesModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation('byline-admin')
+  return (
+    <Modal isOpen={true} closeOnOverlayClick={true} onDismiss={onClose}>
+      <Modal.Container style={{ maxWidth: '460px' }}>
+        <Modal.Header className={cx('byline-form-guard-modal-head', styles['guard-modal-head'])}>
+          <h3 className={cx('byline-form-guard-modal-title', styles['guard-modal-title'])}>
+            {t('forms.unsavedChanges.title')}
+          </h3>
+        </Modal.Header>
+        <Modal.Content>
+          <p className={cx('byline-form-guard-modal-text', styles['guard-modal-text'])}>
+            {t('forms.unsavedChanges.message')}
+          </p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            size="sm"
+            style={{ minWidth: '60px' }}
+            intent="primary"
+            type="button"
+            onClick={onClose}
+          >
+            {t('forms.unsavedChanges.okButton')}
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}
+
+/**
+ * Confirms an immediate, non-versioned write of the document-grain system
+ * fields (path / advertised locales) — which does NOT reset workflow status.
+ * When content is also dirty, the copy reassures that content edits still
+ * follow the normal revision + publish workflow. See docs/I18N.md.
+ */
+export const SystemFieldsConfirmModal = ({
+  contentDirty,
+  pathDirty,
+  availableLocalesDirty,
+  onCancel,
+  onConfirm,
+}: {
+  contentDirty: boolean
+  pathDirty: boolean
+  availableLocalesDirty: boolean
+  onCancel: () => void
+  onConfirm: () => void
+}) => {
+  const { t } = useTranslation('byline-admin')
+  return (
+    <Modal isOpen={true} closeOnOverlayClick={true} onDismiss={onCancel}>
+      <Modal.Container style={{ maxWidth: '520px' }}>
+        <Modal.Header className={cx('byline-form-guard-modal-head', styles['guard-modal-head'])}>
+          <h3 className={cx('byline-form-guard-modal-title', styles['guard-modal-title'])}>
+            {contentDirty
+              ? t('forms.systemFieldsConfirm.bothTitle')
+              : t('forms.systemFieldsConfirm.title')}
+          </h3>
+          <IconButton aria-label={t('common.actions.close')} size="xs" onClick={onCancel}>
+            <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+          </IconButton>
+        </Modal.Header>
+        <Modal.Content className="prose">
+          {/* Lead with reassurance: content edits follow the normal
+              revision + publish workflow. The immediate, document-level
+              system-field write is explained below the divider. */}
+          {contentDirty && (
+            <p className={cx('byline-form-system-fields-content-note', 'm-0 mt-2')}>
+              {t('forms.systemFieldsConfirm.contentNote')}
+            </p>
+          )}
+          <p
+            className="m-0 mt-2"
+            style={
+              contentDirty
+                ? {
+                    marginTop: 'var(--spacing-8)',
+                    paddingTop: 'var(--spacing-12)',
+                    borderTop: '1px solid var(--border-color)',
+                  }
+                : undefined
+            }
+          >
+            {t('forms.systemFieldsConfirm.intro')}
+          </p>
+          <ul className={cx('byline-form-system-fields-list', styles['guard-modal-text'], 'm-0')}>
+            {pathDirty && <li>{t('forms.systemFieldsConfirm.bulletPath')}</li>}
+            {availableLocalesDirty && <li>{t('forms.systemFieldsConfirm.bulletLocales')}</li>}
+          </ul>
+          <p
+            className={cx('byline-form-system-fields-effect', styles['guard-modal-text'])}
+            style={{
+              marginTop: 'var(--spacing-4)',
+              marginBottom: 0,
+              color: 'var(--text-subtle)',
+            }}
+          >
+            {t('forms.systemFieldsConfirm.effectLine')}
+          </p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            size="sm"
+            style={{ minWidth: '80px' }}
+            intent="noeffect"
+            type="button"
+            onClick={onCancel}
+          >
+            {t('common.actions.cancel')}
+          </Button>
+          <Button
+            size="sm"
+            style={{ minWidth: '80px' }}
+            intent="primary"
+            type="button"
+            onClick={onConfirm}
+          >
+            {t('forms.systemFieldsConfirm.confirmButton')}
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}
+
+/**
+ * Blocks router navigation / browser unload while the form is dirty. Driven by
+ * the navigation-guard adapter's `isBlocked` state; `onStay` keeps the editor
+ * on the page, `onProceed` discards and continues.
+ */
+export const NavigationGuardModal = ({
+  onStay,
+  onProceed,
+}: {
+  onStay: () => void
+  onProceed: () => void
+}) => {
+  const { t } = useTranslation('byline-admin')
+  return (
+    <Modal isOpen={true} closeOnOverlayClick={false} onDismiss={onStay}>
+      <Modal.Container style={{ maxWidth: '460px' }}>
+        <Modal.Header className={cx('byline-form-guard-modal-head', styles['guard-modal-head'])}>
+          <h3 className={cx('byline-form-guard-modal-title', styles['guard-modal-title'])}>
+            {t('forms.navigationGuard.title')}
+          </h3>
+        </Modal.Header>
+        <Modal.Content>
+          <p className={cx('byline-form-guard-modal-text', styles['guard-modal-text'])}>
+            {t('forms.navigationGuard.message')}
+          </p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button size="sm" intent="noeffect" type="button" onClick={onStay}>
+            {t('forms.navigationGuard.stayButton')}
+          </Button>
+          <Button size="sm" intent="danger" type="button" onClick={onProceed}>
+            {t('forms.navigationGuard.leaveButton')}
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}