V2 UI onboard scan

deepfence_frontend/apps/dashboard/package.json

@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
@@ -32,6 +33,7 @@
     "@openapitools/openapi-generator-cli": "^2.5.2",
     "@playwright/test": "^1.28.1",
     "@testing-library/react": "^13.4.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/testing-library__jest-dom": "^5.14.5",

deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx

@@ -6,6 +6,9 @@ import { Breadcrumb, BreadcrumbLink, Typography } from 'ui-components';
 type ConnectorHeaderProps = {
   title: string;
   description: string;
+  metadata?: {
+    [key: string]: string;
+  };
 };
 
 const canRoute = (pathname: string) => {
@@ -27,7 +30,11 @@ const canRoute = (pathname: string) => {
   return path;
 };
 
-export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) => {
+export const ConnectorHeader = ({
+  title,
+  description,
+  metadata = {},
+}: ConnectorHeaderProps) => {
   const location = useLocation();
 
   const isAddConnectorRoutePath = () => {
@@ -46,7 +53,7 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
   };
 
   return (
-    <div className="pt-6 mb-8">
+    <div className="pt-6 mb-4">
       <div className="mb-4 -mx-5">
         <Breadcrumb separator={<HiChevronRight />} transparent>
           <BreadcrumbLink>
@@ -81,12 +88,23 @@ export const ConnectorHeader = ({ title, description }: ConnectorHeaderProps) =>
           </BreadcrumbLink>
         </Breadcrumb>
       </div>
-      <h1 className={`text-[32px] text-black dark:text-white`}>{title}</h1>
-      <p
-        className={`${Typography.size.base} ${Typography.weight.normal} mt-1.5 mb-4 dark:text-gray-400 text-gray-900`}
-      >
-        {description}
-      </p>
+      <div className="flex items-center">
+        <div>
+          <h1 className={`text-[32px] text-black dark:text-white`}>{title}</h1>
+          <p
+            className={`${Typography.size.base} ${Typography.weight.normal} mt-1.5 mb-4 dark:text-gray-400 text-gray-900`}
+          >
+            {description}
+          </p>
+        </div>
+        <div className="ml-auto">
+          <span className={`${Typography.size.sm} text-gray-600`}>
+            {metadata.accountId
+              ? `Account: ${metadata.type} / ${metadata.accountId}`
+              : null}
+          </span>
+        </div>
+      </div>
     </div>
   );
 };

deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx

@@ -66,8 +66,8 @@ export const AmazonECRConnectorForm = () => {
               placeholder="AWS Region"
             />
           </div>
-          <Button color="primary" size="xs" className="ml-auto mt-4">
-            Save Credentials And Go To Connectors
+          <Button color="primary" size="xs" className="ml-auto mt-6">
+            Save And Go To Connectors
           </Button>
         </Card>
       </Step>

deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx

@@ -15,7 +15,7 @@ export const AmazonECRConnector = () => {
       <AmazonECRConnectorForm />
       <div className="flex mt-16">
         <Button onClick={goBack} size="xs">
-          Cancel
+          Go Back
         </Button>
       </div>
     </div>

deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx

@@ -15,7 +15,7 @@ export const AzureConnector = () => {
       />
       <AzureConnectorForm />
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );

deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx

@@ -0,0 +1,143 @@
+import { HiSwitchHorizontal } from 'react-icons/hi';
+import { useLocation } from 'react-router-dom';
+import { Button, Card, Separator, Typography } from 'ui-components';
+
+import LogoAws from '@/assets/logo-aws.svg';
+import LogoAwsWhite from '@/assets/logo-aws-white.svg';
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { useTheme } from '@/theme/ThemeContext';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+type ScanTypeListProps = {
+  scanType: string;
+  description: string;
+  lastScaned: string;
+  buttonText: string;
+  redirect: string;
+};
+
+const scanTypes: ScanTypeListProps[] = [
+  {
+    scanType: 'Vulnerability Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Vulnerability Scan',
+    redirect: '/vulnerability',
+  },
+  {
+    scanType: 'Compliance Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Compliance Scan',
+    redirect: '/compliance',
+  },
+  {
+    scanType: 'Secrets Scan',
+    description: `A few words about the compliance scan and why you need to use it.`,
+    lastScaned: '3:00pm on 11/22/2022',
+    buttonText: 'Configure Secret Scan',
+    redirect: '/secret',
+  },
+];
+
+const SelectedAccount = () => {
+  const { mode } = useTheme();
+  const { navigate } = usePageNavigation();
+  return (
+    <div className="flex w-fit p-3 pt-0 items-center mb-8">
+      <span className="mr-6">
+        <img src={mode === 'dark' ? LogoAwsWhite : LogoAws} alt="logo" />
+      </span>
+      <div className="flex flex-col mr-20">
+        <span
+          className={`${Typography.size.lg} ${Typography.weight.medium} text-gray-700 dark:text-gray-100`}
+        >
+          Amazon Web Services (AWS)
+        </span>
+        <span
+          className={`${Typography.size.base} ${Typography.weight.medium} text-gray-500 dark:text-gray-400`}
+        >
+          Account Id: 22222
+        </span>
+      </div>
+      <div>
+        <Button
+          className="ml-auto bg-gray-100 px-2 py-1"
+          size="sm"
+          startIcon={<HiSwitchHorizontal />}
+          onClick={() => {
+            navigate('/onboard/connectors/my-connectors');
+          }}
+        >
+          Switch connector
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ScanType = () => {
+  const location = useLocation();
+  const { navigate } = usePageNavigation();
+  const goNext = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
+      {scanTypes.map(
+        ({
+          scanType,
+          description,
+          lastScaned,
+          buttonText,
+          redirect,
+        }: ScanTypeListProps) => {
+          return (
+            <Card key={scanType} className="p-5">
+              <h2
+                className={`${Typography.size.lg} ${Typography.weight.medium} text-gray-700 dark:text-gray-100 pb-2`}
+              >
+                {scanType}
+              </h2>
+              <Separator />
+              <p className={`${Typography.size.sm} ${Typography.weight.normal} py-2`}>
+                {description}
+              </p>
+              <div
+                className={`mb-4 text-gray-500 dark:text-gray-400 ${Typography.size.sm} ${Typography.weight.normal}`}
+              >
+                Last scan:&nbsp;{lastScaned}
+              </div>
+              <Button
+                size="xs"
+                color="primary"
+                onClick={() => {
+                  goNext(`../configure${redirect}`);
+                }}
+              >
+                {buttonText}
+              </Button>
+            </Card>
+          );
+        },
+      )}
+    </div>
+  );
+};
+export const ChooseScan = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <ConnectorHeader
+        title="Choose your scan type"
+        description="Choose from the below options to perform your first scan."
+      />
+      <SelectedAccount />
+      <ScanType />
+      <Button onClick={goBack} outline size="xs" className="mt-16">
+        Go Back
+      </Button>
+    </>
+  );
+};