Merge pull request #880 from deepfence/v2-ui-configure-to-have-accounts

show selected accounts
deepfence · Feb 8, 2023 · d1da3da · d1da3da
2 parents d7204d3 + 6753fee
commit d1da3da
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 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
@@ -50,13 +50,13 @@ const vulnerabilityScanData = {
   buttonText: 'Configure Vulnerability Scan',
 };
 const secretScanData = {
-  scanTitle: 'Secrets Scan',
+  scanTitle: 'Secret Scan',
   scanType: 'secret',
   description: `A few words about the secret scan and why you need to use it.`,
   buttonText: 'Configure Secret Scan',
 };
 const malwareScanData = {
-  scanTitle: 'Malwares Scan',
+  scanTitle: 'Malware Scan',
   scanType: 'malware',
   description: `A few words about the malwawre scan and why you need to use it.`,
   buttonText: 'Configure Malware Scan',

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/MalwareScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/MalwareScanConfigure.tsx
@@ -8,7 +8,7 @@ import {
   useActionData,
   useLocation,
 } from 'react-router-dom';
-import { Button } from 'ui-components';
+import { Button, Tooltip, Typography } from 'ui-components';
 
 import { getMalwareScanApiClient } from '@/api/api';
 import {
@@ -72,6 +72,28 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ScanActionReturn
   );
 };
 
+const SelectedAccountComponent = ({
+  type,
+  accounts,
+}: {
+  type: string;
+  accounts: string[];
+}) => {
+  return (
+    <span className={`${Typography.size.sm} text-gray-600 dark:text-gray-400`}>
+      {accounts.length > 0 ? `${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>
+  );
+};
+
 const MalwareScanConfigure = () => {
   const { goBack } = usePageNavigation();
   const actionData = useActionData() as ScanActionReturnType;
@@ -96,6 +118,12 @@ const MalwareScanConfigure = () => {
       <ConnectorHeader
         title="Configure Malware Scan"
         description="Just click the start scan button to start your malware scanning"
+        endComponent={
+          <SelectedAccountComponent
+            accounts={state.map((node) => node.urlId)}
+            type={state[0].urlType}
+          />
+        }
       />
       {actionData?.message && (
         <section className="mb-4">

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/SecretScanConfigure.tsx
@@ -8,7 +8,7 @@ import {
   useActionData,
   useLocation,
 } from 'react-router-dom';
-import { Button } from 'ui-components';
+import { Button, Tooltip, Typography } from 'ui-components';
 
 import { getSecretApiClient } from '@/api/api';
 import {
@@ -73,6 +73,28 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ScanActionReturn
   );
 };
 
+const SelectedAccountComponent = ({
+  type,
+  accounts,
+}: {
+  type: string;
+  accounts: string[];
+}) => {
+  return (
+    <span className={`${Typography.size.sm} text-gray-600 dark:text-gray-400`}>
+      {accounts.length > 0 ? `${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>
+  );
+};
+
 const SecretScanConfigure = () => {
   const { goBack } = usePageNavigation();
   const actionData = useActionData() as ScanActionReturnType;
@@ -97,6 +119,12 @@ const SecretScanConfigure = () => {
       <ConnectorHeader
         title="Configure Secret Scan"
         description="Just click the start scan button to start your secret scanning"
+        endComponent={
+          <SelectedAccountComponent
+            accounts={state.map((node) => node.urlId)}
+            type={state[0].urlType}
+          />
+        }
       />
       {actionData?.message && (
         <section className="mb-4">

diff --git a/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx b/deepfence_frontend/apps/dashboard/src/features/onboard/pages/VulnerabilityScanConfigure.tsx
@@ -9,7 +9,7 @@ import {
   useActionData,
   useLocation,
 } from 'react-router-dom';
-import { Button, Checkbox, Switch, Typography } from 'ui-components';
+import { Button, Checkbox, Switch, Tooltip, Typography } from 'ui-components';
 
 import { getVulnerabilityApiClient } from '@/api/api';
 import {
@@ -114,6 +114,28 @@ const packages = [
   },
 ];
 
+const SelectedAccountComponent = ({
+  type,
+  accounts,
+}: {
+  type: string;
+  accounts: string[];
+}) => {
+  return (
+    <span className={`${Typography.size.sm} text-gray-600 dark:text-gray-400`}>
+      {accounts.length > 0 ? `${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>
+  );
+};
+
 const VulnerabilityScanConfigure = () => {
   const actionData = useActionData() as ScanActionReturnType;
   const { goBack } = usePageNavigation();
@@ -206,6 +228,12 @@ const VulnerabilityScanConfigure = () => {
       <ConnectorHeader
         title="Configure Vulnerability Scan"
         description="Choose from the below options to perform your first scan."
+        endComponent={
+          <SelectedAccountComponent
+            accounts={state.map((node) => node.urlId)}
+            type={state[0].urlType}
+          />
+        }
       />
 
       {