From 668030f17448141d6047f5bbc0e3e13be5342f97 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Mon, 16 Jan 2023 21:18:28 +0530
Subject: [PATCH 01/11] feat(onboard):wip added scan option and form for
 compliance

---
 .../apps/dashboard/package.json               |   2 +
 .../onboard/layouts/InfraScanLayout.tsx       |  15 +
 .../features/onboard/pages/AWSChooseScan.tsx  | 126 +++
 .../onboard/pages/AWSInfraScanConfigure.tsx   | 727 ++++++++++++++++++
 .../apps/dashboard/src/routes/private.tsx     |  17 +
 .../src/components/table/Table.tsx            |  20 +-
 .../src/components/tabs/Tabs.tsx              |   4 +-
 deepfence_frontend/pnpm-lock.yaml             |   4 +
 8 files changed, 905 insertions(+), 10 deletions(-)
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx

diff --git a/deepfence_frontend/apps/dashboard/package.json b/deepfence_frontend/apps/dashboard/package.json
index 0b421f28da..1fb7253378 100644
--- a/deepfence_frontend/apps/dashboard/package.json
+++ b/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",
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx
new file mode 100644
index 0000000000..15b973ee83
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+
+import { ConnectorHeader } from '../components/ConnectorHeader';
+
+export const ScanInfraLayout = () => {
+  return (
+    <div>
+      <ConnectorHeader
+        title="Choose your scan type"
+        description="Choose from the below options to perform your first scan."
+      />
+      <Outlet />
+    </div>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
new file mode 100644
index 0000000000..c5b1821d7a
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
@@ -0,0 +1,126 @@
+import { Button, Card, Separator, Typography } from 'ui-components';
+
+import LogoAws from '../../../assets/logo-aws.svg';
+import LogoAwsWhite from '../../../assets/logo-aws-white.svg';
+import { useTheme } from '../../../theme/ThemeContext';
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+
+type ScanTypeListProps = {
+  scanType: string;
+  description: string;
+  lastScaned: string;
+  buttonText: string;
+  redirect: string;
+};
+
+const scanTypeList: 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 Compliance Scan',
+    redirect: '/onboard/scan-infrastructure/cloud/aws/configure',
+  },
+  {
+    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: '/onboard/scan-infrastructure/cloud/aws/configure',
+  },
+  {
+    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 Compliance Scan',
+    redirect: 'cloud/aws/configure',
+  },
+];
+
+const SelectedAccountCard = () => {
+  const { mode } = useTheme();
+  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" color="primary" size="xs" outline>
+          Swith connector
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ScanList = () => {
+  const { navigate } = usePageNavigation();
+  const goNext = (path: string) => {
+    navigate(path);
+  };
+  return (
+    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
+      {scanTypeList.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(redirect);
+                }}
+              >
+                {buttonText}
+              </Button>
+            </Card>
+          );
+        },
+      )}
+    </div>
+  );
+};
+export const AWSChooseScan = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <SelectedAccountCard />
+      <ScanList />
+      <Button onClick={goBack} outline size="xs" className="mt-16">
+        Cancel
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
new file mode 100644
index 0000000000..a97713fff0
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
@@ -0,0 +1,727 @@
+import { filter, find } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { IconContext } from 'react-icons';
+import { HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
+import {
+  Button,
+  createColumnHelper,
+  getRowSelectionColumn,
+  Switch,
+  Table,
+  Tabs,
+  Typography,
+} from 'ui-components';
+
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+
+type ColumnType = {
+  id: number;
+  test_category: string;
+  test_desc: string;
+  status: string;
+  is_enabled: boolean;
+};
+const complianceTableData = [
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 1,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.1 Ensure a log metric filter and alarm exist for unauthorized API calls',
+    test_number: 'control.cis_v140_4_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 2,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.2 Ensure a log metric filter and alarm exist for Management Console sign-in without MFA',
+    test_number: 'control.cis_v140_4_2',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 3,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      "4.3 Ensure a log metric filter and alarm exist for usage of 'root' account",
+    test_number: 'control.cis_v140_4_3',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 4,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc: '4.4 Ensure a log metric filter and alarm exist for IAM policy changes',
+    test_number: 'control.cis_v140_4_4',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 5,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.5 Ensure a log metric filter and alarm exist for CloudTrail configuration changes',
+    test_number: 'control.cis_v140_4_5',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 6,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.6 Ensure a log metric filter and alarm exist for AWS Management Console authentication failures',
+    test_number: 'control.cis_v140_4_6',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 7,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.7 Ensure a log metric filter and alarm exist for disabling or scheduled deletion of customer created CMKs',
+    test_number: 'control.cis_v140_4_7',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 8,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.8 Ensure a log metric filter and alarm exist for S3 bucket policy changes',
+    test_number: 'control.cis_v140_4_8',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 9,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.9 Ensure a log metric filter and alarm exist for AWS Config configuration changes',
+    test_number: 'control.cis_v140_4_9',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 10,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.10 Ensure a log metric filter and alarm exist for security group changes',
+    test_number: 'control.cis_v140_4_10',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 11,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.11 Ensure a log metric filter and alarm exist for changes to Network Access Control Lists (NACL)',
+    test_number: 'control.cis_v140_4_11',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 12,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.12 Ensure a log metric filter and alarm exist for changes to network gateways',
+    test_number: 'control.cis_v140_4_12',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 13,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc: '4.13 Ensure a log metric filter and alarm exist for route table changes',
+    test_number: 'control.cis_v140_4_13',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 14,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc: '4.14 Ensure a log metric filter and alarm exist for VPC changes',
+    test_number: 'control.cis_v140_4_14',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 15,
+    is_enabled: true,
+    test_category: 'CloudWatch',
+    test_desc:
+      '4.15 Ensure a log metric filter and alarm exists for AWS Organizations changes',
+    test_number: 'control.cis_v140_4_15',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 16,
+    is_enabled: true,
+    test_category: 'VPC',
+    test_desc:
+      '5.1 Ensure no Network ACLs allow ingress from 0.0.0.0/0 to remote server administration ports',
+    test_number: 'control.cis_v140_5_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 17,
+    is_enabled: true,
+    test_category: 'VPC',
+    test_desc:
+      '5.2 Ensure no security groups allow ingress from 0.0.0.0/0 to remote server administration ports',
+    test_number: 'control.cis_v140_5_2',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 18,
+    is_enabled: true,
+    test_category: 'VPC',
+    test_desc: '5.3 Ensure the default security group of every VPC restricts all traffic',
+    test_number: 'control.cis_v140_5_3',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 19,
+    is_enabled: true,
+    test_category: 'VPC',
+    test_desc: '5.4 Ensure routing tables for VPC peering are \\"least access\\',
+    test_number: 'control.cis_v140_5_4',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 20,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc: '3.1 Ensure CloudTrail is enabled in all regions',
+    test_number: 'control.cis_v140_3_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 21,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc: '3.2 Ensure CloudTrail log file validation is enabled',
+    test_number: 'control.cis_v140_3_2',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 22,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc:
+      '3.3 Ensure the S3 bucket used to store CloudTrail logs is not publicly accessible',
+    test_number: 'control.cis_v140_3_3',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 23,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc: '3.4 Ensure CloudTrail trails are integrated with CloudWatch Logs',
+    test_number: 'control.cis_v140_3_4',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 24,
+    is_enabled: true,
+    test_category: 'Config',
+    test_desc: '3.5 Ensure AWS Config is enabled in all regions',
+    test_number: 'control.cis_v140_3_5',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 25,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc:
+      '3.6 Ensure S3 bucket access logging is enabled on the CloudTrail S3 bucket',
+    test_number: 'control.cis_v140_3_6',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 26,
+    is_enabled: true,
+    test_category: 'CloudTrail',
+    test_desc: '3.7 Ensure CloudTrail logs are encrypted at rest using KMS CMKs',
+    test_number: 'control.cis_v140_3_7',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 27,
+    is_enabled: true,
+    test_category: 'KMS',
+    test_desc: '3.8 Ensure rotation for customer created CMKs is enabled',
+    test_number: 'control.cis_v140_3_8',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 28,
+    is_enabled: true,
+    test_category: 'VPC',
+    test_desc: '3.9 Ensure VPC flow logging is enabled in all VPCs',
+    test_number: 'control.cis_v140_3_9',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 29,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc:
+      '3.10 Ensure that Object-level logging for write events is enabled for S3 bucket',
+    test_number: 'control.cis_v140_3_10',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 30,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc:
+      '3.11 Ensure that Object-level logging for read events is enabled for S3 bucket',
+    test_number: 'control.cis_v140_3_11',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 31,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.1 Maintain current contact details',
+    test_number: 'control.cis_v140_1_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 32,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.2 Ensure security contact information is registered',
+    test_number: 'control.cis_v140_1_2',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 33,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.3 Ensure security questions are registered in the AWS account',
+    test_number: 'control.cis_v140_1_3',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 34,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: "1.4 Ensure no 'root' user account access key exists",
+    test_number: 'control.cis_v140_1_4',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 35,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: "1.5 Ensure MFA is enabled for the 'root' user account",
+    test_number: 'control.cis_v140_1_5',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 36,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: "1.6 Ensure hardware MFA is enabled for the 'root' user account",
+    test_number: 'control.cis_v140_1_6',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 37,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: "1.7 Eliminate use of the 'root' user for administrative and daily tasks",
+    test_number: 'control.cis_v140_1_7',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 38,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.8 Ensure IAM password policy requires minimum length of 14 or greater',
+    test_number: 'control.cis_v140_1_8',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 39,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.9 Ensure IAM password policy prevents password reuse',
+    test_number: 'control.cis_v140_1_9',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 40,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.10 Ensure multi-factor authentication (MFA) is enabled for all IAM users that have a console password',
+    test_number: 'control.cis_v140_1_10',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 41,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.11 Do not setup access keys during initial user setup for all IAM users that have a console password',
+    test_number: 'control.cis_v140_1_11',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 42,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.12 Ensure credentials unused for 45 days or greater are disabled',
+    test_number: 'control.cis_v140_1_12',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 43,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.13 Ensure there is only one active access key available for any single IAM user',
+    test_number: 'control.cis_v140_1_13',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 44,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.14 Ensure access keys are rotated every 90 days or less',
+    test_number: 'control.cis_v140_1_14',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 45,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.15 Ensure IAM Users Receive Permissions Only Through Groups',
+    test_number: 'control.cis_v140_1_15',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 46,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.16 Ensure IAM policies that allow full \\"*:*\\" administrative privileges are not attached',
+    test_number: 'control.cis_v140_1_16',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 47,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.17 Ensure a support role has been created to manage incidents with AWS Support',
+    test_number: 'control.cis_v140_1_17',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 48,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.18 Ensure IAM instance roles are used for AWS resource access from instances',
+    test_number: 'control.cis_v140_1_18',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 49,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.19 Ensure that all the expired SSL/TLS certificates stored in AWS IAM are removed',
+    test_number: 'control.cis_v140_1_19',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 50,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc: '1.20 Ensure that IAM Access analyzer is enabled for all regions',
+    test_number: 'control.cis_v140_1_20',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 51,
+    is_enabled: true,
+    test_category: 'IAM',
+    test_desc:
+      '1.21 Ensure IAM users are managed centrally via identity federation or AWS Organizations for multi-account environments',
+    test_number: 'control.cis_v140_1_21',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 52,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc: '2.1.1 Ensure all S3 buckets employ encryption-at-rest',
+    test_number: 'control.cis_v140_2_1_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 53,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc: '2.1.2 Ensure S3 Bucket Policy is set to deny HTTP requests',
+    test_number: 'control.cis_v140_2_1_2',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 54,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc: '2.1.3 Ensure MFA Delete is enabled on S3 buckets',
+    test_number: 'control.cis_v140_2_1_3',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 55,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc:
+      '2.1.4 Ensure all data in Amazon S3 has been discovered, classified and secured when required',
+    test_number: 'control.cis_v140_2_1_4',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 56,
+    is_enabled: true,
+    test_category: 'S3',
+    test_desc:
+      "2.1.5 Ensure that S3 Buckets are configured with 'Block public access (bucket settings)'",
+    test_number: 'control.cis_v140_2_1_5',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 57,
+    is_enabled: true,
+    test_category: 'EBS',
+    test_desc: '2.2.1 Ensure EBS volume encryption is enabled',
+    test_number: 'control.cis_v140_2_2_1',
+  },
+  {
+    cloud_provider: 'aws',
+    compliance_check_type: 'cis',
+    id: 58,
+    is_enabled: true,
+    test_category: 'RDS',
+    test_desc: '2.3.1 Ensure that encryption is enabled for RDS Instances',
+    test_number: 'control.cis_v140_2_3_1',
+  },
+];
+
+const ComplianceTable = () => {
+  const columnHelper = createColumnHelper<ColumnType>();
+  const [tableData, setTableData] = useState(complianceTableData);
+
+  const [rowSelectionState, setRowSelectionState] = useState<any>({});
+
+  const updateTableData = (rowData: any, flag: boolean) => {
+    console.log(flag, 'data is ', rowData);
+    setTableData((data) => {
+      data[rowData.row.index].is_enabled = flag;
+
+      return [...data];
+    });
+  };
+  const columns = useMemo(
+    () => [
+      getRowSelectionColumn(columnHelper, {
+        maxSize: 10,
+      }),
+      columnHelper.accessor('id', {
+        cell: (info) => info.getValue(),
+        header: () => '#',
+        maxSize: 20,
+      }),
+      columnHelper.accessor((row) => row.test_category, {
+        id: 'category',
+        cell: (info) => info.getValue(),
+        header: () => <span>Category</span>,
+        maxSize: 50,
+      }),
+      columnHelper.accessor('test_desc', {
+        header: () => 'Description',
+        cell: (info) => info.renderValue(),
+        minSize: 500,
+      }),
+      columnHelper.accessor('status', {
+        header: () => 'Status',
+        cell: (info) => 'Active',
+        maxSize: 50,
+      }),
+      columnHelper.accessor('is_enabled', {
+        header: () => 'Enabled',
+        cell: (info) => (
+          <Switch
+            checked={info.renderValue()}
+            onCheckedChange={(e) => {
+              updateTableData(info, e);
+            }}
+          />
+        ),
+        maxSize: 50,
+      }),
+    ],
+    [],
+  );
+  return (
+    <Table
+      size="sm"
+      data={tableData}
+      columns={columns}
+      enableRowSelection
+      onRowSelectionChange={setRowSelectionState}
+      rowSelectionState={rowSelectionState}
+    />
+  );
+};
+
+const scanType = ['CIS', 'GDPR', 'HIPPA', 'PIC', 'SOC2', 'NIST'];
+
+type TabsType = {
+  label: string;
+  value: string;
+};
+
+const hasTypeSelected = (prevTabs: TabsType[], value: string) => {
+  return find(prevTabs, ['value', value]);
+};
+
+export const AWSInfraScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  const [selectedTab, setSelectedTab] = useState('');
+  const [tabs, setTabs] = useState<TabsType[] | []>([]);
+
+  const onScanTypeSelection = (name: string) => {
+    setTabs((prevTabs) => {
+      const found = hasTypeSelected(prevTabs, name);
+      if (found) {
+        return [...filter(prevTabs, (tab) => tab.value !== found.value)];
+      } else {
+        return [
+          ...prevTabs,
+          {
+            label: name,
+            value: name,
+          },
+        ];
+      }
+    });
+  };
+
+  useEffect(() => {
+    // set selected tab by last compliance type
+    if (tabs.length > 0) {
+      setSelectedTab(tabs[tabs.length - 1].value);
+    } else {
+      setSelectedTab('');
+    }
+  }, [tabs]);
+
+  return (
+    <>
+      <div className="mt-8 flex gap-4 mb-8">
+        {scanType.map((type) => (
+          <Button
+            color="primary"
+            size="xs"
+            key={type}
+            onClick={() => {
+              onScanTypeSelection(type);
+            }}
+          >
+            {type}
+            <IconContext.Provider
+              value={{
+                className: 'ml-2.5 w-5 h-5',
+              }}
+            >
+              {hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
+            </IconContext.Provider>
+          </Button>
+        ))}
+      </div>
+      <div
+        className={`${Typography.size.sm} ${Typography.weight.medium} mt-4 dark:text-white`}
+      >
+        {selectedTab === '' ? (
+          <p>Please select at least one compliance type.</p>
+        ) : (
+          <Tabs value={selectedTab} tabs={tabs} onValueChange={(v) => setSelectedTab(v)}>
+            <div className="h-full p-2 dark:text-white">
+              <ComplianceTable />
+            </div>
+          </Tabs>
+        )}
+      </div>
+      <Button onClick={goBack} outline size="xs" className="mt-16">
+        Cancel
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 632379d1e9..64ccde485c 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -1,11 +1,14 @@
 import { Outlet, RouteObject } from 'react-router-dom';
 
+import { ScanInfraLayout } from '../features/onboard/layouts/InfraScanLayout';
 import {
   OnboardLayout,
   rootOnboardLoader,
 } from '../features/onboard/layouts/OnboardLayout';
 import { AmazonECRConnector } from '../features/onboard/pages/AmazonECRConnector';
+import { AWSChooseScan } from '../features/onboard/pages/AWSChooseScan';
 import { AWSConnector } from '../features/onboard/pages/AWSConnector';
+import { AWSInfraScanConfigure } from '../features/onboard/pages/AWSInfraScanConfigure';
 import { AzureConnector } from '../features/onboard/pages/AzureConnector';
 import { Connector } from '../features/onboard/pages/Connector';
 import { GCPConnector } from '../features/onboard/pages/GCPConnector';
@@ -57,6 +60,20 @@ export const privateRoutes: RouteObject[] = [
           },
         ],
       },
