Scaffold manual system flow (#1068)

* Refactor generate type to boolean

* Add ManualSystemFlow

* Add ConfigureSteps

* Make button bigger

* Update changelog

* Remove UI features for WIP elements

CHANGELOG.md

@@ -23,6 +23,7 @@ The types of changes are:
   * Added toggle for enabling classify during generation. [#1057](https://github.com/ethyca/fides/pull/1057)
   * Initial implementation of API request to kick off classify, with confirmation modal. [#1069](https://github.com/ethyca/fides/pull/1069)
 * New page to add a system via yaml [#1062](https://github.com/ethyca/fides/pull/1062)
+  * Skeleton of page to add a system manually [#1068](https://github.com/ethyca/fides/pull/1068)
 
 ### Changed
 

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

@@ -0,0 +1,53 @@
+import { Box, Button, Grid, Stack, Text } from "@fidesui/react";
+import { useState } from "react";
+
+const STEPS = ["Describe", "Declare", "Review"];
+
+interface ConfigureStepsProps {
+  steps: string[];
+  currentStepIndex: number;
+  onChange: (index: number) => void;
+}
+const ConfigureSteps = ({
+  steps,
+  currentStepIndex,
+  onChange,
+}: ConfigureStepsProps) => (
+  <Stack pl={5}>
+    {steps.map((step, idx) => {
+      const isActive = idx === currentStepIndex;
+      return (
+        <Button
+          key={step}
+          variant="ghost"
+          colorScheme={isActive ? "complimentary" : "ghost"}
+          width="fit-content"
+          disabled={idx > currentStepIndex}
+          onClick={() => onChange(idx)}
+        >
+          {step}
+        </Button>
+      );
+    })}
+  </Stack>
+);
+
+const ManualSystemFlow = () => {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  return (
+    <Grid templateColumns="2fr 8fr">
+      <Stack spacing={3} fontWeight="semibold" data-testid="settings">
+        <Text>Configuration Settings</Text>
+        <ConfigureSteps
+          steps={STEPS}
+          currentStepIndex={currentStepIndex}
+          onChange={setCurrentStepIndex}
+        />
+      </Stack>
+      <Box>{STEPS[currentStepIndex]}</Box>
+    </Grid>
+  );
+};
+
+export default ManualSystemFlow;

clients/ctl/admin-ui/src/pages/system/new/configure.tsx

@@ -0,0 +1,30 @@
+import { Box, Breadcrumb, BreadcrumbItem, Heading } from "@fidesui/react";
+import type { NextPage } from "next";
+import NextLink from "next/link";
+
+import Layout from "~/features/common/Layout";
+import ManualSystemFlow from "~/features/system/ManualSystemFlow";
+
+const ConfigureSystem: NextPage = () => (
+  <Layout title="Systems">
+    <Heading mb={2} fontSize="2xl" fontWeight="semibold">
+      Configure your system
+    </Heading>
+    <Box mb={8}>
+      <Breadcrumb fontWeight="medium" fontSize="sm" color="gray.600">
+        <BreadcrumbItem>
+          <NextLink href="/system">System Connections</NextLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <NextLink href="/system/new">Create a new system</NextLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <NextLink href="#">Configure your connection</NextLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </Box>
+    <ManualSystemFlow />
+  </Layout>
+);
+
+export default ConfigureSystem;

clients/ctl/admin-ui/src/pages/system/new/index.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Heading,
   Stack,
-  Text,
 } from "@fidesui/react";
 import type { NextPage } from "next";
 import NextLink from "next/link";
@@ -15,9 +14,8 @@ import Layout from "~/features/common/Layout";
 import SystemYamlForm from "~/features/system/SystemYamlForm";
 
 const NewSystem: NextPage = () => {
-  const [generateMethod, setGenerateMethod] = useState<
-    "yaml" | "manual" | null
-  >(null);
+  const [showYamlForm, setShowYamlForm] = useState(false);
+
   return (
     <Layout title="Systems">
       <Heading mb={2} fontSize="2xl" fontWeight="semibold">
@@ -34,29 +32,35 @@ const NewSystem: NextPage = () => {
         </Breadcrumb>
       </Box>
       <Stack spacing={8}>
-        <Box w={{ base: "100%", lg: "50%" }}>
+        {/* <Box w={{ base: "100%", lg: "50%" }}>
           <Text>
             Choose whether to upload a new system YAML or manually generate a
             system.
           </Text>
-        </Box>
+        </Box> */}
         <Box>
           <Button
             size="sm"
             mr={2}
             variant="outline"
-            onClick={() => setGenerateMethod("yaml")}
-            isActive={generateMethod === "yaml"}
+            onClick={() => setShowYamlForm(true)}
+            isActive={showYamlForm}
             data-testid="upload-yaml-btn"
           >
             Upload a new system YAML
           </Button>
-          <Button size="sm" variant="outline">
-            Manually generate a system
-          </Button>
+          {/* <Button
+            size="sm"
+            variant="outline"
+            data-testid="manually-generate-btn"
+          >
+            <NextLink href="/system/new/configure">
+              Manually generate a system
+            </NextLink>
+          </Button> */}
         </Box>
         <Box w={{ base: "100%", lg: "50%" }}>
-          {generateMethod === "yaml" ? <SystemYamlForm /> : null}
+          {showYamlForm ? <SystemYamlForm /> : null}
         </Box>
       </Stack>
     </Layout>