fix: replace browser alert/confirm with generic withConfirm wrapper in Questionary and StepView

apps/e2e/cypress/e2e/genericTemplates.cy.ts

@@ -1105,6 +1105,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 1);
 
       cy.contains('Save and continue').click();
@@ -1202,6 +1204,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 2);
 
       cy.contains('Save and continue').click();
@@ -1274,6 +1278,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 1);
 
       cy.contains('Save and continue').click();
@@ -1352,6 +1358,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 1);
 
       cy.contains('Save and continue').click();
@@ -1408,6 +1416,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 0);
     });
 
@@ -1474,6 +1484,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 0);
     });
 
@@ -1527,6 +1539,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 0);
     });
 
@@ -1592,6 +1606,8 @@ context('GenericTemplates tests', () => {
 
       cy.contains('Reset').click();
 
+      cy.contains('OK').click();
+
       cy.get('[data-cy="questionnaires-list-item"]').should('have.length', 1);
 
       cy.contains('Save and continue').click();

apps/e2e/cypress/e2e/templatesAdvanced.cy.ts

@@ -821,6 +821,8 @@ context('Template tests', () => {
 
       cy.contains('Save and continue').click();
 
+      cy.closeNotification();
+
       cy.contains(fileQuestion);
 
       cy.intercept({
@@ -854,6 +856,8 @@ context('Template tests', () => {
 
       cy.notification({ variant: 'success', text: 'Saved' });
 
+      cy.closeNotification();
+
       cy.finishedLoading();
 
       cy.get('.MuiStep-root').contains('Review').click();

apps/frontend/src/components/questionary/Questionary.tsx

@@ -8,6 +8,7 @@ import React, { useContext, useRef, useEffect } from 'react';
 
 import { UserRole } from 'generated/sdk';
 import { useCheckAccess } from 'hooks/common/useCheckAccess';
+import withConfirm, { WithConfirmType } from 'utils/withConfirm';
 
 import {
   createMissingContextErrorMessage,
@@ -20,9 +21,15 @@ interface QuestionaryProps {
   title: string;
   info?: JSX.Element | string;
   previewMode?: boolean;
+  confirm: WithConfirmType;
 }
 
-function Questionary({ title, info, previewMode = false }: QuestionaryProps) {
+function Questionary({
+  title,
+  info,
+  previewMode = false,
+  confirm,
+}: QuestionaryProps) {
   const isMobile = useMediaQuery('(max-width: 500px)');
 
   const theme = useTheme();
@@ -72,6 +79,7 @@ function Questionary({ title, info, previewMode = false }: QuestionaryProps) {
                   dispatch({
                     type: 'GO_TO_STEP_CLICKED',
                     stepIndex: index,
+                    confirm,
                   });
                 }}
                 readonly={stepMetadata.isReadonly && !isUserOfficer}
@@ -134,4 +142,4 @@ function Questionary({ title, info, previewMode = false }: QuestionaryProps) {
   );
 }
 
-export default Questionary;
+export default withConfirm(Questionary);

apps/frontend/src/components/questionary/QuestionaryStepView.tsx

@@ -21,6 +21,7 @@ import {
 } from 'models/questionary/QuestionaryFunctions';
 import { QuestionarySubmissionState } from 'models/questionary/QuestionarySubmissionState';
 import useDataApiWithFeedback from 'utils/useDataApiWithFeedback';
+import withConfirm, { WithConfirmType } from 'utils/withConfirm';
 
 import NavigationFragment from './NavigationFragment';
 import {
@@ -63,12 +64,13 @@ export const createFormikConfigObjects = (
   };
 };
 
-export default function QuestionaryStepView(props: {
+function QuestionaryStepView(props: {
   topicId: number;
   readonly: boolean;
   onStepComplete?: (topicId: number) => void;
+  confirm: WithConfirmType;
 }) {
-  const { topicId } = props;
+  const { topicId, confirm } = props;
 
   const preSubmitActions = usePreSubmitActions();
   const { api } = useDataApiWithFeedback();
@@ -235,17 +237,23 @@ export default function QuestionaryStepView(props: {
     });
   };
 
-  const backHandler = () => dispatch({ type: 'BACK_CLICKED' });
-
-  const confirmNavigation = () =>
-    window.confirm(
-      'You have made changes in this step, which will be discarded. Are you sure?'
-    );
+  const backHandler = () =>
+    dispatch({
+      type: 'BACK_CLICKED',
+      confirm,
+    });
 
   const resetHandler = () => {
-    if (confirmNavigation()) {
-      revertTemplateChanges();
-    }
+    confirm?.(
+      () => {
+        revertTemplateChanges();
+      },
+      {
+        title: 'Confirmation',
+        description:
+          'You have made changes in this step, which will be discarded. Are you sure?',
+      }
+    )();
   };
 
   const saveHandler = () => performSave(true);
@@ -349,3 +357,5 @@ export default function QuestionaryStepView(props: {
     </Formik>
   );
 }
+
+export default withConfirm(QuestionaryStepView);

apps/frontend/src/models/questionary/QuestionarySubmissionState.ts

@@ -12,6 +12,7 @@ import {
   ReducerMiddleware,
   useReducerWithMiddleWares,
 } from 'utils/useReducerWithMiddleWares';
+import { WithConfirmType } from 'utils/withConfirm';
 
 import { SampleFragment } from './../../generated/sdk';
 import { getFieldById } from './QuestionaryFunctions';
@@ -24,9 +25,13 @@ export enum GENERIC_TEMPLATE_EVENT {
 }
 export type Event =
   | { type: 'FIELD_CHANGED'; id: string; newValue: any }
-  | { type: 'BACK_CLICKED' }
-  | { type: 'RESET_CLICKED' }
-  | { type: 'GO_TO_STEP_CLICKED'; stepIndex: number }
+  | { type: 'BACK_CLICKED'; confirm?: WithConfirmType }
+  | { type: 'RESET_CLICKED'; confirm?: WithConfirmType }
+  | {
+      type: 'GO_TO_STEP_CLICKED';
+      stepIndex: number;
+      confirm?: WithConfirmType;
+    }
   | { type: 'GO_STEP_BACK' }
   | { type: 'GO_STEP_FORWARD' }
   | { type: 'CLEAN_DIRTY_STATE' }

apps/frontend/src/models/questionary/useEventHandlers.ts

@@ -12,11 +12,6 @@ import {
 const isNotCreated = (state: QuestionarySubmissionState) =>
   state.getItemId() === 0;
 
-const confirmNavigation = () =>
-  window.confirm(
-    'You have made changes in this step, which will be discarded. Are you sure?'
-  );
-
 export default function useEventHandlers(templateGroupId: TemplateGroupId) {
   const api = useDataApi();
 
@@ -61,13 +56,18 @@ export default function useEventHandlers(templateGroupId: TemplateGroupId) {
       switch (action.type) {
         case 'BACK_CLICKED':
           if (state.isDirty) {
-            if (confirmNavigation()) {
-              await handleReset();
-              dispatch({ type: 'CLEAR_DELETE_LIST' });
-              dispatch({ type: 'GO_STEP_BACK' });
-            } else {
-              // do nothing
-            }
+            action.confirm?.(
+              async () => {
+                await handleReset();
+                dispatch({ type: 'CLEAR_DELETE_LIST' });
+                dispatch({ type: 'GO_STEP_BACK' });
+              },
+              {
+                title: 'Confirmation',
+                description:
+                  'You have made changes in this step, which will be discarded. Are you sure?',
+              }
+            )();
           } else {
             dispatch({ type: 'GO_STEP_BACK' });
           }
@@ -85,17 +85,20 @@ export default function useEventHandlers(templateGroupId: TemplateGroupId) {
               stepIndex: action.stepIndex,
             });
           } else {
-            if (
-              window.confirm(
-                'Changes you recently made in this step will not be saved! Are you sure?'
-              )
-            ) {
-              await handleReset();
-              dispatch({
-                type: 'GO_TO_STEP',
-                stepIndex: action.stepIndex,
-              });
-            }
+            action.confirm?.(
+              async () => {
+                await handleReset();
+                dispatch({
+                  type: 'GO_TO_STEP',
+                  stepIndex: action.stepIndex,
+                });
+              },
+              {
+                title: 'Confirmation',
+                description:
+                  'Changes you recently made in this step will not be saved! Are you sure?',
+              }
+            )();
           }
           break;
       }