🐛 Fix stale wizard state when navigating between assessments (#1484)

- Fixes an issue previously worked around by refreshing the sections when the assessment was being fetched. This can be solved by conditional rendering the entire wizard. - Removes old isOpen props & state - Fixes retake by removing a history.push to the previous assessment.id - Adds an error alert to indicate a failed assessment fetch Signed-off-by: ibolton336 <[email protected]>
konveyor · Oct 19, 2023 · ba66b4f · ba66b4f
1 parent a7d5d84
commit ba66b4f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/client/src/app/pages/assessment/assessment-page.tsx b/client/src/app/pages/assessment/assessment-page.tsx
@@ -63,8 +63,8 @@ const AssessmentPage: React.FC = () => {
         )}
         <AssessmentWizard
           assessment={assessment}
-          isOpen
           isLoadingAssessment={isFetching}
+          fetchError={fetchError}
         />
       </PageSection>
     </>

diff --git a/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx b/...es/assessment/components/assessment-actions/components/dynamic-assessment-actions-row.tsx
@@ -187,16 +187,6 @@ const DynamicAssessmentActionsRow: FunctionComponent<
           }).then(() => {
             createAssessment();
           });
-          history.push(
-            formatPath(
-              isArchetype
-                ? Paths.archetypesAssessment
-                : Paths.applicationsAssessment,
-              {
-                assessmentId: assessment?.id,
-              }
-            )
-          );
         } catch (error) {
           pushNotification({
             title: t("terms.error"),

diff --git a/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx b/client/src/app/pages/assessment/components/assessment-wizard/assessment-wizard.tsx
@@ -3,7 +3,13 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { FieldErrors, FormProvider, useForm } from "react-hook-form";
-import { ButtonVariant, Wizard, WizardStep } from "@patternfly/react-core";
+import {
+  Alert,
+  ButtonVariant,
+  Spinner,
+  Wizard,
+  WizardStep,
+} from "@patternfly/react-core";
 
 import {
   Assessment,
@@ -37,6 +43,7 @@ import useIsArchetype from "@app/hooks/useIsArchetype";
 import { useFetchStakeholderGroups } from "@app/queries/stakeholdergoups";
 import { useFetchStakeholders } from "@app/queries/stakeholders";
 import { WizardStepNavDescription } from "../wizard-step-nav-description";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
 export const SAVE_ACTION_KEY = "saveAction";
 
@@ -60,14 +67,14 @@ export interface AssessmentWizardValues {
 
 export interface AssessmentWizardProps {
   assessment?: Assessment;
-  isOpen: boolean;
   isLoadingAssessment: boolean;
+  fetchError?: AxiosError | null;
 }
 
 export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
   assessment,
-  isOpen,
   isLoadingAssessment,
+  fetchError,
 }) => {
   const isArchetype = useIsArchetype();
   const queryClient = useQueryClient();
@@ -97,8 +104,8 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
 
   const { pushNotification } = React.useContext(NotificationsContext);
 
-  const sortedSections = (!isLoadingAssessment && assessment ? assessment.sections : []).sort(
-      (a, b) => a.order - b.order
+  const sortedSections = (assessment ? assessment.sections : []).sort(
+    (a, b) => a.order - b.order
   );
 
   //TODO: Add comments to the sections when/if available from api
@@ -583,7 +590,17 @@ export const AssessmentWizard: React.FC<AssessmentWizardProps> = ({
 
   return (
     <>
-      {isOpen && !!sortedSections.length && (
+      {fetchError && (
+        <Alert
+          className={`${spacing.mtMd} ${spacing.mbMd}`}
+          variant="danger"
+          isInline
+          title={getAxiosErrorMessage(fetchError)}
+        />
+      )}
+      {isLoadingAssessment ? (
+        <Spinner />
+      ) : (
         <FormProvider {...methods}>
           <Wizard
             isVisitRequired