[821] ui/config-wizard: Shared state in redux slice

CHANGELOG.md

@@ -28,6 +28,8 @@ The types of changes are:
 
 ### Changed
 * Updated the `datamap` endpoint to return human-readable column names as the first response item [#779](https://github.com/ethyca/fides/pull/779)
+* Initial configuration wizard UI view
+  * Refactored step & form results management to use Redux Toolkit slice.
 
 ### Fixed
 

clients/admin-ui/.eslintrc.json

@@ -23,15 +23,29 @@
     "react/jsx-filename-extension": [
       1,
       {
-        "extensions": [".tsx"]
+        "extensions": [
+          ".tsx"
+        ]
       }
     ],
-    "react/jsx-props-no-spreading": [0],
+    "react/jsx-props-no-spreading": [
+      0
+    ],
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
     // since we are using static site export
     "@next/next/no-img-element": "off",
     // since defaultProps are deprecated for function components
-    "react/require-default-props": "off"
+    "react/require-default-props": "off",
+    // Redux Toolkit reducers pass writable drafts for state updates which are cleaner than object spreading.
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsForRegex": [
+          "^draft"
+        ]
+      }
+    ]
   }
-}
+}

clients/admin-ui/src/app/hooks.ts

@@ -1,6 +1,6 @@
-import { TypedUseSelectorHook, useSelector } from "react-redux";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
-import type { AppState } from "./store";
+import type { AppDispatch, AppState } from "./store";
 
-// eslint-disable-next-line import/prefer-default-export
+export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;

clients/admin-ui/src/app/store.ts

@@ -2,10 +2,7 @@ import { configureStore } from "@reduxjs/toolkit";
 import { setupListeners } from "@reduxjs/toolkit/query/react";
 import { createWrapper } from "next-redux-wrapper";
 
