[#569, #570] Organization setup

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

@@ -14,10 +14,10 @@ import NextLink from "next/link";
 import { signOut } from "next-auth/react";
 import React from "react";
 
-import { UserIcon } from "./Icon";
+import { QuestionIcon, UserIcon } from "./Icon";
 
 interface HeaderProps {
-  username: string;
+  username?: string;
 }
 
 const Header: React.FC<HeaderProps> = ({ username }) => (
@@ -37,27 +37,42 @@ const Header: React.FC<HeaderProps> = ({ username }) => (
         </Link>
       </NextLink>
       <Flex alignItems="center">
-        <Menu>
-          <MenuButton as={Button} size="sm" variant="ghost">
-            <UserIcon color="gray.700" />
-          </MenuButton>
-          <MenuList shadow="xl">
-            <Stack px={3} py={2} spacing={0}>
-              <Text fontWeight="medium">{username}</Text>
-              <Text fontSize="sm" color="gray.600">
-                Administrator
-              </Text>
-            </Stack>
-            <MenuDivider />
-            <MenuItem
-              px={3}
-              _focus={{ color: "complimentary.500", bg: "gray.100" }}
-              onClick={() => signOut()}
+        {username ? (
+          <Menu>
+            <MenuButton as={Button} size="sm" variant="ghost">
+              <UserIcon color="gray.700" />
+            </MenuButton>
+
+            <MenuList shadow="xl">
+              <Stack px={3} py={2} spacing={0}>
+                <Text fontWeight="medium">{username}</Text>
+                <Text fontSize="sm" color="gray.600">
+                  Administrator
+                </Text>
+              </Stack>
+              <MenuDivider />
+              <MenuItem
+                px={3}
+                _focus={{ color: "complimentary.500", bg: "gray.100" }}
+                onClick={() => signOut()}
+              >
+                Sign out
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        ) : (
+          <>
+            <QuestionIcon boxSize={5} />
+            <Link
+              href="https://ethyca.github.io/fides/1.6.0/"
+              isExternal
+              color="gray.700"
+              fontWeight="400"
             >
-              Sign out
-            </MenuItem>
-          </MenuList>
-        </Menu>
+              Get help (Fides community)
+            </Link>
+          </>
+        )}
       </Flex>
     </Flex>
   </header>

clients/admin-ui/src/features/common/Icon/Question.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "UserIcon",
+  viewBox: "0 0 19 18",
+  d: "M9.43359 1.5C5.29102 1.5 1.93359 4.85742 1.93359 9C1.93359 13.1426 5.29102 16.5 9.43359 16.5C13.5762 16.5 16.9336 13.1426 16.9336 9C16.9336 4.85742 13.5762 1.5 9.43359 1.5ZM9.43359 13.2188C8.90625 13.2188 8.49609 12.8086 8.49609 12.2812C8.49609 11.7539 8.87988 11.3438 9.43359 11.3438C9.93457 11.3438 10.3711 11.7539 10.3711 12.2812C10.3711 12.8086 9.93457 13.2188 9.43359 13.2188ZM11.458 9.05859L10.1367 9.87891V9.9375C10.1367 10.3184 9.81445 10.6406 9.43359 10.6406C9.05273 10.6406 8.73047 10.3184 8.73047 9.9375V9.46875C8.73047 9.23438 8.84766 9 9.08203 8.85352L10.752 7.85742C10.957 7.74023 11.0742 7.53516 11.0742 7.30078C11.0742 6.94922 10.7549 6.65625 10.4033 6.65625H8.90625C8.52832 6.65625 8.26172 6.94922 8.26172 7.30078C8.26172 7.68164 7.93945 8.00391 7.55859 8.00391C7.17773 8.00391 6.85547 7.68164 6.85547 7.30078C6.85547 6.1582 7.76367 5.25 8.87988 5.25H10.377C11.5723 5.25 12.4805 6.1582 12.4805 7.30078C12.4805 8.00391 12.0996 8.67773 11.458 9.05859Z",
+});

clients/admin-ui/src/features/common/Icon/StepperCircle.tsx

@@ -0,0 +1,18 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "StepperCircleIcon",
+  viewBox: "0 0 24 24",
+  path: (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="9" stroke="#EDF2F7" strokeWidth="2" />
+      <circle cx="12" cy="12" r="4" fill="#EDF2F7" />
+    </svg>
+  ),
+});

