feat: adds ability for form creator to duplicate Page and all patterns within it (#622)

Author: mpflex

packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx

@@ -35,8 +35,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
     focusPatternType === 'repeater' || focusPatternType === 'fieldset';
   const isSummary = focusPatternType === 'form-summary';
   const isPagePattern = focusPatternType === 'page';
-  const { copyPattern } = useFormManagerStore(state => ({
+  const { copyPattern, copyPage } = useFormManagerStore(state => ({
     copyPattern: state.copyPattern,
+    copyPage: state.copyPage,
   }));
   const pages = useFormManagerStore(state =>
     Object.values<Pattern>(state.session.form.patterns).filter(
@@ -67,6 +68,12 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
     }
   };
 
+  const handleCopyPage = () => {
+    if (focusPatternId && isPagePattern) {
+      copyPage(focusPatternId);
+    }
+  };
+
   return (
     <div
       className={`${styles.patternActionWrapper} margin-top-2 margin-bottom-1 padding-top-1 width-full pattern-edit-panel base-dark text-right`}
@@ -90,12 +97,20 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
           >
             <button
               type="button"
-              aria-label="Create a copy of this pattern"
-              title="Create a copy of this pattern"
+              aria-label={
+                isPagePattern
+                  ? 'Create a copy of this page'
+                  : 'Create a copy of this pattern'
+              }
+              title={
+                isPagePattern
+                  ? 'Create a copy of this page'
+                  : 'Create a copy of this pattern'
+              }
               className="usa-button--outline usa-button--unstyled"
               onClick={event => {
                 event.preventDefault();
-                handleCopyPattern();
+                isPagePattern ? handleCopyPage() : handleCopyPattern();
               }}
             >
               <svg

packages/design/src/FormManager/FormEdit/store.ts

@@ -31,6 +31,7 @@ export type FormEditSlice = {
   ) => void;
   clearFocus: () => void;
   copyPattern: (parentPatternId: PatternId, patternId: PatternId) => void;
+  copyPage: (pageId: PatternId) => void;
   deletePattern: (id: PatternId) => void;
   deleteSelectedPattern: () => void;
   movePattern: (
@@ -121,6 +122,22 @@ export const createFormEditSlice =
       });
       state.addNotification('success', 'Element copied successfully.');
     },
+
+    copyPage: (pageId: PatternId) => {
+      const state = get();
+      const builder = new BlueprintBuilder(
+        state.context.config,
+        state.session.form
+      );
+      const newPage = builder.copyPage(pageId);
+
+      set({
+        session: mergeSession(state.session, { form: builder.form }),
+        focus: { pattern: newPage },
+      });
+      state.addNotification('success', 'Page copied successfully.');
+    },
+
     addPatternToCompoundField: (patternType, targetPattern) => {
       const state = get();
       const builder = new BlueprintBuilder(

packages/forms/src/blueprint.ts

@@ -263,6 +263,120 @@ export const movePatternBetweenPages = (
   };
 };
 
+/**
+ * Copies a page from a blueprint by creating a duplicate with a new ID.
+ * This also copies all patterns contained within the page and updates their references.
+ *
+ */
+export const copyPage = (
+  bp: Blueprint,
+  pageId: PatternId
+): { bp: Blueprint; pattern: PagePattern } => {
+  const pagePattern = bp.patterns[pageId] as PagePattern;
+  if (!pagePattern || pagePattern.type !== 'page') {
+    throw new Error(`Pattern with id ${pageId} is not a page.`);
+  }
+
+  const newPageId = generatePatternId();
+  const timestamp = new Date().toLocaleString();
+
+  const newPage: PagePattern = {
+    ...pagePattern,
+    id: newPageId,
+    data: {
+      ...pagePattern.data,
+      title: `${pagePattern.data.title} Copy - ${timestamp}`,
+      patterns: [],
+    },
+  };
+
+  let updatedBp: Blueprint = {
+    ...bp,
+    patterns: {
+      ...bp.patterns,
+      [newPageId]: newPage,
+    },
+  };
+
+  const idMap = new Map<PatternId, PatternId>();
+
+  const copyPatternAndChildren = (
+    currentBp: Blueprint,
+    patternId: PatternId
+  ): { bp: Blueprint; newId: PatternId } => {
+    const originalPattern = currentBp.patterns[patternId];
+    if (!originalPattern) {
+      throw new Error(`Pattern with id ${patternId} not found`);
+    }
+
+    if (idMap.has(patternId)) {
+      return { bp: currentBp, newId: idMap.get(patternId) as PatternId };
+    }
+
+    const newId = generatePatternId();
+    idMap.set(patternId, newId);
+
+    const newPattern: Pattern = {
+      ...originalPattern,
+      id: newId,
+      data: { ...originalPattern.data },
+    };
+
+    let resultBp = {
+      ...currentBp,
+      patterns: {
+        ...currentBp.patterns,
+        [newId]: newPattern,
+      },
+    };
+
+    if (
+      (newPattern.type === 'fieldset' || newPattern.type === 'repeater') &&
+      Array.isArray(originalPattern.data.patterns)
+    ) {
+      const newChildren: PatternId[] = [];
+
+      for (const childId of originalPattern.data.patterns) {
+        const { bp: updatedBp, newId: newChildId } = copyPatternAndChildren(
+          resultBp,
+          childId
+        );
+        resultBp = updatedBp;
+        newChildren.push(newChildId);
+      }
+      resultBp.patterns[newId].data.patterns = newChildren;
+    }
+    return { bp: resultBp, newId };
+  };
+
+  for (const patternId of pagePattern.data.patterns) {
+    if (bp.patterns[patternId]) {
+      const { bp: newState } = copyPatternAndChildren(updatedBp, patternId);
+      updatedBp = newState;
+    }
+  }
+
+  newPage.data.patterns = pagePattern.data.patterns.map(
+    id => idMap.get(id) || id
+  );
+  updatedBp.patterns[newPageId] = newPage;
+
+  const pageSet = updatedBp.patterns[updatedBp.root] as PageSetPattern;
+  if (pageSet.type === 'page-set') {
+    updatedBp.patterns[pageSet.id] = {
+      ...pageSet,
+      data: {
+        pages: [...pageSet.data.pages, newPageId],
+      },
+    } as PageSetPattern;
+  }
+
+  return {
+    bp: updatedBp,
+    pattern: updatedBp.patterns[newPageId] as PagePattern,
+  };
+};
+
 /**
  * Copies a pattern from a blueprint by creating a duplicate with a new ID.
  *

packages/forms/src/builder/builder.test.ts

@@ -569,6 +569,55 @@ describe('form builder', () => {
     });
   });
 
+  it('copy page with all its patterns', () => {
+    const initial = createTwoPageThreePatternTestForm();
+    const builder = new BlueprintBuilder(defaultFormConfig, initial);
+    const sourcePage = getPattern<PagePattern>(initial, 'page-1');
+    const newPage = builder.copyPage(sourcePage.id);
+
+    expect(newPage.type).toEqual('page');
+    expect(newPage.id).not.toEqual(sourcePage.id);
+    expect(newPage.data.title).toMatch(
+      /Page 1 Copy - \d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}:\d{2} [AP]M/
+    );
+
+    const pageSet = builder.form.patterns[builder.form.root] as PageSetPattern;
+    expect(pageSet.data.pages.length).toEqual(3);
+    expect(pageSet.data.pages).toContain(newPage.id);
+
+    expect(newPage.data.patterns.length).toEqual(
+      sourcePage.data.patterns.length
+    );
+
+    expect(newPage.data.patterns).not.toEqual(sourcePage.data.patterns);
+
+    for (let i = 0; i < newPage.data.patterns.length; i++) {
+      const originalPatternId = sourcePage.data.patterns[i];
+      const newPatternId = newPage.data.patterns[i];
+      const originalPattern = initial.patterns[originalPatternId];
+      const newPattern = builder.form.patterns[newPatternId];
+
+      expect(newPattern.type).toEqual(originalPattern.type);
+
+      expect(newPattern.id).not.toEqual(originalPattern.id);
+
+      if (newPattern.type === 'input') {
+        expect((newPattern as InputPattern).data.label).toMatch(
+          /Pattern \d{1}/
+        );
+        expect((newPattern as InputPattern).data.required).toEqual(
+          (originalPattern as InputPattern).data.required
+        );
+      }
+    }
+
+    Object.keys(initial.patterns).forEach(patternId => {
+      expect(builder.form.patterns[patternId]).toBeDefined();
+    });
+
+    expect(Object.keys(builder.form.patterns).length).toEqual(9);
+  });
+
   it('removePattern removes pattern and sequence reference', () => {
     const initial = createTestBlueprint();
     const builder = new BlueprintBuilder(defaultFormConfig, initial);

packages/forms/src/builder/index.ts

@@ -5,6 +5,7 @@ import {
   addPatternToPage,
   addPatternToRepeater,
   copyPattern,
+  copyPage,
   createOnePageBlueprint,
   movePatternBetweenPages,
   removePatternFromBlueprint,
@@ -108,8 +109,17 @@ export class BlueprintBuilder {
     return pattern;
   }
 
+  copyPage(pageId: PatternId) {
+    const root = this.form.patterns[this.form.root] as PageSetPattern;
+    if (root.type !== 'page-set') {
+      throw new Error('expected root to be a page-set');
+    }
+    const results = copyPage(this.form, pageId);
+    this.bp = results.bp;
+    return results.pattern;
+  }
+
   copyPattern(parentPatternId: PatternId, patternId: PatternId) {
-    const pattern = getPattern(this.form, patternId);
     const root = this.form.patterns[this.form.root] as PageSetPattern;
     if (root.type !== 'page-set') {
       throw new Error('expected root to be a page-set');