-import {
-  organizationApi,
-  reducer as organizationReducer,
-} from "~/features/config-wizard/organization.slice";
+import { reducer as configWizardReducer } from "~/features/config-wizard/config-wizard.slice";
 import { scannerApi } from "~/features/config-wizard/scanner.slice";
 import {
   dataQualifierApi,
@@ -20,6 +17,10 @@ import {
   reducer as dataUseReducer,
 } from "~/features/data-use/data-use.slice";
 import { datasetApi, reducer as datasetReducer } from "~/features/dataset";
+import {
+  organizationApi,
+  reducer as organizationReducer,
+} from "~/features/organization";
 import { systemApi } from "~/features/system";
 import {
   dataCategoriesApi,
@@ -30,6 +31,7 @@ import { reducer as userReducer } from "~/features/user";
 const makeStore = () => {
   const store = configureStore({
     reducer: {
+      configWizard: configWizardReducer,
       user: userReducer,
       dataset: datasetReducer,
       dataCategories: dataCategoriesReducer,
@@ -64,5 +66,6 @@ const makeStore = () => {
 
 export type AppStore = ReturnType<typeof makeStore>;
 export type AppState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];
 
 export const wrapper = createWrapper<AppStore>(makeStore);

clients/admin-ui/src/features/common/Stepper.tsx

@@ -9,7 +9,7 @@ import {
 
 interface Props {
   activeStep: number | null;
-  setActiveStep: Function;
+  setActiveStep: (step: number) => void;
   steps: { number: number; name: string }[];
 }
 

clients/admin-ui/src/features/config-wizard/AddSystemForm.tsx

@@ -12,118 +12,122 @@ import {
   Text,
   Tooltip,
 } from "@fidesui/react";
-import type { NextPage } from "next";
 import React from "react";
 
+import { useAppDispatch } from "~/app/hooks";
 import {
   AWSLogoIcon,
   ManualSetupIcon,
   OktaLogoIcon,
   QuestionIcon,
 } from "~/features/common/Icon";
 
+import { changeStep } from "./config-wizard.slice";
 import { iconButtonSize } from "./constants";
 
-const AddSystemForm: NextPage<{
-  handleChangeStep: Function;
-}> = ({ handleChangeStep }) => (
-  <chakra.form w="100%">
-    <Stack ml="100px" spacing={10}>
-      <Heading as="h3" size="lg">
-        Add a system
-      </Heading>
-      <Accordion allowToggle border="transparent">
-        <AccordionItem>
-          {({ isExpanded }) => (
-            <>
-              <h2>
-                The building blocks of your data map are the list of systems
-                that exist in your organization. Think of systems as anything
-                that might store or process data in your organization, from a
-                web application, to a database or data warehouse.
-                <AccordionButton
-                  display="inline"
-                  padding="0px"
-                  ml="5px"
-                  width="auto"
-                  color="complimentary.500"
-                >
-                  {isExpanded ? `(show less)` : `(show more)`}
-                </AccordionButton>
-              </h2>
-              <AccordionPanel padding="0px" mt="20px">
-                Let’s get started by adding systems that contain data in our
-                organization. You can speed this up by using the automated
-                scanners or adding your systems manually.
-              </AccordionPanel>
-            </>
-          )}
-        </AccordionItem>
-      </Accordion>
-      <Stack>
-        <FormControl>
-          <Stack direction="row" display="flex" alignItems="center" mb={5}>
-            <IconButton
-              aria-label="AWS"
-              boxSize={iconButtonSize}
-              minW={iconButtonSize}
-              boxShadow="base"
-              variant="ghost"
-              icon={<AWSLogoIcon boxSize="full" />}
-              onClick={() => handleChangeStep(2)}
-            />
-            <Text>Infrastructure Scan (AWS)</Text>
-            <Tooltip
-              fontSize="md"
-              label="Infrastructure scanning allows you to connect to your cloud infrastructure and automatically identify systems that should be on your data map."
-              placement="right"
-            >
-              <QuestionIcon boxSize={5} color="gray.400" />
-            </Tooltip>
-          </Stack>
-          <Stack direction="row" display="flex" alignItems="center" mb={5}>
-            <IconButton
-              aria-label="Okta"
-              boxSize={iconButtonSize}
-              minW={iconButtonSize}
-              boxShadow="base"
-              variant="ghost"
-              icon={<OktaLogoIcon boxSize="full" />}
-              onClick={() => handleChangeStep(2)}
-            />
-            <Text>System Scan (Okta)</Text>
-            <Tooltip
-              fontSize="md"
-              label="System scanning allows you to connect to your sign-on platform and automatically identify systems that should be on your data map."
-              placement="right"
-            >
-              <QuestionIcon boxSize={5} color="gray.400" />
-            </Tooltip>
-          </Stack>
-          <Stack direction="row" display="flex" alignItems="center">
-            <HStack>
+const AddSystemForm = () => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <chakra.form w="100%">
+      <Stack ml="100px" spacing={10}>
+        <Heading as="h3" size="lg">
+          Add a system
+        </Heading>
+        <Accordion allowToggle border="transparent">
+          <AccordionItem>
+            {({ isExpanded }) => (
+              <>
+                <h2>
+                  The building blocks of your data map are the list of systems
+                  that exist in your organization. Think of systems as anything
+                  that might store or process data in your organization, from a
+                  web application, to a database or data warehouse.
+                  <AccordionButton
+                    display="inline"
+                    padding="0px"
+                    ml="5px"
+                    width="auto"
+                    color="complimentary.500"
+                  >
+                    {isExpanded ? `(show less)` : `(show more)`}
+                  </AccordionButton>
+                </h2>
+                <AccordionPanel padding="0px" mt="20px">
+                  Let’s get started by adding systems that contain data in our
+                  organization. You can speed this up by using the automated
+                  scanners or adding your systems manually.
+                </AccordionPanel>
+              </>
+            )}
+          </AccordionItem>
+        </Accordion>
+        <Stack>
+          <FormControl>
+            <Stack direction="row" display="flex" alignItems="center" mb={5}>
+              <IconButton
+                aria-label="AWS"
+                boxSize={iconButtonSize}
+                minW={iconButtonSize}
+                boxShadow="base"
+                variant="ghost"
+                icon={<AWSLogoIcon boxSize="full" />}
+                onClick={() => dispatch(changeStep())}
+              />
+              <Text>Infrastructure Scan (AWS)</Text>
+              <Tooltip
+                fontSize="md"
+                label="Infrastructure scanning allows you to connect to your cloud infrastructure and automatically identify systems that should be on your data map."
+                placement="right"
+              >
+                <QuestionIcon boxSize={5} color="gray.400" />
+              </Tooltip>
+            </Stack>
+            <Stack direction="row" display="flex" alignItems="center" mb={5}>
               <IconButton
-                aria-label="Manual setup"
+                aria-label="Okta"
                 boxSize={iconButtonSize}
                 minW={iconButtonSize}
                 boxShadow="base"
                 variant="ghost"
-                icon={<ManualSetupIcon boxSize="full" />}
-                onClick={() => handleChangeStep(4)}
+                icon={<OktaLogoIcon boxSize="full" />}
+                onClick={() => dispatch(changeStep())}
               />
-            </HStack>
-            <Text>Add a system manually</Text>
-            <Tooltip
-              fontSize="md"
-              label="If you prefer to, you can add systems manually by entering information about them directly."
-              placement="right"
-            >
-              <QuestionIcon boxSize={5} color="gray.400" />
-            </Tooltip>
-          </Stack>
-        </FormControl>
+              <Text>System Scan (Okta)</Text>
+              <Tooltip
+                fontSize="md"
+                label="System scanning allows you to connect to your sign-on platform and automatically identify systems that should be on your data map."
+                placement="right"
+              >
+                <QuestionIcon boxSize={5} color="gray.400" />
+              </Tooltip>
+            </Stack>
+            <Stack direction="row" display="flex" alignItems="center">
+              <HStack>
+                <IconButton
+                  aria-label="Manual setup"
+                  boxSize={iconButtonSize}
+                  minW={iconButtonSize}
+                  boxShadow="base"
+                  variant="ghost"
+                  icon={<ManualSetupIcon boxSize="full" />}
+                  onClick={() => dispatch(changeStep(5))}
+                />
+              </HStack>
+              <Text>Add a system manually</Text>
+              <Tooltip
+                fontSize="md"
+                label="If you prefer to, you can add systems manually by entering information about them directly."
+                placement="right"
+              >
+                <QuestionIcon boxSize={5} color="gray.400" />
+              </Tooltip>
+            </Stack>
+          </FormControl>
+        </Stack>
       </Stack>
-    </Stack>
-  </chakra.form>
-);
+    </chakra.form>
+  );
+};
+
 export default AddSystemForm;