Merge branch 'main' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/improve-log-search

arunjaindev · arunjaindev · commit d585b0eb91c0 · 2024-10-07T12:38:11.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.22-beta-6",
+    "version": "0.4.0-patch-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -83,18 +83,18 @@
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
+        "react-keybind": "^0.9.4",
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
-        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },
     "dependencies": {
         "@types/react-dates": "^21.8.6",
         "ansi_up": "^5.2.1",
-        "dayjs": "^1.11.12",
+        "dayjs": "^1.11.13",
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^9.0.0",
         "react-dates": "^21.8.0",
diff --git a/src/Assets/Icon/ic-caret-left-small.svg b/src/Assets/Icon/ic-caret-left-small.svg
@@ -0,0 +1,19 @@
+<!--
+  - Copyright (c) 2024. Devtron Inc.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M9.66665 11.3332L6.33331 7.99984L9.66665 4.6665" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/Icon/ic-close.svg b/src/Assets/Icon/ic-close.svg
@@ -16,10 +16,10 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
     <defs>
-        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
+        <path id="ic-close" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
     </defs>
     <g fill="none" fill-rule="evenodd">
         <path d=""/>
-        <use fill="#999" xlink:href="#a"/>
+        <use fill="#999" xlink:href="#ic-close"/>
     </g>
 </svg>
diff --git a/src/Assets/Icon/ic-expand.svg b/src/Assets/Icon/ic-expand.svg
@@ -15,5 +15,5 @@
   -->
 
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-<path d="M9.20711 14.5429L13.0429 10.7071C13.4334 10.3166 13.4334 9.68342 13.0429 9.29289L9.20711 5.45711C8.57714 4.82714 7.5 5.27331 7.5 6.16421L7.5 13.8358C7.5 14.7267 8.57714 15.1729 9.20711 14.5429Z" fill="#3B444C"/>
+  <path d="M5.45711 9.20711L9.29289 13.0429C9.68342 13.4334 10.3166 13.4334 10.7071 13.0429L14.5429 9.20711C15.1729 8.57714 14.7267 7.5 13.8358 7.5H6.16421C5.27331 7.5 4.82714 8.57714 5.45711 9.20711Z" fill="#3B444C"/>
 </svg>
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -639,12 +639,6 @@ export interface VulnerabilityType {
     url?: string
 }
 
-export interface ScanVulnerabilitiesTableProps {
-    vulnerabilities: VulnerabilityType[]
-    hidePolicy?: boolean
-    shouldStick?: boolean
-}
-
 export interface MaterialInfo {
     revision: string
     modifiedTime: string | Date
diff --git a/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx b/src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import Tippy, { TippyProps } from '@tippyjs/react'
-
 import { ConditionalWrap } from '@Common/Helper'
 import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg'
 
@@ -30,7 +29,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                         >
                             <ICExpand
                                 className="icon-dim-20 fcn-6 dc__no-shrink cursor rotate"
-                                style={{ ['--rotateBy' as string]: isExpanded ? '90deg' : '0deg' }}
+                                style={{ ['--rotateBy' as string]: isExpanded ? '0deg' : '-90deg' }}
                             />
                             <span className="flex-grow-1 dc__align-left dc__truncate">{header}</span>
                         </button>
diff --git a/src/Shared/Components/ImageCardAccordion/ImageCardAccordion.tsx b/src/Shared/Components/ImageCardAccordion/ImageCardAccordion.tsx
@@ -44,6 +44,7 @@ const ImageCardAccordion = ({
     isSecurityModuleInstalled,
     artifactId,
     applicationId,
+    environmentId,
     changesCard,
     isScanned,
     isScanEnabled,
@@ -73,6 +74,7 @@ const ImageCardAccordion = ({
                 isScanEnabled={isScanEnabled}
                 artifactId={artifactId}
                 applicationId={applicationId}
+                environmentId={environmentId}
                 setVulnerabilityCount={setVulnerabilityCount}
                 SecurityModalSidebar={SecurityModalSidebar}
                 getSecurityScan={getSecurityScan}
diff --git a/src/Shared/Components/ImageCardAccordion/types.ts b/src/Shared/Components/ImageCardAccordion/types.ts
@@ -23,6 +23,7 @@ export interface ImageCardAccordionProps extends MaterialSecurityInfoType {
     isSecurityModuleInstalled: boolean
     artifactId: number
     applicationId: number
+    environmentId: number
     changesCard: ReactNode
     isScanned: boolean
     isScanEnabled: boolean
diff --git a/src/Shared/Components/Security/SecurityModal/SecurityModal.tsx b/src/Shared/Components/Security/SecurityModal/SecurityModal.tsx
@@ -13,7 +13,7 @@ import {
     VisibleModal2,
 } from '@Common/index'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { ReactComponent as ICBack } from '@Icons/ic-caret-down.svg'
+import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
 import { Table, InfoCard } from './components'
 import { DEFAULT_SECURITY_MODAL_STATE } from './constants'
 import { getTableData, getInfoCardData } from './config'
@@ -41,6 +41,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
     isHelmApp = false,
     isSecurityScanV2Enabled = false,
     isExternalCI = false,
+    hidePolicy = false,
 }) => {
     const [state, setState] = useState<SecurityModalStateType>(DEFAULT_SECURITY_MODAL_STATE)
 
@@ -85,7 +86,7 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
                 onClick={handleBackFromDetailView}
             >
                 <div className="dc__border-radius-4-imp dc__hover-n50 dc__border c-n50 flex">
-                    <ICBack className="icon-dim-16 dc__flip-90" />
+                    <ICBack className="icon-dim-16" />
                 </div>
             </button>
             <div className="flexbox dc__gap-4" data-testid="security-detail-view-strip">
@@ -108,7 +109,8 @@ const SecurityModal: React.FC<SecurityModalPropsType> = ({
 
         /* NOTE: if detailView is active show data gathered from that */
         const { headers, rows, defaultSortIndex, hasExpandableRows } =
-            selectedDetailViewData || getTableData(data, state.category, state.subCategory, setDetailViewData)
+            selectedDetailViewData ||
+            getTableData(data, state.category, state.subCategory, setDetailViewData, hidePolicy)
 
         const { entities, lastScanTimeString, scanToolId } =
             selectedDetailViewData || getInfoCardData(data, state.category, state.subCategory)
diff --git a/src/Shared/Components/Security/SecurityModal/config/CodeScan.tsx b/src/Shared/Components/Security/SecurityModal/config/CodeScan.tsx
@@ -34,7 +34,7 @@ import {
 import { OpenDetailViewButton } from '../components'
 import { getCVEUrlFromCVEName } from '../../utils'
 
-export const getCodeScanVulnerabilities = (data: CodeScan['vulnerability']) => ({
+export const getCodeScanVulnerabilities = (data: CodeScan['vulnerability'], hidePolicy: boolean) => ({
     headers: [
         { headerText: 'cve id', isSortable: false, width: 150 },
         {
@@ -47,6 +47,7 @@ export const getCodeScanVulnerabilities = (data: CodeScan['vulnerability']) => (
         { headerText: 'package', isSortable: true, width: 143.33 },
         { headerText: 'current version', isSortable: false, width: 143.33 },
         { headerText: 'fixed in version', isSortable: false, width: 143.33 },
+        !hidePolicy && { headerText: 'policy', isSortable: false, width: 143.33 },
     ],
     rows: !data?.list?.length
         ? null
@@ -88,6 +89,14 @@ export const getCodeScanVulnerabilities = (data: CodeScan['vulnerability']) => (
                       component: null,
                       cellContent: element.fixedInVersion,
                   },
+                  !hidePolicy && {
+                      component: (
+                          <span className={`security-policy--${element.permission?.toLowerCase()}`}>
+                              {element.permission}
+                          </span>
+                      ),
+                      cellContent: element.permission,
+                  },
               ],
           })),
     defaultSortIndex: 1,
@@ -377,10 +386,11 @@ export const getCodeScanTableData = (
     data: CodeScan,
     subCategory: SecurityModalStateType['subCategory'],
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ): TablePropsType => {
     switch (subCategory) {
         case SUB_CATEGORIES.VULNERABILITIES:
-            return getCodeScanVulnerabilities(data[subCategory])
+            return getCodeScanVulnerabilities(data[subCategory], hidePolicy)
         case SUB_CATEGORIES.LICENSE:
             return getCodeScanLicense(data[subCategory])
         case SUB_CATEGORIES.MISCONFIGURATIONS:
diff --git a/src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx b/src/Shared/Components/Security/SecurityModal/config/ImageScan.tsx
@@ -51,6 +51,7 @@ const getVulnerabilitiesDetailBaseData = (element: ImageScanVulnerabilityListTyp
 const getGroupedVulnerabilitiesDetailData = (
     element: ImageScanVulnerabilityListType,
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ) => {
     const list = !element?.list?.length ? null : groupByTarget(element.list)
 
@@ -81,7 +82,7 @@ const getGroupedVulnerabilitiesDetailData = (
                                           summary: child.summary,
                                       }),
                                       titlePrefix: 'Source',
-                                      ...getCodeScanVulnerabilities(child),
+                                      ...getCodeScanVulnerabilities(child, hidePolicy),
                                   }}
                                   setDetailViewData={setDetailViewData}
                               >
@@ -102,15 +103,16 @@ const getGroupedVulnerabilitiesDetailData = (
 const getVulnerabilitiesDetailData = (
     element: ImageScanVulnerabilityListType,
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ) => {
     const shouldGroupByTarget = element.list.every((item) => !!item.target)
     if (!shouldGroupByTarget) {
         return {
             ...getVulnerabilitiesDetailBaseData(element),
-            ...getCodeScanVulnerabilities(element),
+            ...getCodeScanVulnerabilities(element, hidePolicy),
         }
     }
-    return getGroupedVulnerabilitiesDetailData(element, setDetailViewData)
+    return getGroupedVulnerabilitiesDetailData(element, setDetailViewData, hidePolicy)
 }
 
 const getImageScanProgressingState = (status: StatusType['status']) => {
@@ -147,6 +149,7 @@ const getTimeString = (timeString: string, status: StatusType['status']) => {
 const getVulnerabilitiesData = (
     data: ImageScan['vulnerability'],
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ) => ({
     headers: [
         { headerText: 'image', isSortable: false, width: 256 },
@@ -162,7 +165,7 @@ const getVulnerabilitiesData = (
                   {
                       component: (
                           <OpenDetailViewButton
-                              detailViewData={getVulnerabilitiesDetailData(element, setDetailViewData)}
+                              detailViewData={getVulnerabilitiesDetailData(element, setDetailViewData, hidePolicy)}
                               setDetailViewData={setDetailViewData}
                           >
                               <span className="cb-5 fw-4 cursor">{element.image}</span>
@@ -292,10 +295,11 @@ export const getImageScanTableData = (
     data: ImageScan,
     subCategory: SecurityModalStateType['subCategory'],
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ): TablePropsType => {
     switch (subCategory) {
         case SUB_CATEGORIES.VULNERABILITIES:
-            return getVulnerabilitiesData(data[subCategory], setDetailViewData)
+            return getVulnerabilitiesData(data[subCategory], setDetailViewData, hidePolicy)
         case SUB_CATEGORIES.LICENSE:
             return getLicenseData(data[subCategory], setDetailViewData)
         default:
diff --git a/src/Shared/Components/Security/SecurityModal/config/Table.tsx b/src/Shared/Components/Security/SecurityModal/config/Table.tsx
@@ -18,12 +18,13 @@ export const getTableData = (
     category: SecurityModalStateType['category'],
     subCategory: SecurityModalStateType['subCategory'],
     setDetailViewData: OpenDetailViewButtonProps['setDetailViewData'],
+    hidePolicy: boolean,
 ): TablePropsType => {
     switch (category) {
         case CATEGORIES.IMAGE_SCAN:
-            return getImageScanTableData(data[category], subCategory, setDetailViewData)
+            return getImageScanTableData(data[category], subCategory, setDetailViewData, hidePolicy)
         case CATEGORIES.CODE_SCAN:
-            return getCodeScanTableData(data[category], subCategory, setDetailViewData)
+            return getCodeScanTableData(data[category], subCategory, setDetailViewData, hidePolicy)
         case CATEGORIES.KUBERNETES_MANIFEST:
             return getKubernetesManifestTableData(data[category], subCategory, setDetailViewData)
         default:
diff --git a/src/Shared/Components/Security/SecurityModal/service.ts b/src/Shared/Components/Security/SecurityModal/service.ts
@@ -26,7 +26,7 @@ export const getExecutionDetails = async (
                 package: cve.package,
                 version: cve.currentVersion,
                 fixedVersion: cve.fixedVersion,
-                policy: cve.permission,
+                permission: cve.permission,
             })) || [],
     }
     return { ...response, result: parseExecutionDetailResponse(parsedResult) }
diff --git a/src/Shared/Components/Security/SecurityModal/types.ts b/src/Shared/Components/Security/SecurityModal/types.ts
@@ -148,6 +148,7 @@ export interface CodeScanVulnerabilityType {
     package: string
     currentVersion: string
     fixedInVersion: string
+    permission?: string
 }
 
 export interface ImageScanVulnerabilityType extends CodeScanVulnerabilityType {
@@ -256,6 +257,7 @@ interface SecurityModalBaseProps extends Partial<Pick<SidebarPropsType, 'isExter
     isHelmApp?: boolean
     isResourceScan?: boolean
     isSecurityScanV2Enabled: boolean
+    hidePolicy?: boolean
 }
 
 export type SecurityModalPropsType = SecurityModalBaseProps
diff --git a/src/Shared/Components/Security/SecurityModal/utils.tsx b/src/Shared/Components/Security/SecurityModal/utils.tsx
@@ -136,6 +136,7 @@ export const parseExecutionDetailResponse = (scanResult): ApiResponseResultType
                         currentVersion: vulnerability?.version,
                         fixedInVersion: vulnerability?.fixedVersion,
                         severity: getSeverityFromVulnerabilitySeverity(vulnerability?.severity),
+                        permission: vulnerability?.permission,
                     })),
                     scanToolName: scanResult.scanToolId === SCAN_TOOL_ID_TRIVY ? 'TRIVY' : 'CLAIR',
                     StartedOn:
diff --git a/src/Shared/Components/Security/SecuritySummaryCard/SecuritySummaryCard.tsx b/src/Shared/Components/Security/SecuritySummaryCard/SecuritySummaryCard.tsx
@@ -13,6 +13,7 @@ const SecuritySummaryCard = ({
     SecurityModalSidebar,
     responseData,
     isSecurityScanV2Enabled,
+    hidePolicy = false,
 }: SecuritySummaryCardProps) => {
     const [showSecurityModal, setShowSecurityModal] = useState<boolean>(false)
     const { critical = 0, high = 0, medium = 0, low = 0, unknown = 0 } = severityCount
@@ -66,6 +67,7 @@ const SecuritySummaryCard = ({
                     isLoading={false} // Loading and error are handled on parent components
                     error={null}
                     responseData={responseData}
+                    hidePolicy={hidePolicy}
                 />
             )}
         </>
diff --git a/src/Shared/Components/Security/SecuritySummaryCard/types.tsx b/src/Shared/Components/Security/SecuritySummaryCard/types.tsx
@@ -9,4 +9,5 @@ export type SecuritySummaryCardProps = {
     isHelmApp?: boolean
     isSecurityScanV2Enabled: boolean
     responseData: ApiResponseResultType
+    hidePolicy?: boolean
 } & Pick<ImageCardAccordionProps, 'SecurityModalSidebar'>
diff --git a/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx b/src/Shared/Components/Security/Vulnerabilities/Vulnerabilities.tsx
diff --git a/src/Shared/Components/Security/Vulnerabilities/index.ts b/src/Shared/Components/Security/Vulnerabilities/index.ts
diff --git a/src/Shared/Components/Security/Vulnerabilities/service.ts b/src/Shared/Components/Security/Vulnerabilities/service.ts
diff --git a/src/Shared/Components/Security/Vulnerabilities/types.ts b/src/Shared/Components/Security/Vulnerabilities/types.ts
diff --git a/src/Shared/Components/Security/Vulnerabilities/utils.ts b/src/Shared/Components/Security/Vulnerabilities/utils.ts
diff --git a/src/Shared/Components/TabGroup/TabGroup.component.tsx b/src/Shared/Components/TabGroup/TabGroup.component.tsx
diff --git a/src/Shared/Services/ToastManager/constants.tsx b/src/Shared/Services/ToastManager/constants.tsx
