Update card headers for landing pages (#2277)

* Update card headers for landing pages * remove affected resource column from secret and malware
deepfence · Jul 30, 2024 · 86d6644 · 86d6644
1 parent 0c6c68c
commit 86d6644
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 70 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/dashboard/components/CardHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/dashboard/components/CardHeader.tsx
@@ -15,17 +15,20 @@ export const CardHeader = ({
   const Wrapper = ({ children }: { children: ReactNode }) => {
     if (link?.length) {
       return (
-        <DFLink
-          to={link}
-          unstyled
-          className="p-3 flex items-center text-text-text-and-icon hover:text-accent-accent border-b dark:border-df-gray-900 border-bg-grid-border"
+        <div
+          className="p-3 flex items-center text-text-text-and-icon border-b dark:border-df-gray-900 border-bg-grid-border"
           data-testid={`${title}Id`}
         >
           <span className="flex-1 truncate flex items-center gap-2">{children}</span>
-          <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end">
-            <CaretDown />
-          </div>
-        </DFLink>
+          <DFLink to={link}>
+            <div className="text-p4 leading-0 flex gap-x-1 items-center">
+              More
+              <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
+                <CaretDown />
+              </div>
+            </div>
+          </DFLink>
+        </div>
       );
     }
     return (

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx
@@ -1538,17 +1538,6 @@ const MalwareTable = ({
         size: 160,
         maxSize: 165,
       }),
-      columnHelper.accessor('resources', {
-        enableSorting: false,
-        enableResizing: true,
-        cell: (info) => {
-          return <TruncatedText text={info.getValue()?.join(', ') ?? ''} />;
-        },
-        header: () => <TruncatedText text="Affected resources" />,
-        minSize: 180,
-        size: 180,
-        maxSize: 190,
-      }),
       columnHelper.accessor('summary', {
         enableSorting: false,
         enableResizing: true,
@@ -1780,7 +1769,7 @@ const ScanResults = () => {
       </div>
       {filtersExpanded ? <Filters /> : null}
       <div className="dark:shadow-none shadow-md">
-        <Suspense fallback={<TableSkeleton columns={7} rows={10} />}>
+        <Suspense fallback={<TableSkeleton columns={8} rows={10} />}>
           <MalwareTable
             onTableAction={onTableAction}
             setShowDeleteDialog={setShowDeleteDialog}

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/landing/CardHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/landing/CardHeader.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { DFLink } from '@/components/DFLink';
 import { CaretDown } from '@/components/icons/common/CaretDown';
+import { TruncatedText } from '@/components/TruncatedText';
 
 export const CardHeader = ({
   icon,
@@ -13,16 +14,17 @@ export const CardHeader = ({
   path: string;
 }) => {
   return (
-    <DFLink to={path} unstyled>
-      <div className="flex items-center gap-2 text-text-text-and-icon hover:text-accent-accent border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
-        <span className="h-4 w-4 shrink-0">{icon}</span>
-        <span className="text-t2 uppercase truncate flex-1" title={title}>
-          {title}
-        </span>
-        <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end">
-          <CaretDown />
+    <div className="flex items-center gap-2 text-text-text-and-icon border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
+      <span className="h-4 w-4 shrink-0">{icon}</span>
+      <TruncatedText className="text-t2 uppercase truncate flex-1" text={title} />
+      <DFLink to={path}>
+        <div className="text-p4 leading-0 flex gap-x-1 items-center">
+          More
+          <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
+            <CaretDown />
+          </div>
         </div>
-      </div>
-    </DFLink>
+      </DFLink>
+    </div>
   );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/CardHeader.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/components/landing/CardHeader.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { DFLink } from '@/components/DFLink';
 import { CaretDown } from '@/components/icons/common/CaretDown';
+import { TruncatedText } from '@/components/TruncatedText';
 
 export const CardHeader = ({
   icon,
@@ -13,16 +14,17 @@ export const CardHeader = ({
   path: string;
 }) => {
   return (
-    <DFLink to={path} unstyled>
-      <div className="flex items-center gap-2 text-text-text-and-icon hover:text-accent-accent border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
-        <span className="h-4 w-4 shrink-0">{icon}</span>
-        <span className="text-t2 uppercase truncate flex-1" title={title}>
-          {title}
-        </span>
-        <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end">
-          <CaretDown />
+    <div className="flex items-center gap-2 text-text-text-and-icon border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
+      <span className="h-4 w-4 shrink-0">{icon}</span>
+      <TruncatedText className="text-t2 uppercase truncate flex-1" text={title} />
+      <DFLink to={path}>
+        <div className="text-p4 leading-0 flex gap-x-1 items-center">
+          More
+          <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
+            <CaretDown />
+          </div>
         </div>
-      </div>
-    </DFLink>
+      </DFLink>
+    </div>
   );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx
@@ -1489,23 +1489,23 @@ const SecretTable = ({
           </DFLink>
         ),
         header: () => 'Name',
-        minSize: 80,
-        size: 100,
-        maxSize: 130,
+        minSize: 100,
+        size: 120,
+        maxSize: 150,
       }),
       columnHelper.accessor('full_filename', {
         cell: (info) => <TruncatedText text={info.getValue()} />,
         header: () => <TruncatedText text="File name" />,
         minSize: 100,
-        size: 110,
+        size: 120,
         maxSize: 140,
       }),
       columnHelper.accessor('matched_content', {
         cell: (info) => <TruncatedText text={info.getValue()} />,
         header: () => 'Matched content',
         minSize: 130,
-        size: 140,
-        maxSize: 165,
+        size: 150,
+        maxSize: 170,
       }),
       columnHelper.accessor('level', {
         cell: (info) => (
@@ -1518,20 +1518,9 @@ const SecretTable = ({
           </div>
         ),
         header: () => 'Severity',
-        minSize: 30,
-        size: 50,
-        maxSize: 70,
-      }),
-      columnHelper.accessor('resources', {
-        enableSorting: false,
-        enableResizing: true,
-        cell: (info) => {
-          return <TruncatedText text={info.getValue()?.join(', ') ?? ''} />;
-        },
-        header: () => <TruncatedText text="Affected resources" />,
-        minSize: 100,
-        size: 120,
-        maxSize: 190,
+        minSize: 60,
+        size: 80,
+        maxSize: 100,
       }),
     ];
 

diff --git a/...ce_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/CardHeader.tsx b/...ce_frontend/apps/dashboard/src/features/vulnerabilities/components/landing/CardHeader.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { DFLink } from '@/components/DFLink';
 import { CaretDown } from '@/components/icons/common/CaretDown';
+import { TruncatedText } from '@/components/TruncatedText';
 
 export const CardHeader = ({
   icon,
@@ -13,16 +14,17 @@ export const CardHeader = ({
   path: string;
 }) => {
   return (
-    <DFLink to={path} unstyled>
-      <div className="flex items-center gap-2 text-text-text-and-icon hover:text-accent-accent border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
-        <span className="h-4 w-4 shrink-0">{icon}</span>
-        <span className="text-t2 uppercase truncate flex-1" title={title}>
-          {title}
-        </span>
-        <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end">
-          <CaretDown />
+    <div className="flex items-center gap-2 text-text-text-and-icon border-b dark:border-df-gray-900 border-bg-grid-border px-2 py-3">
+      <span className="h-4 w-4 shrink-0">{icon}</span>
+      <TruncatedText className="text-t2 uppercase truncate flex-1" text={title} />
+      <DFLink to={path}>
+        <div className="text-p4 leading-0 flex gap-x-1 items-center">
+          More
+          <div className="h-4 w-4 shrink-0 -rotate-90 justify-self-end -mr-1 hover:underline">
+            <CaretDown />
+          </div>
         </div>
-      </div>
-    </DFLink>
+      </DFLink>
+    </div>
   );
 };