Remove create PDF button and add ConvertBackToForm button in PDF config

Altinn · Sep 10, 2024 · d57a769 · d57a769
1 parent 04a0e28
commit d57a769
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 26 deletions.
diff --git a/...ckages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.module.css b/...ckages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.module.css
@@ -6,5 +6,6 @@
   padding-top: var(--fds-spacing-5);
   padding-inline: var(--fds-spacing-5);
   display: grid;
+  justify-items: flex-start;
   gap: var(--fds-spacing-5);
 }
diff --git a/...tend/packages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.tsx b/...tend/packages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StudioModal, StudioProperty } from '@studio/components';
+import { StudioButton, StudioModal, StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { FileIcon } from '@studio/icons';
 import { Alert, Combobox, Heading, Switch } from '@digdir/designsystemet-react';
@@ -72,23 +72,30 @@ export const PdfConfig = () => {
   const handleConvertPageToPdfWhenExistingPdf = (deleteCurrent?: boolean) => {
     // Remove all layouts in exclude when setting a dedicated PDF or converting a current into PDF?
     const pdfLayoutName = formLayoutSettings.pages.pdfLayoutName;
-    // Delete current pdfLayout if it exists. Should include a choice here to convert it back to regular layout or delete it
     if (deleteCurrent) {
       deleteLayout(pdfLayoutName);
     } else {
       formLayoutSettings.pages.order.push(pdfLayoutName);
     }
     handleConvertPageToPdf();
+    setShowConvertChoices(false);
   };
 
   const handleConvertPageToPdf = () => {
     formLayoutSettings.pages.pdfLayoutName = selectedFormLayoutName;
     formLayoutSettings.pages.order.splice(
       formLayoutSettings.pages.order.indexOf(selectedFormLayoutName),
+      1,
     );
     mutateFormLayoutSettings(formLayoutSettings);
   };
 
+  const convertExistingPdfToFormLayout = () => {
+    delete formLayoutSettings.pages.pdfLayoutName;
+    formLayoutSettings.pages.order.push(selectedFormLayoutName);
+    mutateFormLayoutSettings(formLayoutSettings);
+  };
+
   const handleExcludePage = (checked: boolean) => {
     const updatedFormLayoutSettings = handleExcludePageFromPdf(
       formLayoutSettings,
@@ -146,7 +153,12 @@ export const PdfConfig = () => {
           {t('ux_editor.page_config_pdf_exclude_page_from_default_pdf')}
         </Switch>
         {currentPageIsPdf && (
-          <Alert>{t('ux_editor.page_config_pdf_current_page_is_pdf_info')}</Alert>
+          <>
+            <StudioButton size='small' onClick={convertExistingPdfToFormLayout}>
+              {t('ux_editor.page_config_pdf_convert_existing_pdf')}
+            </StudioButton>
+            <Alert size='small'>{t('ux_editor.page_config_pdf_current_page_is_pdf_info')}</Alert>
+          </>
         )}
         {!usePdfLayout && (
           <Combobox

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
@@ -104,21 +104,21 @@ export const DesignView = (): ReactNode => {
     if (layout === undefined) return null;
 
     // Check if the layout has unique component IDs
-    const isValidLayout = !duplicatedIdsExistsInLayout(layout.data);
+    const isInvalidLayout = duplicatedIdsExistsInLayout(layout.data);
 
     return (
       <PageAccordion
         key={i}
         pageName={layout.page}
         isOpen={layout.page === selectedFormLayoutName}
         onClick={() => handleClickAccordion(layout.page)}
-        isValid={isValidLayout}
-        hasUniqueIds={!layoutsWithDuplicateComponents.duplicateLayouts.includes(layout.page)}
+        isInvalid={isInvalidLayout}
+        hasDuplicatedIds={layoutsWithDuplicateComponents.duplicateLayouts.includes(layout.page)}
       >
         {layout.page === selectedFormLayoutName && (
           <FormLayout
             layout={layout.data}
-            isValid={isValidLayout}
+            isInvalid={isInvalidLayout}
             duplicateComponents={layoutsWithDuplicateComponents.duplicateComponents}
           />
         )}
@@ -150,6 +150,9 @@ export const DesignView = (): ReactNode => {
               pdfLayoutName={pdfLayoutName}
               selectedFormLayoutName={selectedFormLayoutName}
               onAccordionClick={() => handleClickAccordion(pdfLayoutName)}
+              hasDuplicatedIds={layoutsWithDuplicateComponents.duplicateLayouts.includes(
+                pdfLayoutName,
+              )}
             />
           </div>
         </div>

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.test.tsx
@@ -12,7 +12,7 @@ import { internalLayoutWithMultiPageGroup } from '../../testing/layoutWithMultiP
 
 const defaultProps: FormLayoutProps = {
   layout: layoutMock,
-  isValid: true,
+  isInvalid: false,
 };
 
 describe('FormLayout', () => {
@@ -40,7 +40,7 @@ describe('FormLayout', () => {
       },
     };
 
-    render({ layout: layoutWithDuplicatedIds, isValid: false });
+    render({ layout: layoutWithDuplicatedIds, isInvalid: true });
 
     expect(
       screen.getByText(textMock('ux_editor.formLayout.warning_duplicates')),

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx b/frontend/packages/ux-editor/src/containers/DesignView/FormLayout.tsx
@@ -8,12 +8,12 @@ import { FormLayoutWarning } from './FormLayoutWarning';
 
 export interface FormLayoutProps {
   layout: IInternalLayout;
-  isValid: boolean;
+  isInvalid: boolean;
   duplicateComponents?: string[];
 }
 
-export const FormLayout = ({ layout, isValid, duplicateComponents }: FormLayoutProps) => {
-  if (!isValid) {
+export const FormLayout = ({ layout, isInvalid, duplicateComponents }: FormLayoutProps) => {
+  if (isInvalid) {
     return <FormLayoutWarning layout={layout} />;
   }
   return (

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/PageAccordion.tsx
@@ -16,8 +16,8 @@ export type PageAccordionProps = {
   children: ReactNode;
   isOpen: boolean;
   onClick: () => void;
-  isValid?: boolean;
-  hasUniqueIds?: boolean;
+  isInvalid?: boolean;
+  hasDuplicatedIds?: boolean;
   pageIsReceipt?: boolean;
   pageIsPdf?: boolean;
   showNavigationMenu?: boolean;
@@ -32,11 +32,7 @@ export type PageAccordionProps = {
  * @property {ReactNode}[children] - The children of the component
  * @property {boolean}[isOpen] - If the accordion is open or not
  * @property {function}[onClick] - Function to execute when the accordion is clicked
-<<<<<<< HEAD
-=======
- * @property {boolean}[pageIsReceipt] - If the page is receipt or not
  * @property {boolean}[pageIsPdf] - If the page is pdf or not
->>>>>>> 5633f518a (Add PDF config for page and layoutset)
  *
  * @returns {ReactNode} - The rendered component
  */
@@ -45,9 +41,8 @@ export const PageAccordion = ({
   children,
   isOpen,
   onClick,
-  isValid,
-  hasUniqueIds,
-  pageIsReceipt,
+  isInvalid,
+  hasDuplicatedIds,
   pageIsPdf,
   showNavigationMenu = true,
 }: PageAccordionProps): ReactNode => {
@@ -72,11 +67,11 @@ export const PageAccordion = ({
   };
 
   return (
-    <Accordion.Item className={pageIsReceipt && classes.receiptItem} open={isOpen}>
+    <Accordion.Item open={isOpen}>
       <div className={classes.accordionHeaderRow}>
         <Accordion.Header
           className={
-            isValid && hasUniqueIds ? classes.accordionHeader : classes.accordionHeaderWarning
+            isInvalid || hasDuplicatedIds ? classes.accordionHeaderWarning : classes.accordionHeader
           }
           level={3}
           onHeaderClick={onClick}

diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PdfLayout/PdfLayoutAccordion.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PdfLayout/PdfLayoutAccordion.tsx
@@ -10,11 +10,13 @@ export interface PdfLayoutAccordionProps {
   pdfLayoutName: string;
   selectedFormLayoutName: string;
   onAccordionClick: () => void;
+  hasDuplicatedIds: boolean;
 }
 export const PdfLayoutAccordion = ({
   pdfLayoutName,
   selectedFormLayoutName,
   onAccordionClick,
+  hasDuplicatedIds,
 }: PdfLayoutAccordionProps): React.ReactNode => {
   const layouts = useFormLayouts();
   const formLayoutData = mapFormLayoutsToFormLayoutPages(layouts);
@@ -25,14 +27,15 @@ export const PdfLayoutAccordion = ({
         pageName={pdfLayoutData.page}
         isOpen={pdfLayoutData.page === selectedFormLayoutName}
         onClick={onAccordionClick}
-        isValid={!duplicatedIdsExistsInLayout(pdfLayoutData.data)}
+        isInvalid={duplicatedIdsExistsInLayout(pdfLayoutData.data)}
+        hasDuplicatedIds={hasDuplicatedIds}
         showNavigationMenu={false}
         pageIsPdf={true}
       >
         {pdfLayoutData.page === selectedFormLayoutName && (
           <FormLayout
             layout={pdfLayoutData.data}
-            isValid={!duplicatedIdsExistsInLayout(pdfLayoutData.data)}
+            isInvalid={duplicatedIdsExistsInLayout(pdfLayoutData.data)}
           />
         )}
       </PageAccordion>

diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useAddLayoutMutation.ts b/frontend/packages/ux-editor/src/hooks/mutations/useAddLayoutMutation.ts
@@ -36,7 +36,6 @@ export const useAddLayoutMutation = (org: string, app: string, layoutSetName: st
 
   return useMutation({
     mutationFn: async ({ layoutName, isPdf = false }: AddLayoutMutationArgs) => {
-      const layoutSettings: ILayoutSettings = formLayoutSettingsQuery.data;
       const layouts = formLayoutsQuery.data;
 
       if (Object.keys(layouts).indexOf(layoutName) !== -1) throw Error('Layout already exists');