feat: add sorting in scan vulnerabilities table

Author: arunjaindev

src/Common/SearchBar/SearchBar.component.tsx

@@ -65,6 +65,7 @@ const SearchBar = ({
     debounceTimeout = 300,
     dataTestId = 'search-bar',
     noBackgroundAndBorder = false,
+    height = '32',
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -116,7 +117,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-32`}
+                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}`}
             >
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input

src/Common/SearchBar/types.ts

@@ -55,4 +55,8 @@ export interface SearchBarProps {
      * Hide the background and border of the search
      */
     noBackgroundAndBorder?: boolean
+    /**
+     * Height of the Search bar
+     */
+    height?: '32' | '36'
 }

src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -19,56 +19,45 @@ import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
 import './scanVulnerabilities.css'
 import { SortableTableHeaderCell } from '@Common/SortableTableHeaderCell'
 import { SortingOrder } from '@Common/Constants'
-import { useState } from 'react'
-import { numberComparatorBySortOrder } from '@Shared/Helpers'
-
-const sortPriority = {
-    'critical': 1,
-    'high': 2,
-    'medium': 3,
-    'low': 4,
-    'unknown': 5
-}
-
-export enum SortBy {
-    SEVERITY = 'severity',
-    PACKAGE = 'package'
-}
+import { useMemo, useState } from 'react'
+import { numberComparatorBySortOrder, stringComparatorBySortOrder } from '@Shared/Helpers'
+import { SortBy, SortConfig } from './types'
+import { sortPriority } from './constants'
 
 // To be replaced with Scan V2 Modal Table
 export default function ScanVulnerabilitiesTable({
     vulnerabilities,
     hidePolicy,
     shouldStick,
 }: ScanVulnerabilitiesTableProps) {
-
-    const [sortConfig, setSortConfig] = useState({
+    const [sortConfig, setSortConfig] = useState<SortConfig>({
         sortBy: SortBy.SEVERITY,
         sortOrder: SortingOrder.ASC,
     })
 
-    const sortedVulnerabilities = vulnerabilities.sort((a, b) => {
-        return numberComparatorBySortOrder(sortPriority[a.severity], sortPriority[b.severity], sortConfig.sortOrder)
-    })
-
-    // const critical = vulnerabilities.filter((v) => v.severity === 'critical')
-    // const high = vulnerabilities.filter((v) => v.severity === 'high')
-    // const medium = vulnerabilities.filter((v) => v.severity === 'medium')
-    // const low = vulnerabilities.filter((v) => v.severity === 'low')
-    // const unknown = vulnerabilities.filter((v) => v.severity === 'unknown')
+    const sortedVulnerabilities = useMemo(() => {
+        return vulnerabilities.sort((a, b) => {
+            if (sortConfig.sortBy === SortBy.PACKAGE) {
+                return stringComparatorBySortOrder(a.package, b.package, sortConfig.sortOrder)
+            }
 
-    // const ascVulnerabilities = [...critical, ...high, ...medium, ...low, ...unknown]
-    // const descVulnerabilities = [...unknown, ...low, ...medium, ...high, ...critical]
+            return numberComparatorBySortOrder(sortPriority[a.severity], sortPriority[b.severity], sortConfig.sortOrder)
+        })
+    }, [sortConfig])
 
-    const triggerSeveritySorting = () => setSortConfig({sortBy: SortBy.SEVERITY, sortOrder: sortConfig.sortOrder === SortingOrder.ASC ? SortingOrder.DESC : SortingOrder.DESC })
+    const triggerSorting = (sortBy: SortBy) => {
+        setSortConfig({
+            sortBy: sortBy,
+            sortOrder: sortConfig.sortOrder === SortingOrder.ASC ? SortingOrder.DESC : SortingOrder.ASC,
+        })
+    }
 
     const renderRow = (vulnerability: VulnerabilityType) => (
         <tr
             className="dc__security-tab__table-row cursor"
             onClick={(e) => {
                 window.open(`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${vulnerability.name}`, '_blank')
             }}
-            key={vulnerability.name}
         >
             <td className="security-tab__cell-cve dc__cve-cell">
                 <a
@@ -117,14 +106,23 @@ export default function ScanVulnerabilitiesTable({
                     <th className="security-cell-header security-tab__cell-severity">
                         <SortableTableHeaderCell
                             title="Severity"
-                            isSorted
+                            isSorted={sortConfig.sortBy === SortBy.SEVERITY}
+                            isSortable
+                            sortOrder={sortConfig.sortOrder}
+                            triggerSorting={() => triggerSorting(SortBy.SEVERITY)}
+                            disabled={false}
+                        />
+                    </th>
+                    <th className="security-cell-header security-tab__cell-package">
+                        <SortableTableHeaderCell
+                            title="Package"
+                            isSorted={sortConfig.sortBy === SortBy.PACKAGE}
                             isSortable
                             sortOrder={sortConfig.sortOrder}
-                            triggerSorting={triggerSeveritySorting}
+                            triggerSorting={() => triggerSorting(SortBy.PACKAGE)}
                             disabled={false}
                         />
                     </th>
-                    <th className="security-cell-header security-tab__cell-package">Package</th>
                     <th className="security-cell-header security-tab__cell-current-ver">Current Version</th>
                     <th className="security-cell-header security-tab__cell-fixed-ver">Fixed In Version</th>
                     {!hidePolicy && <th className="security-cell-header security-tab__cell-policy">Policy</th>}

src/Common/Security/constants.tsx

@@ -0,0 +1,7 @@
+export const sortPriority = {
+    critical: 1,
+    high: 2,
+    medium: 3,
+    low: 4,
+    unknown: 5,
+}

src/Common/Security/types.tsx

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