New manual add design

CHANGELOG.md

@@ -36,6 +36,7 @@ The types of changes are:
 * Update Admin UI to show all action types (access, erasure, consent, update) [#2523](https://github.com/ethyca/fides/pull/2523)
 * Removes legacy `verify_oauth_client` function [#2527](https://github.com/ethyca/fides/pull/2527)
 * Updated the UI for adding systems to a new design [#2490](https://github.com/ethyca/fides/pull/2490)
+* Add flow for selecting system types when manually creating a system [#2530](https://github.com/ethyca/fides/pull/2530)
 * Various form components now take a `stacked` or `inline` variant [#2542](https://github.com/ethyca/fides/pull/2542)
 * UX fixes for user management [#2537](https://github.com/ethyca/fides/pull/2537)
 

clients/admin-ui/cypress/e2e/systems.cy.ts

@@ -56,9 +56,48 @@ describe("System management page", () => {
       beforeEach(() => {
         stubTaxonomyEntities();
         stubSystemCrud();
+        cy.intercept("GET", "/api/v1/connection_type*", {
+          fixture: "connectors/connection_types.json",
+        }).as("getConnectionTypes");
       });
 
-      it("Can step through the flow", () => {
+      it("shows available system types and lets the user choose one", () => {
+        cy.visit("/add-systems");
+        cy.getByTestId("manual-btn").click();
+        cy.url().should("contain", "/add-systems/new");
+        cy.wait("@getConnectionTypes");
+        cy.getByTestId("header").contains("Choose a type of system");
+        cy.getByTestId("bigquery");
+        cy.getByTestId("mariadb");
+        // Click into one of the connectors
+        cy.getByTestId("mongodb").click();
+        cy.getByTestId("header").contains("Describe your MongoDB system");
+
+        // Go back to choosing to add a new type of system
+        cy.getByTestId("breadcrumbs").contains("Choose your system").click();
+        cy.getByTestId("create-system-btn").click();
+        cy.getByTestId("header").contains("Describe your new system");
+      });
+
+      it("should allow searching", () => {
+        cy.visit("/add-systems/new");
+        cy.wait("@getConnectionTypes");
+        cy.getByTestId("bigquery");
+        cy.getByTestId("system-catalog-search").type("db");
+        cy.getByTestId("bigquery").should("not.exist");
+        cy.getByTestId("mariadb");
+        cy.getByTestId("mongodb");
+        cy.getByTestId("timescale");
+
+        // empty state
+        cy.getByTestId("system-catalog-search")
+          .clear()
+          .type("a very specific system that we do not have");
+        cy.getByTestId("no-systems-found");
+      });
+
+      // Skip while manual system creation is being redone
+      it.skip("Can step through the flow", () => {
         cy.fixture("system.json").then((system) => {
           // Fill in the describe form based on fixture data
           cy.visit("/add-systems");

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

@@ -1,24 +1,36 @@
 import {
+  Button,
   Input,
   InputGroup,
   InputLeftElement,
   InputProps,
+  InputRightElement,
   SearchLineIcon,
 } from "@fidesui/react";
 
 interface Props extends Omit<InputProps, "onChange"> {
   search?: string;
   onChange: (value: string) => void;
+  withIcon?: boolean;
+  withClear?: boolean;
 }
-const SearchBar = ({ search, onChange, ...props }: Props) => {
+const SearchBar = ({
+  search,
+  onChange,
+  withIcon,
+  withClear,
+  ...props
+}: Props) => {
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) =>
     onChange(event.target.value);
 
   return (
     <InputGroup size="sm" minWidth="308px">
-      <InputLeftElement pointerEvents="none">
-        <SearchLineIcon color="gray.300" w="17px" h="17px" />
-      </InputLeftElement>
+      {withIcon ? (
+        <InputLeftElement pointerEvents="none">
+          <SearchLineIcon color="gray.300" w="17px" h="17px" />
+        </InputLeftElement>
+      ) : null}
       <Input
         autoComplete="off"
         type="search"
@@ -30,6 +42,22 @@ const SearchBar = ({ search, onChange, ...props }: Props) => {
         onChange={handleSearchChange}
         {...props}
       />
+      {withClear ? (
+        <InputRightElement width="3.5rem" display="flex" alignItems="center">
+          <Button
+            fontWeight="light"
+            size="sm"
+            onClick={() => {
+              onChange("");
+            }}
+            // Prevent the button from overlapping with the input's focus rect
+            height="95%"
+            width="95%"
+          >
+            Clear
+          </Button>
+        </InputRightElement>
+      ) : null}
     </InputGroup>
   );
 };

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

@@ -1,4 +1,5 @@
 import { Box, Heading, SimpleGrid, Stack, Text } from "@fidesui/react";
+import { useRouter } from "next/router";
 
 import { useAppDispatch } from "~/app/hooks";
 import {
@@ -27,6 +28,7 @@ const SectionTitle = ({ children }: { children: string }) => (
 
 const AddSystem = () => {
   const dispatch = useAppDispatch();
+  const router = useRouter();
 
   return (
     <Stack spacing={9} data-testid="add-systems">
@@ -55,8 +57,8 @@ const AddSystem = () => {
             icon={<ManualSetupIcon boxSize={8} />}
             description="Manually add a system for services not covered by automated scanners"
             onClick={() => {
-              dispatch(changeStep(5));
               dispatch(setAddSystemsMethod(SystemMethods.MANUAL));
+              router.push("/add-systems/new");
             }}
             data-testid="manual-btn"
           />

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

@@ -1,47 +1,23 @@
 import { Box, Button, CloseSolidIcon, Divider, Stack } from "@fidesui/react";
-import HorizontalStepper from "common/HorizontalStepper";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { useFeatures } from "~/features/common/features";
-import DescribeSystemStep from "~/features/system/DescribeSystemStep";
-import PrivacyDeclarationStep from "~/features/system/PrivacyDeclarationStep";
-import ReviewSystemStep from "~/features/system/ReviewSystemStep";
-import { System } from "~/types/api";
 
 import AddSystem from "./AddSystem";
 import AuthenticateScanner from "./AuthenticateScanner";
-import {
-  changeReviewStep,
-  reset,
-  reviewManualSystem,
-  selectReviewStep,
-  selectStep,
-  selectSystemInReview,
-  selectSystemsForReview,
-  setSystemInReview,
-} from "./config-wizard.slice";
-import { HORIZONTAL_STEPS } from "./constants";
+import { reset, selectStep } from "./config-wizard.slice";
 import OrganizationInfoForm from "./OrganizationInfoForm";
 import ScanResults from "./ScanResults";
-import SuccessPage from "./SuccessPage";
 
 const ConfigWizardWalkthrough = () => {
   const dispatch = useAppDispatch();
   const step = useAppSelector(selectStep);
-  const reviewStep = useAppSelector(selectReviewStep);
-  const system = useAppSelector(selectSystemInReview);
-  const systemsForReview = useAppSelector(selectSystemsForReview);
   const features = useFeatures();
 
   const handleCancelSetup = () => {
     dispatch(reset());
   };
 
-  const handleSuccess = (values: System) => {
-    dispatch(setSystemInReview(values));
-    dispatch(changeReviewStep());
-  };
-
   return (
     <>
       {!features.flags.navV2 && (
@@ -75,47 +51,6 @@ const ConfigWizardWalkthrough = () => {
               <ScanResults />
             </Box>
           ) : null}
-          {/* These steps should only apply if you're creating systems manually */}
-          {step === 5 ? (
-            <Stack direction="column">
-              {reviewStep <= 3 ? (
-                <HorizontalStepper
-                  activeStep={reviewStep}
-                  steps={HORIZONTAL_STEPS}
-                />
-              ) : null}
-              {reviewStep === 1 && (
-                <DescribeSystemStep
-                  system={system}
-                  onSuccess={handleSuccess}
-                  abridged
-                />
-              )}
-              {reviewStep === 2 && system && (
-                <PrivacyDeclarationStep
-                  system={system}
-                  onSuccess={handleSuccess}
-                  abridged
-                />
-              )}
-              {reviewStep === 3 && system && (
-                <ReviewSystemStep
-                  system={system}
-                  onSuccess={() => dispatch(changeReviewStep())}
-                  abridged
-                />
-              )}
-              {reviewStep === 4 && system && (
-                <SuccessPage
-                  systemInReview={system}
-                  systemsForReview={systemsForReview}
-                  onAddNextSystem={() => {
-                    dispatch(reviewManualSystem());
-                  }}
-                />
-              )}
-            </Stack>
-          ) : null}
         </Box>
       </Stack>
     </>