disabled accordion style, use tab for contorls category

deepfence · May 27, 2024 · ddf054d · ddf054d
1 parent 6fd9fe8
commit ddf054d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 58 deletions.
diff --git a/...nd/apps/dashboard/src/features/postures/components/scan-result/GroupedResultsSkeleton.tsx b/...nd/apps/dashboard/src/features/postures/components/scan-result/GroupedResultsSkeleton.tsx
@@ -54,7 +54,7 @@ export const GroupedResultsBenchmarkSkeleton = () => {
 export const GroupedResultsSkeleton = () => {
   return (
     <div className="-mt-4">
-      <RectSkeleton height="h-8" width="w-[60px]" padding="p-2" />
+      <RectSkeleton height="h-10" width="w-80" padding="p-2" />
       <GroupedResultsBenchmarkSkeleton />
     </div>
   );

diff --git a/...shboard/src/features/postures/components/scan-result/cloud/CloudPostureResultsGrouped.tsx b/...shboard/src/features/postures/components/scan-result/cloud/CloudPostureResultsGrouped.tsx
@@ -1,5 +1,5 @@
 import { upperFirst } from 'lodash-es';
-import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { Suspense, useCallback, useMemo, useState } from 'react';
 import { useFetcher, useSearchParams } from 'react-router-dom';
 import { cn } from 'tailwind-preset';
 import {
@@ -16,11 +16,11 @@ import {
   Table,
   TableNoDataElement,
   TableSkeleton,
+  Tabs,
 } from 'ui-components';
 
 import { ModelCloudCompliance } from '@/api/generated';
 import { DFLink } from '@/components/DFLink';
-import { CaretDown } from '@/components/icons/common/CaretDown';
 import { EllipsisIcon } from '@/components/icons/common/Ellipsis';
 import { FilterIcon } from '@/components/icons/common/Filter';
 import { PostureStatusBadgeIcon } from '@/components/SeverityBadge';
@@ -100,64 +100,38 @@ export const CloudPostureResultsGrouped = () => {
 
 const CloudPostureResultsGroupedCheckTypeList = () => {
   const { data: statusData } = useScanStatus();
-  const [benchmarkAccordionValue, setBenchmarkAccordionValue] = useState<string>(
-    statusData.benchmark_types?.[0] ?? '',
-  );
-
-  useEffect(() => {
-    setBenchmarkAccordionValue(statusData.benchmark_types?.[0] ?? '');
-  }, [statusData.scan_id]);
-
-  if (!isScanComplete(statusData.status)) {
-    return (
-      <TablePlaceholder
-        scanStatus={statusData.status ?? ''}
-        message={statusData.status_message ?? ''}
-      />
-    );
-  }
+  const tabs = useMemo(() => {
+    return (statusData.benchmark_types ?? []).map((value) => {
+      return {
+        label: value,
+        value: value,
+      };
+    });
+  }, [statusData.benchmark_types]);
+  const [selectedTab, setSelectedTab] = useState(tabs[0].value);
 
   return (
     <div className="flex flex-col gap-4 pb-4 -mt-4">
-      {statusData.benchmark_types?.map((checkType) => {
-        return (
-          <div key={checkType}>
-            <button
-              type="button"
-              className={cn(
-                'text-start w-full uppercase text-t4 text-text-text-and-icon py-2',
-                {
-                  'dark:text-white text-black': benchmarkAccordionValue === checkType,
-                },
-              )}
-              onClick={(e) => {
-                e.preventDefault();
-                if (benchmarkAccordionValue === checkType) {
-                  setBenchmarkAccordionValue('');
-                } else {
-                  setBenchmarkAccordionValue(checkType);
-                }
-              }}
-            >
-              <div className="flex gap-2 items-center">
-                <div
-                  className={cn('h-4 w-4 shrink-0', {
-                    '-rotate-90': benchmarkAccordionValue !== checkType,
-                  })}
-                >
-                  <CaretDown />
-                </div>
-                <div>{checkType.replace('_', ' ')}</div>
-              </div>
-            </button>
-            {benchmarkAccordionValue === checkType && (
-              <Suspense fallback={<GroupedResultsBenchmarkSkeleton />}>
-                <CloudPostureResultsGroupedCheckType checkType={checkType} />
-              </Suspense>
+      <Tabs value={selectedTab} tabs={tabs} onValueChange={(v) => setSelectedTab(v)}>
+        <Suspense
+          fallback={
+            <div className="mt-4">
+              <GroupedResultsBenchmarkSkeleton />
+            </div>
+          }
+        >
+          <div className="mt-4">
+            {!isScanComplete(statusData.status) ? (
+              <TablePlaceholder
+                scanStatus={statusData.status ?? ''}
+                message={statusData.status_message ?? ''}
+              />
+            ) : (
+              <CloudPostureResultsGroupedCheckType checkType={selectedTab} />
             )}
           </div>
-        );
-      })}
+        </Suspense>
+      </Tabs>
     </div>
   );
 };
@@ -167,6 +141,10 @@ const CloudPostureResultsGroupedCheckType = ({ checkType }: { checkType: string
   const controls = useGetControls({ checkType, nodeType });
   const { mode } = useTheme();
 
+  if (!controls[checkType] || controls[checkType].length === 0) {
+    return <TablePlaceholder scanStatus={'No data'} message={''} />;
+  }
+
   return (
     <Accordion type="single" collapsible>
       {controls[checkType].map((control) => {
@@ -176,7 +154,7 @@ const CloudPostureResultsGroupedCheckType = ({ checkType }: { checkType: string
             key={control.node_id}
             disabled={control.totalCount === 0}
           >
-            <AccordionTrigger>
+            <AccordionTrigger disabled={control.totalCount === 0}>
               <div className="flex">
                 <div>
                   {control.category_hierarchy_short ?? ''} - {control.description ?? ''}

diff --git a/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx b/deepfence_frontend/packages/ui-components/src/components/accordion/Accordion.tsx
@@ -53,9 +53,11 @@ export const AccordionTrigger = React.forwardRef<
       className={cn(
         'flex outline-none p-2 place-items-center',
         'w-full group dark:bg-bg-grid-header bg-white',
-        'text-p2',
+        'text-p4',
         'data-[state=open]:text-text-input-value',
         'data-[state=closed]:text-text-text-and-icon',
+        'disabled:dark:text-opacity-40 disabled:text-opacity-40',
+        'disabled:data-[state=closed]:text-opacity-40',
         className,
       )}
       {...props}