PDF: Bugfixes (#940)

* fixes #931

* hide help-text on print

* Refactored to use sagas, and simplify react logic

* fix link print styling

* move watchers to extraSagas

* nitpicks

* avoid duplicating pdfLayoutName

src/App.tsx

@@ -6,12 +6,14 @@ import { useAppSelector } from 'src/common/hooks/useAppSelector';
 import { Entrypoint } from 'src/features/entrypoint/Entrypoint';
 import { PartySelection } from 'src/features/instantiate/containers/PartySelection';
 import { UnknownError } from 'src/features/instantiate/containers/UnknownError';
+import { PdfActions } from 'src/features/pdf/data/pdfSlice';
 import { makeGetAllowAnonymousSelector } from 'src/selectors/getAllowAnonymous';
 import { makeGetHasErrorsSelector } from 'src/selectors/getErrors';
 import { selectAppName, selectAppOwner } from 'src/selectors/language';
 import { ProcessWrapper } from 'src/shared/containers/ProcessWrapper';
 import { QueueActions } from 'src/shared/resources/queue/queueSlice';
 import { httpGet } from 'src/utils/network/networking';
+import { shouldGeneratePdf } from 'src/utils/pdf';
 import { getEnvironmentLoginUrl, refreshJwtTokenUrl } from 'src/utils/urls/appUrlHelper';
 
 // 1 minute = 60.000ms
@@ -47,13 +49,21 @@ export const App = () => {
       window.addEventListener('scroll', refreshJwtToken);
       window.addEventListener('onfocus', refreshJwtToken);
       window.addEventListener('keydown', refreshJwtToken);
+      window.addEventListener('hashchange', setPdfState);
     }
 
     function removeEventListeners() {
       window.removeEventListener('mousemove', refreshJwtToken);
       window.removeEventListener('scroll', refreshJwtToken);
       window.removeEventListener('onfocus', refreshJwtToken);
       window.removeEventListener('keydown', refreshJwtToken);
+      window.removeEventListener('hashchange', setPdfState);
+    }
+
+    function setPdfState() {
+      if (shouldGeneratePdf()) {
+        dispatch(PdfActions.pdfStateChanged());
+      }
     }
 
     function refreshJwtToken() {

src/__mocks__/initialStateMock.ts

@@ -80,6 +80,12 @@ export function getInitialStateMock(customStates?: Partial<IRuntimeState>): IRun
       parties: [partyMock],
       selectedParty: partyMock,
     },
+    pdf: {
+      readyForPrint: false,
+      pdfFormat: null,
+      method: null,
+      error: null,
+    },
     process: {
       error: null,
       taskType: null,
@@ -135,8 +141,6 @@ export function getInitialStateMock(customStates?: Partial<IRuntimeState>): IRun
     optionState: {
       options: {},
       error: null,
-      optionsCount: 0,
-      optionsLoadedCount: 0,
       loading: false,
     },
     dataListState: {

src/components/summary/SummaryComponent.tsx

@@ -207,7 +207,7 @@ export function SummaryComponent(_props: ISummaryComponent) {
       lg={displayGrid?.lg || false}
       xl={displayGrid?.xl || false}
       data-testid={`summary-${id}`}
-      className={cn(pageBreakStyles(summaryComponent ?? formComponent))}
+      className={cn(pageBreakStyles(summaryComponent?.pageBreak ?? formComponent?.pageBreak))}
     >
       <Grid
         container={true}

src/features/form/components/HelpTextContainer.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { makeStyles } from '@material-ui/core';
+
 import { HelpTextIcon } from 'src/features/form/components/HelpTextIcon';
 import { HelpTextPopover } from 'src/features/form/components/HelpTextPopover';
 import type { ILanguage } from 'src/types/shared';
@@ -9,9 +11,18 @@ export interface IHelpTextContainerProps {
   helpText: React.ReactNode;
 }
 
+const useStyles = makeStyles({
+  hiddenInPdf: {
+    '@media print': {
+      display: 'none',
+    },
+  },
+});
+
 export function HelpTextContainer({ language, helpText }: IHelpTextContainerProps) {
   const helpIconRef = React.useRef();
   const [openPopover, setOpenPopover] = React.useState<boolean>(false);
+  const classes = useStyles();
 
   const handlePopoverClick = (event: React.MouseEvent): void => {
     event.stopPropagation();
@@ -39,6 +50,7 @@ export function HelpTextContainer({ language, helpText }: IHelpTextContainerProp
     <span
       tabIndex={-1}
       onBlur={onBlur}
+      className={classes.hiddenInPdf}
     >
       <HelpTextIcon
         helpIconRef={helpIconRef}

src/features/form/containers/DisplayGroupContainer.tsx

@@ -60,7 +60,7 @@ export function DisplayGroupContainer(props: IDisplayGroupContainer) {
       container={true}
       item={true}
       id={props.id || container.id}
-      className={cn(classes.groupContainer, pageBreakStyles(container))}
+      className={cn(classes.groupContainer, pageBreakStyles(container.pageBreak))}
       spacing={3}
       alignItems='flex-start'
       data-testid='display-group-container'

src/features/form/layout/formLayoutSlice.ts

@@ -343,6 +343,11 @@ export const formLayoutSlice = createSagaSlice((mkAction: MkActionType<ILayoutSt
         state.uiConfig.keepScrollPos = undefined;
       },
     }),
+    updateLayout: mkAction<ILayouts>({
+      reducer: (state, action) => {
+        state.layouts = { ...state.layouts, ...action.payload };
+      },
+    }),
   },
 }));
 

src/features/form/layout/update/updateFormLayoutSagas.ts

@@ -549,6 +549,8 @@ export function* watchInitialCalculatePageOrderAndMoveToNextPageSaga(): SagaIter
           skipMoveToNext: true,
         }),
       );
+    } else {
+      yield put(FormLayoutActions.calculatePageOrderAndMoveToNextPageRejected({ error: null }));
     }
   }
 }