feat: copy versions to new docs (#751)

Author: stevenle

.changeset/wise-ways-pretend.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: copy versions to new docs (#751)

packages/root-cms/ui/components/CopyDocModal/CopyDocModal.tsx

@@ -5,7 +5,7 @@ import {useState} from 'preact/hooks';
 import {route} from 'preact-router';
 import {isSlugValid, normalizeSlug} from '../../../shared/slug.js';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
-import {cmsCopyDoc} from '../../utils/doc.js';
+import {cmsCopyDoc, cmsCreateDoc} from '../../utils/doc.js';
 import {SlugInput} from '../SlugInput/SlugInput.js';
 import {Text} from '../Text/Text.js';
 import './CopyDocModal.css';
@@ -15,16 +15,19 @@ const MODAL_ID = 'CopyDocModal';
 export interface CopyDocModalProps {
   [key: string]: unknown;
   fromDocId: string;
+  fields?: Record<string, any>;
+  fromLabel?: string;
+  onSuccess?: (newDocId: string) => void;
 }
 
 export function useCopyDocModal(props: CopyDocModalProps) {
   const modals = useModals();
   const modalTheme = useModalTheme();
   return {
-    open: () => {
+    open: (overrideProps?: Partial<CopyDocModalProps>) => {
       modals.openContextModal(MODAL_ID, {
         ...modalTheme,
-        innerProps: props,
+        innerProps: {...props, ...overrideProps},
       });
     },
   };
@@ -40,6 +43,7 @@ export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
 
   const fromDocId = props.fromDocId;
   const fromCollectionId = fromDocId.split('/')[0];
+  const sourceLabel = props.fromLabel || fromDocId;
 
   async function onSubmit(e: Event) {
     e.preventDefault();
@@ -61,13 +65,23 @@ export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
 
     const toDocId = `${toCollectionId}/${cleanSlug}`;
     try {
-      await cmsCopyDoc(fromDocId, toDocId, {overwrite: confirmOverwrite});
+      if (props.fields) {
+        await cmsCreateDoc(toDocId, {
+          fields: props.fields,
+          overwrite: confirmOverwrite,
+        });
+      } else {
+        await cmsCopyDoc(fromDocId, toDocId, {overwrite: confirmOverwrite});
+      }
       context.closeModal(id);
       showNotification({
         title: 'Copied!',
-        message: `Succesfully copied ${fromDocId} to ${toDocId}.`,
+        message: `Succesfully copied ${sourceLabel} to ${toDocId}.`,
         autoClose: 5000,
       });
+      if (props.onSuccess) {
+        props.onSuccess(toDocId);
+      }
     } catch (err) {
       const errMsg = String(err);
       setError(errMsg);
@@ -93,7 +107,7 @@ export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
             From:
           </Text>
           <Text className="CopyDocModal__from__value" size="body-sm">
-            <code>{props.fromDocId}</code>
+            <code>{sourceLabel}</code>
           </Text>
         </div>
 

packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.tsx

@@ -1,10 +1,11 @@
 import {Button, Loader, Table} from '@mantine/core';
 import {ContextModalProps, useModals} from '@mantine/modals';
 import {showNotification} from '@mantine/notifications';
-import {IconArrowUpRight, IconHistory} from '@tabler/icons-preact';
+import {IconArrowUpRight, IconCopy, IconHistory} from '@tabler/icons-preact';
 import {useEffect, useState} from 'preact/hooks';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
 import {Version, cmsListVersions, cmsRestoreVersion} from '../../utils/doc.js';
+import {useCopyDocModal} from '../CopyDocModal/CopyDocModal.js';
 import {Heading} from '../Heading/Heading.js';
 import {Text} from '../Text/Text.js';
 import './VersionHistoryModal.css';
@@ -34,10 +35,11 @@ export function useVersionHistoryModal(props: VersionHistoryModalProps) {
 export function VersionHistoryModal(
   modalProps: ContextModalProps<VersionHistoryModalProps>
 ) {
-  const {innerProps: props} = modalProps;
+  const {innerProps: props, context, id} = modalProps;
   const docId = props.docId;
   const [loading, setLoading] = useState(true);
   const [versions, setVersions] = useState<Version[]>([]);
+  const copyDocModal = useCopyDocModal({fromDocId: docId});
 
   const dateFormat = new Intl.DateTimeFormat('en-US', {
     year: 'numeric',
@@ -68,6 +70,22 @@ export function VersionHistoryModal(
     }
   }
 
+  function copyToNewDoc(version: Version) {
+    let label = `${docId}@${version._versionId}`;
+    const modifiedAt = version.sys?.modifiedAt?.toDate();
+    if (modifiedAt) {
+      const isoDate = formatIsoDate(modifiedAt);
+      label = `${docId}@${isoDate}`;
+    }
+    copyDocModal.open({
+      fields: version.fields || {},
+      fromLabel: label,
+      onSuccess: () => {
+        context.closeModal(id);
+      },
+    });
+  }
+
   function getCompareUrl(version: Version) {
     const left = toUrlParam(docId, version._versionId);
     const right = toUrlParam(docId, 'draft');
@@ -128,6 +146,15 @@ export function VersionHistoryModal(
                     >
                       restore
                     </Button>
+                    <Button
+                      variant="default"
+                      size="xs"
+                      compact
+                      onClick={() => copyToNewDoc(version)}
+                      leftIcon={<IconCopy size={12} />}
+                    >
+                      copy to doc
+                    </Button>
                     <Button
                       className="VersionHistoryModal__versions__buttons__compare"
                       component="a"
@@ -157,4 +184,13 @@ function toUrlParam(docId: string, versionId: string): string {
     .replaceAll('%40', '@');
 }
 
+function formatIsoDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
 VersionHistoryModal.id = MODAL_ID;