Merge branch 'main' of github.com:devtron-labs/dashboard into feat/catalog-dependencies

Author: eshankvaish

src/App.tsx

@@ -18,7 +18,7 @@ import {
     ToastBody3 as UpdateToast,
     ErrorBoundary,
 } from './components/common'
-import { showError, Progressing, BreadcrumbStore, Reload } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, BreadcrumbStore, Reload, DevtronProgressing } from '@devtron-labs/devtron-fe-common-lib'
 import * as serviceWorker from './serviceWorker'
 import Hotjar from './components/Hotjar/Hotjar'
 import { validateToken } from './services/service'
@@ -207,7 +207,7 @@ export default function App() {
         <Suspense fallback={null}>
             {validating ? (
                 <div className="full-height-width">
-                    <Progressing pageLoader />
+                    <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80"/>
                 </div>
             ) : (
                 <>

src/components/ApplicationGroup/List/EnvironmentsList.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react'
-import { Progressing, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { DevtronProgressing, useAsync } from '@devtron-labs/devtron-fe-common-lib'
 import { useRouteMatch } from 'react-router'
 import { ReactComponent as Search } from '../../../assets/icons/ic-search.svg'
 import { ReactComponent as Clear } from '../../../assets/icons/ic-error.svg'
@@ -191,7 +191,7 @@ export default function EnvironmentsList({ isSuperAdmin }: AppGroupAdminType) {
     }
 
     if (loading) {
-        return <Progressing pageLoader />
+        return <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80"/>
     }
 
     return (

src/components/Jobs/JobDetails/JobDetails.tsx

@@ -30,9 +30,11 @@ export default function JobDetails() {
     const { appId } = useParams<{ appId: string }>()
     const [jobName, setJobName] = useState('')
     const [appMetaInfo, setAppMetaInfo] = useState<AppMetaInfo>()
+    const [jobListLoading, setJobListLoading] = useState<boolean>(false)
 
     useEffect(() => {
-        getAppMetaInfoRes()
+        setJobListLoading(true)
+        getAppMetaInfoRes().finally(() => setJobListLoading(false))
     }, [appId])
 
     const getAppMetaInfoRes = async (): Promise<AppMetaInfo> => {
@@ -47,6 +49,9 @@ export default function JobDetails() {
             showError(err)
         }
     }
+    if (jobListLoading) {
+        return <Progressing pageLoader />
+    }
 
     return (
         <div className="job-details-page">

src/components/Jobs/JobList/JobsList.tsx

@@ -3,11 +3,11 @@ import { Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-rou
 import { URLS } from '../../../config'
 import {
     ErrorScreenManager,
-    Progressing,
     showError,
     stopPropagation,
     ServerErrors,
     useAsync,
+    DevtronProgressing,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Filter, FilterOption } from '../../common'
 import HeaderWithCreateButton from '../../common/header/HeaderWithCreateButton/HeaderWithCreateButton'
@@ -331,8 +331,8 @@ export default function JobsList() {
     return (
         <div className="jobs-view-container">
             {dataStateType === JobListViewType.LOADING && (
-                <div className="dc__loading-wrapper">
-                    <Progressing pageLoader />
+                <div className="w-100 h-100vh">
+                    <DevtronProgressing parentClasses="h-100 w-100 flex bcn-0" classes="icon-dim-80"/>
                 </div>
             )}
             {dataStateType === JobListViewType.ERROR && (

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -16,6 +16,7 @@ import {
     useBreadcrumb,
     ErrorScreenManager,
     Reload,
+    DevtronProgressing,
 } from '@devtron-labs/devtron-fe-common-lib'
 import PageHeader from '../../common/header/PageHeader'
 import {
@@ -1039,7 +1040,7 @@ export default function ResourceList() {
         } else if ((loader && !selectedCluster?.value) || clusterLoader) {
             return (
                 <div style={{ height: 'calc(100vh - 48px)' }}>
-                    <Progressing pageLoader />
+                    <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80" />
                 </div>
             )
         } else if (!selectedCluster?.value) {

src/components/apiTokens/CreateAPIToken.tsx

@@ -94,7 +94,7 @@ function CreateAPIToken({
         action: ActionTypes.VIEW,
         entityName: [],
     })
-    const [k8sPermission, setK8sPermission] = useState<any[]>([]);
+    const [k8sPermission, setK8sPermission] = useState<any[]>([])
     const [customDate, setCustomDate] = useState<Moment>(null)
     const validationRules = new ValidationRules()
 

src/components/apiTokens/authorization.utils.ts

@@ -33,8 +33,8 @@ export const getDateInMilliseconds = (days) => {
 }
 
 export const getSelectedEnvironments = (permission) => {
-    if (permission.accessType === ACCESS_TYPE_MAP.DEVTRON_APPS) {
-       return getSelectedPermissionValues(permission.environment)
+    if (permission.accessType === ACCESS_TYPE_MAP.DEVTRON_APPS || permission.entity === EntityTypes.JOB) {
+        return getSelectedPermissionValues(permission.environment)
     } else {
         let allFutureCluster = {}
         let envList = ''
@@ -83,25 +83,36 @@ export const createUserPermissionPayload = (
                     (permission) =>
                         permission.team?.value && permission.environment.length && permission.entityName.length,
                 )
-                .map((permission) => ({
-                    ...permission,
-                    action: permission.action.value,
-                    team: permission.team.value,
-                    environment: getSelectedEnvironments(permission),
-                    entityName: getSelectedPermissionValues(permission.entityName),
-                })),
-                ...k8sPermission.map((permission) => ({
-                    ...permission,
-                    entity: EntityTypes.CLUSTER,
-                    action: permission.action.value,
-                    cluster: permission.cluster.label,
-                    group: permission.group.value === '*' ? '' : permission.group.value, 
-                    kind: permission.kind.value === '*' ? '' : permission.kind.label,
-                    namespace: permission.namespace.value === '*' ? '' : permission.namespace.value,
-                    resource: permission.resource.find((entity) => entity.value === '*')
+                .map((permission) => {
+                    const payload = {
+                        ...permission,
+                        action: permission.action.value,
+                        team: permission.team.value,
+                        environment: getSelectedEnvironments(permission),
+                        entityName: getSelectedPermissionValues(permission.entityName),
+                        entity: permission.entity,
+                        ...(permission.entity === EntityTypes.JOB && {
+                            workflow: permission.workflow?.length
+                                ? permission.workflow.find((workflow) => workflow.value === '*')
+                                    ? ''
+                                    : permission.workflow.map((workflow) => workflow.value).join(',')
+                                : '',
+                        }),
+                    }
+                    return payload
+                }),
+            ...k8sPermission.map((permission) => ({
+                ...permission,
+                entity: EntityTypes.CLUSTER,
+                action: permission.action.value,
+                cluster: permission.cluster.label,
+                group: permission.group.value === '*' ? '' : permission.group.value,
+                kind: permission.kind.value === '*' ? '' : permission.kind.label,
+                namespace: permission.namespace.value === '*' ? '' : permission.namespace.value,
+                resource: permission.resource.find((entity) => entity.value === '*')
                     ? ''
-                    : permission.resource.map((entity) => entity.value).join(',')
-                }))
+                    : permission.resource.map((entity) => entity.value).join(','),
+            })),
         ],
         superAdmin: isSuperAdminAccess,
     }

src/components/app/details/appConfig/appConfig.scss

@@ -23,12 +23,6 @@
             }
         }
 
-        &:not(.hide-app-config-help) {
-            &.hide-external-links {
-                grid-template-rows: 110px repeat(6, 32px) 1fr auto;
-            }
-        }
-
         &.job-compose__side-nav {
             grid-template-rows: 110px repeat(4, 32px) 1fr;
 

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
-import { ReactComponent as GitHub } from '../../../../assets/icons/git/github.svg'
+// import { ReactComponent as GitHub } from '../../../../assets/icons/git/github.svg'
 import { ReactComponent as CommitIcon } from '../../../../assets/icons/ic-code-commit.svg'
 import { DeployedCommitCardType } from './appDetails.type'
 import { showError } from '@devtron-labs/devtron-fe-common-lib'
@@ -11,6 +11,7 @@ import LoadingCard from './LoadingCard'
 const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifactId }: DeployedCommitCardType) => {
     const [commitId, setCommitId] = useState<string>(null)
     const [commitMessage, setCommitMessage] = useState<string>(null)
+    const [noValidCommit, setNoValidCommit] = useState<boolean>(false)
 
     useEffect(() => {
         if (envId && ciArtifactId) {
@@ -22,17 +23,23 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
             getCITriggerInfoModal(params, null)
                 .then((response) => {
                     const materials = response.result?.materials
-                    const lastCommit = materials[0]?.history[0]
-                    const shortenCommitId = lastCommit?.commit?.slice(0, 8)
-                    setCommitId(shortenCommitId)
-                    setCommitMessage(lastCommit?.message)
+                    if (materials && materials.length > 0) {
+                        const lastCommit = materials[0]?.history[0]
+                        const shortenCommitId = lastCommit?.commit?.slice(0, 8)
+                        setCommitId(shortenCommitId)
+                        setCommitMessage(lastCommit?.message)
+                    } else {
+                        setNoValidCommit(true)
+                    }
                 })
                 .catch((error) => {
                     showError(error)
+                    setNoValidCommit(true)
                 })
         }
     }, [envId, ciArtifactId])
 
+    if (noValidCommit) return null
     if (cardLoading || !commitId) return <LoadingCard />
 
     return (
@@ -59,7 +66,9 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
                         <div className="dc__ellipsis-right cn-7 ml-2 fw-4 fs-12 dc__ff-monospace">{commitId}</div>
                     </div>
                 </div>
-                <GitHub className="github-icon" />
+                <div className="dc__git-logo" />
+                {/* @TODO: This should be dynamic, dependent on the source */}
+                {/* <GitHub className="github-icon" /> */}
             </div>
             <div className="app-details-info-card__bottom-container dc__content-space">
                 <span className="app-details-info-card__bottom-container__message fs-12 fw-4">{commitMessage}</span>

src/components/app/details/appDetails/SourceInfo.tsx

@@ -1,6 +1,5 @@
-//@ts-nocheck
-
-import React, { useMemo } from 'react'
+// @ts-nocheck - @TODO: Remove this by fixing the type issues
+import React, { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { URLS } from '../../../../config'
 import { EnvSelector } from './AppDetails'
@@ -11,7 +10,7 @@ import { Nodes, SourceInfoType } from '../../types'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg'
 import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-dots.svg'
-import { ConditionalWrap, DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { ConditionalWrap, DeploymentAppTypes, showError } from '@devtron-labs/devtron-fe-common-lib'
 import DeploymentStatusCard from './DeploymentStatusCard'
 import { importComponentFromFELibrary } from '../../../common/helpers/Helpers'
 import DeploymentTypeIcon from '../../../common/DeploymentTypeIcon/DeploymentTypeIcon'
@@ -20,6 +19,7 @@ import DeployedCommitCard from './DeployedCommitCard'
 import IssuesCard from './IssuesCard'
 import SecurityVulnerabilityCard from './SecurityVulnerabilityCard'
 import AppStatusCard from './AppStatusCard'
+import { getLastExecutionByArtifactId } from '../../../../services/service'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
 
@@ -45,6 +45,7 @@ export function SourceInfo({
     ciArtifactId,
     setErrorsList,
 }: SourceInfoType) {
+    const [showVulnerabilitiesCard, setShowVulnerabilitiesCard] = useState<boolean>(false)
     const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
     const isArgoCdApp = appDetails?.deploymentAppType === DeploymentAppTypes.GITOPS
     const status = appDetails?.resourceTree?.status || ''
@@ -63,6 +64,30 @@ export function SourceInfo({
         message = Rollout[0].health.message
     }
 
+    const getScannedStatus = async () => {
+        const { appId, ciArtifactId } = appDetails
+        try {
+            const {
+                result: { scanEnabled, scanned },
+            } = await getLastExecutionByArtifactId(appId, ciArtifactId)
+            if (scanEnabled && scanned) {
+                // If scanEnabled and scanned is true, then show the vulnerabilities card
+                setShowVulnerabilitiesCard(true)
+            } else {
+                setShowVulnerabilitiesCard(false)
+            }
+        } catch (error) {
+            setShowVulnerabilitiesCard(false)
+            showError(error)
+        }
+    }
+
+    useEffect(() => {
+        if (appDetails?.ciArtifactId && appDetails?.appId) {
+            getScannedStatus()
+        }
+    }, [appDetails?.ciArtifactId, appDetails?.appId])
+
     const onClickShowCommitInfo = (): void => {
         showCommitInfo(true)
     }
@@ -218,17 +243,21 @@ export function SourceInfo({
                         isVirtualEnvironment={isVirtualEnvironment}
                         refetchDeploymentStatus={refetchDeploymentStatus}
                     />
-                    <DeployedCommitCard
-                        cardLoading={cardLoading}
-                        showCommitInfoDrawer={onClickShowCommitInfo}
-                        envId={envId}
-                        ciArtifactId={ciArtifactId}
-                    />
-                    <SecurityVulnerabilityCard
-                        cardLoading={cardLoading}
-                        severityCount={severityCount}
-                        showVulnerabilitiesModal={showVulnerabilitiesModal}
-                    />
+                    {appDetails?.dataSource !== 'EXTERNAL' && (
+                        <DeployedCommitCard
+                            cardLoading={cardLoading}
+                            showCommitInfoDrawer={onClickShowCommitInfo}
+                            envId={envId}
+                            ciArtifactId={ciArtifactId}
+                        />
+                    )}
+                    {!appDetails?.deploymentAppDeleteRequest && showVulnerabilitiesCard && (
+                        <SecurityVulnerabilityCard
+                            cardLoading={cardLoading}
+                            severityCount={severityCount}
+                            showVulnerabilitiesModal={showVulnerabilitiesModal}
+                        />
+                    )}
                     <div className="flex right ml-auto">
                         {appDetails?.appStoreChartId && (
                             <>