clients/admin-ui/src/features/common/Icon/VerticalLine.tsx

@@ -0,0 +1,17 @@
+import { createIcon } from "@fidesui/react";
+
+export default createIcon({
+  displayName: "VerticalLineIcon",
+  viewBox: "0 0 2 49",
+  path: (
+    <svg
+      width="2"
+      height="49"
+      viewBox="0 0 2 49"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line x1="1" y1="0.125" x2="1" y2="49" stroke="#EDF2F7" strokeWidth="2" />
+    </svg>
+  ),
+});

clients/admin-ui/src/features/common/Icon/index.tsx

@@ -3,5 +3,8 @@ export { default as CloseSolidIcon } from "./CloseSolid";
 export { default as DownloadSolidIcon } from "./DownloadSolid";
 export { default as GearIcon } from "./Gear";
 export { default as MoreIcon } from "./More";
+export { default as QuestionIcon } from "./Question";
 export { default as SearchLineIcon } from "./SearchLine";
+export { default as StepperCircleIcon } from "./StepperCircle";
 export { default as UserIcon } from "./User";
+export { default as VerticalLineIcon } from "./VerticalLine";

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

@@ -0,0 +1,37 @@
+import { Box, Stack, Text } from "@fidesui/react";
+import React from "react";
+
+import { StepperCircleIcon, VerticalLineIcon } from "./Icon";
+
+interface Props {
+  activeStep: number | null;
+  steps: { number: number; name: string }[];
+}
+
+const Stepper = ({ activeStep, steps }: Props) => (
+  <Stack direction={["column", "row"]} w="100%">
+    <Stack alignItems="center" direction="column" spacing={0}>
+      {steps.map((step) => (
+        <React.Fragment key={step.number}>
+          <StepperCircleIcon
+            boxSize={8}
+            stroke={activeStep === step.number ? "secondary.500" : "inherit"}
+          />
+          {step.number !== steps.length ? (
+            <VerticalLineIcon boxSize={20} />
+          ) : null}
+        </React.Fragment>
+      ))}
+    </Stack>
+    <Stack direction="column" justify="space-between">
+      {steps.map((step) => (
+        <Box key={step.name}>
+          <Text color="gray.800">Step {step.number}</Text>
+          <Text color="gray.500">{step.name}</Text>
+        </Box>
+      ))}
+    </Stack>
+  </Stack>
+);
+
+export default Stepper;

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

@@ -0,0 +1,62 @@
+import { Box, Button, Divider, Stack } from "@fidesui/react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+
+import { CloseSolidIcon } from "~/features/common/Icon";
+
+import Stepper from "../common/Stepper";
+import STEPS from "./constants";
+import OrganizationInfoForm from "./OrganizationInfoForm";
+
+const ConfigWizardWalkthrough = () => {
+  const router = useRouter();
+  const [step, setStep] = useState<number>(1);
+
+  const handleCancelSetup = () => {
+    // Save progress
+    router.push("/");
+  };
+
+  const handleChangeStep = (formStep: number) => {
+    // Save info between steps for submission to API with all info
+    // or are they different api calls at each step?
+    if (formStep && step !== STEPS.length) {
+      setStep(formStep + 1);
+    }
+  };
+
+  return (
+    <>
+      <Box bg="white">
+        <Button
+          bg="transparent"
+          fontWeight="500"
+          m={2}
+          ml={6}
+          onClick={handleCancelSetup}
+        >
+          <CloseSolidIcon /> Cancel setup
+        </Button>
+      </Box>
+      <Divider orientation="horizontal" />
+      <Stack direction={["column", "row"]}>
+        <Stack bg="white" height="100vh" maxW="60%">
+          <Stack mt={10} mb={10} direction="row" spacing="24px">
+            <Box>
+              <Stepper activeStep={step} steps={STEPS} />
+            </Box>
+            {step === 1 ? (
+              <OrganizationInfoForm
+                handleChangeStep={(organizationStep: number) =>
+                  handleChangeStep(organizationStep)
+                }
+              />
+            ) : null}
+          </Stack>
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+export default ConfigWizardWalkthrough;