234/wizard nav updates (#1568)

ethyca · Oct 30, 2022 · b879eda · b879eda
1 parent 0ed1baa
commit b879eda
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 38 deletions.
diff --git a/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx b/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx
@@ -241,7 +241,7 @@ const AuthenticateAwsForm = () => {
                   variant="outline"
                   onClick={!isSubmitting ? handleCancel : onOpen}
                 >
-                  Cancel
+                  Back
                 </Button>
                 <Button
                   type="submit"

diff --git a/clients/admin-ui/src/features/config-wizard/ConfigWizardWalkthrough.tsx b/clients/admin-ui/src/features/config-wizard/ConfigWizardWalkthrough.tsx
@@ -1,7 +1,6 @@
 import { Box, Button, Divider, Stack } from "@fidesui/react";
 import HorizontalStepper from "common/HorizontalStepper";
 import Stepper from "common/Stepper";
-import React from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { CloseSolidIcon } from "~/features/common/Icon";
@@ -85,23 +84,20 @@ const ConfigWizardWalkthrough = () => {
                 {reviewStep === 1 && (
                   <DescribeSystemStep
                     system={system}
-                    onCancel={handleCancelSetup}
                     onSuccess={handleSuccess}
                     abridged
                   />
                 )}
                 {reviewStep === 2 && system && (
                   <PrivacyDeclarationStep
                     system={system}
-                    onCancel={handleCancelSetup}
                     onSuccess={handleSuccess}
                     abridged
                   />
                 )}
                 {reviewStep === 3 && system && (
                   <ReviewSystemStep
                     system={system}
-                    onCancel={handleCancelSetup}
                     onSuccess={() => dispatch(changeReviewStep())}
                     abridged
                   />

diff --git a/clients/admin-ui/src/features/config-wizard/ScanResultsForm.tsx b/clients/admin-ui/src/features/config-wizard/ScanResultsForm.tsx
@@ -194,7 +194,7 @@ const ScanResultsForm = () => {
 
                 <HStack>
                   <Button variant="outline" onClick={handleCancel}>
-                    Cancel
+                    Back
                   </Button>
                   <Button
                     type="submit"

diff --git a/clients/admin-ui/src/features/system/DescribeSystemStep.tsx b/clients/admin-ui/src/features/system/DescribeSystemStep.tsx
@@ -2,15 +2,17 @@ import { Box, Button, Heading, Stack, useToast } from "@fidesui/react";
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query/fetchBaseQuery";
 import { Form, Formik } from "formik";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import * as Yup from "yup";
 
+import { useAppDispatch } from "~/app/hooks";
 import {
   CustomCreatableMultiSelect,
   CustomMultiSelect,
   CustomTextInput,
 } from "~/features/common/form/inputs";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
+import { changeStep } from "~/features/config-wizard/config-wizard.slice";
 import DescribeSystemsFormExtension from "~/features/system/DescribeSystemsFormExtension";
 import {
   defaultInitialValues,
@@ -44,14 +46,12 @@ const SystemHeading = ({ system }: { system?: System }) => {
 };
 
 interface Props {
-  onCancel: () => void;
   onSuccess: (system: System) => void;
   abridged?: boolean;
   system?: System;
 }
 
 const DescribeSystemStep = ({
-  onCancel,
   onSuccess,
   abridged,
   system: passedInSystem,
@@ -66,6 +66,7 @@ const DescribeSystemStep = ({
   const [createSystem] = useCreateSystemMutation();
   const [updateSystem] = useUpdateSystemMutation();
   const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useAppDispatch();
   const { data: systems } = useGetAllSystemsQuery();
   const systemOptions = systems
     ? systems.map((s) => ({ label: s.name ?? s.fides_key, value: s.fides_key }))
@@ -81,6 +82,10 @@ const DescribeSystemStep = ({
 
   const toast = useToast();
 
+  const handleBack = () => {
+    dispatch(changeStep(2));
+  };
+
   const handleSubmit = async (values: FormValues) => {
     const systemBody = transformFormValuesToSystem(values);
 
@@ -187,13 +192,13 @@ const DescribeSystemStep = ({
             </Stack>
             <Box>
               <Button
-                onClick={() => onCancel()}
+                onClick={handleBack}
                 mr={2}
                 size="sm"
                 variant="outline"
-                data-testid="cancel-btn"
+                data-testid="back-btn"
               >
-                Cancel
+                Back
               </Button>
               <Button
                 type="submit"

diff --git a/clients/admin-ui/src/features/system/ManualSystemFlow.tsx b/clients/admin-ui/src/features/system/ManualSystemFlow.tsx
@@ -78,23 +78,17 @@ const ManualSystemFlow = () => {
       </GridItem>
       <GridItem w="75%">
         {currentStepIndex === 0 ? (
-          <DescribeSystemStep
-            onSuccess={handleSuccess}
-            onCancel={goBack}
-            system={activeSystem}
-          />
+          <DescribeSystemStep onSuccess={handleSuccess} system={activeSystem} />
         ) : null}
         {currentStepIndex === 1 && activeSystem ? (
           <PrivacyDeclarationStep
             system={activeSystem}
             onSuccess={handleSuccess}
-            onCancel={goBack}
           />
         ) : null}
         {currentStepIndex === 2 && activeSystem ? (
           <ReviewSystemStep
             system={activeSystem}
-            onCancel={goBack}
             onSuccess={() => setCurrentStepIndex(currentStepIndex + 1)}
           />
         ) : null}

diff --git a/clients/admin-ui/src/features/system/PrivacyDeclarationForm.tsx b/clients/admin-ui/src/features/system/PrivacyDeclarationForm.tsx
@@ -139,10 +139,10 @@ const PrivacyDeclarationForm = ({
                 {onCancel && (
                   <Button
                     variant="outline"
-                    data-testid="cancel-btn"
+                    data-testid="back-btn"
                     onClick={onCancel}
                   >
-                    Cancel
+                    Back
                   </Button>
                 )}
                 <Button

diff --git a/clients/admin-ui/src/features/system/PrivacyDeclarationStep.tsx b/clients/admin-ui/src/features/system/PrivacyDeclarationStep.tsx
@@ -2,9 +2,11 @@ import { Box, Button, Divider, Heading, Stack, useToast } from "@fidesui/react";
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query/fetchBaseQuery";
 import { FormikHelpers } from "formik";
-import React, { Fragment, useState } from "react";
+import { Fragment, useState } from "react";
 
+import { useAppDispatch } from "~/app/hooks";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
+import { changeReviewStep } from "~/features/config-wizard/config-wizard.slice";
 import { PrivacyDeclaration, System } from "~/types/api";
 
 import PrivacyDeclarationAccordion from "./PrivacyDeclarationAccordion";
@@ -23,23 +25,22 @@ const transformFormValuesToDeclaration = (
 
 interface Props {
   system: System;
-  onCancel: () => void;
   onSuccess: (system: System) => void;
   abridged?: boolean;
 }
 
-const PrivacyDeclarationStep = ({
-  system,
-  onCancel,
-  onSuccess,
-  abridged,
-}: Props) => {
+const PrivacyDeclarationStep = ({ system, onSuccess, abridged }: Props) => {
   const toast = useToast();
   const [formDeclarations, setFormDeclarations] = useState<
     PrivacyDeclaration[]
   >(system?.privacy_declarations ? [...system.privacy_declarations] : []);
   const [updateSystem] = useUpdateSystemMutation();
   const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const handleBack = () => {
+    dispatch(changeReviewStep(1));
+  };
 
   const handleSubmit = async () => {
     const systemBodyWithDeclaration = {
@@ -145,13 +146,13 @@ const PrivacyDeclarationStep = ({
       <PrivacyDeclarationForm onSubmit={addDeclaration} abridged={abridged} />
       <Box>
         <Button
-          onClick={onCancel}
+          onClick={handleBack}
           mr={2}
           size="sm"
           variant="outline"
-          data-testid="cancel-btn"
+          data-testid="back-btn"
         >
-          Cancel
+          Back
         </Button>
         <Button
           colorScheme="primary"

diff --git a/clients/admin-ui/src/features/system/ReviewSystemStep.tsx b/clients/admin-ui/src/features/system/ReviewSystemStep.tsx
@@ -8,23 +8,30 @@ import {
   Text,
 } from "@fidesui/react";
 import { Form, Formik } from "formik";
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 
+import { useAppDispatch } from "~/app/hooks";
 import ReviewSystemFormExtension from "~/features/system/ReviewSystemFormExtension";
 import { System } from "~/types/api";
 
+import { changeReviewStep } from "../config-wizard/config-wizard.slice";
 import TaxonomyEntityTag from "../taxonomy/TaxonomyEntityTag";
 import { ReviewItem } from "./form-layout";
 import PrivacyDeclarationAccordion from "./PrivacyDeclarationAccordion";
 
 interface Props {
   system: System;
-  onCancel: () => void;
   onSuccess: () => void;
   abridged?: boolean;
 }
 
-const ReviewSystemStep = ({ system, onCancel, onSuccess, abridged }: Props) => {
+const ReviewSystemStep = ({ system, onSuccess, abridged }: Props) => {
+  const dispatch = useAppDispatch();
+
+  const handleBack = () => {
+    dispatch(changeReviewStep(2));
+  };
+
   const handleSubmit = () => {
     onSuccess();
   };
@@ -78,13 +85,13 @@ const ReviewSystemStep = ({ system, onCancel, onSuccess, abridged }: Props) => {
           </Stack>
           <Box>
             <Button
-              onClick={() => onCancel()}
+              onClick={handleBack}
               mr={2}
               size="sm"
               variant="outline"
-              data-testid="cancel-btn"
+              data-testid="back-btn"
             >
-              Cancel
+              Back
             </Button>
             {/* TODO FUTURE: This button doesn't do any registering yet until data maps are added */}
             <Button