feat: intergrate scanning for v1 and v2 APIs

Author: arunjaindev

package-lock.json

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

package.json

@@ -89,7 +89,7 @@ export const ROUTES = {
     CD_MATERIAL_GET: 'app/cd-pipeline',
     DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
     INFRA_CONFIG_PROFILE: 'infra-config/profile',
-    SECURITY_SCAN_EXECUTION_DETAILS: 'security/scan/executionDetail',
+    SCAN_RESULT: 'scan-result',
     NOTIFIER: 'notification',
     APP_LIST: 'app/list',
     TELEMETRY_EVENT: 'telemetry/event',

src/Common/Constants.ts

@@ -49,7 +49,6 @@ const ImageCardAccordion = ({
     isScanned,
     isScanEnabled,
     SecurityModalSidebar,
-    getSecurityScan,
 }: ImageCardAccordionProps) => {
     const [isOpened, setIsOpened] = useState<boolean>(false)
     const [activeTab, setActiveTab] = useState<CDModalTabType>(CDModalTab.Changes)
@@ -77,7 +76,6 @@ const ImageCardAccordion = ({
                 environmentId={environmentId}
                 setVulnerabilityCount={setVulnerabilityCount}
                 SecurityModalSidebar={SecurityModalSidebar}
-                getSecurityScan={getSecurityScan}
             />
         )
     }

src/Shared/Components/ImageCardAccordion/ImageCardAccordion.tsx

@@ -15,9 +15,9 @@
  */
 
 import React, { ReactNode } from 'react'
-import { CDModalTabType, ResponseType, VulnerabilityType } from '../../../Common'
+import { CDModalTabType, VulnerabilityType } from '../../../Common'
 import { MaterialSecurityInfoType } from '../../types'
-import { ApiResponseResultType, AppDetailsPayload, SidebarPropsType } from '../Security'
+import { SidebarPropsType } from '../Security'
 
 export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isSecurityModuleInstalled: boolean
@@ -28,9 +28,6 @@ export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isScanned: boolean
     isScanEnabled: boolean
     SecurityModalSidebar: React.FC<SidebarPropsType>
-    getSecurityScan: (
-        props: Pick<AppDetailsPayload, 'appId' | 'artifactId'>,
-    ) => Promise<ResponseType<ApiResponseResultType>>
 }
 
 export interface SecurityDetailsType {

src/Shared/Components/ImageCardAccordion/types.ts

@@ -39,10 +39,6 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     isLoading,
     error,
     responseData,
-    isResourceScan = false,
-    isHelmApp = false,
-    isSecurityScanV2Enabled = false,
-    isExternalCI = false,
     hidePolicy = false,
 }) => {
     const [state, setState] = useState<SecurityModalStateType>(DEFAULT_SECURITY_MODAL_STATE)
@@ -156,12 +152,15 @@ 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 */}
-                {isSecurityScanV2Enabled && !isResourceScan && Sidebar && (
+                {Sidebar && (
                     <Sidebar
-                        isHelmApp={isHelmApp}
                         modalState={state}
                         setModalState={setState}
-                        isExternalCI={isExternalCI}
+                        categoriesConfig={{
+                            imageScan: !!data.imageScan,
+                            codeScan: !!data.codeScan,
+                            kubernetesManifest: !!data.kubernetesManifest,
+                        }}
                     />
                 )}
                 <div className="dc__border-right-n1 h-100" />
@@ -176,7 +175,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     return (
         <VisibleModal2 className="dc__position-rel" close={handleModalClose}>
             <div
-                className={`${isResourceScan ? 'w-800' : 'w-1024'} h-100vh bcn-0 flexbox-col dc__right-0 dc__top-0 dc__position-abs`}
+                className={`${Sidebar ? 'w-1024' : 'w-800'} h-100vh bcn-0 flexbox-col dc__right-0 dc__top-0 dc__position-abs`}
                 onClick={stopPropagation}
             >
                 {renderHeader()}

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

@@ -17,7 +17,7 @@ import {
     SEVERITY_DEFAULT_SORT_ORDER,
 } from '../constants'
 import {
-    ApiResponseResultType,
+    ScanResultDTO,
     CATEGORIES,
     CodeScan,
     CodeScanExposedSecretsListType,
@@ -489,7 +489,7 @@ const getCompletedEmptyState = (
 }
 
 export const getCodeScanEmptyState = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,
 ): EmptyStateType => {

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

@@ -5,10 +5,10 @@
 import { getCodeScanEmptyState } from './CodeScan'
 import { getImageScanEmptyState } from './ImageScan'
 import { getKubernetesManifestEmptyState } from './KubernetesManifest'
-import { ApiResponseResultType, CATEGORIES, DetailViewDataType, SecurityModalStateType } from '../types'
+import { ScanResultDTO, CATEGORIES, DetailViewDataType, SecurityModalStateType } from '../types'
 
 export const getEmptyStateValues = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     category: SecurityModalStateType['category'],
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,

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

@@ -18,7 +18,7 @@ import {
     InfoCardPropsType,
     ImageScanLicenseListType,
     EmptyStateType,
-    ApiResponseResultType,
+    ScanResultDTO,
     CATEGORIES,
     OpenDetailViewButtonProps,
 } from '../types'
@@ -355,14 +355,14 @@ const getCompletedEmptyState = (
 }
 
 export const getImageScanEmptyState = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     subCategory: SecurityModalStateType['subCategory'],
     detailViewData: DetailViewDataType,
 ): EmptyStateType => {
     /**
      * NOTE: handling for resourceScan in ResourceBrowser
      * TODO: handle properly */
-    if (!data[CATEGORIES.IMAGE_SCAN][subCategory]?.list?.length) {
+    if (!data[CATEGORIES.IMAGE_SCAN]?.[subCategory]?.list?.length) {
         return SCAN_IN_PROGRESS_EMPTY_STATE
     }
 

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

@@ -2,13 +2,13 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { InfoCardPropsType, ApiResponseResultType, CATEGORIES, SecurityModalStateType } from '../types'
+import { InfoCardPropsType, ScanResultDTO, CATEGORIES, SecurityModalStateType } from '../types'
 import { getImageScanInfoCardData } from './ImageScan'
 import { getCodeScanInfoCardData } from './CodeScan'
 import { getKubernetesManifestInfoCardData } from './KubernetesManifest'
 
 export const getInfoCardData = (
-    data: ApiResponseResultType,
+    data: ScanResultDTO,
     category: SecurityModalStateType['category'],
     subCategory: SecurityModalStateType['subCategory'],
 ): InfoCardPropsType => {