Move config wizard system forms to system directory

CHANGELOG.md

@@ -34,6 +34,7 @@ The types of changes are:
 
 * Changed behavior of `load_default_taxonomy` to append instead of upsert [#1040](https://github.com/ethyca/fides/pull/1040)
 * Changed behavior of adding privacy declarations to decouple the actions of the "add" and "next" buttons [#1086](https://github.com/ethyca/fides/pull/1086)
+* Moved system related UI components from the `config-wizard` directory to the `system` directory [#1097](https://github.com/ethyca/fides/pull/1097)
 
 ### Fixed
 

clients/ctl/admin-ui/src/features/config-wizard/ConfigWizardWalkthrough.tsx

@@ -4,6 +4,10 @@ import React from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { CloseSolidIcon } from "~/features/common/Icon";
+import DescribeSystemStep from "~/features/system/DescribeSystemStep";
+import PrivacyDeclarationStep from "~/features/system/PrivacyDeclarationStep";
+import ReviewSystemStep from "~/features/system/ReviewSystemStep";
+import SystemRegisterSuccess from "~/features/system/SystemRegisterSuccess";
 import { System } from "~/types/api";
 
 import HorizontalStepper from "../common/HorizontalStepper";
@@ -19,12 +23,8 @@ import {
   setSystemToCreate,
 } from "./config-wizard.slice";
 import { HORIZONTAL_STEPS, STEPS } from "./constants";
-import DescribeSystemsForm from "./DescribeSystemsForm";
 import OrganizationInfoForm from "./OrganizationInfoForm";
-import PrivacyDeclarationForm from "./PrivacyDeclarationForm";
-import ReviewSystemForm from "./ReviewSystemForm";
 import ScanResultsForm from "./ScanResultsForm";
-import SystemRegisterSuccess from "./SystemRegisterSuccess";
 import ViewYourDataMapPage from "./ViewYourDataMapPage";
 
 const ConfigWizardWalkthrough = () => {
@@ -81,22 +81,22 @@ const ConfigWizardWalkthrough = () => {
                   />
                 ) : null}
                 {reviewStep === 1 && (
-                  <DescribeSystemsForm
+                  <DescribeSystemStep
                     onCancel={handleCancelSetup}
                     onSuccess={handleSuccess}
                     abridged
                   />
                 )}
                 {reviewStep === 2 && system && (
-                  <PrivacyDeclarationForm
+                  <PrivacyDeclarationStep
                     system={system}
                     onCancel={handleCancelSetup}
                     onSuccess={handleSuccess}
                     abridged
                   />
                 )}
                 {reviewStep === 3 && system && (
-                  <ReviewSystemForm
+                  <ReviewSystemStep
                     system={system}
                     onCancel={handleCancelSetup}
                     onSuccess={() => dispatch(changeReviewStep())}

clients/ctl/admin-ui/src/features/config-wizard/DescribeSystemsForm.tsx → clients/ctl/admin-ui/src/features/system/DescribeSystemStep.tsx

@@ -80,7 +80,7 @@ interface Props {
   abridged?: boolean;
 }
 
-const DescribeSystemsForm = ({ onCancel, onSuccess, abridged }: Props) => {
+const DescribeSystemStep = ({ onCancel, onSuccess, abridged }: Props) => {
   const [createSystem] = useCreateSystemMutation();
   const [isLoading, setIsLoading] = useState(false);
   const { data: systems } = useGetAllSystemsQuery();
@@ -217,4 +217,4 @@ const DescribeSystemsForm = ({ onCancel, onSuccess, abridged }: Props) => {
     </Formik>
   );
 };
-export default DescribeSystemsForm;
+export default DescribeSystemStep;

clients/ctl/admin-ui/src/features/system/DescribeSystemsFormExtension.tsx

@@ -10,7 +10,7 @@ import {
 } from "~/features/common/form/inputs";
 import { enumToOptions } from "~/features/common/helpers";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
-import type { FormValues } from "~/features/config-wizard/DescribeSystemsForm";
+import type { FormValues } from "~/features/system/DescribeSystemStep";
 import { DataResponsibilityTitle } from "~/types/api";
 
 const dataResponsibilityOptions = enumToOptions(DataResponsibilityTitle);

clients/ctl/admin-ui/src/features/system/ManualSystemFlow.tsx

@@ -4,10 +4,10 @@ import { useState } from "react";
 
 import { System } from "~/types/api";
 
-import DescribeSystemsForm from "../config-wizard/DescribeSystemsForm";
-import PrivacyDeclarationForm from "../config-wizard/PrivacyDeclarationForm";
-import ReviewSystemForm from "../config-wizard/ReviewSystemForm";
-import SystemRegisterSuccess from "../config-wizard/SystemRegisterSuccess";
+import DescribeSystemStep from "./DescribeSystemStep";
+import PrivacyDeclarationStep from "./PrivacyDeclarationStep";
+import ReviewSystemStep from "./ReviewSystemStep";
+import SystemRegisterSuccess from "./SystemRegisterSuccess";
 
 const STEPS = ["Describe", "Declare", "Review"];
 
@@ -72,20 +72,20 @@ const ManualSystemFlow = () => {
       </GridItem>
       <GridItem w="75%">
         {currentStepIndex === 0 ? (
-          <DescribeSystemsForm
+          <DescribeSystemStep
             onSuccess={handleSuccess}
             onCancel={returnToNew}
           />
         ) : null}
         {currentStepIndex === 1 && newSystem ? (
-          <PrivacyDeclarationForm
+          <PrivacyDeclarationStep
             system={newSystem}
             onSuccess={handleSuccess}
             onCancel={returnToNew}
           />
         ) : null}
         {currentStepIndex === 2 && newSystem ? (
-          <ReviewSystemForm
+          <ReviewSystemStep
             system={newSystem}
             onCancel={returnToNew}
             onSuccess={() => setCurrentStepIndex(currentStepIndex + 1)}

clients/ctl/admin-ui/src/features/config-wizard/PrivacyDeclarationAccordion.tsx → clients/ctl/admin-ui/src/features/system/PrivacyDeclarationAccordion.tsx

@@ -5,30 +5,15 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
-  Grid,
-  GridItem,
   Stack,
   Text,
 } from "@fidesui/react";
-import { ReactNode } from "react";
 
 import TaxonomyEntityTag from "~/features/taxonomy/TaxonomyEntityTag";
 import { PrivacyDeclaration } from "~/types/api";
 
-const DeclarationItem = ({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) => (
-  <Grid templateColumns="1fr 2fr" data-testid={`declaration-${label}`}>
-    <GridItem>
-      <Text color="gray.600">{label}</Text>
-    </GridItem>
-    <GridItem>{children}</GridItem>
-  </Grid>
-);
+import { DeclarationItem } from "./form-layout";
+
 interface Props {
   privacyDeclaration: PrivacyDeclaration;
 }

clients/ctl/admin-ui/src/features/config-wizard/PrivacyDeclarationForm.tsx → clients/ctl/admin-ui/src/features/system/PrivacyDeclarationStep.tsx

@@ -6,6 +6,11 @@ import React, { Fragment, useState } from "react";
 import * as Yup from "yup";
 
 import { useAppSelector } from "~/app/hooks";
+import {
+  CustomMultiSelect,
+  CustomSelect,
+  CustomTextInput,
+} from "~/features/common/form/inputs";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { AddIcon } from "~/features/common/Icon";
 import {
@@ -26,14 +31,9 @@ import {
 } from "~/features/taxonomy/taxonomy.slice";
 import { PrivacyDeclaration, System } from "~/types/api";
 
-import {
-  CustomMultiSelect,
-  CustomSelect,
-  CustomTextInput,
-} from "../common/form/inputs";
-import PrivacyDeclarationFormExtension from "../system/PrivacyDeclarationFormExtension";
-import { useUpdateSystemMutation } from "../system/system.slice";
 import PrivacyDeclarationAccordion from "./PrivacyDeclarationAccordion";
+import PrivacyDeclarationFormExtension from "./PrivacyDeclarationFormExtension";
+import { useUpdateSystemMutation } from "./system.slice";
 
 type FormValues = PrivacyDeclaration;
 
@@ -63,7 +63,7 @@ interface Props {
   abridged?: boolean;
 }
 
-const PrivacyDeclarationForm = ({
+const PrivacyDeclarationStep = ({
   system,
   onCancel,
   onSuccess,
@@ -274,4 +274,4 @@ const PrivacyDeclarationForm = ({
   );
 };
 
-export default PrivacyDeclarationForm;
+export default PrivacyDeclarationStep;

clients/ctl/admin-ui/src/features/system/ReviewSystemFormExtension.tsx

@@ -1,25 +1,9 @@
-import { Box, FormLabel, Grid, GridItem, Text } from "@fidesui/react";
-import React, { ReactNode } from "react";
+import { Box, FormLabel, Text } from "@fidesui/react";
 
 import TaxonomyEntityTag from "~/features/taxonomy/TaxonomyEntityTag";
 import { System } from "~/types/api";
 
-export const ReviewItem = ({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) => (
-  <Grid templateColumns="1fr 2fr" data-testid={`review-${label}`}>
-    <GridItem>
-      <FormLabel fontWeight="semibold" m={0}>
-        {label}:
-      </FormLabel>
-    </GridItem>
-    <GridItem>{children}</GridItem>
-  </Grid>
-);
+import { ReviewItem } from "./form-layout";
 
 const ReviewSystemFormExtension = ({ system }: { system: System }) => (
   <>

clients/ctl/admin-ui/src/features/config-wizard/ReviewSystemForm.tsx → clients/ctl/admin-ui/src/features/system/ReviewSystemStep.tsx

@@ -10,12 +10,11 @@ import {
 import { Form, Formik } from "formik";
 import React, { Fragment } from "react";
 
-import ReviewSystemFormExtension, {
-  ReviewItem,
-} from "~/features/system/ReviewSystemFormExtension";
+import ReviewSystemFormExtension from "~/features/system/ReviewSystemFormExtension";
 import { System } from "~/types/api";
 
 import TaxonomyEntityTag from "../taxonomy/TaxonomyEntityTag";
+import { ReviewItem } from "./form-layout";
 import PrivacyDeclarationAccordion from "./PrivacyDeclarationAccordion";
 
 interface Props {
@@ -25,7 +24,7 @@ interface Props {
   abridged?: boolean;
 }
 
-const ReviewSystemForm = ({ system, onCancel, onSuccess, abridged }: Props) => {
+const ReviewSystemStep = ({ system, onCancel, onSuccess, abridged }: Props) => {
   const handleSubmit = () => {
     onSuccess();
   };
@@ -100,4 +99,4 @@ const ReviewSystemForm = ({ system, onCancel, onSuccess, abridged }: Props) => {
     </Formik>
   );
 };
-export default ReviewSystemForm;
+export default ReviewSystemStep;

clients/ctl/admin-ui/src/features/system/form-layout.tsx

@@ -0,0 +1,34 @@
+import { FormLabel, Grid, GridItem, Text } from "@fidesui/react";
+import React, { ReactNode } from "react";
+
+export const ReviewItem = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) => (
+  <Grid templateColumns="1fr 2fr" data-testid={`review-${label}`}>
+    <GridItem>
+      <FormLabel fontWeight="semibold" m={0}>
+        {label}:
+      </FormLabel>
+    </GridItem>
+    <GridItem>{children}</GridItem>
+  </Grid>
+);
+
+export const DeclarationItem = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) => (
+  <Grid templateColumns="1fr 2fr" data-testid={`declaration-${label}`}>
+    <GridItem>
+      <Text color="gray.600">{label}</Text>
+    </GridItem>
+    <GridItem>{children}</GridItem>
+  </Grid>
+);