Hide pages with no visible components on multiPage repeating group

src/layout/RepeatingGroup/EditContainer/RepeatingGroupEditContext.tsx

@@ -7,6 +7,7 @@ import { useRepeatingGroup } from 'src/layout/RepeatingGroup/Providers/Repeating
 import { RepGroupHooks } from 'src/layout/RepeatingGroup/utils';
 import { LayoutNode } from 'src/utils/layout/LayoutNode';
 import { LayoutPage } from 'src/utils/layout/LayoutPage';
+import { isHidden, NodesInternal } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 
 interface RepeatingGroupEditRowContext {
@@ -26,26 +27,58 @@ const { Provider, useCtx } = createContext<RepeatingGroupEditRowContext>({
 function useRepeatingGroupEditRowState(
   node: LayoutNode<'RepeatingGroup'>,
 ): RepeatingGroupEditRowContext & { setMultiPageIndex: (index: number) => void } {
-  const edit = useNodeItem(node, (i) => i.edit);
-  const lastPage = RepGroupHooks.useLastMultiPageIndex(node) ?? 0;
+  const edit = useNodeItem(node, (item) => item.edit);
   const multiPageEnabled = edit?.multiPage ?? false;
-  const [multiPageIndex, setMultiPageIndex] = useState(0);
+
+  const children = RepGroupHooks.useChildIdsWithMultiPage(node);
+
+  const hiddenState = NodesInternal.useMemoSelector((state) =>
+    children.map(({ id, multiPageIndex }) => ({
+      nodeId: id,
+      page: multiPageIndex,
+      hidden: isHidden(state, 'node', id),
+    })),
+  );
+
+  const visiblePages = [...new Set(hiddenState.filter(({ hidden }) => !hidden).map(({ page }) => page ?? 0))];
+  const firstVisiblePage = Math.min(...visiblePages);
+  const lastVisiblePage = Math.max(...visiblePages);
+
+  const [multiPageIndex, setMultiPageIndex] = useState(firstVisiblePage);
+
+  const findNextVisiblePage = useCallback(
+    (start: number, step: number): number | undefined => {
+      for (let page = start; step > 0 ? page <= lastVisiblePage : page >= firstVisiblePage; page += step) {
+        if (hiddenState.some((state) => state.page === page && !state.hidden)) {
+          return page;
+        }
+      }
+      return undefined;
+    },
+    [firstVisiblePage, hiddenState, lastVisiblePage],
+  );
 
   const nextMultiPage = useCallback(() => {
-    setMultiPageIndex((prev) => Math.min(prev + 1, lastPage));
-  }, [lastPage]);
+    const nextPage = findNextVisiblePage(multiPageIndex + 1, 1);
+    if (nextPage !== undefined) {
+      setMultiPageIndex(nextPage);
+    }
+  }, [findNextVisiblePage, multiPageIndex]);
 
   const prevMultiPage = useCallback(() => {
-    setMultiPageIndex((prev) => Math.max(prev - 1, 0));
-  }, []);
+    const prevPage = findNextVisiblePage(multiPageIndex - 1, -1);
+    if (prevPage !== undefined) {
+      setMultiPageIndex(prevPage);
+    }
+  }, [findNextVisiblePage, multiPageIndex]);
 
   return {
     multiPageEnabled,
     multiPageIndex,
     nextMultiPage,
     prevMultiPage,
-    hasNextMultiPage: multiPageEnabled && multiPageIndex < lastPage,
-    hasPrevMultiPage: multiPageEnabled && multiPageIndex > 0,
+    hasNextMultiPage: multiPageEnabled && multiPageIndex < lastVisiblePage,
+    hasPrevMultiPage: multiPageEnabled && multiPageIndex > firstVisiblePage,
     setMultiPageIndex,
   };
 }

src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx

@@ -164,37 +164,39 @@ function RepeatingGroupsEditContainerInternal({
             />
           ))}
         </Flex>
