Merge branch 'feat/integrate-scan-tool-url' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/integrate-scan-tool-url

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) => {
@@ -167,7 +166,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-auto flex-grow-1" style={{ width: '744px' }}>
                     {selectedDetailViewData && renderDetailViewSubHeader()}

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

@@ -2,10 +2,11 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
+import { ScanCategoriesWithLicense } from '../../types'
 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<ScanCategoriesWithLicense, boolean>): SidebarDataType[] => {
     const { imageScan, codeScan, kubernetesManifest, imageScanLicenseRisks } = categoriesConfig
 
     return [

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

@@ -10,9 +10,9 @@ import {
     SeveritiesDTO,
     SortOrderEnum,
     EmptyStateType,
-    SidebarPropsType,
     SecurityModalStateType,
 } from './types'
+import { ScanCategoriesWithLicense } from '../types'
 
 export const DEFAULT_SECURITY_MODAL_IMAGE_STATE = {
     category: CATEGORIES.IMAGE_SCAN,
@@ -33,7 +33,7 @@ const DEFAULT_SECURITY_MODAL_MANIFEST_STATE = {
 }
 
 export const getDefaultSecurityModalState = (
-    categoriesConfig: SidebarPropsType['categoriesConfig'],
+    categoriesConfig: Record<ScanCategoriesWithLicense, boolean>,
 ): SecurityModalStateType => {
     if (categoriesConfig.imageScan) {
         return DEFAULT_SECURITY_MODAL_IMAGE_STATE

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

@@ -7,6 +7,7 @@ import { GenericEmptyStateType } from '@Common/Types'
 import { LastExecutionResultType, NodeType, Nodes } from '@Shared/types'
 import { SegmentedBarChartProps } from '@Common/SegmentedBarChart'
 import { ServerErrors } from '@Common/ServerError'
+import { ScanCategories, ScanSubCategories } from '../types'
 
 export interface GetResourceScanDetailsPayloadType {
     name: string
@@ -100,17 +101,11 @@ export type DetailViewDataType = {
     InfoCardPropsType
 
 export type SecurityModalStateType = {
-    category: (typeof CATEGORIES)[keyof typeof CATEGORIES]
-    subCategory: (typeof SUB_CATEGORIES)[keyof typeof SUB_CATEGORIES]
+    category: ScanCategories
+    subCategory: ScanSubCategories
     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 +238,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
@@ -264,8 +265,8 @@ export interface IndexedTextDisplayPropsType {
 export type SidebarDataChildType = {
     label: string
     value: {
-        category: (typeof CATEGORIES)[keyof typeof CATEGORIES]
-        subCategory: (typeof SUB_CATEGORIES)[keyof typeof SUB_CATEGORIES]
+        category: ScanCategories
+        subCategory: ScanSubCategories
     }
 }
 

src/Shared/Components/Security/types.tsx

@@ -3,6 +3,8 @@ import { CATEGORIES, SUB_CATEGORIES } from './SecurityModal/types'
 export type ScanCategories = (typeof CATEGORIES)[keyof typeof CATEGORIES]
 export type ScanSubCategories = (typeof SUB_CATEGORIES)[keyof typeof SUB_CATEGORIES]
 
+export type ScanCategoriesWithLicense = ScanCategories | 'imageScanLicenseRisks'
+
 export type CategoriesConfig = {
     imageScan: boolean
     codeScan: boolean