From 803b4983201a3bd0ecedee3db5b7c70435f78a13 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Fri, 12 Jul 2024 21:48:52 -0600 Subject: [PATCH 01/17] Part 1 of moving question to another page --- .../PreviewSequencePattern/DraggableList.tsx | 2 + .../components/common/PatternEditActions.tsx | 45 ++++++++++++- .../FormEdit/formEditStyles.module.css | 6 ++ .../design/src/FormManager/FormEdit/store.ts | 26 ++++++++ packages/forms/src/builder/index.ts | 64 +++++++++++++++++++ packages/forms/src/index.ts | 40 +++++++++++- 6 files changed, 179 insertions(+), 4 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx index c34841482..307e15366 100644 --- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx @@ -77,6 +77,8 @@ export const DraggableList: React.FC = ({ console.error('undefined patternId', index); return; } + + //console.log('patternId in Drag List: ', patternId); return ( ; -export const PatternEditActions = ({ children }: PatternEditActionsProps) => { +export const PatternEditActions = ({ + children, +}: PatternEditActionsProps) => { children; const context = useFormManagerStore(state => state.context); const { deleteSelectedPattern } = useFormManagerStore(state => ({ deleteSelectedPattern: state.deleteSelectedPattern, })); + const [targetPage, setTargetPage] = useState(''); + const pages = useFormManagerStore(state => + Object.values(state.session.form.patterns).filter(p => p.type === 'page') + ); + const movePatternToPage = useFormManagerStore(state => state.movePattern); + const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); + const sourcePage = pages[1]?.id; + + // Find the index of the current page + const currentPageIndex = 1; + + // Exclude the current page from the move options + const availablePages = pages.slice(1).filter((_, index) => index !== currentPageIndex - 1); + const handleMovePattern = () => { + if (focusPatternId && targetPage) { + movePatternToPage(sourcePage, targetPage, focusPatternId); + } + }; + + console.log('focusPatternId: ', focusPatternId); + console.log('sourcePage: ', sourcePage); + console.log('targetPage: ', targetPage); + console.log('pages: ', pages); + console.log('currentPageIndex: ', currentPageIndex); return ( <>
+ + + + +

+ {dropdownOpen && ( +
+
+ + +
+
+ + +
+

+ +

+
+ )} +
+ + )} + - - + + - - + + + {children ? ( + + {children} + + ) : null} + + +
- - {children ? ( - - {children} - - ) : null} - +
+ ); }; diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css index d80a6b7fd..24d5d6cd9 100644 --- a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css +++ b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css @@ -89,15 +89,6 @@ background: none; } -@media (max-width: 40em) { - .dropdownMenu { - bottom: 4.5rem; - max-height: 40vh; - overflow: auto; - left: 32px; - } -} - .dottedLine { display: flex; align-items: center; @@ -121,6 +112,73 @@ /* Move to Page */ -.moveToPage select { - max-width: 5rem; +.moveToPage, +.questionPosition { + max-width: 21rem; +} + +.patternActionWrapper .dropdownMenu div { + padding: 8px; + cursor: pointer; +} + +.patternActionWrapper .dropdownMenu div:hover { + background: #f0f0f0; +} + +.patternActionWrapper .dropDown { + position: absolute; + top: 3rem; + left: 0; + background-color: white; + border: 1px solid #ccc; + z-index: 100; + width: 16rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.patternActionWrapper .dropDown select { + max-width: 9.375rem; +} + +.patternActionWrapper .dropDown button { + width: 9.375rem; +} + +.patternActionButtons { + max-width: 15.625rem; +} + +.movePatternButton { + color: #005ea2; +} + +.movePatternButton:focus { + outline: 0.25rem solid red; +} + +.movePatternButton span { + font-size: 1.25rem; +} + +.movePatternButton svg { + font-size: 1.5rem; +} + +@media (min-width: 64.5em) { + + + .moveToPage, + .questionPosition { + min-width: 18.75rem; + } +} + +@media (max-width: 40em) { + .dropdownMenu { + bottom: 4.5rem; + max-height: 40vh; + overflow: auto; + left: 32px; + } } \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index 7461f275a..ecc91d928 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -36,7 +36,9 @@ export type FormEditSlice = { movePattern: ( sourcePage: PatternId, targetPage: PatternId, - patternId: PatternId + patternId: PatternId, + position: string, + isPageMove: boolean ) => void; } & NotificationSlice; @@ -83,24 +85,21 @@ export const createFormEditSlice = }); state.addNotification('success', 'Element added successfully.'); }, - - movePattern: (sourcePage, targetPage, patternId) => { + movePattern: (sourcePage, targetPage, patternId, position, isPageMove) => { const state = get(); const builder = new BlueprintBuilder( state.context.config, state.session.form ); - //const page = getSessionPage(state.session); + const movePatternBetweenPages = builder.movePatternBetweenPages( sourcePage, targetPage, - patternId + patternId, + position, + isPageMove ); - console.log( - 'moveSelectedPattern in movePatternToPage-store function: ', - movePatternBetweenPages - ); set({ session: mergeSession(state.session, { form: builder.form }), focus: { pattern: movePatternBetweenPages }, diff --git a/packages/forms/src/builder/index.ts b/packages/forms/src/builder/index.ts index d73e8564d..98a43476d 100644 --- a/packages/forms/src/builder/index.ts +++ b/packages/forms/src/builder/index.ts @@ -61,9 +61,7 @@ export class BlueprintBuilder { const pagePatternId = root.data.pages[pageNum]; this.bp = addPatternToPage(this.form, pagePatternId, pattern); - console.log('pattern in addToPage function builder: ', pattern); - console.log('root in addToPage function builder: ', root); - console.log('pagePatternId in addToPage function builder: ', pagePatternId); + return pattern; } @@ -71,7 +69,8 @@ export class BlueprintBuilder { sourcePageId: PatternId, targetPageId: PatternId, patternId: PatternId, - pageNum: number = 0 + position: string, + isPageMove: boolean ) { const pattern = getPattern(this.form, patternId); if (!pattern) { @@ -81,20 +80,16 @@ export class BlueprintBuilder { if (root.type !== 'page-set') { throw new Error('expected root to be a page-set'); } - const pagePatternId = root.data.pages[pageNum]; - // Remove the pattern from the current page this.bp = movePatternBetweenPages( this.form, - pagePatternId, + sourcePageId, targetPageId, - patternId + patternId, + position, + isPageMove ); - console.log('pattern in move function builder: ', patternId); - console.log('root in move function builder: ', root); - console.log('pagePatternId in move function builder: ', pagePatternId); - return pattern; } @@ -146,39 +141,4 @@ export class BlueprintBuilder { success: true, }; } - - // Function to move a pattern from one page to another - // movePatternToPage(patternId: PatternId, targetPageId: PatternId) { - // const pattern = getPattern(this.form, patternId); - // if (!pattern) { - // throw new Error(`Pattern with id ${patternId} not found.`); - // } - - // // Find the current page containing the pattern - // const currentPage = Object.values(this.form.patterns).find(p => - // p.type === 'page' && p.data.patterns.includes(patternId) - // ) as PagePattern; - - // if (!currentPage) { - // throw new Error(`Current page for pattern ${patternId} not found.`); - // } - - // // Remove the pattern from the current page - // this.bp = { - // ...this.bp, - // patterns: { - // ...this.bp.patterns, - // [currentPage.id]: { - // ...currentPage, - // data: { - // ...currentPage.data, - // patterns: currentPage.data.patterns.filter(id => id !== patternId), - // }, - // }, - // }, - // }; - - // // Add the pattern to the target page - // this.bp = addPatternToPage(this.form, targetPageId, pattern); - // } } diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index b93f5744b..e2987e01f 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -212,47 +212,67 @@ export const addPatternToPage = ( }; }; -export const addPatternToFieldset = ( - bp: Blueprint, - fieldsetPatternId: PatternId, - pattern: Pattern -): Blueprint => { - const fieldsetPattern = bp.patterns[fieldsetPatternId] as FieldsetPattern; - if (fieldsetPattern.type !== 'fieldset') { - throw new Error('Pattern is not a page.'); - } - return { - ...bp, - patterns: { - ...bp.patterns, - [fieldsetPattern.id]: { - ...fieldsetPattern, - data: { - ...fieldsetPattern.data, - patterns: [...fieldsetPattern.data.patterns, pattern.id], - }, - } satisfies FieldsetPattern, - [pattern.id]: pattern, - }, - }; -}; - export const movePatternBetweenPages = ( bp: Blueprint, sourcePageId: PatternId, targetPageId: PatternId, - patternId: PatternId + patternId: PatternId, + position: string, + isPageMove: boolean = false ): Blueprint => { const sourcePage = bp.patterns[sourcePageId] as PagePattern; const targetPage = bp.patterns[targetPageId] as PagePattern; + if (sourcePage.type !== 'page' || targetPage.type !== 'page') { throw new Error('Pattern is not a page.'); } - const indexToRemove = sourcePage.data.patterns.indexOf(patternId); - const newPatterns = sourcePage.data.patterns.splice(indexToRemove, 1); + + let updatedSourcePatterns; + let updatedTargetPatterns; + + const sourcePagePatterns = sourcePage.data.patterns; + const indexToRemove = sourcePagePatterns.indexOf(patternId); + const newPattern = sourcePagePatterns.splice(indexToRemove, 1).toString(); + + if (isPageMove) { + // Moving a pattern within the source page + if (indexToRemove === -1) { + throw new Error('Pattern ID not found in the source page.'); + } + + updatedSourcePatterns = [ + ...sourcePagePatterns.slice(0, indexToRemove), + ...sourcePagePatterns.slice(indexToRemove + 1) + ]; + + updatedTargetPatterns = position === 'top' + ? [newPattern, ...updatedSourcePatterns] + : [...updatedSourcePatterns, newPattern]; + } else { + // Moving a pattern between pages + if (indexToRemove === -1) { + throw new Error('Pattern ID not found in the source page.'); + } + + updatedSourcePatterns = [ + ...sourcePagePatterns.slice(0, indexToRemove), + ...sourcePagePatterns.slice(indexToRemove + 1) + ]; + + updatedTargetPatterns = position === 'top' + ? [patternId, ...targetPage.data.patterns] + : [...targetPage.data.patterns, patternId]; + } - console.log('indexToRemove: ', indexToRemove); - console.log('newPatterns: ', newPatterns); + + // console.log('patternId: ', patternId); + // console.log('blueprint patterns: ', sourcePage.data.patterns); + // console.log('blueprint data: ', sourcePage.data); + // console.log('indexToRemove: ', indexToRemove); + // console.log('sourcePage: ', sourcePage); + // console.log('targetPage: ', targetPage); + // console.log('newPatterns: ', newPattern); + // console.log('updatedSourcePatterns: ', updatedSourcePatterns); return { ...bp, patterns: { @@ -261,20 +281,45 @@ export const movePatternBetweenPages = ( ...sourcePage, data: { ...sourcePage.data, - patterns: newPatterns, + patterns: updatedSourcePatterns, }, } satisfies PagePattern, [targetPageId]: { ...targetPage, data: { ...targetPage.data, - patterns: [...targetPage.data.patterns, patternId], + patterns: updatedTargetPatterns, }, } satisfies PagePattern, }, }; }; +export const addPatternToFieldset = ( + bp: Blueprint, + fieldsetPatternId: PatternId, + pattern: Pattern +): Blueprint => { + const fieldsetPattern = bp.patterns[fieldsetPatternId] as FieldsetPattern; + if (fieldsetPattern.type !== 'fieldset') { + throw new Error('Pattern is not a page.'); + } + return { + ...bp, + patterns: { + ...bp.patterns, + [fieldsetPattern.id]: { + ...fieldsetPattern, + data: { + ...fieldsetPattern.data, + patterns: [...fieldsetPattern.data.patterns, pattern.id], + }, + } satisfies FieldsetPattern, + [pattern.id]: pattern, + }, + }; +}; + export const addPageToPageSet = ( bp: Blueprint, pattern: Pattern @@ -384,6 +429,8 @@ export const removePatternFromBlueprint = ( }, {} as PatternMap ); + + console.log('patterns to remove: ', patterns) // Remove the pattern itself delete patterns[id]; return { From aab0886c2197d21aa233f59f3a8a4fdb782005aa Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Wed, 24 Jul 2024 09:41:27 -0600 Subject: [PATCH 04/17] Added the ability to move question to another page --- .../FormEdit/AddPatternDropdown.tsx | 5 +- .../PreviewSequencePattern/DraggableList.tsx | 2 +- .../components/common/PatternEditActions.tsx | 92 +++++++++++++------ .../design/src/FormManager/FormEdit/store.ts | 2 +- packages/forms/src/builder/index.ts | 1 - packages/forms/src/index.ts | 23 ++--- 6 files changed, 78 insertions(+), 47 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx index 54cf7eff3..4c7e02c5f 100644 --- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx +++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx @@ -282,10 +282,7 @@ const AddPatternDropdownContent = ({ className={`${styles.dropdownMenu} usa-list usa-list--unstyled position-absolute bg-white z-100 shadow-3 text-left`} > {availablePatterns.map(([patternType, pattern], index) => ( -
  • +

  • @@ -179,7 +206,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { {availablePages.map((page, index) => ( ))} @@ -198,28 +227,34 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { name="elementPosition" id="elementPosition" value={moveToPosition} - onChange={e => setMoveToPosition(e.target.value as 'top' | 'bottom')} + onChange={e => + setMoveToPosition(e.target.value as 'top' | 'bottom') + } > - - + +

    @@ -259,7 +294,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { className="usa-button--outline usa-button--unstyled" onClick={event => { event.preventDefault(); - const confirmed = window.confirm("Are you sure you want to delete this question?"); + const confirmed = window.confirm( + 'Are you sure you want to delete this question?' + ); if (confirmed) { deleteSelectedPattern(); } @@ -277,9 +314,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { {children ? ( - - {children} - + {children} ) : null} @@ -294,7 +329,6 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { - ); }; diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index ecc91d928..826bfdbac 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -91,7 +91,7 @@ export const createFormEditSlice = state.context.config, state.session.form ); - + const movePatternBetweenPages = builder.movePatternBetweenPages( sourcePage, targetPage, diff --git a/packages/forms/src/builder/index.ts b/packages/forms/src/builder/index.ts index 98a43476d..f8f2551d9 100644 --- a/packages/forms/src/builder/index.ts +++ b/packages/forms/src/builder/index.ts @@ -61,7 +61,6 @@ export class BlueprintBuilder { const pagePatternId = root.data.pages[pageNum]; this.bp = addPatternToPage(this.form, pagePatternId, pattern); - return pattern; } diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index e2987e01f..c1ff91f7b 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -226,7 +226,7 @@ export const movePatternBetweenPages = ( if (sourcePage.type !== 'page' || targetPage.type !== 'page') { throw new Error('Pattern is not a page.'); } - + let updatedSourcePatterns; let updatedTargetPatterns; @@ -242,12 +242,13 @@ export const movePatternBetweenPages = ( updatedSourcePatterns = [ ...sourcePagePatterns.slice(0, indexToRemove), - ...sourcePagePatterns.slice(indexToRemove + 1) + ...sourcePagePatterns.slice(indexToRemove + 1), ]; - updatedTargetPatterns = position === 'top' - ? [newPattern, ...updatedSourcePatterns] - : [...updatedSourcePatterns, newPattern]; + updatedTargetPatterns = + position === 'top' + ? [newPattern, ...updatedSourcePatterns] + : [...updatedSourcePatterns, newPattern]; } else { // Moving a pattern between pages if (indexToRemove === -1) { @@ -256,15 +257,15 @@ export const movePatternBetweenPages = ( updatedSourcePatterns = [ ...sourcePagePatterns.slice(0, indexToRemove), - ...sourcePagePatterns.slice(indexToRemove + 1) + ...sourcePagePatterns.slice(indexToRemove + 1), ]; - updatedTargetPatterns = position === 'top' - ? [patternId, ...targetPage.data.patterns] - : [...targetPage.data.patterns, patternId]; + updatedTargetPatterns = + position === 'top' + ? [patternId, ...targetPage.data.patterns] + : [...targetPage.data.patterns, patternId]; } - // console.log('patternId: ', patternId); // console.log('blueprint patterns: ', sourcePage.data.patterns); // console.log('blueprint data: ', sourcePage.data); @@ -430,7 +431,7 @@ export const removePatternFromBlueprint = ( {} as PatternMap ); - console.log('patterns to remove: ', patterns) + console.log('patterns to remove: ', patterns); // Remove the pattern itself delete patterns[id]; return { From 56fdff7f2bb3e40dde41bb359cac34f6489ea1c7 Mon Sep 17 00:00:00 2001 From: ethangardner Date: Wed, 24 Jul 2024 16:17:13 -0400 Subject: [PATCH 05/17] fixing get by role selector to remove ambiguity --- e2e/src/create.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/src/create.spec.ts b/e2e/src/create.spec.ts index 21a96c9f6..a5c2997c7 100644 --- a/e2e/src/create.spec.ts +++ b/e2e/src/create.spec.ts @@ -9,7 +9,7 @@ const createNewForm = async (page: Page) => { } const addQuestions = async (page: Page) => { - const menuButton = page.getByRole('button', { name: 'Question' }); + const menuButton = page.getByRole('button', { name: 'Question', exact: true }); await menuButton.click(); await page.getByRole('button', { name: 'Short Answer' }).click(); await menuButton.click(); From faf1b3685272428ddb9f17654182d535d044a4cf Mon Sep 17 00:00:00 2001 From: ethangardner Date: Wed, 24 Jul 2024 16:18:47 -0400 Subject: [PATCH 06/17] removed logging --- packages/forms/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index c1ff91f7b..c65e124f1 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -431,7 +431,6 @@ export const removePatternFromBlueprint = ( {} as PatternMap ); - console.log('patterns to remove: ', patterns); // Remove the pattern itself delete patterns[id]; return { From bca169d1681b0c642088b0fc9147e79ad9a62ab0 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Wed, 24 Jul 2024 15:30:59 -0600 Subject: [PATCH 07/17] Removed some console logs --- packages/design/src/FormManager/FormEdit/store.ts | 2 -- packages/forms/src/index.ts | 8 -------- 2 files changed, 10 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index 826bfdbac..58ca7ec63 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -77,8 +77,6 @@ export const createFormEditSlice = const page = getSessionPage(state.session); const newPattern = builder.addPatternToPage(patternType, page); - console.log('page in addPattern-store function: ', page); - console.log('newPattern in addPattern-store function: ', newPattern); set({ session: mergeSession(state.session, { form: builder.form }), focus: { pattern: newPattern }, diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index c65e124f1..de1d2b80f 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -266,14 +266,6 @@ export const movePatternBetweenPages = ( : [...targetPage.data.patterns, patternId]; } - // console.log('patternId: ', patternId); - // console.log('blueprint patterns: ', sourcePage.data.patterns); - // console.log('blueprint data: ', sourcePage.data); - // console.log('indexToRemove: ', indexToRemove); - // console.log('sourcePage: ', sourcePage); - // console.log('targetPage: ', targetPage); - // console.log('newPatterns: ', newPattern); - // console.log('updatedSourcePatterns: ', updatedSourcePatterns); return { ...bp, patterns: { From 02dfdef68324c9db9a0cf33b1ea5cf133a260549 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Fri, 26 Jul 2024 00:27:03 -0600 Subject: [PATCH 08/17] Fixed some bugs and accessibility issues This commit includes a fix for the bug when moving questions back and forth and also a bug with the list of page options. This update also addresses some accessibility issues. --- .../components/common/PatternEditActions.tsx | 87 ++++++++++++------- .../FormEdit/formEditStyles.module.css | 5 ++ packages/forms/src/index.ts | 31 ++++--- 3 files changed, 79 insertions(+), 44 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 5508bc1e9..1a9c3f74a 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -1,6 +1,7 @@ import React, { PropsWithChildren, ReactElement, + useMemo, useEffect, useState, useRef, @@ -34,8 +35,6 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { })); const [targetPage, setTargetPage] = useState(''); const [moveToPosition, setMoveToPosition] = useState(''); - const [isPatternInFieldset, setIsPatternInFieldset] = useState(false); - const [isFieldset, setIsFieldset] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false); const dropdownRef = useRef(null); @@ -49,44 +48,54 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { ); const movePatternToPage = useFormManagerStore(state => state.movePattern); const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); - const focusPatternType = useFormManagerStore( - state => state.focus?.pattern.type - ); + const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); - useEffect(() => { - if (focusPatternId) { - // Check if the focused pattern is inside a fieldset - const fieldset = patterns.find( - p => p.type === 'fieldset' && p.data.patterns.includes(focusPatternId) - ); - if (fieldset && !isPatternInFieldset) { - setIsPatternInFieldset(true); - } else if (!fieldset && isPatternInFieldset) { - setIsPatternInFieldset(false); - } - } - }, [focusPatternId, patterns, isPatternInFieldset]); + const isPatternInFieldset = useMemo(() => { + if (!focusPatternId) return false; + return patterns.some( + p => p.type === 'fieldset' && p.data.patterns.includes(focusPatternId) + ); + }, [focusPatternId, patterns]); - useEffect(() => { - // Check if the focus pattern type is fieldset - setIsFieldset(focusPatternType === 'fieldset'); - }, [focusPatternType]); + const isFieldset = focusPatternType === 'fieldset'; + + const useAvailablePages = (focusPatternId: string | undefined) => { + const pages = useFormManagerStore(state => + Object.values(state.session.form.patterns).filter(p => p.type === 'page') + ); + + const currentPageIndex = pages.findIndex(page => + page.data.patterns.includes(focusPatternId || '') + ); + + const page1Count = pages.reduce((count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), 0); + + const availablePages: PageWithLabel[] = + page1Count > 1 + ? pages.slice(1).map((page, index) => { + if (index + 1 === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }) + : pages.map((page, index) => { + if (index === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }); + + return availablePages; + }; + + const availablePages = useAvailablePages(focusPatternId); - // Find the index of the current page const currentPageIndex = pages.findIndex(page => page.data.patterns.includes(focusPatternId || '') ); const sourcePage = pages[currentPageIndex]?.id; - // Remove the first entry and include the current page with a special label - const availablePages: PageWithLabel[] = pages.slice(1).map((page, index) => { - if (index + 1 === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }); - const handleMovePattern = () => { if (focusPatternId && targetPage) { const isPageMove = focusPatternType === 'page'; @@ -113,15 +122,24 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { setDropdownOpen(false); } }; + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setDropdownOpen(false); + buttonRef.current?.focus(); + } + }; useEffect(() => { if (dropdownOpen) { document.addEventListener('mousedown', handleClickOutside); + dropdownRef.current?.addEventListener('keydown', handleKeyDown); } else { document.removeEventListener('mousedown', handleClickOutside); + dropdownRef.current?.removeEventListener('keydown', handleKeyDown); } return () => { document.removeEventListener('mousedown', handleClickOutside); + dropdownRef.current?.removeEventListener('keydown', handleKeyDown); }; }, [dropdownOpen]); @@ -163,6 +181,8 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { className="usa-button--outline usa-button--unstyled margin-right-0 padding-top-1 padding-left-05 padding-bottom-05" type="button" ref={buttonRef} + aria-haspopup="true" + aria-expanded={dropdownOpen ? "true" : "false"} onClick={event => { event.preventDefault(); toggleDropdown(); @@ -184,7 +204,10 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {

    {dropdownOpen && ( -
    +
    diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css index 24d5d6cd9..d6c785119 100644 --- a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css +++ b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css @@ -117,6 +117,11 @@ max-width: 21rem; } +.draggableListWrapper:has(.patternActionWrapper .dropDown select:focus), +.draggableListWrapper:has(.patternActionWrapper .dropDown:focus ) { + outline: 0; +} + .patternActionWrapper .dropdownMenu div { padding: 8px; cursor: pointer; diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index de1d2b80f..81725d50c 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -220,26 +220,31 @@ export const movePatternBetweenPages = ( position: string, isPageMove: boolean = false ): Blueprint => { + const sourcePage = bp.patterns[sourcePageId] as PagePattern; const targetPage = bp.patterns[targetPageId] as PagePattern; + if (!sourcePage || !targetPage) { + throw new Error('Source or target page not found.'); + } + if (sourcePage.type !== 'page' || targetPage.type !== 'page') { throw new Error('Pattern is not a page.'); } - let updatedSourcePatterns; - let updatedTargetPatterns; - - const sourcePagePatterns = sourcePage.data.patterns; - const indexToRemove = sourcePagePatterns.indexOf(patternId); - const newPattern = sourcePagePatterns.splice(indexToRemove, 1).toString(); + let updatedSourcePatterns: PatternId[]; + let updatedTargetPatterns: PatternId[]; if (isPageMove) { - // Moving a pattern within the source page + const sourcePagePatterns = sourcePage.data.patterns; + const indexToRemove = sourcePagePatterns.indexOf(patternId); + if (indexToRemove === -1) { - throw new Error('Pattern ID not found in the source page.'); + throw new Error(`Pattern ID ${patternId} not found in the source page.`); } + const newPattern = sourcePagePatterns.splice(indexToRemove, 1).toString(); + updatedSourcePatterns = [ ...sourcePagePatterns.slice(0, indexToRemove), ...sourcePagePatterns.slice(indexToRemove + 1), @@ -250,14 +255,15 @@ export const movePatternBetweenPages = ( ? [newPattern, ...updatedSourcePatterns] : [...updatedSourcePatterns, newPattern]; } else { - // Moving a pattern between pages + const indexToRemove = sourcePage.data.patterns.indexOf(patternId); + if (indexToRemove === -1) { - throw new Error('Pattern ID not found in the source page.'); + throw new Error(`Pattern ID ${patternId} not found in the source page.`); } updatedSourcePatterns = [ - ...sourcePagePatterns.slice(0, indexToRemove), - ...sourcePagePatterns.slice(indexToRemove + 1), + ...sourcePage.data.patterns.slice(0, indexToRemove), + ...sourcePage.data.patterns.slice(indexToRemove + 1), ]; updatedTargetPatterns = @@ -288,6 +294,7 @@ export const movePatternBetweenPages = ( }; }; + export const addPatternToFieldset = ( bp: Blueprint, fieldsetPatternId: PatternId, From 594ec5594c20916011f85f31ff77b6b7097eb035 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Fri, 26 Jul 2024 00:27:50 -0600 Subject: [PATCH 09/17] Fixed some bugs and accessibility issues part 2 --- .../components/common/PatternEditActions.tsx | 24 ++++++++++--------- packages/forms/src/index.ts | 2 -- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 1a9c3f74a..f32b069be 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -48,7 +48,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { ); const movePatternToPage = useFormManagerStore(state => state.movePattern); const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); - const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); + const focusPatternType = useFormManagerStore( + state => state.focus?.pattern.type + ); const isPatternInFieldset = useMemo(() => { if (!focusPatternId) return false; @@ -63,13 +65,16 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { const pages = useFormManagerStore(state => Object.values(state.session.form.patterns).filter(p => p.type === 'page') ); - + const currentPageIndex = pages.findIndex(page => page.data.patterns.includes(focusPatternId || '') ); - - const page1Count = pages.reduce((count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), 0); - + + const page1Count = pages.reduce( + (count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), + 0 + ); + const availablePages: PageWithLabel[] = page1Count > 1 ? pages.slice(1).map((page, index) => { @@ -84,7 +89,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { } return page; }); - + return availablePages; }; @@ -182,7 +187,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { type="button" ref={buttonRef} aria-haspopup="true" - aria-expanded={dropdownOpen ? "true" : "false"} + aria-expanded={dropdownOpen ? 'true' : 'false'} onClick={event => { event.preventDefault(); toggleDropdown(); @@ -204,10 +209,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {

    {dropdownOpen && ( -
    +
    diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index 81725d50c..78b2c8ad4 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -220,7 +220,6 @@ export const movePatternBetweenPages = ( position: string, isPageMove: boolean = false ): Blueprint => { - const sourcePage = bp.patterns[sourcePageId] as PagePattern; const targetPage = bp.patterns[targetPageId] as PagePattern; @@ -294,7 +293,6 @@ export const movePatternBetweenPages = ( }; }; - export const addPatternToFieldset = ( bp: Blueprint, fieldsetPatternId: PatternId, From 12b016cb1e8f252d0cc16f7156a629935f41540c Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Tue, 30 Jul 2024 23:49:26 -0600 Subject: [PATCH 10/17] Addressed some bugs and feedback reviews In this commit I fixed a couple of bugs and made updates per some reviews in the pull request. --- .../FormManager/FormEdit/PreviewPattern.tsx | 1 - .../PreviewSequencePattern/DraggableList.tsx | 4 +- .../components/common/PatternEditActions.tsx | 62 +++++---------- packages/forms/src/builder/builder.test.ts | 76 ++++++++++++++++++- packages/forms/src/index.ts | 6 +- 5 files changed, 99 insertions(+), 50 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx index 259baa948..cef9a069c 100644 --- a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx +++ b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx @@ -31,7 +31,6 @@ export const PreviewPattern: PatternComponent = function PreviewPattern(props) { const EditComponent = context.editComponents[props.type]; return (
    { if (EditComponent && !isPatternEditControlEvent(event)) { diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx index 69d6be55b..941652076 100644 --- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx @@ -77,11 +77,13 @@ export const DraggableList: React.FC = ({
      {arrayChildren.map((child, index) => { + order = order.filter(item => item !== undefined); const patternId = order[index]; + if (patternId === undefined) { - console.error('undefined patternId', index); return; } + return ( { const [targetPage, setTargetPage] = useState(''); const [moveToPosition, setMoveToPosition] = useState(''); const [dropdownOpen, setDropdownOpen] = useState(false); - const dropdownRef = useRef(null); const buttonRef = useRef(null); - const pages = useFormManagerStore(state => Object.values(state.session.form.patterns).filter(p => p.type === 'page') ); @@ -47,63 +45,45 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { Object.values(state.session.form.patterns) ); const movePatternToPage = useFormManagerStore(state => state.movePattern); - const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); - const focusPatternType = useFormManagerStore( - state => state.focus?.pattern.type - ); - + let focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); + const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); const isPatternInFieldset = useMemo(() => { if (!focusPatternId) return false; return patterns.some( p => p.type === 'fieldset' && p.data.patterns.includes(focusPatternId) ); }, [focusPatternId, patterns]); - const isFieldset = focusPatternType === 'fieldset'; - - const useAvailablePages = (focusPatternId: string | undefined) => { - const pages = useFormManagerStore(state => - Object.values(state.session.form.patterns).filter(p => p.type === 'page') - ); - - const currentPageIndex = pages.findIndex(page => - page.data.patterns.includes(focusPatternId || '') - ); - + const currentPageIndex = pages.findIndex(page => + page.data.patterns.includes(focusPatternId || '') + ); + const useAvailablePages = () => { const page1Count = pages.reduce( (count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), 0 ); - const availablePages: PageWithLabel[] = page1Count > 1 ? pages.slice(1).map((page, index) => { - if (index + 1 === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }) + if (index + 1 === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }) : pages.map((page, index) => { - if (index === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }); + if (index === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }); return availablePages; }; - - const availablePages = useAvailablePages(focusPatternId); - - const currentPageIndex = pages.findIndex(page => - page.data.patterns.includes(focusPatternId || '') - ); - + const availablePages = useAvailablePages(); const sourcePage = pages[currentPageIndex]?.id; - const handleMovePattern = () => { if (focusPatternId && targetPage) { - const isPageMove = focusPatternType === 'page'; + const isPageMove = sourcePage === targetPage; movePatternToPage( sourcePage, targetPage, @@ -111,14 +91,14 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { moveToPosition, isPageMove ); + + focusPatternId = ''; } setDropdownOpen(false); }; - const toggleDropdown = () => { setDropdownOpen(!dropdownOpen); }; - const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && @@ -356,4 +336,4 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
    ); -}; +}; \ No newline at end of file diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index 96f4037bc..61ea52b45 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -1,7 +1,7 @@ import { describe, expect, it } from 'vitest'; import { BlueprintBuilder } from '.'; -import { createForm, getPattern } from '..'; +import { createForm, getPattern, Pattern } from '..'; import { defaultFormConfig } from '../patterns'; import { type InputPattern } from '../patterns/input'; import { PageSetPattern } from '../patterns/page-set/config'; @@ -22,12 +22,43 @@ describe('form builder', () => { expect(builder.form.patterns[newPattern.id]).toEqual(newPattern); const oldPage = getPattern(initial, 'page-1'); const newPage = getPattern(builder.form, 'page-1'); + expect(newPage.data).toEqual({ ...oldPage.data, patterns: [...oldPage.data.patterns, newPattern.id], }); }); + it('movePattern on the currentpage', () => { + const initial = createTestBlueprint(); + const builder = new BlueprintBuilder(defaultFormConfig, initial); + const pattern = getPattern(builder.form, 'element-1'); + expect(builder.form.patterns[pattern.id]).toEqual(pattern); + const oldPage = getPattern(initial, 'page-1'); + const newPage = getPattern(builder.form, 'page-1'); + builder.movePatternBetweenPages(oldPage.id, newPage.id, pattern.id, 'bottom', true); + + expect(newPage.data).toEqual({ + ...oldPage.data, + patterns: [...newPage.data.patterns], + }); + }); + + it('movePattern to a different page', () => { + const initial = createTestBlueprint(); + const builder = new BlueprintBuilder(defaultFormConfig, initial); + const pattern = getPattern(builder.form, 'element-1'); + expect(builder.form.patterns[pattern.id]).toEqual(pattern); + const oldPage = getPattern(initial, 'page-1'); + const newPage = getPattern(builder.form, 'page-2'); + builder.movePatternBetweenPages(oldPage.id, newPage.id, pattern.id, 'top', false); + + expect(newPage.data).toEqual({ + ...newPage.data, + patterns: [...newPage.data.patterns], + }); + }); + it('removePattern removes pattern and sequence reference', () => { const initial = createTestBlueprint(); const builder = new BlueprintBuilder(defaultFormConfig, initial); @@ -36,7 +67,9 @@ describe('form builder', () => { root: { type: 'page-set', id: 'root', - data: { pages: ['page-1'] }, + data: { + pages: ['page-1', 'page-2'], + }, } satisfies PageSetPattern, 'page-1': { type: 'page', @@ -46,6 +79,14 @@ describe('form builder', () => { patterns: ['element-1'], }, } satisfies PagePattern, + 'page-2': { + type: 'page', + id: 'page-2', + data: { + title: 'Page 2', + patterns: ['element-3'], + }, + } satisfies PagePattern, 'element-1': { type: 'input', id: 'element-1', @@ -56,6 +97,16 @@ describe('form builder', () => { maxLength: 128, }, }, + 'element-3': { + type: 'input', + id: 'element-3', + data: { + label: 'Pattern 3', + initial: '', + required: true, + maxLength: 128, + }, + }, }); }); }); @@ -73,7 +124,7 @@ export const createTestBlueprint = () => { type: 'page-set', id: 'root', data: { - pages: ['page-1'], + pages: ['page-1', 'page-2'], }, } satisfies PageSetPattern, { @@ -84,6 +135,14 @@ export const createTestBlueprint = () => { patterns: ['element-1', 'element-2'], }, } satisfies PagePattern, + { + type: 'page', + id: 'page-2', + data: { + title: 'Page 2', + patterns: ['element-3'], + }, + } satisfies PagePattern, { type: 'input', id: 'element-1', @@ -104,7 +163,18 @@ export const createTestBlueprint = () => { maxLength: 128, }, } satisfies InputPattern, + { + type: 'input', + id: 'element-3', + data: { + label: 'Pattern 3', + initial: '', + required: true, + maxLength: 128, + }, + } satisfies InputPattern, ], } ); }; + diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index 78b2c8ad4..c7f6c9df3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -242,8 +242,6 @@ export const movePatternBetweenPages = ( throw new Error(`Pattern ID ${patternId} not found in the source page.`); } - const newPattern = sourcePagePatterns.splice(indexToRemove, 1).toString(); - updatedSourcePatterns = [ ...sourcePagePatterns.slice(0, indexToRemove), ...sourcePagePatterns.slice(indexToRemove + 1), @@ -251,8 +249,8 @@ export const movePatternBetweenPages = ( updatedTargetPatterns = position === 'top' - ? [newPattern, ...updatedSourcePatterns] - : [...updatedSourcePatterns, newPattern]; + ? [patternId, ...updatedSourcePatterns] + : [...updatedSourcePatterns, patternId]; } else { const indexToRemove = sourcePage.data.patterns.indexOf(patternId); From 5066c38fd7a4d61a813439b0db822b0147827712 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Tue, 30 Jul 2024 23:50:21 -0600 Subject: [PATCH 11/17] Addressed some bugs and feedback reviews Part 2 --- .../components/common/PatternEditActions.tsx | 26 ++++++++++--------- packages/forms/src/builder/builder.test.ts | 21 +++++++++++---- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index ad54b04a4..3a101f7d5 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -46,7 +46,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { ); const movePatternToPage = useFormManagerStore(state => state.movePattern); let focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); - const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); + const focusPatternType = useFormManagerStore( + state => state.focus?.pattern.type + ); const isPatternInFieldset = useMemo(() => { if (!focusPatternId) return false; return patterns.some( @@ -65,17 +67,17 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { const availablePages: PageWithLabel[] = page1Count > 1 ? pages.slice(1).map((page, index) => { - if (index + 1 === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }) + if (index + 1 === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }) : pages.map((page, index) => { - if (index === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }); + if (index === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }); return availablePages; }; @@ -336,4 +338,4 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
    ); -}; \ No newline at end of file +}; diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index 61ea52b45..916a9b2b3 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -36,8 +36,14 @@ describe('form builder', () => { expect(builder.form.patterns[pattern.id]).toEqual(pattern); const oldPage = getPattern(initial, 'page-1'); const newPage = getPattern(builder.form, 'page-1'); - builder.movePatternBetweenPages(oldPage.id, newPage.id, pattern.id, 'bottom', true); - + builder.movePatternBetweenPages( + oldPage.id, + newPage.id, + pattern.id, + 'bottom', + true + ); + expect(newPage.data).toEqual({ ...oldPage.data, patterns: [...newPage.data.patterns], @@ -51,7 +57,13 @@ describe('form builder', () => { expect(builder.form.patterns[pattern.id]).toEqual(pattern); const oldPage = getPattern(initial, 'page-1'); const newPage = getPattern(builder.form, 'page-2'); - builder.movePatternBetweenPages(oldPage.id, newPage.id, pattern.id, 'top', false); + builder.movePatternBetweenPages( + oldPage.id, + newPage.id, + pattern.id, + 'top', + false + ); expect(newPage.data).toEqual({ ...newPage.data, @@ -67,7 +79,7 @@ describe('form builder', () => { root: { type: 'page-set', id: 'root', - data: { + data: { pages: ['page-1', 'page-2'], }, } satisfies PageSetPattern, @@ -177,4 +189,3 @@ export const createTestBlueprint = () => { } ); }; - From acee9adc5bd2ea8cea039626f86bffa7fdd5d932 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Wed, 31 Jul 2024 00:42:41 -0600 Subject: [PATCH 12/17] Updated the builder test to account for source page --- packages/forms/src/builder/builder.test.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index 916a9b2b3..11c59861e 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -64,7 +64,10 @@ describe('form builder', () => { 'top', false ); - + expect(oldPage.data).toEqual({ + ...oldPage.data, + patterns: [...oldPage.data.patterns], + }); expect(newPage.data).toEqual({ ...newPage.data, patterns: [...newPage.data.patterns], From 964d36c6ef28ae8c9d3fab33e10c9d68c917ada0 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Mon, 5 Aug 2024 20:08:43 -0600 Subject: [PATCH 13/17] Made updates per the reviews in my PR --- .../PreviewSequencePattern/DraggableList.tsx | 4 +- .../components/common/MovePatternDropdown.tsx | 210 +++++++++++++++ .../components/common/PatternEditActions.tsx | 244 +----------------- .../design/src/FormManager/FormEdit/store.ts | 8 +- packages/forms/src/builder/builder.test.ts | 243 +++++++++++++++-- packages/forms/src/builder/index.ts | 6 +- packages/forms/src/index.ts | 5 +- 7 files changed, 447 insertions(+), 273 deletions(-) create mode 100644 packages/design/src/FormManager/FormEdit/components/common/MovePatternDropdown.tsx diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx index 941652076..69d6be55b 100644 --- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx @@ -77,13 +77,11 @@ export const DraggableList: React.FC = ({
      {arrayChildren.map((child, index) => { - order = order.filter(item => item !== undefined); const patternId = order[index]; - if (patternId === undefined) { + console.error('undefined patternId', index); return; } - return ( = ({ + isFieldset, +}) => { + const context = useFormManagerStore(state => state.context); + const [dropdownOpen, setDropdownOpen] = useState(false); + const [targetPage, setTargetPage] = useState(''); + const [moveToPosition, setMoveToPosition] = useState(''); + const dropdownRef = useRef(null); + const buttonRef = useRef(null); + const pages = useFormManagerStore(state => + Object.values(state.session.form.patterns).filter(p => p.type === 'page') + ); + const movePatternToPage = useFormManagerStore(state => state.movePattern); + const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); + const useAvailablePages = () => { + const currentPageIndex = pages.findIndex(page => + page.data.patterns.includes(focusPatternId || '') + ); + const page1Count = pages.reduce( + (count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), + 0 + ); + const availablePages: PageWithLabel[] = + page1Count > 1 + ? pages.slice(1).map((page, index) => { + if (index + 1 === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }) + : pages.map((page, index) => { + if (index === currentPageIndex) { + return { ...page, specialLabel: 'Current page' }; + } + return page; + }); + + return availablePages; + }; + const availablePages = useAvailablePages(); + const currentPageIndex = pages.findIndex(page => + page.data.patterns.includes(focusPatternId || '') + ); + const sourcePage = pages[currentPageIndex]?.id; + const handleMovePattern = () => { + if (focusPatternId && targetPage) { + movePatternToPage(sourcePage, targetPage, focusPatternId, moveToPosition); + } + setDropdownOpen(false); + }; + const toggleDropdown = () => { + setDropdownOpen(!dropdownOpen); + }; + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setDropdownOpen(false); + } + }; + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setDropdownOpen(false); + buttonRef.current?.focus(); + } + }; + + useEffect(() => { + if (dropdownOpen) { + document.addEventListener('mousedown', handleClickOutside); + dropdownRef.current?.addEventListener('keydown', handleKeyDown); + } else { + document.removeEventListener('mousedown', handleClickOutside); + dropdownRef.current?.removeEventListener('keydown', handleKeyDown); + } + return () => { + document.removeEventListener('mousedown', handleClickOutside); + dropdownRef.current?.removeEventListener('keydown', handleKeyDown); + }; + }, [dropdownOpen]); + + return ( +
      +

      + +

      + {dropdownOpen && ( +
      +
      + + +
      +
      + + +
      +

      + +

      +
      + )} +
      + ); +}; + +export default MovePatternDropdown; \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 3a101f7d5..7fc825d00 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -1,54 +1,25 @@ -import React, { - PropsWithChildren, - ReactElement, - useMemo, - useEffect, - useState, - useRef, -} from 'react'; +import React, { PropsWithChildren, ReactElement, useMemo } from 'react'; import classNames from 'classnames'; import { useFormManagerStore } from '../../../store'; +import MovePatternDropdown from './MovePatternDropdown'; import styles from '../../formEditStyles.module.css'; type PatternEditActionsProps = PropsWithChildren<{ children?: ReactElement; - handleCancel?: () => void; }>; -// Define the extended type for pages -interface PageWithLabel { - id: string; - type: string; - data: { - title: string; - patterns: string[]; - }; - specialLabel?: string; -} - export const PatternEditActions = ({ children }: PatternEditActionsProps) => { children; const context = useFormManagerStore(state => state.context); const { deleteSelectedPattern } = useFormManagerStore(state => ({ deleteSelectedPattern: state.deleteSelectedPattern, })); - const [targetPage, setTargetPage] = useState(''); - const [moveToPosition, setMoveToPosition] = useState(''); - const [dropdownOpen, setDropdownOpen] = useState(false); - const dropdownRef = useRef(null); - const buttonRef = useRef(null); - const pages = useFormManagerStore(state => - Object.values(state.session.form.patterns).filter(p => p.type === 'page') - ); + const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); const patterns = useFormManagerStore(state => Object.values(state.session.form.patterns) ); - const movePatternToPage = useFormManagerStore(state => state.movePattern); - let focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); - const focusPatternType = useFormManagerStore( - state => state.focus?.pattern.type - ); + const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id); const isPatternInFieldset = useMemo(() => { if (!focusPatternId) return false; return patterns.some( @@ -56,88 +27,6 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { ); }, [focusPatternId, patterns]); const isFieldset = focusPatternType === 'fieldset'; - const currentPageIndex = pages.findIndex(page => - page.data.patterns.includes(focusPatternId || '') - ); - const useAvailablePages = () => { - const page1Count = pages.reduce( - (count, page) => count + (page.data.title === 'Page 1' ? 1 : 0), - 0 - ); - const availablePages: PageWithLabel[] = - page1Count > 1 - ? pages.slice(1).map((page, index) => { - if (index + 1 === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }) - : pages.map((page, index) => { - if (index === currentPageIndex) { - return { ...page, specialLabel: 'Current page' }; - } - return page; - }); - - return availablePages; - }; - const availablePages = useAvailablePages(); - const sourcePage = pages[currentPageIndex]?.id; - const handleMovePattern = () => { - if (focusPatternId && targetPage) { - const isPageMove = sourcePage === targetPage; - movePatternToPage( - sourcePage, - targetPage, - focusPatternId, - moveToPosition, - isPageMove - ); - - focusPatternId = ''; - } - setDropdownOpen(false); - }; - const toggleDropdown = () => { - setDropdownOpen(!dropdownOpen); - }; - const handleClickOutside = (event: MouseEvent) => { - if ( - dropdownRef.current && - !dropdownRef.current.contains(event.target as Node) - ) { - setDropdownOpen(false); - } - }; - const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - setDropdownOpen(false); - buttonRef.current?.focus(); - } - }; - - useEffect(() => { - if (dropdownOpen) { - document.addEventListener('mousedown', handleClickOutside); - dropdownRef.current?.addEventListener('keydown', handleKeyDown); - } else { - document.removeEventListener('mousedown', handleClickOutside); - dropdownRef.current?.removeEventListener('keydown', handleKeyDown); - } - return () => { - document.removeEventListener('mousedown', handleClickOutside); - dropdownRef.current?.removeEventListener('keydown', handleKeyDown); - }; - }, [dropdownOpen]); - - const handleBlur = (event: React.FocusEvent) => { - if ( - dropdownRef.current && - !dropdownRef.current.contains(event.relatedTarget as Node) - ) { - setDropdownOpen(false); - } - }; return ( <> @@ -151,124 +40,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { 'border-base-lighter': children, 'padding-right-1': children, 'margin-right-1': children, - } - )} + })} > - {!isPatternInFieldset && ( - <> -
      -

      - -

      - {dropdownOpen && ( -
      -
      - - -
      -
      - - -
      -

      - -

      -
      - )} -
      - - )} + {!isPatternInFieldset && } @@ -321,7 +95,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { {children ? ( - {children} + + {children} + ) : null}
    @@ -338,4 +114,4 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
    ); -}; +}; \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index 58ca7ec63..04d93c4c1 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -37,8 +37,7 @@ export type FormEditSlice = { sourcePage: PatternId, targetPage: PatternId, patternId: PatternId, - position: string, - isPageMove: boolean + position: string ) => void; } & NotificationSlice; @@ -83,7 +82,7 @@ export const createFormEditSlice = }); state.addNotification('success', 'Element added successfully.'); }, - movePattern: (sourcePage, targetPage, patternId, position, isPageMove) => { + movePattern: (sourcePage, targetPage, patternId, position) => { const state = get(); const builder = new BlueprintBuilder( state.context.config, @@ -94,8 +93,7 @@ export const createFormEditSlice = sourcePage, targetPage, patternId, - position, - isPageMove + position ); set({ diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index 11c59861e..a1a708b77 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -30,7 +30,7 @@ describe('form builder', () => { }); it('movePattern on the currentpage', () => { - const initial = createTestBlueprint(); + const initial = createTwoPageThreePatternTestForm(); const builder = new BlueprintBuilder(defaultFormConfig, initial); const pattern = getPattern(builder.form, 'element-1'); expect(builder.form.patterns[pattern.id]).toEqual(pattern); @@ -40,18 +40,68 @@ describe('form builder', () => { oldPage.id, newPage.id, pattern.id, - 'bottom', - true + 'bottom' ); - expect(newPage.data).toEqual({ - ...oldPage.data, - patterns: [...newPage.data.patterns], + expect(builder.form.patterns).toEqual({ + root: { + type: 'page-set', + id: 'root', + data: { + pages: ['page-1', 'page-2'], + }, + } satisfies PageSetPattern, + 'page-1': { + type: 'page', + id: 'page-1', + data: { + title: 'Page 1', + patterns: ['element-2', 'element-1'], + }, + } satisfies PagePattern, + 'page-2': { + type: 'page', + id: 'page-2', + data: { + title: 'Page 2', + patterns: ['element-3'], + }, + } satisfies PagePattern, + 'element-1': { + type: 'input', + id: 'element-1', + data: { + label: 'Pattern 1', + initial: '', + required: true, + maxLength: 128, + }, + }, + 'element-2': { + type: 'input', + id: 'element-2', + data: { + label: 'Pattern 2', + initial: '', + required: true, + maxLength: 128, + }, + }, + 'element-3': { + type: 'input', + id: 'element-3', + data: { + label: 'Pattern 3', + initial: '', + required: true, + maxLength: 128, + }, + }, }); }); - it('movePattern to a different page', () => { - const initial = createTestBlueprint(); + it('movePattern to top of a different page', () => { + const initial = createTwoPageThreePatternTestForm(); const builder = new BlueprintBuilder(defaultFormConfig, initial); const pattern = getPattern(builder.form, 'element-1'); expect(builder.form.patterns[pattern.id]).toEqual(pattern); @@ -61,24 +111,79 @@ describe('form builder', () => { oldPage.id, newPage.id, pattern.id, - 'top', - false + 'top' ); - expect(oldPage.data).toEqual({ - ...oldPage.data, - patterns: [...oldPage.data.patterns], - }); - expect(newPage.data).toEqual({ - ...newPage.data, - patterns: [...newPage.data.patterns], + expect(builder.form.patterns).toEqual({ + root: { + type: 'page-set', + id: 'root', + data: { + pages: ['page-1', 'page-2'], + }, + } satisfies PageSetPattern, + 'page-1': { + type: 'page', + id: 'page-1', + data: { + title: 'Page 1', + patterns: ['element-2'], + }, + } satisfies PagePattern, + 'page-2': { + type: 'page', + id: 'page-2', + data: { + title: 'Page 2', + patterns: ['element-1', 'element-3'], + }, + } satisfies PagePattern, + 'element-1': { + type: 'input', + id: 'element-1', + data: { + label: 'Pattern 1', + initial: '', + required: true, + maxLength: 128, + }, + }, + 'element-2': { + type: 'input', + id: 'element-2', + data: { + label: 'Pattern 2', + initial: '', + required: true, + maxLength: 128, + }, + }, + 'element-3': { + type: 'input', + id: 'element-3', + data: { + label: 'Pattern 3', + initial: '', + required: true, + maxLength: 128, + }, + }, }); }); - it('removePattern removes pattern and sequence reference', () => { - const initial = createTestBlueprint(); + it('movePattern to bottom of a different page', () => { + const initial = createTwoPageThreePatternTestForm(); const builder = new BlueprintBuilder(defaultFormConfig, initial); - builder.removePattern('element-2'); - expect(builder.form.patterns).toEqual({ + const pattern = getPattern(builder.form, 'element-1'); + expect(builder.form.patterns[pattern.id]).toEqual(pattern); + const oldPage = getPattern(initial, 'page-1'); + const newPage = getPattern(builder.form, 'page-2'); + builder.movePatternBetweenPages( + oldPage.id, + newPage.id, + pattern.id, + 'bottom' + ); + expect(builder.form.patterns).toEqual({ root: { type: 'page-set', id: 'root', @@ -91,7 +196,7 @@ describe('form builder', () => { id: 'page-1', data: { title: 'Page 1', - patterns: ['element-1'], + patterns: ['element-2'], }, } satisfies PagePattern, 'page-2': { @@ -99,7 +204,7 @@ describe('form builder', () => { id: 'page-2', data: { title: 'Page 2', - patterns: ['element-3'], + patterns: ['element-3', 'element-1'], }, } satisfies PagePattern, 'element-1': { @@ -112,6 +217,16 @@ describe('form builder', () => { maxLength: 128, }, }, + 'element-2': { + type: 'input', + id: 'element-2', + data: { + label: 'Pattern 2', + initial: '', + required: true, + maxLength: 128, + }, + }, 'element-3': { type: 'input', id: 'element-3', @@ -124,9 +239,89 @@ describe('form builder', () => { }, }); }); + + it('removePattern removes pattern and sequence reference', () => { + const initial = createTestBlueprint(); + const builder = new BlueprintBuilder(defaultFormConfig, initial); + builder.removePattern('element-2'); + expect(builder.form.patterns).toEqual({ + root: { + type: 'page-set', + id: 'root', + data: { pages: ['page-1'] }, + } satisfies PageSetPattern, + 'page-1': { + type: 'page', + id: 'page-1', + data: { + title: 'Page 1', + patterns: ['element-1'], + }, + } satisfies PagePattern, + 'element-1': { + type: 'input', + id: 'element-1', + data: { + label: 'Pattern 1', + initial: '', + required: true, + maxLength: 128, + }, + }, + }); + }); }); export const createTestBlueprint = () => { + return createForm( + { + title: 'Test form', + description: 'Test description', + }, + { + root: 'root', + patterns: [ + { + type: 'page-set', + id: 'root', + data: { + pages: ['page-1'], + }, + } satisfies PageSetPattern, + { + type: 'page', + id: 'page-1', + data: { + title: 'Page 1', + patterns: ['element-1', 'element-2'], + }, + } satisfies PagePattern, + { + type: 'input', + id: 'element-1', + data: { + label: 'Pattern 1', + initial: '', + required: true, + maxLength: 128, + }, + } satisfies InputPattern, + { + type: 'input', + id: 'element-2', + data: { + label: 'Pattern 2', + initial: 'test', + required: true, + maxLength: 128, + }, + } satisfies InputPattern, + ], + } + ); +}; + +export const createTwoPageThreePatternTestForm = () => { return createForm( { title: 'Test form', @@ -173,7 +368,7 @@ export const createTestBlueprint = () => { id: 'element-2', data: { label: 'Pattern 2', - initial: 'test', + initial: '', required: true, maxLength: 128, }, diff --git a/packages/forms/src/builder/index.ts b/packages/forms/src/builder/index.ts index f8f2551d9..8bc648b3c 100644 --- a/packages/forms/src/builder/index.ts +++ b/packages/forms/src/builder/index.ts @@ -68,8 +68,7 @@ export class BlueprintBuilder { sourcePageId: PatternId, targetPageId: PatternId, patternId: PatternId, - position: string, - isPageMove: boolean + position: string ) { const pattern = getPattern(this.form, patternId); if (!pattern) { @@ -85,8 +84,7 @@ export class BlueprintBuilder { sourcePageId, targetPageId, patternId, - position, - isPageMove + position ); return pattern; diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index c7f6c9df3..4af7323f3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -217,8 +217,7 @@ export const movePatternBetweenPages = ( sourcePageId: PatternId, targetPageId: PatternId, patternId: PatternId, - position: string, - isPageMove: boolean = false + position: string ): Blueprint => { const sourcePage = bp.patterns[sourcePageId] as PagePattern; const targetPage = bp.patterns[targetPageId] as PagePattern; @@ -234,7 +233,7 @@ export const movePatternBetweenPages = ( let updatedSourcePatterns: PatternId[]; let updatedTargetPatterns: PatternId[]; - if (isPageMove) { + if (sourcePageId === targetPageId) { const sourcePagePatterns = sourcePage.data.patterns; const indexToRemove = sourcePagePatterns.indexOf(patternId); From 6e1766b9cd8eb0128973835aa579238756b806ac Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Mon, 5 Aug 2024 20:09:26 -0600 Subject: [PATCH 14/17] Made updates per the reviews in my PR Part 2 --- .../components/common/MovePatternDropdown.tsx | 2 +- .../components/common/PatternEditActions.tsx | 17 ++++++++++------- packages/forms/src/builder/builder.test.ts | 13 ++++--------- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/common/MovePatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/components/common/MovePatternDropdown.tsx index ac868730f..59d4dbd01 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/MovePatternDropdown.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/MovePatternDropdown.tsx @@ -207,4 +207,4 @@ const MovePatternDropdown: React.FC = ({ ); }; -export default MovePatternDropdown; \ No newline at end of file +export default MovePatternDropdown; diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 7fc825d00..6b2db90c3 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -15,7 +15,9 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { const { deleteSelectedPattern } = useFormManagerStore(state => ({ deleteSelectedPattern: state.deleteSelectedPattern, })); - const focusPatternType = useFormManagerStore(state => state.focus?.pattern.type); + const focusPatternType = useFormManagerStore( + state => state.focus?.pattern.type + ); const patterns = useFormManagerStore(state => Object.values(state.session.form.patterns) ); @@ -40,9 +42,12 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { 'border-base-lighter': children, 'padding-right-1': children, 'margin-right-1': children, - })} + } + )} > - {!isPatternInFieldset && } + {!isPatternInFieldset && ( + + )} @@ -95,9 +100,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { {children ? ( - - {children} - + {children} ) : null}
    @@ -114,4 +117,4 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
    ); -}; \ No newline at end of file +}; diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index a1a708b77..125a1abcb 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -43,7 +43,7 @@ describe('form builder', () => { 'bottom' ); - expect(builder.form.patterns).toEqual({ + expect(builder.form.patterns).toEqual({ root: { type: 'page-set', id: 'root', @@ -107,13 +107,8 @@ describe('form builder', () => { expect(builder.form.patterns[pattern.id]).toEqual(pattern); const oldPage = getPattern(initial, 'page-1'); const newPage = getPattern(builder.form, 'page-2'); - builder.movePatternBetweenPages( - oldPage.id, - newPage.id, - pattern.id, - 'top' - ); - expect(builder.form.patterns).toEqual({ + builder.movePatternBetweenPages(oldPage.id, newPage.id, pattern.id, 'top'); + expect(builder.form.patterns).toEqual({ root: { type: 'page-set', id: 'root', @@ -183,7 +178,7 @@ describe('form builder', () => { pattern.id, 'bottom' ); - expect(builder.form.patterns).toEqual({ + expect(builder.form.patterns).toEqual({ root: { type: 'page-set', id: 'root', From bcba4ba0e700605cd3d81c10b9bf72032b15f7eb Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Mon, 5 Aug 2024 22:53:52 -0600 Subject: [PATCH 15/17] Ensured that page types can't be moved --- .../components/common/PatternEditActions.tsx | 150 +++++++++--------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx index 6b2db90c3..d67e5cdb4 100644 --- a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx +++ b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx @@ -28,93 +28,93 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => { p => p.type === 'fieldset' && p.data.patterns.includes(focusPatternId) ); }, [focusPatternId, patterns]); + const isFieldset = focusPatternType === 'fieldset'; + const isPagePattern = focusPatternType === 'page'; return ( - <> +
    -
    + )} + - {!isPatternInFieldset && ( - - )} - { + event.preventDefault(); + alert('Unimplemented'); + }} > - + + + - - {children ? ( - {children} - ) : null} - -
    -
    -
    + {children ? ( + {children} + ) : null} + +
    +
    +
    - +
    ); }; From 14dc6d07488bc841f7eab9adf8f9836ef6951206 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Mon, 5 Aug 2024 23:40:20 -0600 Subject: [PATCH 16/17] A minor update to the store.ts --- packages/design/src/FormManager/FormEdit/store.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index 04d93c4c1..7c38e2efb 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -29,16 +29,12 @@ export type FormEditSlice = { clearFocus: () => void; deletePattern: (id: PatternId) => void; deleteSelectedPattern: () => void; + movePattern: (sourcePage: PatternId, targetPage: PatternId, patternId: PatternId, position: string ) => void; setFocus: (patternId: PatternId) => boolean; setRouteParams: (routeParams: string) => void; updatePattern: (data: Pattern) => void; updateActivePattern: (formData: PatternMap) => boolean; - movePattern: ( - sourcePage: PatternId, - targetPage: PatternId, - patternId: PatternId, - position: string - ) => void; + } & NotificationSlice; type FormEditStoreContext = { From 0cbf2794d4b88c5ac3220325d585bedda3b07929 Mon Sep 17 00:00:00 2001 From: Natasha Pierre-Louis Date: Mon, 5 Aug 2024 23:41:08 -0600 Subject: [PATCH 17/17] A minor update to the store.ts Part 2 --- packages/design/src/FormManager/FormEdit/store.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index 7c38e2efb..f476e40a8 100644 --- a/packages/design/src/FormManager/FormEdit/store.ts +++ b/packages/design/src/FormManager/FormEdit/store.ts @@ -29,12 +29,16 @@ export type FormEditSlice = { clearFocus: () => void; deletePattern: (id: PatternId) => void; deleteSelectedPattern: () => void; - movePattern: (sourcePage: PatternId, targetPage: PatternId, patternId: PatternId, position: string ) => void; + movePattern: ( + sourcePage: PatternId, + targetPage: PatternId, + patternId: PatternId, + position: string + ) => void; setFocus: (patternId: PatternId) => boolean; setRouteParams: (routeParams: string) => void; updatePattern: (data: Pattern) => void; updateActivePattern: (formData: PatternMap) => boolean; - } & NotificationSlice; type FormEditStoreContext = {