feat: add support for threat count in security modal sidebar

Author: arunjaindev

src/Shared/Components/Security/SecurityModal/SecurityModal.tsx

@@ -19,7 +19,7 @@ import { ComponentSizeType } from '@Shared/constants'
 import { Table, InfoCard } from './components'
 import { getDefaultSecurityModalState } from './constants'
 import { getTableData, getInfoCardData } from './config'
-import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType, SidebarPropsType } from './types'
+import { SecurityModalPropsType, SecurityModalStateType, DetailViewDataType } from './types'
 import { getEmptyStateValues } from './config/EmptyState'
 import './styles.scss'
 
@@ -44,15 +44,14 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
 }) => {
     const data = responseData ?? null
 
-    const categoriesConfig: SidebarPropsType['categoriesConfig'] = {
-        imageScan: !!data?.imageScan,
-        imageScanLicenseRisks: !!data?.imageScan?.license,
-        codeScan: !!data?.codeScan,
-        kubernetesManifest: !!data?.kubernetesManifest,
-    }
-
     const [state, setState] = useState<SecurityModalStateType>(
-        defaultState ?? getDefaultSecurityModalState(categoriesConfig),
+        defaultState ??
+            getDefaultSecurityModalState({
+                imageScan: !!data?.imageScan,
+                imageScanLicenseRisks: !!data?.imageScan?.license,
+                codeScan: !!data?.codeScan,
+                kubernetesManifest: !!data?.kubernetesManifest,
+            }),
     )
 
     const setDetailViewData = (detailViewData: DetailViewDataType) => {
@@ -162,7 +161,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
             /* NOTE: the height is restricted to (viewport - header) height since we need overflow-scroll */
             <div className="flexbox" style={{ height: 'calc(100vh - 49px)' }}>
                 {/* NOTE: only show sidebar in AppDetails */}
-                {Sidebar && <Sidebar modalState={state} setModalState={setState} categoriesConfig={categoriesConfig} />}
+                {Sidebar && <Sidebar modalState={state} setModalState={setState} scanResult={responseData} />}
                 <div className="dc__border-right-n1 h-100" />
                 <div className="dc__overflow-scroll flex-grow-1" style={{ width: '744px' }}>
                     {selectedDetailViewData && renderDetailViewSubHeader()}

src/Shared/Components/Security/SecurityModal/config/Sidebar.ts

@@ -3,9 +3,11 @@
  */
 
 import { CATEGORY_LABELS, SUB_CATEGORY_LABELS } from '../constants'
-import { CATEGORIES, SUB_CATEGORIES, SidebarDataType, SidebarPropsType } from '../types'
+import { CATEGORIES, SUB_CATEGORIES, SidebarDataType } from '../types'
 
-export const getSidebarData = (categoriesConfig: SidebarPropsType['categoriesConfig']): SidebarDataType[] => {
+export const getSidebarData = (
+    categoriesConfig: Record<(typeof CATEGORIES)[keyof typeof CATEGORIES] | 'imageScanLicenseRisks', boolean>,
+): SidebarDataType[] => {
     const { imageScan, codeScan, kubernetesManifest, imageScanLicenseRisks } = categoriesConfig
 
     return [

src/Shared/Components/Security/SecurityModal/constants.tsx

@@ -12,7 +12,6 @@ import {
     SortOrderEnum,
     EmptyStateType,
     StatusType,
-    SidebarPropsType,
     SecurityModalStateType,
 } from './types'
 
@@ -35,7 +34,7 @@ const DEFAULT_SECURITY_MODAL_MANIFEST_STATE = {
 }
 
 export const getDefaultSecurityModalState = (
-    categoriesConfig: SidebarPropsType['categoriesConfig'],
+    categoriesConfig: Record<(typeof CATEGORIES)[keyof typeof CATEGORIES] | 'imageScanLicenseRisks', boolean>,
 ): SecurityModalStateType => {
     if (categoriesConfig.imageScan) {
         return DEFAULT_SECURITY_MODAL_IMAGE_STATE

src/Shared/Components/Security/SecurityModal/types.ts

@@ -105,12 +105,6 @@ export type SecurityModalStateType = {
     detailViewData: DetailViewDataType[]
 }
 
-export interface SidebarPropsType {
-    modalState: SecurityModalStateType
-    setModalState: React.Dispatch<React.SetStateAction<SecurityModalStateType>>
-    categoriesConfig: Record<(typeof CATEGORIES)[keyof typeof CATEGORIES] | 'imageScanLicenseRisks', boolean>
-}
-
 export enum SeveritiesDTO {
     CRITICAL = 'critical',
     HIGH = 'high',
@@ -243,6 +237,12 @@ export type ScanResultDTO = {
     [CATEGORIES.KUBERNETES_MANIFEST]: KubernetesManifest
 }
 
+export interface SidebarPropsType {
+    modalState: SecurityModalStateType
+    setModalState: React.Dispatch<React.SetStateAction<SecurityModalStateType>>
+    scanResult: ScanResultDTO
+}
+
 interface SecurityModalBaseProps {
     isLoading: boolean
     error: ServerErrors