@byline/admin 5.1.3 → 5.2.0

package/dist/forms/document-actions.jsx

@@ -1,486 +0,0 @@
-'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 { useState } from 'react';
-import { useTranslation } from '@byline/i18n/react';
-import { Button, Checkbox, CloseIcon, DeleteIcon, Dropdown as DropdownComponent, EllipsisIcon, IconButton, Modal, Select, } from '@byline/ui/react';
-import cx from 'clsx';
-import styles from './document-actions.module.css';
-const DUPLICATE_TITLE_SUFFIX = ' (copy)';
-export function DocumentActions({ disabled = false, publishedVersion, onUnpublish, onDelete, onDuplicate, sourceTitle, onCopyToLocale, sourceLocale, contentLocales, hasUnsavedChanges, onUnsavedChanges, onDeleteLocale, defaultLocale, availableLocales, scheduledPublicationState, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, }) {
-    const { t } = useTranslation('byline-admin');
-    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-    const [showDuplicateConfirm, setShowDuplicateConfirm] = useState(false);
-    const [duplicateBusy, setDuplicateBusy] = useState(false);
-    // Copy-to-Locale modal state. The menu item is hidden entirely unless
-    // the host has supplied a handler AND there is at least one *other*
-    // locale to copy into.
-    const availableTargetLocales = (contentLocales ?? []).filter((loc) => loc.code !== sourceLocale);
-    const copyToLocaleAvailable = onCopyToLocale != null && availableTargetLocales.length > 0;
-    const [showCopyToLocaleConfirm, setShowCopyToLocaleConfirm] = useState(false);
-    const [copyToLocaleBusy, setCopyToLocaleBusy] = useState(false);
-    const [copyTargetLocale, setCopyTargetLocale] = useState(availableTargetLocales[0]?.code ?? '');
-    const [copyOverwrite, setCopyOverwrite] = useState(false);
-    // Delete-Locale modal state. The menu item is hidden unless the host
-    // supplied a handler AND the document has at least one non-default locale
-    // with content. The default locale is the document's anchor and is never
-    // listed (it cannot be removed).
-    const deletableLocales = (availableLocales ?? [])
-        .filter((code) => code !== defaultLocale && code !== 'all')
-        .map((code) => ({
-        code,
-        label: contentLocales?.find((loc) => loc.code === code)?.label ?? code,
-    }));
-    const deleteLocaleAvailable = onDeleteLocale != null && deletableLocales.length > 0;
-    const [showDeleteLocaleConfirm, setShowDeleteLocaleConfirm] = useState(false);
-    const [deleteLocaleBusy, setDeleteLocaleBusy] = useState(false);
-    const [deleteTargetLocale, setDeleteTargetLocale] = useState('');
-    // Scheduled-publication menu items. The derived state already accounts for
-    // eligibility and for the abilities the actor holds, so the only thing left
-    // here is to map the permitted operations onto entries. The group renders
-    // above the locale and duplicate items because scheduling acts on the
-    // document's lifecycle rather than on its copies.
-    const scheduling = scheduledPublicationState;
-    const schedulingActions = [];
-    if (scheduling != null) {
-        if (scheduling.actions.schedule && onSchedulePublication != null) {
-            schedulingActions.push({
-                key: 'schedule',
-                // Short form: the menu supplies the "this document" context that the
-                // modal's title and submit button have to spell out for themselves.
-                label: t('scheduledPublication.actions.scheduleMenuItem'),
-                onSelect: onSchedulePublication,
-            });
-        }
-        if (scheduling.actions.confirm && onConfirmScheduledPublication != null) {
-            schedulingActions.push({
-                key: 'confirm',
-                label: t('scheduledPublication.actions.confirm'),
-                onSelect: () => void onConfirmScheduledPublication(),
-            });
-        }
-        if (scheduling.actions.reschedule && onSchedulePublication != null) {
-            schedulingActions.push({
-                key: 'reschedule',
-                label: t('scheduledPublication.actions.reschedule'),
-                onSelect: onSchedulePublication,
-            });
-        }
-        if (scheduling.actions.cancel && onCancelScheduledPublication != null) {
-            schedulingActions.push({
-                key: 'cancel',
-                label: t('scheduledPublication.actions.cancel'),
-                onSelect: () => void onCancelScheduledPublication(),
-            });
-        }
-    }
-    // Whether the ellipsis menu has anything to show. Every entry below is
-    // conditional, so with no available action the trigger would open an empty
-    // menu.
-    const hasAnyAction = schedulingActions.length > 0 ||
-        copyToLocaleAvailable ||
-        deleteLocaleAvailable ||
-        onDuplicate != null ||
-        onDelete != null;
-    const handleOnDelete = () => {
-        if (disabled)
-            return;
-        setShowDeleteConfirm(false);
-        if (onDelete) {
-            void onDelete().catch(() => { });
-        }
-    };
-    const handleOnDuplicate = async () => {
-        if (disabled)
-            return;
-        if (!onDuplicate)
-            return;
-        setDuplicateBusy(true);
-        try {
-            await onDuplicate();
-            setShowDuplicateConfirm(false);
-        }
-        catch {
-            // The host reports the failure and retains the editor observation.
-        }
-        finally {
-            setDuplicateBusy(false);
-        }
-    };
-    const handleOpenDuplicate = () => {
-        if (disabled)
-            return;
-        // Duplicate copies the saved version — block when the form is dirty so
-        // unsaved edits are not silently dropped from the copy.
-        if (hasUnsavedChanges) {
-            onUnsavedChanges?.();
-            return;
-        }
-        setShowDuplicateConfirm(true);
-    };
-    const handleOpenCopyToLocale = () => {
-        if (disabled)
-            return;
-        // Copy-to-Locale reads the saved version — block when the form is dirty.
-        if (hasUnsavedChanges) {
-            onUnsavedChanges?.();
-            return;
-        }
-        // Reset on open: pick the first available target and clear the
-        // overwrite checkbox so a previous-session "overwrite=true" choice
-        // is not silently sticky.
-        setCopyTargetLocale(availableTargetLocales[0]?.code ?? '');
-        setCopyOverwrite(false);
-        setShowCopyToLocaleConfirm(true);
-    };
-    const handleOnCopyToLocale = async () => {
-        if (disabled)
-            return;
-        if (!onCopyToLocale || !copyTargetLocale)
-            return;
-        setCopyToLocaleBusy(true);
-        try {
-            await onCopyToLocale({ targetLocale: copyTargetLocale, overwrite: copyOverwrite });
-            setShowCopyToLocaleConfirm(false);
-        }
-        catch {
-            // The host reports the failure and retains the editor observation.
-        }
-        finally {
-            setCopyToLocaleBusy(false);
-        }
-    };
-    const handleOpenDeleteLocale = () => {
-        if (disabled)
-            return;
-        // Delete-Locale removes the saved version's locale content — block when
-        // the form is dirty so the editor saves (or discards) first.
-        if (hasUnsavedChanges) {
-            onUnsavedChanges?.();
-            return;
-        }
-        // Default to the currently-viewed locale when it is deletable, otherwise
-        // the first available target.
-        const preferred = deletableLocales.find((loc) => loc.code === sourceLocale)?.code;
-        setDeleteTargetLocale(preferred ?? deletableLocales[0]?.code ?? '');
-        setShowDeleteLocaleConfirm(true);
-    };
-    const handleOnDeleteLocale = async () => {
-        if (disabled)
-            return;
-        if (!onDeleteLocale || !deleteTargetLocale)
-            return;
-        setDeleteLocaleBusy(true);
-        try {
-            await onDeleteLocale({ targetLocale: deleteTargetLocale });
-            setShowDeleteLocaleConfirm(false);
-        }
-        catch {
-            // The host reports the failure and retains the editor observation.
-        }
-        finally {
-            setDeleteLocaleBusy(false);
-        }
-    };
-    // Preview text shown inside the modal. Falls back to the literal suffix
-    // when no source title is supplied (collections without `useAsTitle`).
-    const duplicatePreviewBefore = sourceTitle ?? '';
-    const duplicatePreviewAfter = (sourceTitle ?? '') + DUPLICATE_TITLE_SUFFIX;
-    const sourceLocaleLabel = contentLocales?.find((loc) => loc.code === sourceLocale)?.label ?? sourceLocale ?? '';
-    return (<>
-      {hasAnyAction && (<DropdownComponent.Root>
-          <DropdownComponent.Trigger disabled={disabled} render={<IconButton variant="text" intent="noeffect" size="sm"/>}>
-            <EllipsisIcon className={cx('byline-form-actions-icon', styles.icon)} width="15px" height="15px"/>
-          </DropdownComponent.Trigger>
-
-          <DropdownComponent.Portal>
-            <DropdownComponent.Content className={cx('byline-form-actions-menu', styles.menu)} align="end" data-side="top" sideOffset={10}>
-              {/*{publishedVersion && (
-            <>
-              <DropdownComponent.Item disabled={disabled} onClick={onUnpublish}>
-                <div className={cx('byline-form-actions-item', styles.item)}>
-                  <span className={cx('byline-form-actions-item-icon', styles['item-icon'])} />
-                  <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                    Unpublish
-                  </span>
-                </div>
-              </DropdownComponent.Item>
-              <DropdownComponent.Separator />
-            </>
-          )}*/}
-              {schedulingActions.length > 0 && (<>
-                  {schedulingActions.map((action) => (<DropdownComponent.Item disabled={disabled} key={action.key} onClick={action.onSelect}>
-                      <div className={cx('byline-form-actions-item', styles.item)}>
-                        <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                          <button type="button" disabled={disabled}>
-                            {action.label}
-                          </button>
-                        </span>
-                      </div>
-                    </DropdownComponent.Item>))}
-                  <DropdownComponent.Separator />
-                </>)}
-              {copyToLocaleAvailable && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenCopyToLocale}>
-                  <div className={cx('byline-form-actions-item', styles.item)}>
-                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button" disabled={disabled}>
-                        {t('documentActions.copyToLocaleMenuItem')}
-                      </button>
-                    </span>
-                  </div>
-                </DropdownComponent.Item>)}
-              {deleteLocaleAvailable && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenDeleteLocale}>
-                  <div className={cx('byline-form-actions-item', styles.item)}>
-                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button" disabled={disabled}>
-                        {t('documentActions.deleteLocale.menuItem')}
-                      </button>
-                    </span>
-                  </div>
-                </DropdownComponent.Item>)}
-              {onDuplicate && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenDuplicate}>
-                  <div className={cx('byline-form-actions-item', styles.item)}>
-                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                      <button type="button" disabled={disabled}>
-                        {t('common.actions.duplicate')}
-                      </button>
-                    </span>
-                  </div>
-                </DropdownComponent.Item>)}
-              {onDelete && (<>
-                  <DropdownComponent.Separator />
-                  <DropdownComponent.Item disabled={disabled} onClick={() => {
-                    setShowDeleteConfirm(true);
-                }}>
-                    <div className={cx('byline-form-actions-item', styles.item)}>
-                      <span className={cx('byline-form-actions-item-icon', styles['item-icon'])}>
-                        <DeleteIcon width="16px" height="16px"/>
-                      </span>
-                      <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
-                        <button type="button" className={cx('byline-form-actions-delete', styles.delete)}>
-                          {t('common.actions.delete')}
-                        </button>
-                      </span>
-                    </div>
-                  </DropdownComponent.Item>
-                </>)}
-            </DropdownComponent.Content>
-          </DropdownComponent.Portal>
-        </DropdownComponent.Root>)}
-
-      <Modal isOpen={showDeleteConfirm} closeOnOverlayClick={true} onDismiss={() => {
-            setShowDeleteConfirm(false);
-        }}>
-        <Modal.Container style={{ maxWidth: '500px' }}>
-          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
-            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
-              {t('documentActions.delete.title')}
-            </h3>
-            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
-            setShowDeleteConfirm(false);
-        }}>
-              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
-            </IconButton>
-          </Modal.Header>
-          <Modal.Content>
-            <p>{t('documentActions.delete.warning')}</p>
-          </Modal.Content>
-          <Modal.Actions>
-            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
-              no action
-            </button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
-            setShowDeleteConfirm(false);
-        }}>
-              {t('common.actions.cancel')}
-            </Button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="danger" disabled={disabled} onClick={handleOnDelete}>
-              {t('common.actions.delete')}
-            </Button>
-          </Modal.Actions>
-        </Modal.Container>
-      </Modal>
-
-      <Modal isOpen={showDuplicateConfirm} closeOnOverlayClick={!duplicateBusy} onDismiss={() => {
-            if (!duplicateBusy)
-                setShowDuplicateConfirm(false);
-        }}>
-        <Modal.Container style={{ maxWidth: '560px' }}>
-          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
-            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
-              {t('documentActions.duplicate.title')}
-            </h3>
-            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
-            if (!duplicateBusy)
-                setShowDuplicateConfirm(false);
-        }}>
-              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
-            </IconButton>
-          </Modal.Header>
-          <Modal.Content className="prose">
-            <p className="m-0">{t('documentActions.duplicate.intro')}</p>
-            <ul className={cx('byline-form-actions-list', styles.list)}>
-              <li>
-                {t('documentActions.duplicate.bulletTitle')}{' '}
-                <code>{DUPLICATE_TITLE_SUFFIX.trim()}</code>.
-              </li>
-              <li>{t('documentActions.duplicate.bulletPath')}</li>
-            </ul>
-            {sourceTitle != null && sourceTitle.length > 0 && (<div className={cx('byline-form-actions-preview', styles.preview)}>
-                <div className={cx('byline-form-actions-preview-label', styles['preview-label'])}>
-                  {t('documentActions.duplicate.previewLabel')}
-                </div>
-                <div className={cx('byline-form-actions-preview-row', styles['preview-row'])}>
-                  <span className={cx('byline-form-actions-preview-before', styles['preview-before'])}>
-                    {duplicatePreviewBefore}
-                  </span>
-                  <span className={cx('byline-form-actions-preview-arrow', styles['preview-arrow'])}>
-                    →
-                  </span>
-                  <span className={cx('byline-form-actions-preview-after', styles['preview-after'])}>
-                    {duplicatePreviewAfter}
-                  </span>
-                </div>
-              </div>)}
-          </Modal.Content>
-          <Modal.Actions>
-            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
-              no action
-            </button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
-            if (!duplicateBusy)
-                setShowDuplicateConfirm(false);
-        }} disabled={disabled || duplicateBusy}>
-              {t('common.actions.cancel')}
-            </Button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="primary" onClick={handleOnDuplicate} disabled={disabled || duplicateBusy}>
-              {duplicateBusy
-            ? t('documentActions.duplicate.busyButton')
-            : t('common.actions.duplicate')}
-            </Button>
-          </Modal.Actions>
-        </Modal.Container>
-      </Modal>
-
-      <Modal isOpen={showCopyToLocaleConfirm} closeOnOverlayClick={!copyToLocaleBusy} onDismiss={() => {
-            if (!copyToLocaleBusy)
-                setShowCopyToLocaleConfirm(false);
-        }}>
-        <Modal.Container style={{ maxWidth: '560px' }}>
-          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
-            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
-              {t('documentActions.copyToLocale.title')}
-            </h3>
-            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
-            if (!copyToLocaleBusy)
-                setShowCopyToLocaleConfirm(false);
-        }}>
-              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
-            </IconButton>
-          </Modal.Header>
-          <Modal.Content>
-            <p>{t('documentActions.copyToLocale.intro')}</p>
-            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
-              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500 }}>
-                {t('documentActions.copyToLocale.fromLabel')}&nbsp;
-              </span>
-              <span className={cx('byline-form-actions-copy-source', styles['copy-source'])}>
-                {sourceLocaleLabel}
-              </span>
-            </div>
-            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
-              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500, marginRight: 'var(--spacing-8)' }}>
-                {t('documentActions.copyToLocale.toLabel')}
-              </span>
-              <Select size="sm" ariaLabel={t('documentActions.copyToLocale.targetAriaLabel')} value={copyTargetLocale} items={availableTargetLocales.map((loc) => ({
-            value: loc.code,
-            label: loc.label,
-        }))} onValueChange={(value) => {
-            if (value != null)
-                setCopyTargetLocale(value);
-        }} disabled={disabled || copyToLocaleBusy}/>
-            </div>
-            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-16)' }}>
-              <Checkbox id="copy-to-locale-overwrite" name="overwrite" label={t('documentActions.copyToLocale.overwriteLabel')} checked={copyOverwrite} disabled={disabled || copyToLocaleBusy} helpText={t('documentActions.copyToLocale.overwriteHelp')} onCheckedChange={(value) => {
-            setCopyOverwrite(value === true);
-        }}/>
-            </div>
-          </Modal.Content>
-          <Modal.Actions>
-            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
-              no action
-            </button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
-            if (!copyToLocaleBusy)
-                setShowCopyToLocaleConfirm(false);
-        }} disabled={disabled || copyToLocaleBusy}>
-              {t('common.actions.cancel')}
-            </Button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="primary" onClick={handleOnCopyToLocale} disabled={disabled || copyToLocaleBusy || !copyTargetLocale}>
-              {copyToLocaleBusy
-            ? t('documentActions.copyToLocale.busyButton')
-            : t('documentActions.copyToLocale.confirmButton')}
-            </Button>
-          </Modal.Actions>
-        </Modal.Container>
-      </Modal>
-
-      <Modal isOpen={showDeleteLocaleConfirm} closeOnOverlayClick={!deleteLocaleBusy} onDismiss={() => {
-            if (!deleteLocaleBusy)
-                setShowDeleteLocaleConfirm(false);
-        }}>
-        <Modal.Container style={{ maxWidth: '560px' }}>
-          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
-            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
-              {t('documentActions.deleteLocale.title')}
-            </h3>
-            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
-            if (!deleteLocaleBusy)
-                setShowDeleteLocaleConfirm(false);
-        }}>
-              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
-            </IconButton>
-          </Modal.Header>
-          <Modal.Content>
-            <p>{t('documentActions.deleteLocale.intro')}</p>
-            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
-              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500, marginRight: 'var(--spacing-8)' }}>
-                {t('documentActions.deleteLocale.localeLabel')}
-              </span>
-              <Select size="sm" ariaLabel={t('documentActions.deleteLocale.targetAriaLabel')} value={deleteTargetLocale} items={deletableLocales.map((loc) => ({
-            value: loc.code,
-            label: loc.label,
-        }))} onValueChange={(value) => {
-            if (value != null)
-                setDeleteTargetLocale(value);
-        }} disabled={disabled || deleteLocaleBusy}/>
-            </div>
-            <p style={{ marginTop: 'var(--spacing-12)' }}>
-              {t('documentActions.deleteLocale.warning')}
-            </p>
-          </Modal.Content>
-          <Modal.Actions>
-            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
-              no action
-            </button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
-            if (!deleteLocaleBusy)
-                setShowDeleteLocaleConfirm(false);
-        }} disabled={disabled || deleteLocaleBusy}>
-              {t('common.actions.cancel')}
-            </Button>
-            <Button size="sm" style={{ minWidth: '80px' }} intent="danger" onClick={handleOnDeleteLocale} disabled={disabled || deleteLocaleBusy || !deleteTargetLocale}>
-              {deleteLocaleBusy
-            ? t('documentActions.deleteLocale.busyButton')
-            : t('documentActions.deleteLocale.confirmButton')}
-            </Button>
-          </Modal.Actions>
-        </Modal.Container>
-      </Modal>
-    </>);
-}