-        <Flex item>
+        <Flex
+          item
+          style={{ display: 'flex', width: '100%', marginBottom: 12 }}
+        >
           {editForGroup?.multiPage && (
             <Flex
               container
               direction='row'
               spacing={2}
-              style={{ marginBottom: 12 }}
             >
               {hasPrevMultiPage && (
                 <Flex item>
                   <Button
-                    variant='tertiary'
+                    variant='secondary'
                     color='second'
                     onClick={() => prevMultiPage()}
                   >
                     <ChevronLeftIcon
                       fontSize='1rem'
                       aria-hidden='true'
                     />
-                    <Lang id='general.back' />
+                    <Lang id={texts.multipage_back_button ? texts.multipage_back_button : 'general.back'} />
                   </Button>
                 </Flex>
               )}
               {hasNextMultiPage && (
                 <Flex item>
                   <Button
-                    variant='tertiary'
+                    variant='secondary'
                     color='second'
                     onClick={() => nextMultiPage()}
                   >
-                    <Lang id='general.next' />
+                    <Lang id={texts.multipage_next_button ? texts.multipage_next_button : 'general.next'} />
                     <ChevronRightIcon
                       fontSize='1rem'
                       aria-hidden='true'
@@ -208,6 +210,7 @@ function RepeatingGroupsEditContainerInternal({
             container
             direction='row'
             spacing={2}
+            justifyContent='flex-end'
           >
             {saveAndNextButtonVisible && (
               <Flex item>

src/layout/RepeatingGroup/config.ts

@@ -109,6 +109,20 @@ export const Config = new CG.component({
       description: 'The text for the "Back" button in pagination',
     }),
   )
+  .addTextResource(
+    new CG.trb({
+      name: 'multipage_back_button',
+      title: 'Back button in multipage navigation',
+      description: 'The text for the "Back" button in multipage navigation',
+    }),
+  )
+  .addTextResource(
+    new CG.trb({
+      name: 'multipage_next_button',
+      title: 'Next button in multipage navigation',
+      description: 'The text for the "Next" button in multipage navigation',
+    }),
+  )
   .addDataModelBinding(
     new CG.obj(
       new CG.prop(

src/layout/RepeatingGroup/types.ts

@@ -8,7 +8,13 @@ type RepGroupEdit = Exclude<Comp['edit'], undefined>;
 
 // These types define the properties in a repeating group config that will have their expressions resolved
 // per row instead of for the entire repeating group component at once.
-type PerRowTrb = 'save_and_next_button' | 'save_button' | 'edit_button_close' | 'edit_button_open';
+type PerRowTrb =
+  | 'save_and_next_button'
+  | 'save_button'
+  | 'edit_button_close'
+  | 'edit_button_open'
+  | 'multipage_next_button'
+  | 'multipage_back_button';
 type PerRowEdit = 'deleteButton' | 'saveButton' | 'editButton' | 'alertOnDelete' | 'saveAndNextButton';
 export type GroupExpressions = ExprResolved<{
   textResourceBindings?: Pick<RepGroupTrb, PerRowTrb>;

src/layout/RepeatingGroup/utils.ts

@@ -207,4 +207,22 @@ export const RepGroupHooks = {
 
     return childIds;
   },
+
+  useChildIdsWithMultiPage(
+    node: LayoutNode<'RepeatingGroup'> | undefined,
+  ): { id: string; multiPageIndex: number | undefined }[] {
+    const component = useLayoutLookups().getComponent(node?.baseId, 'RepeatingGroup');
+    const idMutator = useComponentIdMutator();
+    if (!component?.edit?.multiPage) {
+      return component?.children.map(idMutator).map((id) => ({ id, multiPageIndex: undefined })) ?? [];
+    }
+
+    const children: { id: string; multiPageIndex: number | undefined }[] = [];
+    for (const id of component.children) {
+      const [multiPageIndex, baseId] = id.split(':', 2);
+      children.push({ id: idMutator(baseId), multiPageIndex: parseInt(multiPageIndex) });
+    }
+
+    return children;
+  },
 };