+      {
+        path: 'scan-infrastructure',
+        element: <ScanInfraLayout />,
+        children: [
+          {
+            path: 'cloud/aws',
+            element: <AWSChooseScan />,
+          },
+          {
+            path: 'cloud/aws/configure',
+            element: <AWSInfraScanConfigure />,
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
index 9bfaa4f97b..5f2d382587 100644
--- a/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/table/Table.tsx
@@ -251,8 +251,8 @@ function Th<TData>({
       onClick={header.column.getToggleSortingHandler()}
     >
       <div
-        className={cx(`w-full h-full flex`, {
-          ['p-3']: size === 'sm',
+        className={cx(`w-full h-full flex px-4`, {
+          ['py-3']: size === 'sm',
           ['p-4']: size === 'md',
         })}
       >
@@ -360,12 +360,16 @@ function Td<TData>({
     <td
       key={cell.id}
       style={{ width: cell.column.getSize() }}
-      className={cx(`text-sm text-gray-900 dark:text-white`, Typography.weight.normal, {
-        'border-b border-gray-200 dark:border-gray-700':
-          !striped && rowIdx !== totalRows - 1,
-        ['p-2']: size === 'sm',
-        ['p-4']: size === 'md',
-      })}
+      className={cx(
+        `text-sm text-gray-900 dark:text-white px-4`,
+        Typography.weight.normal,
+        {
+          'border-b border-gray-200 dark:border-gray-700':
+            !striped && rowIdx !== totalRows - 1,
+          ['py-2']: size === 'sm',
+          ['p-4']: size === 'md',
+        },
+      )}
     >
       {flexRender(cell.column.columnDef.cell, cell.getContext())}
     </td>
diff --git a/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx b/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx
index 4bff2b4ce6..eb9ec8c5aa 100644
--- a/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx
+++ b/deepfence_frontend/packages/ui-components/src/components/tabs/Tabs.tsx
@@ -30,9 +30,9 @@ const classes = {
 };
 
 const Tabs = (props: TabProps) => {
-  const { tabs, value, defaultValue, size = 'sm', children, ...rest } = props;
+  const { tabs, value, size = 'sm', children, ...rest } = props;
   return (
-    <TabsPrimitive.Root defaultValue={defaultValue} {...rest} data-testid={'tabs-testid'}>
+    <TabsPrimitive.Root {...rest} data-testid={'tabs-testid'} value={value}>
       <TabsPrimitive.List
         className={cx(
           'inline-flex gap-x-8 border-b bg-transparent border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 dark:bg-gray-900',
diff --git a/deepfence_frontend/pnpm-lock.yaml b/deepfence_frontend/pnpm-lock.yaml
index b7206f3d58..0fc4b96eff 100644
--- a/deepfence_frontend/pnpm-lock.yaml
+++ b/deepfence_frontend/pnpm-lock.yaml
@@ -17,6 +17,7 @@ importers:
       '@testing-library/jest-dom': ^5.16.5
       '@testing-library/react': ^13.4.0
       '@testing-library/user-event': ^14.4.3
+      '@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
@@ -33,6 +34,7 @@ importers:
       eslint-plugin-prettier: ^4.2.1
       eslint-plugin-react: ^7.31.11
       eslint-plugin-simple-import-sort: ^8.0.0
+      lodash-es: ^4.17.21
       msw: ^0.49.1
       playwright: 1.28.1
       postcss: ^8.4.19
@@ -55,6 +57,7 @@ importers:
       '@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@18.2.0
       react-icons: 4.7.1_react@18.2.0
@@ -66,6 +69,7 @@ importers:
       '@openapitools/openapi-generator-cli': 2.5.2
       '@playwright/test': 1.28.1
       '@testing-library/react': 13.4.0_biqbaboplfbrettd7655fr4n2y
+      '@types/lodash-es': 4.17.6
       '@types/react': 18.0.25
       '@types/react-dom': 18.0.9
       '@types/testing-library__jest-dom': 5.14.5

From 2f999bccd0bbdc607478a2779c2c671cb2f5a434 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Tue, 17 Jan 2023 14:24:56 +0530
Subject: [PATCH 02/11] wip: add actions

---
 .../onboard/pages/AWSInfraScanConfigure.tsx   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
index a97713fff0..c5ea72f3ea 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
@@ -1,4 +1,4 @@
-import { filter, find } from 'lodash-es';
+import { filter, find, isEmpty } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { IconContext } from 'react-icons';
 import { HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
@@ -630,14 +630,19 @@ const ComplianceTable = () => {
     [],
   );
   return (
-    <Table
-      size="sm"
-      data={tableData}
-      columns={columns}
-      enableRowSelection
-      onRowSelectionChange={setRowSelectionState}
-      rowSelectionState={rowSelectionState}
-    />
+    <div>
+      <div className="py-2 text-gray-500">
+        {isEmpty(rowSelectionState) ? 'No rows selected' : <div></div>}
+      </div>
+      <Table
+        size="sm"
+        data={tableData}
+        columns={columns}
+        enableRowSelection
+        onRowSelectionChange={setRowSelectionState}
+        rowSelectionState={rowSelectionState}
+      />
+    </div>
   );
 };
 
@@ -689,6 +694,7 @@ export const AWSInfraScanConfigure = () => {
         {scanType.map((type) => (
           <Button
             color="primary"
+            outline={hasTypeSelected(tabs, type) ? false : true}
             size="xs"
             key={type}
             onClick={() => {

From 13431b5711ea46112ae946184dcfdc461adb58d3 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Tue, 17 Jan 2023 16:36:27 +0530
Subject: [PATCH 03/11] feat(onboard):wip scan forms

---
 .../onboard/components/ConnectorHeader.tsx    | 34 ++++++--
 .../features/onboard/pages/AWSChooseScan.tsx  | 13 ++-
 ...figure.tsx => ComplianceScanConfigure.tsx} | 29 ++++++-
 .../onboard/pages/SecretScanConfigure.tsx     | 61 +++++++++++++
 .../pages/VulnerabilityScanConfigure.tsx      | 87 +++++++++++++++++++
 .../apps/dashboard/src/routes/private.tsx     | 16 +++-
 6 files changed, 221 insertions(+), 19 deletions(-)
 rename deepfence_frontend/apps/dashboard/src/features/onboard/pages/{AWSInfraScanConfigure.tsx => ComplianceScanConfigure.tsx} (96%)
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
index f1dc1b2264..ee3b02c477 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
+++ b/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) => {
@@ -30,7 +33,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>
   );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
index c5b1821d7a..e1d55e8ab7 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
@@ -4,6 +4,7 @@ import LogoAws from '../../../assets/logo-aws.svg';
 import LogoAwsWhite from '../../../assets/logo-aws-white.svg';
 import { useTheme } from '../../../theme/ThemeContext';
 import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
 
 type ScanTypeListProps = {
   scanType: string;
@@ -18,8 +19,8 @@ const scanTypeList: 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 Compliance Scan',
-    redirect: '/onboard/scan-infrastructure/cloud/aws/configure',
+    buttonText: 'Configure Vulnerability Scan',
+    redirect: '/onboard/scan-infrastructure/host/configure/vulnerability',
   },
   {
     scanType: 'Compliance Scan',
@@ -32,8 +33,8 @@ const scanTypeList: ScanTypeListProps[] = [
     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 Compliance Scan',
-    redirect: 'cloud/aws/configure',
+    buttonText: 'Configure Secret Scan',
+    redirect: '/onboard/scan-infrastructure/host/configure/secret',
   },
 ];
 
@@ -116,6 +117,10 @@ export const AWSChooseScan = () => {
   const { goBack } = usePageNavigation();
   return (
     <>
+      <ConnectorHeader
+        title="Choose your scan type"
+        description="Choose from the below options to perform your first scan."
+      />
       <SelectedAccountCard />
       <ScanList />
       <Button onClick={goBack} outline size="xs" className="mt-16">
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
similarity index 96%
rename from deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
rename to deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index c5ea72f3ea..a01fcad2ea 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSInfraScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -13,6 +13,8 @@ import {
 } from 'ui-components';
 
 import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
+import { ScanInfraLayout } from '../layouts/InfraScanLayout';
 
 type ColumnType = {
   id: number;
@@ -632,7 +634,18 @@ const ComplianceTable = () => {
   return (
     <div>
       <div className="py-2 text-gray-500">
-        {isEmpty(rowSelectionState) ? 'No rows selected' : <div></div>}
+        {isEmpty(rowSelectionState) ? (
+          'No rows selected'
+        ) : (
+          <div>
+            <Switch
+              checked={false}
+              onCheckedChange={(e) => {}}
+              label="Enabled"
+              size="sm"
+            />
+          </div>
+        )}
       </div>
       <Table
         size="sm"
@@ -657,7 +670,7 @@ const hasTypeSelected = (prevTabs: TabsType[], value: string) => {
   return find(prevTabs, ['value', value]);
 };
 
-export const AWSInfraScanConfigure = () => {
+export const ComplianceScanConfigure = () => {
   const { goBack } = usePageNavigation();
   const [selectedTab, setSelectedTab] = useState('');
   const [tabs, setTabs] = useState<TabsType[] | []>([]);
@@ -690,6 +703,14 @@ export const AWSInfraScanConfigure = () => {
 
   return (
     <>
+      <ConnectorHeader
+        title="Configure your scan"
+        description="Choose from the below options to perform your first scan."
+        metadata={{
+          accountId: '234HTY6643',
+          type: 'AWS',
+        }}
+      />
       <div className="mt-8 flex gap-4 mb-8">
         {scanType.map((type) => (
           <Button
@@ -704,7 +725,7 @@ export const AWSInfraScanConfigure = () => {
             {type}
             <IconContext.Provider
               value={{
-                className: 'ml-2.5 w-5 h-5',
+                className: 'ml-2.5 w-4 h-4',
               }}
             >
               {hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
@@ -725,7 +746,7 @@ export const AWSInfraScanConfigure = () => {
           </Tabs>
         )}
       </div>
-      <Button onClick={goBack} outline size="xs" className="mt-16">
+      <Button onClick={goBack} size="xs" className="mt-16">
         Cancel
       </Button>
     </>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
new file mode 100644
index 0000000000..4f52d302d4
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -0,0 +1,61 @@
+import { Button, Checkbox, Switch, Typography } from 'ui-components';
+
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
+
+const packages = [
+  {
+    name: 'OS Packages',
+  },
+  {
+    name: 'Java',
+  },
+  {
+    name: 'Javascript',
+  },
+  {
+    name: 'Rust',
+  },
+  {
+    name: 'GoLang',
+  },
+  {
+    name: 'Ruby',
+  },
+  {
+    name: 'Python',
+  },
+  {
+    name: 'PHP',
+  },
+  {
+    name: 'Dotnet',
+  },
+];
+
+export const SecretScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <ConnectorHeader
+        title="Configure your scan"
+        description="Choose from the below options to perform your first scan."
+        metadata={{
+          accountId: '234HTY6643',
+          type: 'Host',
+        }}
+      />
+      <section>
+        <h6
+          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
+        >
+          Packages
+        </h6>
+      </section>
+
+      <Button onClick={goBack} color="default" size="xs" className="mt-16">
+        Cancel
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
new file mode 100644
index 0000000000..151949a466
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -0,0 +1,87 @@
+import { Button, Checkbox, Switch, Typography } from 'ui-components';
+
+import { usePageNavigation } from '../../../utils/usePageNavigation';
+import { ConnectorHeader } from '../components/ConnectorHeader';
+import { ScanInfraLayout } from '../layouts/InfraScanLayout';
+
+const packages = [
+  {
+    name: 'OS Packages',
+  },
+  {
+    name: 'Java',
+  },
+  {
+    name: 'Javascript',
+  },
+  {
+    name: 'Rust',
+  },
+  {
+    name: 'GoLang',
+  },
+  {
+    name: 'Ruby',
+  },
+  {
+    name: 'Python',
+  },
+  {
+    name: 'PHP',
+  },
+  {
+    name: 'Dotnet',
+  },
+];
+
+export const VulnerabilityScanConfigure = () => {
+  const { goBack } = usePageNavigation();
+  return (
+    <>
+      <ConnectorHeader
+        title="Configure your scan"
+        description="Choose from the below options to perform your first scan."
+        metadata={{
+          accountId: '234HTY6643',
+          type: 'Host',
+        }}
+      />
+      <section>
+        <h6
+          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
+        >
+          Packages
+        </h6>
+        <div className="mt-4">
+          <Switch label="Select All" size="sm" />
+        </div>
+
+        <div className="flex flex-row mt-4 gap-5">
+          {packages.map((pkg) => {
+            return <Checkbox label={pkg.name} key={pkg.name} />;
+          })}
+        </div>
+      </section>
+
+      <section className="mt-8">
+        <h6
+          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
+        >
+          Advanced Options
+        </h6>
+
+        <div className="flex flex-col mt-4 gap-4">
+          <Checkbox
+            label={
+              'Scan Entire Cluster (All hosts and container images of all pods in the cluster)'
+            }
+          />
+          <Checkbox label={'Priority Scan'} />
+        </div>
+      </section>
+      <Button onClick={goBack} color="default" size="xs" className="mt-16">
+        Cancel
+      </Button>
+    </>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 64ccde485c..41eec860d2 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -8,11 +8,13 @@ import {
 import { AmazonECRConnector } from '../features/onboard/pages/AmazonECRConnector';
 import { AWSChooseScan } from '../features/onboard/pages/AWSChooseScan';
 import { AWSConnector } from '../features/onboard/pages/AWSConnector';
-import { AWSInfraScanConfigure } from '../features/onboard/pages/AWSInfraScanConfigure';
 import { AzureConnector } from '../features/onboard/pages/AzureConnector';
+import { ComplianceScanConfigure } from '../features/onboard/pages/ComplianceScanConfigure';
 import { Connector } from '../features/onboard/pages/Connector';
 import { GCPConnector } from '../features/onboard/pages/GCPConnector';
 import { K8sConnector } from '../features/onboard/pages/K8sConnector';
+import { SecretScanConfigure } from '../features/onboard/pages/SecretScanConfigure';
+import { VulnerabilityScanConfigure } from '../features/onboard/pages/VulnerabilityScanConfigure';
 
 export const privateRoutes: RouteObject[] = [
   {
@@ -62,7 +64,7 @@ export const privateRoutes: RouteObject[] = [
       },
       {
         path: 'scan-infrastructure',
-        element: <ScanInfraLayout />,
+        element: <Outlet />,
         children: [
           {
             path: 'cloud/aws',
@@ -70,7 +72,15 @@ export const privateRoutes: RouteObject[] = [
           },
           {
             path: 'cloud/aws/configure',
-            element: <AWSInfraScanConfigure />,
+            element: <ComplianceScanConfigure />,
+          },
+          {
+            path: 'host/configure/vulnerability',
+            element: <VulnerabilityScanConfigure />,
+          },
+          {
+            path: 'host/configure/secret',
+            element: <SecretScanConfigure />,
           },
         ],
       },

From f9db55da33265b7c89761d16fbe179e8c18cd868 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Wed, 18 Jan 2023 12:57:23 +0530
Subject: [PATCH 04/11] update to use root base import, rename button

---
 .../registries/AmazonECRConnectionForm.tsx    |  4 +-
 .../features/onboard/pages/AWSChooseScan.tsx  | 32 +++++++-------
 .../onboard/pages/AmazonECRConnector.tsx      |  2 +-
 .../features/onboard/pages/AzureConnector.tsx |  2 +-
 .../onboard/pages/ComplianceScanConfigure.tsx |  7 ++--
 .../onboard/pages/DockerConnector.tsx         |  2 +-
 .../features/onboard/pages/GCPConnector.tsx   |  2 +-
 .../features/onboard/pages/K8sConnector.tsx   |  2 +-
 .../features/onboard/pages/LinuxConnector.tsx |  2 +-
 .../onboard/pages/SecretScanConfigure.tsx     | 42 +++----------------
 .../pages/VulnerabilityScanConfigure.tsx      |  7 ++--
 .../pages/connectors/AddConnectors.tsx        |  4 +-
 .../apps/dashboard/src/routes/private.tsx     | 29 ++++++++++++-
 13 files changed, 66 insertions(+), 71 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx
index 027da86397..92f5fa4c5b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/connectors/registries/AmazonECRConnectionForm.tsx
+++ b/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>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
index e1d55e8ab7..7ffddd58cd 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
@@ -1,10 +1,11 @@
+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 { useTheme } from '../../../theme/ThemeContext';
-import { usePageNavigation } from '../../../utils/usePageNavigation';
-import { ConnectorHeader } from '../components/ConnectorHeader';
+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;
@@ -14,27 +15,27 @@ type ScanTypeListProps = {
   redirect: string;
 };
 
-const scanTypeList: ScanTypeListProps[] = [
+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: '/onboard/scan-infrastructure/host/configure/vulnerability',
+    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: '/onboard/scan-infrastructure/cloud/aws/configure',
+    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: '/onboard/scan-infrastructure/host/configure/secret',
+    redirect: '/secret',
   },
 ];
 
@@ -66,14 +67,16 @@ const SelectedAccountCard = () => {
   );
 };
 
-const ScanList = () => {
+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">
-      {scanTypeList.map(
+      {scanTypes.map(
         ({
           scanType,
           description,
@@ -101,7 +104,8 @@ const ScanList = () => {
                 size="xs"
                 color="primary"
                 onClick={() => {
-                  goNext(redirect);
+                  // redirect: '/onboard/scan/configure/secret',
+                  goNext(`${location.pathname}${redirect}`);
                 }}
               >
                 {buttonText}
@@ -122,9 +126,9 @@ export const AWSChooseScan = () => {
         description="Choose from the below options to perform your first scan."
       />
       <SelectedAccountCard />
-      <ScanList />
+      <ScanType />
       <Button onClick={goBack} outline size="xs" className="mt-16">
-        Cancel
+        Go Back
       </Button>
     </>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx
index cabd5f067b..66d84a78c1 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AmazonECRConnector.tsx
+++ b/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>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx
index 6cc84c68fe..b1c56e82ac 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AzureConnector.tsx
+++ b/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>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index a01fcad2ea..dcc7e46fdb 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -12,9 +12,8 @@ import {
   Typography,
 } from 'ui-components';
 
-import { usePageNavigation } from '../../../utils/usePageNavigation';
-import { ConnectorHeader } from '../components/ConnectorHeader';
-import { ScanInfraLayout } from '../layouts/InfraScanLayout';
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
 
 type ColumnType = {
   id: number;
@@ -747,7 +746,7 @@ export const ComplianceScanConfigure = () => {
         )}
       </div>
       <Button onClick={goBack} size="xs" className="mt-16">
-        Cancel
+        Go Back
       </Button>
     </>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
index 2f145325f5..8fc1eeec7b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/DockerConnector.tsx
@@ -16,7 +16,7 @@ export const DockerConnector = () => {
       <DockerConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
index a51361ada7..5fe16bbd40 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/GCPConnector.tsx
@@ -16,7 +16,7 @@ export const GCPConnector = () => {
       <GCPConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
index aed78fc391..de7a3c5f99 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/K8sConnector.tsx
@@ -18,7 +18,7 @@ export const K8sConnector = () => {
       </div>
       <div className="flex flex-row mt-16">
         <Button onClick={goBack} size="xs">
-          Cancel
+          Go Back
         </Button>
       </div>
     </div>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
index d6a2fa0310..88383be4f1 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/LinuxConnector.tsx
@@ -16,7 +16,7 @@ export const LinuxConnector = () => {
       <LinuxConnectorForm />
 
       <Button onClick={goBack} size="xs" className="mt-16" color="default">
-        Cancel
+        Go Back
       </Button>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
index 4f52d302d4..dcb389ad59 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -1,37 +1,7 @@
-import { Button, Checkbox, Switch, Typography } from 'ui-components';
+import { Button, Typography } from 'ui-components';
 
-import { usePageNavigation } from '../../../utils/usePageNavigation';
-import { ConnectorHeader } from '../components/ConnectorHeader';
-
-const packages = [
-  {
-    name: 'OS Packages',
-  },
-  {
-    name: 'Java',
-  },
-  {
-    name: 'Javascript',
-  },
-  {
-    name: 'Rust',
-  },
-  {
-    name: 'GoLang',
-  },
-  {
-    name: 'Ruby',
-  },
-  {
-    name: 'Python',
-  },
-  {
-    name: 'PHP',
-  },
-  {
-    name: 'Dotnet',
-  },
-];
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
 
 export const SecretScanConfigure = () => {
   const { goBack } = usePageNavigation();
@@ -48,13 +18,11 @@ export const SecretScanConfigure = () => {
       <section>
         <h6
           className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
-        >
-          Packages
-        </h6>
+        ></h6>
       </section>
 
       <Button onClick={goBack} color="default" size="xs" className="mt-16">
-        Cancel
+        Go Back
       </Button>
     </>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
index 151949a466..f69bbb4e1b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -1,8 +1,7 @@
 import { Button, Checkbox, Switch, Typography } from 'ui-components';
 
-import { usePageNavigation } from '../../../utils/usePageNavigation';
-import { ConnectorHeader } from '../components/ConnectorHeader';
-import { ScanInfraLayout } from '../layouts/InfraScanLayout';
+import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
+import { usePageNavigation } from '@/utils/usePageNavigation';
 
 const packages = [
   {
@@ -80,7 +79,7 @@ export const VulnerabilityScanConfigure = () => {
         </div>
       </section>
       <Button onClick={goBack} color="default" size="xs" className="mt-16">
-        Cancel
+        Go Back
       </Button>
     </>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
index 45285cdd8c..e7fd27a2f8 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/connectors/AddConnectors.tsx
@@ -126,12 +126,12 @@ const Host = () => {
     {
       icon: LogoDocker,
       label: 'Docker Container',
-      path: 'docker',
+      path: 'host/docker',
     },
     {
       icon: LogoLinux,
       label: 'Linux Bare-Metal/VM',
-      path: 'host-linux',
+      path: 'host/linux',
     },
   ];
 
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 7286907e65..e36447d1a9 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -9,14 +9,18 @@ import {
   rootOnboardLoader,
 } from '@/features/onboard/layouts/OnboardLayout';
 import { AmazonECRConnector } from '@/features/onboard/pages/AmazonECRConnector';
+import { AWSChooseScan } from '@/features/onboard/pages/AWSChooseScan';
 import { AWSConnector } from '@/features/onboard/pages/AWSConnector';
 import { AzureConnector } from '@/features/onboard/pages/AzureConnector';
+import { ComplianceScanConfigure } from '@/features/onboard/pages/ComplianceScanConfigure';
 import { AddConnector } from '@/features/onboard/pages/connectors/AddConnectors';
 import { MyConnectors } from '@/features/onboard/pages/connectors/MyConnectors';
 import { DockerConnector } from '@/features/onboard/pages/DockerConnector';
 import { GCPConnector } from '@/features/onboard/pages/GCPConnector';
 import { K8sConnector } from '@/features/onboard/pages/K8sConnector';
 import { LinuxConnector } from '@/features/onboard/pages/LinuxConnector';
+import { SecretScanConfigure } from '@/features/onboard/pages/SecretScanConfigure';
+import { VulnerabilityScanConfigure } from '@/features/onboard/pages/VulnerabilityScanConfigure';
 
 export const privateRoutes: RouteObject[] = [
   {
@@ -60,11 +64,11 @@ export const privateRoutes: RouteObject[] = [
             element: <K8sConnector />,
           },
           {
-            path: 'docker',
+            path: 'host/docker',
             element: <DockerConnector />,
           },
           {
-            path: 'host-linux',
+            path: 'host/linux',
             element: <LinuxConnector />,
           },
           {
@@ -73,6 +77,27 @@ export const privateRoutes: RouteObject[] = [
           },
         ],
       },
+      {
+        path: 'scan',
+        children: [
+          {
+            path: 'configure',
+            element: <AWSChooseScan />,
+          },
+          {
+            path: 'configure/compliance',
+            element: <ComplianceScanConfigure />,
+          },
+          {
+            path: 'configure/vulnerability',
+            element: <VulnerabilityScanConfigure />,
+          },
+          {
+            path: 'configure/secret',
+            element: <SecretScanConfigure />,
+          },
+        ],
+      },
     ],
   },
 ];

From d35f7899bd52f358d43125529fdf613dfb289140 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Wed, 18 Jan 2023 15:02:12 +0530
Subject: [PATCH 05/11] update switch connector button, remove component

---
 .../features/onboard/layouts/InfraScanLayout.tsx  | 15 ---------------
 .../src/features/onboard/pages/AWSChooseScan.tsx  | 14 +++++++++++---
 2 files changed, 11 insertions(+), 18 deletions(-)
 delete mode 100644 deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx
deleted file mode 100644
index 15b973ee83..0000000000
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/layouts/InfraScanLayout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Outlet } from 'react-router-dom';
-
-import { ConnectorHeader } from '../components/ConnectorHeader';
-
-export const ScanInfraLayout = () => {
-  return (
-    <div>
-      <ConnectorHeader
-        title="Choose your scan type"
-        description="Choose from the below options to perform your first scan."
-      />
-      <Outlet />
-    </div>
-  );
-};
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
index 7ffddd58cd..c1c844481b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
@@ -1,3 +1,4 @@
+import { HiSwitchHorizontal } from 'react-icons/hi';
 import { useLocation } from 'react-router-dom';
 import { Button, Card, Separator, Typography } from 'ui-components';
 
@@ -41,6 +42,7 @@ const scanTypes: ScanTypeListProps[] = [
 
 const SelectedAccountCard = () => {
   const { mode } = useTheme();
+  const { navigate } = usePageNavigation();
   return (
     <div className="flex w-fit p-3 pt-0 items-center mb-8">
       <span className="mr-6">
@@ -59,8 +61,15 @@ const SelectedAccountCard = () => {
         </span>
       </div>
       <div>
-        <Button className="ml-auto" color="primary" size="xs" outline>
-          Swith connector
+        <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>
@@ -104,7 +113,6 @@ const ScanType = () => {
                 size="xs"
                 color="primary"
                 onClick={() => {
-                  // redirect: '/onboard/scan/configure/secret',
                   goNext(`${location.pathname}${redirect}`);
                 }}
               >

From dbf3ecbe257fe3242e107d555af5cb8aaede0fb5 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Wed, 18 Jan 2023 16:45:20 +0530
Subject: [PATCH 06/11] rename component

---
 .../pages/{AWSChooseScan.tsx => ChooseScan.tsx}        |  2 +-
 .../src/features/onboard/pages/SecretScanConfigure.tsx | 10 +++++-----
 .../apps/dashboard/src/routes/private.tsx              |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename deepfence_frontend/apps/dashboard/src/features/onboard/pages/{AWSChooseScan.tsx => ChooseScan.tsx} (99%)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
similarity index 99%
rename from deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
rename to deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
index c1c844481b..584c88a45e 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/AWSChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
@@ -125,7 +125,7 @@ const ScanType = () => {
     </div>
   );
 };
-export const AWSChooseScan = () => {
+export const ChooseScan = () => {
   const { goBack } = usePageNavigation();
   return (
     <>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
index dcb389ad59..b863134745 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from 'ui-components';
+import { Button } from 'ui-components';
 
 import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
 import { usePageNavigation } from '@/utils/usePageNavigation';
@@ -9,16 +9,16 @@ export const SecretScanConfigure = () => {
     <>
       <ConnectorHeader
         title="Configure your scan"
-        description="Choose from the below options to perform your first scan."
+        description="Just click the start scan button to start your secret scanning"
         metadata={{
           accountId: '234HTY6643',
           type: 'Host',
         }}
       />
       <section>
-        <h6
-          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
-        ></h6>
+        <Button size="xs" color="primary">
+          Start scan
+        </Button>
       </section>
 
       <Button onClick={goBack} color="default" size="xs" className="mt-16">
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index e36447d1a9..64a739ae8d 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -9,9 +9,9 @@ import {
   rootOnboardLoader,
 } from '@/features/onboard/layouts/OnboardLayout';
 import { AmazonECRConnector } from '@/features/onboard/pages/AmazonECRConnector';
-import { AWSChooseScan } from '@/features/onboard/pages/AWSChooseScan';
 import { AWSConnector } from '@/features/onboard/pages/AWSConnector';
 import { AzureConnector } from '@/features/onboard/pages/AzureConnector';
+import { ChooseScan } from '@/features/onboard/pages/ChooseScan';
 import { ComplianceScanConfigure } from '@/features/onboard/pages/ComplianceScanConfigure';
 import { AddConnector } from '@/features/onboard/pages/connectors/AddConnectors';
 import { MyConnectors } from '@/features/onboard/pages/connectors/MyConnectors';
@@ -82,7 +82,7 @@ export const privateRoutes: RouteObject[] = [
         children: [
           {
             path: 'configure',
-            element: <AWSChooseScan />,
+            element: <ChooseScan />,
           },
           {
             path: 'configure/compliance',

From c3933347602feb9bc4db22ae6e7df4ac173cef6a Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Wed, 18 Jan 2023 19:41:38 +0530
Subject: [PATCH 07/11] update route path and add start scan button

---
 .../src/features/onboard/pages/ChooseScan.tsx |  2 +-
 .../onboard/pages/ComplianceScanConfigure.tsx | 44 ++++++++++---------
 .../onboard/pages/SecretScanConfigure.tsx     |  7 +--
 .../pages/VulnerabilityScanConfigure.tsx      | 17 ++++---
 .../apps/dashboard/src/routes/private.tsx     |  2 +-
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
index 584c88a45e..1a537f0889 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
@@ -113,7 +113,7 @@ const ScanType = () => {
                 size="xs"
                 color="primary"
                 onClick={() => {
-                  goNext(`${location.pathname}${redirect}`);
+                  goNext(`../configure${redirect}`);
                 }}
               >
                 {buttonText}
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index dcc7e46fdb..71bd2dad79 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -1,7 +1,7 @@
 import { filter, find, isEmpty } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { IconContext } from 'react-icons';
-import { HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
+import { HiBan, HiLightBulb, HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
 import {
   Button,
   createColumnHelper,
@@ -619,7 +619,7 @@ const ComplianceTable = () => {
         header: () => 'Enabled',
         cell: (info) => (
           <Switch
-            checked={info.renderValue()}
+            checked={!!info.renderValue()}
             onCheckedChange={(e) => {
               updateTableData(info, e);
             }}
@@ -634,15 +634,15 @@ const ComplianceTable = () => {
     <div>
       <div className="py-2 text-gray-500">
         {isEmpty(rowSelectionState) ? (
-          'No rows selected'
+          <span className="mb-3 block">No rows selected</span>
         ) : (
-          <div>
-            <Switch
-              checked={false}
-              onCheckedChange={(e) => {}}
-              label="Enabled"
-              size="sm"
-            />
+          <div className="flex gap-2">
+            <Button size="xs" startIcon={<HiBan />}>
+              Disable Selected
+            </Button>
+            <Button size="xs" startIcon={<HiLightBulb />}>
+              Enable Selected
+            </Button>
           </div>
         )}
       </div>
@@ -678,7 +678,7 @@ export const ComplianceScanConfigure = () => {
     setTabs((prevTabs) => {
       const found = hasTypeSelected(prevTabs, name);
       if (found) {
-        return [...filter(prevTabs, (tab) => tab.value !== found.value)];
+        return [...filter(prevTabs, (tab: TabsType) => tab.value !== found.value)];
       } else {
         return [
           ...prevTabs,
@@ -703,14 +703,14 @@ export const ComplianceScanConfigure = () => {
   return (
     <>
       <ConnectorHeader
-        title="Configure your scan"
+        title="Configure Compliance Scan"
         description="Choose from the below options to perform your first scan."
         metadata={{
           accountId: '234HTY6643',
           type: 'AWS',
         }}
       />
-      <div className="mt-8 flex gap-4 mb-8">
+      <div className="mt-6 flex gap-4 mb-6">
         {scanType.map((type) => (
           <Button
             color="primary"
@@ -720,23 +720,25 @@ export const ComplianceScanConfigure = () => {
             onClick={() => {
               onScanTypeSelection(type);
             }}
+            endIcon={hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
           >
             {type}
-            <IconContext.Provider
-              value={{
-                className: 'ml-2.5 w-4 h-4',
-              }}
-            >
-              {hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
-            </IconContext.Provider>
           </Button>
         ))}
+        <Button
+          size="sm"
+          color="primary"
+          className="ml-auto"
+          disabled={tabs.length === 0}
+        >
+          Start Scan
+        </Button>
       </div>
       <div
         className={`${Typography.size.sm} ${Typography.weight.medium} mt-4 dark:text-white`}
       >
         {selectedTab === '' ? (
-          <p>Please select at least one compliance type.</p>
+          <p>Please select at least one compliance type to start your scan.</p>
         ) : (
           <Tabs value={selectedTab} tabs={tabs} onValueChange={(v) => setSelectedTab(v)}>
             <div className="h-full p-2 dark:text-white">
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
index b863134745..0714705ad9 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -8,15 +8,16 @@ export const SecretScanConfigure = () => {
   return (
     <>
       <ConnectorHeader
-        title="Configure your scan"
+        title="Configure Secret Scan"
         description="Just click the start scan button to start your secret scanning"
         metadata={{
           accountId: '234HTY6643',
           type: 'Host',
         }}
       />
-      <section>
-        <Button size="xs" color="primary">
+      <section className="flex">
+        <div></div>
+        <Button size="sm" color="primary" className="ml-auto">
           Start scan
         </Button>
       </section>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
index f69bbb4e1b..0a88027b70 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -38,7 +38,7 @@ export const VulnerabilityScanConfigure = () => {
   return (
     <>
       <ConnectorHeader
-        title="Configure your scan"
+        title="Configure Vulnerability Scan"
         description="Choose from the below options to perform your first scan."
         metadata={{
           accountId: '234HTY6643',
@@ -46,11 +46,16 @@ export const VulnerabilityScanConfigure = () => {
         }}
       />
       <section>
-        <h6
-          className={`${Typography.size.lg} ${Typography.weight.medium} mt-4 dark:text-white`}
-        >
-          Packages
-        </h6>
+        <div className="flex">
+          <h6
+            className={`${Typography.size.lg} ${Typography.weight.medium} mt-0 dark:text-white`}
+          >
+            Packages
+          </h6>
+          <Button size="sm" color="primary" className="ml-auto">
+            Start Scan
+          </Button>
+        </div>
         <div className="mt-4">
           <Switch label="Select All" size="sm" />
         </div>
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 64a739ae8d..df32bbd196 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -81,7 +81,7 @@ export const privateRoutes: RouteObject[] = [
         path: 'scan',
         children: [
           {
-            path: 'configure',
+            path: 'choose',
             element: <ChooseScan />,
           },
           {

From fb048914eea72a5412011a094c5c4b173728e79b Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Thu, 19 Jan 2023 10:00:46 +0530
Subject: [PATCH 08/11] added select all functionality

---
 .../src/features/onboard/pages/ChooseScan.tsx |  4 +-
 .../pages/VulnerabilityScanConfigure.tsx      | 83 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
index 1a537f0889..8e07014360 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
@@ -40,7 +40,7 @@ const scanTypes: ScanTypeListProps[] = [
   },
 ];
 
-const SelectedAccountCard = () => {
+const SelectedAccount = () => {
   const { mode } = useTheme();
   const { navigate } = usePageNavigation();
   return (
@@ -133,7 +133,7 @@ export const ChooseScan = () => {
         title="Choose your scan type"
         description="Choose from the below options to perform your first scan."
       />
-      <SelectedAccountCard />
+      <SelectedAccount />
       <ScanType />
       <Button onClick={goBack} outline size="xs" className="mt-16">
         Go Back
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
index 0a88027b70..212b246c2a 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -1,3 +1,5 @@
+import { cloneDeepWith } from 'lodash-es';
+import { useEffect, useState } from 'react';
 import { Button, Checkbox, Switch, Typography } from 'ui-components';
 
 import { ConnectorHeader } from '@/features/onboard/components/ConnectorHeader';
@@ -6,35 +8,96 @@ import { usePageNavigation } from '@/utils/usePageNavigation';
 const packages = [
   {
     name: 'OS Packages',
+    checked: false,
   },
   {
     name: 'Java',
+    checked: false,
   },
   {
     name: 'Javascript',
+    checked: false,
   },
   {
     name: 'Rust',
+    checked: false,
   },
   {
     name: 'GoLang',
+    checked: false,
   },
   {
     name: 'Ruby',
+    checked: false,
   },
   {
     name: 'Python',
+    checked: false,
   },
   {
     name: 'PHP',
+    checked: false,
   },
   {
     name: 'Dotnet',
+    checked: false,
   },
 ];
 
 export const VulnerabilityScanConfigure = () => {
   const { goBack } = usePageNavigation();
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  const [pkgs, setSelectPackages] = useState(packages);
+
+  useEffect(() => {
+    if (isSelectAll) {
+      const newPkgs = pkgs.map((pkg) => {
+        pkg.checked = true;
+        return pkg;
+      });
+      setSelectPackages(newPkgs);
+    }
+  }, [isSelectAll]);
+
+  // select all switch
+  const onSwitchChange = (checked: boolean) => {
+    setIsSelectAll(checked);
+    if (!checked) {
+      const newPkgs = pkgs.map((pkg) => {
+        pkg.checked = false;
+        return pkg;
+      });
+      setSelectPackages(newPkgs);
+    }
+  };
+
+  // packages checkbox
+  const onPackageCheckedChange = (
+    pkg: {
+      name: string;
+      checked: boolean;
+    },
+    checked: boolean,
+  ) => {
+    if (checked === false) {
+      setIsSelectAll(false);
+    } else if (pkgs.filter((pkg) => pkg.checked === true).length === pkgs.length - 1) {
+      setIsSelectAll(true);
+    }
+    setSelectPackages((state) => {
+      const _newState = cloneDeepWith(state, (value) => {
+        if (value.name === pkg.name) {
+          return {
+            ...value,
+            checked,
+          };
+        }
+        return undefined;
+      });
+
+      return _newState;
+    });
+  };
   return (
     <>
       <ConnectorHeader
@@ -57,12 +120,26 @@ export const VulnerabilityScanConfigure = () => {
           </Button>
         </div>
         <div className="mt-4">
-          <Switch label="Select All" size="sm" />
+          <Switch
+            label="Select All"
+            size="sm"
+            onCheckedChange={onSwitchChange}
+            checked={isSelectAll}
+          />
         </div>
 
         <div className="flex flex-row mt-4 gap-5">
-          {packages.map((pkg) => {
-            return <Checkbox label={pkg.name} key={pkg.name} />;
+          {pkgs.map((pkg) => {
+            return (
+              <Checkbox
+                label={pkg.name}
+                key={pkg.name}
+                checked={isSelectAll ? true : pkg.checked}
+                onCheckedChange={(checked: boolean) => {
+                  onPackageCheckedChange(pkg, checked);
+                }}
+              />
+            );
           })}
         </div>
       </section>

From 1bf7ac394cbdf8ec99572be2636080164838464b Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Thu, 19 Jan 2023 10:18:06 +0530
Subject: [PATCH 09/11] remove unused import

---
 .../src/features/onboard/pages/ComplianceScanConfigure.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index 71bd2dad79..5e095dca20 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -1,6 +1,5 @@
 import { filter, find, isEmpty } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
-import { IconContext } from 'react-icons';
 import { HiBan, HiLightBulb, HiMinusCircle, HiPlusCircle } from 'react-icons/hi';
 import {
   Button,

From 2265bc354a61e49560783a7e285ecc0dc9dc4a31 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Thu, 19 Jan 2023 10:28:33 +0530
Subject: [PATCH 10/11] fix build failed

---
 .../onboard/pages/ComplianceScanConfigure.tsx | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index 5e095dca20..4ae3b0b71b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -31,6 +31,7 @@ const complianceTableData = [
     test_desc:
       '4.1 Ensure a log metric filter and alarm exist for unauthorized API calls',
     test_number: 'control.cis_v140_4_1',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -41,6 +42,7 @@ const complianceTableData = [
     test_desc:
       '4.2 Ensure a log metric filter and alarm exist for Management Console sign-in without MFA',
     test_number: 'control.cis_v140_4_2',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -51,6 +53,7 @@ const complianceTableData = [
     test_desc:
       "4.3 Ensure a log metric filter and alarm exist for usage of 'root' account",
     test_number: 'control.cis_v140_4_3',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -60,6 +63,7 @@ const complianceTableData = [
     test_category: 'CloudWatch',
     test_desc: '4.4 Ensure a log metric filter and alarm exist for IAM policy changes',
     test_number: 'control.cis_v140_4_4',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -70,6 +74,7 @@ const complianceTableData = [
     test_desc:
       '4.5 Ensure a log metric filter and alarm exist for CloudTrail configuration changes',
     test_number: 'control.cis_v140_4_5',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -80,6 +85,7 @@ const complianceTableData = [
     test_desc:
       '4.6 Ensure a log metric filter and alarm exist for AWS Management Console authentication failures',
     test_number: 'control.cis_v140_4_6',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -90,6 +96,7 @@ const complianceTableData = [
     test_desc:
       '4.7 Ensure a log metric filter and alarm exist for disabling or scheduled deletion of customer created CMKs',
     test_number: 'control.cis_v140_4_7',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -100,6 +107,7 @@ const complianceTableData = [
     test_desc:
       '4.8 Ensure a log metric filter and alarm exist for S3 bucket policy changes',
     test_number: 'control.cis_v140_4_8',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -110,6 +118,7 @@ const complianceTableData = [
     test_desc:
       '4.9 Ensure a log metric filter and alarm exist for AWS Config configuration changes',
     test_number: 'control.cis_v140_4_9',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -120,6 +129,7 @@ const complianceTableData = [
     test_desc:
       '4.10 Ensure a log metric filter and alarm exist for security group changes',
     test_number: 'control.cis_v140_4_10',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -130,6 +140,7 @@ const complianceTableData = [
     test_desc:
       '4.11 Ensure a log metric filter and alarm exist for changes to Network Access Control Lists (NACL)',
     test_number: 'control.cis_v140_4_11',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -140,6 +151,7 @@ const complianceTableData = [
     test_desc:
       '4.12 Ensure a log metric filter and alarm exist for changes to network gateways',
     test_number: 'control.cis_v140_4_12',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -149,6 +161,7 @@ const complianceTableData = [
     test_category: 'CloudWatch',
     test_desc: '4.13 Ensure a log metric filter and alarm exist for route table changes',
     test_number: 'control.cis_v140_4_13',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -158,6 +171,7 @@ const complianceTableData = [
     test_category: 'CloudWatch',
     test_desc: '4.14 Ensure a log metric filter and alarm exist for VPC changes',
     test_number: 'control.cis_v140_4_14',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -168,6 +182,7 @@ const complianceTableData = [
     test_desc:
       '4.15 Ensure a log metric filter and alarm exists for AWS Organizations changes',
     test_number: 'control.cis_v140_4_15',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -178,6 +193,7 @@ const complianceTableData = [
     test_desc:
       '5.1 Ensure no Network ACLs allow ingress from 0.0.0.0/0 to remote server administration ports',
     test_number: 'control.cis_v140_5_1',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -188,6 +204,7 @@ const complianceTableData = [
     test_desc:
       '5.2 Ensure no security groups allow ingress from 0.0.0.0/0 to remote server administration ports',
     test_number: 'control.cis_v140_5_2',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -197,6 +214,7 @@ const complianceTableData = [
     test_category: 'VPC',
     test_desc: '5.3 Ensure the default security group of every VPC restricts all traffic',
     test_number: 'control.cis_v140_5_3',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -206,6 +224,7 @@ const complianceTableData = [
     test_category: 'VPC',
     test_desc: '5.4 Ensure routing tables for VPC peering are \\"least access\\',
     test_number: 'control.cis_v140_5_4',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -215,6 +234,7 @@ const complianceTableData = [
     test_category: 'CloudTrail',
     test_desc: '3.1 Ensure CloudTrail is enabled in all regions',
     test_number: 'control.cis_v140_3_1',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -224,6 +244,7 @@ const complianceTableData = [
     test_category: 'CloudTrail',
     test_desc: '3.2 Ensure CloudTrail log file validation is enabled',
     test_number: 'control.cis_v140_3_2',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -234,6 +255,7 @@ const complianceTableData = [
     test_desc:
       '3.3 Ensure the S3 bucket used to store CloudTrail logs is not publicly accessible',
     test_number: 'control.cis_v140_3_3',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -243,6 +265,7 @@ const complianceTableData = [
     test_category: 'CloudTrail',
     test_desc: '3.4 Ensure CloudTrail trails are integrated with CloudWatch Logs',
     test_number: 'control.cis_v140_3_4',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -252,6 +275,7 @@ const complianceTableData = [
     test_category: 'Config',
     test_desc: '3.5 Ensure AWS Config is enabled in all regions',
     test_number: 'control.cis_v140_3_5',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -262,6 +286,7 @@ const complianceTableData = [
     test_desc:
       '3.6 Ensure S3 bucket access logging is enabled on the CloudTrail S3 bucket',
     test_number: 'control.cis_v140_3_6',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -271,6 +296,7 @@ const complianceTableData = [
     test_category: 'CloudTrail',
     test_desc: '3.7 Ensure CloudTrail logs are encrypted at rest using KMS CMKs',
     test_number: 'control.cis_v140_3_7',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -280,6 +306,7 @@ const complianceTableData = [
     test_category: 'KMS',
     test_desc: '3.8 Ensure rotation for customer created CMKs is enabled',
     test_number: 'control.cis_v140_3_8',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -289,6 +316,7 @@ const complianceTableData = [
     test_category: 'VPC',
     test_desc: '3.9 Ensure VPC flow logging is enabled in all VPCs',
     test_number: 'control.cis_v140_3_9',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -299,6 +327,7 @@ const complianceTableData = [
     test_desc:
       '3.10 Ensure that Object-level logging for write events is enabled for S3 bucket',
     test_number: 'control.cis_v140_3_10',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -309,6 +338,7 @@ const complianceTableData = [
     test_desc:
       '3.11 Ensure that Object-level logging for read events is enabled for S3 bucket',
     test_number: 'control.cis_v140_3_11',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -318,6 +348,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.1 Maintain current contact details',
     test_number: 'control.cis_v140_1_1',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -327,6 +358,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.2 Ensure security contact information is registered',
     test_number: 'control.cis_v140_1_2',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -336,6 +368,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.3 Ensure security questions are registered in the AWS account',
     test_number: 'control.cis_v140_1_3',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -345,6 +378,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: "1.4 Ensure no 'root' user account access key exists",
     test_number: 'control.cis_v140_1_4',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -354,6 +388,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: "1.5 Ensure MFA is enabled for the 'root' user account",
     test_number: 'control.cis_v140_1_5',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -363,6 +398,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: "1.6 Ensure hardware MFA is enabled for the 'root' user account",
     test_number: 'control.cis_v140_1_6',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -372,6 +408,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: "1.7 Eliminate use of the 'root' user for administrative and daily tasks",
     test_number: 'control.cis_v140_1_7',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -381,6 +418,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.8 Ensure IAM password policy requires minimum length of 14 or greater',
     test_number: 'control.cis_v140_1_8',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -390,6 +428,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.9 Ensure IAM password policy prevents password reuse',
     test_number: 'control.cis_v140_1_9',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -400,6 +439,7 @@ const complianceTableData = [
     test_desc:
       '1.10 Ensure multi-factor authentication (MFA) is enabled for all IAM users that have a console password',
     test_number: 'control.cis_v140_1_10',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -410,6 +450,7 @@ const complianceTableData = [
     test_desc:
       '1.11 Do not setup access keys during initial user setup for all IAM users that have a console password',
     test_number: 'control.cis_v140_1_11',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -419,6 +460,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.12 Ensure credentials unused for 45 days or greater are disabled',
     test_number: 'control.cis_v140_1_12',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -429,6 +471,7 @@ const complianceTableData = [
     test_desc:
       '1.13 Ensure there is only one active access key available for any single IAM user',
     test_number: 'control.cis_v140_1_13',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -438,6 +481,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.14 Ensure access keys are rotated every 90 days or less',
     test_number: 'control.cis_v140_1_14',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -447,6 +491,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.15 Ensure IAM Users Receive Permissions Only Through Groups',
     test_number: 'control.cis_v140_1_15',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -457,6 +502,7 @@ const complianceTableData = [
     test_desc:
       '1.16 Ensure IAM policies that allow full \\"*:*\\" administrative privileges are not attached',
     test_number: 'control.cis_v140_1_16',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -467,6 +513,7 @@ const complianceTableData = [
     test_desc:
       '1.17 Ensure a support role has been created to manage incidents with AWS Support',
     test_number: 'control.cis_v140_1_17',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -477,6 +524,7 @@ const complianceTableData = [
     test_desc:
       '1.18 Ensure IAM instance roles are used for AWS resource access from instances',
     test_number: 'control.cis_v140_1_18',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -487,6 +535,7 @@ const complianceTableData = [
     test_desc:
       '1.19 Ensure that all the expired SSL/TLS certificates stored in AWS IAM are removed',
     test_number: 'control.cis_v140_1_19',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -496,6 +545,7 @@ const complianceTableData = [
     test_category: 'IAM',
     test_desc: '1.20 Ensure that IAM Access analyzer is enabled for all regions',
     test_number: 'control.cis_v140_1_20',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -506,6 +556,7 @@ const complianceTableData = [
     test_desc:
       '1.21 Ensure IAM users are managed centrally via identity federation or AWS Organizations for multi-account environments',
     test_number: 'control.cis_v140_1_21',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -515,6 +566,7 @@ const complianceTableData = [
     test_category: 'S3',
     test_desc: '2.1.1 Ensure all S3 buckets employ encryption-at-rest',
     test_number: 'control.cis_v140_2_1_1',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -524,6 +576,7 @@ const complianceTableData = [
     test_category: 'S3',
     test_desc: '2.1.2 Ensure S3 Bucket Policy is set to deny HTTP requests',
     test_number: 'control.cis_v140_2_1_2',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -533,6 +586,7 @@ const complianceTableData = [
     test_category: 'S3',
     test_desc: '2.1.3 Ensure MFA Delete is enabled on S3 buckets',
     test_number: 'control.cis_v140_2_1_3',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -543,6 +597,7 @@ const complianceTableData = [
     test_desc:
       '2.1.4 Ensure all data in Amazon S3 has been discovered, classified and secured when required',
     test_number: 'control.cis_v140_2_1_4',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -553,6 +608,7 @@ const complianceTableData = [
     test_desc:
       "2.1.5 Ensure that S3 Buckets are configured with 'Block public access (bucket settings)'",
     test_number: 'control.cis_v140_2_1_5',
+    status: 'Active',
   },
   {
     cloud_provider: 'aws',
@@ -562,6 +618,7 @@ const complianceTableData = [
     test_category: 'EBS',
     test_desc: '2.2.1 Ensure EBS volume encryption is enabled',
     test_number: 'control.cis_v140_2_2_1',
+    status: 'Non Active',
   },
   {
     cloud_provider: 'aws',
@@ -571,6 +628,7 @@ const complianceTableData = [
     test_category: 'RDS',
     test_desc: '2.3.1 Ensure that encryption is enabled for RDS Instances',
     test_number: 'control.cis_v140_2_3_1',
+    status: 'Non Active',
   },
 ];
 

From decb76a17755631d3f01361bf449b9c24a08c015 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Thu, 19 Jan 2023 15:10:50 +0530
Subject: [PATCH 11/11] pass component to connector header to display selected
 accounts

---
 .../onboard/components/ConnectorHeader.tsx    |  41 +-
 .../src/features/onboard/pages/ChooseScan.tsx |   2 -
 .../onboard/pages/ComplianceScanConfigure.tsx | 541 ++----------------
 .../onboard/pages/SecretScanConfigure.tsx     |   4 -
 .../pages/VulnerabilityScanConfigure.tsx      |   4 -
 5 files changed, 63 insertions(+), 529 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
index 3d5a858764..ecb3d507a5 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/components/ConnectorHeader.tsx
@@ -6,25 +6,23 @@ import { Breadcrumb, BreadcrumbLink, Typography } from 'ui-components';
 type ConnectorHeaderProps = {
   title: string;
   description: string;
-  metadata?: {
-    [key: string]: string;
-  };
+  endComponent?: JSX.Element;
 };
 
 const canRoute = (pathname: string) => {
   const path = {
     addConnector: '/onboard/connectors/add-connectors',
-    scanResult: '',
+    configureScan: '',
     viewResult: '',
   };
-  if (pathname.includes('view-scan-results')) {
-    path.viewResult = '/onboard/view-scan-results';
-    path.scanResult = '/onboard/scan-infrastructure';
-  } else if (pathname.includes('scan-infrastructure')) {
-    path.scanResult = '/onboard/scan-infrastructure';
+  if (pathname.includes('view-summary')) {
+    path.viewResult = '/onboard/scan/view-summary';
+    path.configureScan = '#';
+  } else if (pathname.includes('scan/configure')) {
+    path.configureScan = '#';
     path.viewResult = '#';
   } else if (pathname.includes('connectors')) {
-    path.scanResult = '#';
+    path.configureScan = '#';
     path.viewResult = '#';
   }
   return path;
@@ -33,7 +31,7 @@ const canRoute = (pathname: string) => {
 export const ConnectorHeader = ({
   title,
   description,
-  metadata = {},
+  endComponent,
 }: ConnectorHeaderProps) => {
   const location = useLocation();
 
@@ -45,11 +43,14 @@ export const ConnectorHeader = ({
   };
 
   const isScanRoutePath = () => {
-    return location.pathname.includes('scan-infrastructure');
+    return (
+      location.pathname.startsWith('/onboard/scan/choose') ||
+      location.pathname.startsWith('/onboard/scan/configure')
+    );
   };
 
-  const isViewResultsRoutePath = () => {
-    return location.pathname.includes('view-scan-results');
+  const isViewScanSummaryRoutePath = () => {
+    return location.pathname.includes('scan/view-summary');
   };
 
   return (
@@ -68,7 +69,7 @@ export const ConnectorHeader = ({
           </BreadcrumbLink>
           <BreadcrumbLink>
             <Link
-              to={canRoute(location.pathname).scanResult}
+              to={'#'}
               className={cx({
                 ['text-blue-600 dark:text-blue-500']: isScanRoutePath(),
               })}
@@ -80,7 +81,7 @@ export const ConnectorHeader = ({
             <Link
               to={canRoute(location.pathname).viewResult}
               className={cx({
-                ['text-blue-600 dark:text-blue-500']: isViewResultsRoutePath(),
+                ['text-blue-600 dark:text-blue-500']: isViewScanSummaryRoutePath(),
               })}
             >
               View Scan Results
@@ -97,13 +98,7 @@ export const ConnectorHeader = ({
             {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>
+        {endComponent ? <div className="ml-auto">{endComponent}</div> : null}
       </div>
     </div>
   );
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
index 8e07014360..5376da1744 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ChooseScan.tsx
@@ -1,5 +1,4 @@
 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';
@@ -77,7 +76,6 @@ const SelectedAccount = () => {
 };
 
 const ScanType = () => {
-  const location = useLocation();
   const { navigate } = usePageNavigation();
   const goNext = (path: string) => {
     navigate(path);
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
index 4ae3b0b71b..70ae264f6b 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/ComplianceScanConfigure.tsx
@@ -8,6 +8,7 @@ import {
   Switch,
   Table,
   Tabs,
+  Tooltip,
   Typography,
 } from 'ui-components';
 
@@ -142,494 +143,6 @@ const complianceTableData = [
     test_number: 'control.cis_v140_4_11',
     status: 'Active',
   },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 12,
-    is_enabled: true,
-    test_category: 'CloudWatch',
-    test_desc:
-      '4.12 Ensure a log metric filter and alarm exist for changes to network gateways',
-    test_number: 'control.cis_v140_4_12',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 13,
-    is_enabled: true,
-    test_category: 'CloudWatch',
-    test_desc: '4.13 Ensure a log metric filter and alarm exist for route table changes',
-    test_number: 'control.cis_v140_4_13',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 14,
-    is_enabled: true,
-    test_category: 'CloudWatch',
-    test_desc: '4.14 Ensure a log metric filter and alarm exist for VPC changes',
-    test_number: 'control.cis_v140_4_14',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 15,
-    is_enabled: true,
-    test_category: 'CloudWatch',
-    test_desc:
-      '4.15 Ensure a log metric filter and alarm exists for AWS Organizations changes',
-    test_number: 'control.cis_v140_4_15',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 16,
-    is_enabled: true,
-    test_category: 'VPC',
-    test_desc:
-      '5.1 Ensure no Network ACLs allow ingress from 0.0.0.0/0 to remote server administration ports',
-    test_number: 'control.cis_v140_5_1',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 17,
-    is_enabled: true,
-    test_category: 'VPC',
-    test_desc:
-      '5.2 Ensure no security groups allow ingress from 0.0.0.0/0 to remote server administration ports',
-    test_number: 'control.cis_v140_5_2',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 18,
-    is_enabled: true,
-    test_category: 'VPC',
-    test_desc: '5.3 Ensure the default security group of every VPC restricts all traffic',
-    test_number: 'control.cis_v140_5_3',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 19,
-    is_enabled: true,
-    test_category: 'VPC',
-    test_desc: '5.4 Ensure routing tables for VPC peering are \\"least access\\',
-    test_number: 'control.cis_v140_5_4',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 20,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc: '3.1 Ensure CloudTrail is enabled in all regions',
-    test_number: 'control.cis_v140_3_1',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 21,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc: '3.2 Ensure CloudTrail log file validation is enabled',
-    test_number: 'control.cis_v140_3_2',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 22,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc:
-      '3.3 Ensure the S3 bucket used to store CloudTrail logs is not publicly accessible',
-    test_number: 'control.cis_v140_3_3',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 23,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc: '3.4 Ensure CloudTrail trails are integrated with CloudWatch Logs',
-    test_number: 'control.cis_v140_3_4',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 24,
-    is_enabled: true,
-    test_category: 'Config',
-    test_desc: '3.5 Ensure AWS Config is enabled in all regions',
-    test_number: 'control.cis_v140_3_5',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 25,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc:
-      '3.6 Ensure S3 bucket access logging is enabled on the CloudTrail S3 bucket',
-    test_number: 'control.cis_v140_3_6',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 26,
-    is_enabled: true,
-    test_category: 'CloudTrail',
-    test_desc: '3.7 Ensure CloudTrail logs are encrypted at rest using KMS CMKs',
-    test_number: 'control.cis_v140_3_7',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 27,
-    is_enabled: true,
-    test_category: 'KMS',
-    test_desc: '3.8 Ensure rotation for customer created CMKs is enabled',
-    test_number: 'control.cis_v140_3_8',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 28,
-    is_enabled: true,
-    test_category: 'VPC',
-    test_desc: '3.9 Ensure VPC flow logging is enabled in all VPCs',
-    test_number: 'control.cis_v140_3_9',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 29,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc:
-      '3.10 Ensure that Object-level logging for write events is enabled for S3 bucket',
-    test_number: 'control.cis_v140_3_10',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 30,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc:
-      '3.11 Ensure that Object-level logging for read events is enabled for S3 bucket',
-    test_number: 'control.cis_v140_3_11',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 31,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.1 Maintain current contact details',
-    test_number: 'control.cis_v140_1_1',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 32,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.2 Ensure security contact information is registered',
-    test_number: 'control.cis_v140_1_2',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 33,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.3 Ensure security questions are registered in the AWS account',
-    test_number: 'control.cis_v140_1_3',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 34,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: "1.4 Ensure no 'root' user account access key exists",
-    test_number: 'control.cis_v140_1_4',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 35,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: "1.5 Ensure MFA is enabled for the 'root' user account",
-    test_number: 'control.cis_v140_1_5',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 36,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: "1.6 Ensure hardware MFA is enabled for the 'root' user account",
-    test_number: 'control.cis_v140_1_6',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 37,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: "1.7 Eliminate use of the 'root' user for administrative and daily tasks",
-    test_number: 'control.cis_v140_1_7',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 38,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.8 Ensure IAM password policy requires minimum length of 14 or greater',
-    test_number: 'control.cis_v140_1_8',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 39,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.9 Ensure IAM password policy prevents password reuse',
-    test_number: 'control.cis_v140_1_9',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 40,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.10 Ensure multi-factor authentication (MFA) is enabled for all IAM users that have a console password',
-    test_number: 'control.cis_v140_1_10',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 41,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.11 Do not setup access keys during initial user setup for all IAM users that have a console password',
-    test_number: 'control.cis_v140_1_11',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 42,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.12 Ensure credentials unused for 45 days or greater are disabled',
-    test_number: 'control.cis_v140_1_12',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 43,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.13 Ensure there is only one active access key available for any single IAM user',
-    test_number: 'control.cis_v140_1_13',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 44,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.14 Ensure access keys are rotated every 90 days or less',
-    test_number: 'control.cis_v140_1_14',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 45,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.15 Ensure IAM Users Receive Permissions Only Through Groups',
-    test_number: 'control.cis_v140_1_15',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 46,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.16 Ensure IAM policies that allow full \\"*:*\\" administrative privileges are not attached',
-    test_number: 'control.cis_v140_1_16',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 47,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.17 Ensure a support role has been created to manage incidents with AWS Support',
-    test_number: 'control.cis_v140_1_17',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 48,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.18 Ensure IAM instance roles are used for AWS resource access from instances',
-    test_number: 'control.cis_v140_1_18',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 49,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.19 Ensure that all the expired SSL/TLS certificates stored in AWS IAM are removed',
-    test_number: 'control.cis_v140_1_19',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 50,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc: '1.20 Ensure that IAM Access analyzer is enabled for all regions',
-    test_number: 'control.cis_v140_1_20',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 51,
-    is_enabled: true,
-    test_category: 'IAM',
-    test_desc:
-      '1.21 Ensure IAM users are managed centrally via identity federation or AWS Organizations for multi-account environments',
-    test_number: 'control.cis_v140_1_21',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 52,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc: '2.1.1 Ensure all S3 buckets employ encryption-at-rest',
-    test_number: 'control.cis_v140_2_1_1',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 53,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc: '2.1.2 Ensure S3 Bucket Policy is set to deny HTTP requests',
-    test_number: 'control.cis_v140_2_1_2',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 54,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc: '2.1.3 Ensure MFA Delete is enabled on S3 buckets',
-    test_number: 'control.cis_v140_2_1_3',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 55,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc:
-      '2.1.4 Ensure all data in Amazon S3 has been discovered, classified and secured when required',
-    test_number: 'control.cis_v140_2_1_4',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 56,
-    is_enabled: true,
-    test_category: 'S3',
-    test_desc:
-      "2.1.5 Ensure that S3 Buckets are configured with 'Block public access (bucket settings)'",
-    test_number: 'control.cis_v140_2_1_5',
-    status: 'Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 57,
-    is_enabled: true,
-    test_category: 'EBS',
-    test_desc: '2.2.1 Ensure EBS volume encryption is enabled',
-    test_number: 'control.cis_v140_2_2_1',
-    status: 'Non Active',
-  },
-  {
-    cloud_provider: 'aws',
-    compliance_check_type: 'cis',
-    id: 58,
-    is_enabled: true,
-    test_category: 'RDS',
-    test_desc: '2.3.1 Ensure that encryption is enabled for RDS Instances',
-    test_number: 'control.cis_v140_2_3_1',
-    status: 'Non Active',
-  },
 ];
 
 const ComplianceTable = () => {
@@ -638,8 +151,7 @@ const ComplianceTable = () => {
 
   const [rowSelectionState, setRowSelectionState] = useState<any>({});
 
-  const updateTableData = (rowData: any, flag: boolean) => {
-    console.log(flag, 'data is ', rowData);
+  const onToggleChange = (rowData: any, flag: boolean) => {
     setTableData((data) => {
       data[rowData.row.index].is_enabled = flag;
 
@@ -669,7 +181,7 @@ const ComplianceTable = () => {
       }),
       columnHelper.accessor('status', {
         header: () => 'Status',
-        cell: (info) => 'Active',
+        cell: (info) => info.renderValue(),
         maxSize: 50,
       }),
       columnHelper.accessor('is_enabled', {
@@ -678,7 +190,7 @@ const ComplianceTable = () => {
           <Switch
             checked={!!info.renderValue()}
             onCheckedChange={(e) => {
-              updateTableData(info, e);
+              onToggleChange(info, e);
             }}
           />
         ),
@@ -726,10 +238,33 @@ const hasTypeSelected = (prevTabs: TabsType[], value: string) => {
   return find(prevTabs, ['value', value]);
 };
 
+const SelectedAccountComponent = ({
+  type,
+  accounts,
+}: {
+  type: string;
+  accounts: string[];
+}) => {
+  return (
+    <span className={`${Typography.size.sm} text-gray-600 dark:text-gray-400`}>
+      {accounts.length > 0 ? `Account: ${type} / ${accounts[0]}` : null}
+      &nbsp;
+      {accounts.length > 1 && (
+        <Tooltip content={accounts.slice(1).join(', ')}>
+          <span className={`${Typography.size.sm} text-blue-500 dark:text-blue-400`}>
+            +{accounts.length - 1} more
+          </span>
+        </Tooltip>
+      )}
+    </span>
+  );
+};
+
 export const ComplianceScanConfigure = () => {
   const { goBack } = usePageNavigation();
   const [selectedTab, setSelectedTab] = useState('');
   const [tabs, setTabs] = useState<TabsType[] | []>([]);
+  const { navigate } = usePageNavigation();
 
   const onScanTypeSelection = (name: string) => {
     setTabs((prevTabs) => {
@@ -762,10 +297,22 @@ export const ComplianceScanConfigure = () => {
       <ConnectorHeader
         title="Configure Compliance Scan"
         description="Choose from the below options to perform your first scan."
-        metadata={{
-          accountId: '234HTY6643',
-          type: 'AWS',
-        }}
+        endComponent={
+          <SelectedAccountComponent
+            accounts={[
+              '234HTY6643',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+              'dummy',
+            ]}
+            type={'AWS'}
+          />
+        }
       />
       <div className="mt-6 flex gap-4 mb-6">
         {scanType.map((type) => (
@@ -778,6 +325,7 @@ export const ComplianceScanConfigure = () => {
               onScanTypeSelection(type);
             }}
             endIcon={hasTypeSelected(tabs, type) ? <HiMinusCircle /> : <HiPlusCircle />}
+            className="self-start"
           >
             {type}
           </Button>
@@ -787,6 +335,7 @@ export const ComplianceScanConfigure = () => {
           color="primary"
           className="ml-auto"
           disabled={tabs.length === 0}
+          onClick={() => navigate('/onboard/scan/view-summary')}
         >
           Start Scan
         </Button>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
index 0714705ad9..da8f34abb2 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -10,10 +10,6 @@ export const SecretScanConfigure = () => {
       <ConnectorHeader
         title="Configure Secret Scan"
         description="Just click the start scan button to start your secret scanning"
-        metadata={{
-          accountId: '234HTY6643',
-          type: 'Host',
-        }}
       />
       <section className="flex">
         <div></div>
diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
index 212b246c2a..f773dfe42d 100644
--- a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -103,10 +103,6 @@ export const VulnerabilityScanConfigure = () => {
       <ConnectorHeader
         title="Configure Vulnerability Scan"
         description="Choose from the below options to perform your first scan."
-        metadata={{
-          accountId: '234HTY6643',
-          type: 'Host',
-        }}
       />
       <section>
         <div className="flex">