feat: use state filters in scan vulnerabilities table

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.15-beta-10",
+    "version": "0.1.18-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -518,3 +518,11 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
     DD_MMM_YYYY: 'DD MMM YYYY',
 }
+
+export const VULNERABILITIES_SORT_PRIORITY = {
+    critical: 1,
+    high: 2,
+    medium: 3,
+    low: 4,
+    unknown: 5,
+}

src/Common/Constants.ts

@@ -15,6 +15,7 @@
  */
 
 import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
+import { ComponentSizeType } from '@Shared/constants'
 import { ReactComponent as Search } from '@Icons/ic-search.svg'
 import { ReactComponent as Clear } from '@Icons/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -65,7 +66,7 @@ const SearchBar = ({
     debounceTimeout = 300,
     dataTestId = 'search-bar',
     noBackgroundAndBorder = false,
-    height = '32',
+    componentSize = ComponentSizeType.medium,
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -117,7 +118,7 @@ const SearchBar = ({
     return (
         <div className={containerClassName}>
             <div
-                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-${height}`}
+                className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${componentSize === ComponentSizeType.large ? 'h-36' : 'h-32'}`}
             >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input

src/Common/SearchBar/SearchBar.component.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { ComponentSizeType } from '@Shared/constants'
+
 export interface SearchBarProps {
     /**
      * Initial search text
@@ -56,7 +58,7 @@ export interface SearchBarProps {
      */
     noBackgroundAndBorder?: boolean
     /**
-     * Height of the Search bar
+     * Height of the Search bar, Large is 36px and Medium is 32px
      */
-    height?: '32' | '36'
+    componentSize?: ComponentSizeType.large | ComponentSizeType.medium
 }

src/Common/SearchBar/types.ts

@@ -18,39 +18,40 @@ import DOMPurify from 'dompurify'
 import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
 import './scanVulnerabilities.css'
 import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
-import { SortingOrder } from '@Common/Constants'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { numberComparatorBySortOrder, stringComparatorBySortOrder } from '@Shared/Helpers'
-import { SortBy, SortConfig } from './types'
-import { sortPriority } from './constants'
+import { VulnerabilitiesTableSortKeys } from './types'
+import { VULNERABILITIES_SORT_PRIORITY } from '@Common/Constants'
+import { useStateFilters } from '@Common/Hooks'
 
 // To be replaced with Scan V2 Modal Table
 export default function ScanVulnerabilitiesTable({
     vulnerabilities,
     hidePolicy,
     shouldStick,
 }: ScanVulnerabilitiesTableProps) {
-    const [sortConfig, setSortConfig] = useState<SortConfig>({
-        sortBy: SortBy.SEVERITY,
-        sortOrder: SortingOrder.ASC,
+    const { sortBy, sortOrder, handleSorting } = useStateFilters<VulnerabilitiesTableSortKeys>({
+        initialSortKey: VulnerabilitiesTableSortKeys.SEVERITY,
     })
 
-    const sortedVulnerabilities = useMemo(() => {
-        return vulnerabilities.sort((a, b) => {
-            if (sortConfig.sortBy === SortBy.PACKAGE) {
-                return stringComparatorBySortOrder(a.package, b.package, sortConfig.sortOrder)
-            }
+    const sortedVulnerabilities = useMemo(
+        () =>
+            vulnerabilities.sort((a, b) => {
+                if (sortBy === VulnerabilitiesTableSortKeys.PACKAGE) {
+                    return stringComparatorBySortOrder(a.package, b.package, sortOrder)
+                }
 
-            return numberComparatorBySortOrder(sortPriority[a.severity], sortPriority[b.severity], sortConfig.sortOrder)
-        })
-    }, [sortConfig])
+                return numberComparatorBySortOrder(
+                    VULNERABILITIES_SORT_PRIORITY[a.severity],
+                    VULNERABILITIES_SORT_PRIORITY[b.severity],
+                    sortOrder,
+                )
+            }),
+        [sortBy, sortOrder, vulnerabilities],
+    )
 
-    const triggerSorting = (sortBy: SortBy) => {
-        setSortConfig({
-            sortBy: sortBy,
-            sortOrder: sortConfig.sortOrder === SortingOrder.ASC ? SortingOrder.DESC : SortingOrder.ASC,
-        })
-    }
+    const triggerSeveritySorting = () => handleSorting(VulnerabilitiesTableSortKeys.SEVERITY)
+    const triggerPackageSorting = () => handleSorting(VulnerabilitiesTableSortKeys.PACKAGE)
 
     const renderRow = (vulnerability: VulnerabilityType) => (
         <tr
@@ -100,26 +101,26 @@ export default function ScanVulnerabilitiesTable({
         <table className="security-tab__table">
             <tbody>
                 <tr
-                    className={`security-tab__table-header ${shouldStick ? 'dc__position-sticky bcn-0 dc__zi-4 dc__top-42' : ''}`}
+                    className={`security-tab__table-header ${shouldStick ? 'dc__position-sticky bcn-0 dc__zi-4 dc__top-0' : ''}`}
                 >
                     <th className="security-cell-header security-tab__cell-cve">CVE</th>
                     <th className="security-cell-header security-tab__cell-severity">
                         <SortableTableHeaderCell
                             title="Severity"
-                            isSorted={sortConfig.sortBy === SortBy.SEVERITY}
+                            isSorted={sortBy === VulnerabilitiesTableSortKeys.SEVERITY}
                             isSortable
-                            sortOrder={sortConfig.sortOrder}
-                            triggerSorting={() => triggerSorting(SortBy.SEVERITY)}
+                            sortOrder={sortOrder}
+                            triggerSorting={triggerSeveritySorting}
                             disabled={false}
                         />
                     </th>
                     <th className="security-cell-header security-tab__cell-package">
                         <SortableTableHeaderCell
                             title="Package"
-                            isSorted={sortConfig.sortBy === SortBy.PACKAGE}
+                            isSorted={sortBy === VulnerabilitiesTableSortKeys.PACKAGE}
                             isSortable
-                            sortOrder={sortConfig.sortOrder}
-                            triggerSorting={() => triggerSorting(SortBy.PACKAGE)}
+                            sortOrder={sortOrder}
+                            triggerSorting={triggerPackageSorting}
                             disabled={false}
                         />
                     </th>

src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -1,11 +1,4 @@
-import { SortingOrder } from '@Common/Constants'
-
-export enum SortBy {
+export enum VulnerabilitiesTableSortKeys {
     SEVERITY = 'severity',
     PACKAGE = 'package',
 }
-
-export interface SortConfig {
-    sortBy: SortBy
-    sortOrder: SortingOrder
-}

src/Common/Security/constants.tsx

@@ -18,7 +18,7 @@ import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.'
-import { RegistryType } from '../Shared'
+import { RegistryType, Severity } from '../Shared'
 
 /**
  * Generic response type object with support for overriding the result type
@@ -568,7 +568,7 @@ export enum DeploymentAppTypes {
 
 export interface VulnerabilityType {
     name: string
-    severity: 'critical' | 'high' | 'medium' | 'low' | 'unknown'
+    severity: Severity
     package: string
     version: string
     fixedVersion: string

src/Common/Security/types.tsx

@@ -15,39 +15,36 @@
  */
 
 import moment from 'moment'
+import { numberComparatorBySortOrder } from '@Shared/Helpers'
 import { DATE_TIME_FORMAT_STRING } from '../../constants'
-import { ZERO_TIME_STRING, sortCallback } from '../../../Common'
-import { LastExecutionResponseType, LastExecutionResultType, Severity } from '../../types'
+import { SortingOrder, VULNERABILITIES_SORT_PRIORITY, ZERO_TIME_STRING } from '../../../Common'
+import { LastExecutionResponseType, LastExecutionResultType } from '../../types'
+
+export const getSortedVulnerabilities = (vulnerabilities) =>
+    vulnerabilities.sort((a, b) =>
+        numberComparatorBySortOrder(
+            VULNERABILITIES_SORT_PRIORITY[a.severity],
+            VULNERABILITIES_SORT_PRIORITY[b.severity],
+            SortingOrder.ASC,
+        ),
+    )
 
 export const getParsedScanResult = (scanResult): LastExecutionResultType => {
     const vulnerabilities = scanResult?.vulnerabilities || []
-    const critical = vulnerabilities
-        .filter((v) => v.severity === Severity.CRITICAL)
-        .sort((a, b) => sortCallback('cveName', a, b))
-    const high = vulnerabilities
-        .filter((v) => v.severity === Severity.HIGH)
-        .sort((a, b) => sortCallback('cveName', a, b))
-    const medium = vulnerabilities
-        .filter((v) => v.severity === Severity.MEDIUM)
-        .sort((a, b) => sortCallback('cveName', a, b))
-    const low = vulnerabilities.filter((v) => v.severity === Severity.LOW).sort((a, b) => sortCallback('cveName', a, b))
-    const unknown = vulnerabilities
-        .filter((v) => v.severity === Severity.UNKNOWN)
-        .sort((a, b) => sortCallback('cveName', a, b))
-    const sortedVulnerabilities = critical.concat(medium, low, high, unknown)
+    const sortedVulnerabilities = getSortedVulnerabilities(vulnerabilities)
 
     return {
         ...(scanResult || {}),
         lastExecution:
             scanResult?.executionTime && scanResult.executionTime !== ZERO_TIME_STRING
-                ? moment(scanResult.executionTime).utc(false).format(DATE_TIME_FORMAT_STRING)
+                ? moment(scanResult.executionTime).format(DATE_TIME_FORMAT_STRING)
                 : '',
         severityCount: {
-            critical: scanResult?.severityCount?.high,
-            high: scanResult?.severityCount?.high,
-            medium: scanResult?.severityCount?.moderate,
-            low: scanResult?.severityCount?.low,
-            unknown: scanResult?.severityCount?.unknown,
+            critical: scanResult?.severityCount?.critical ?? 0,
+            high: scanResult?.severityCount?.high ?? 0,
+            medium: scanResult?.severityCount?.medium ?? 0,
+            low: scanResult?.severityCount?.low ?? 0,
+            unknown: scanResult?.severityCount?.unknown ?? 0,
         },
         vulnerabilities: sortedVulnerabilities.map((cve) => ({
             name: cve.cveName,