Merge branch 'main' into protection-config-dev

Author: shivani170

package.json

@@ -4,7 +4,10 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.43-beta-1",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.45",
+        "@rjsf/core": "^5.13.3",
+        "@rjsf/utils": "^5.13.3",
+        "@rjsf/validator-ajv8": "^5.13.3",
         "@sentry/browser": "^7.3.1",
         "@sentry/integrations": "^7.3.1",
         "@sentry/tracing": "^7.3.1",

src/assets/img/cluster-redirect.png

@@ -24,6 +24,9 @@ import { ReactComponent as ClusterOverviewIcon } from '../../assets/icons/cluste
 import { MAX_LENGTH_350, SOME_ERROR_MSG } from '../../config/constantMessaging'
 import ConnectingToClusterState from '../ResourceBrowser/ResourceList/ConnectingToClusterState'
 import { EditableTextArea } from '../common/EditableTextArea/EditableTextArea'
+import { importComponentFromFELibrary } from '../common'
+
+const Catalog = importComponentFromFELibrary('Catalog')
 
 function ClusterOverview({
     isSuperAdmin,
@@ -567,12 +570,13 @@ function ClusterOverview({
             return (
                 <div
                     className="pl-20 pt-20 pr-20 dc__column-gap-32 h-100 dc__overflow-auto flexbox flex-justify-center"
-                    style={{ backgroundImage: 'linear-gradient(249deg, #D4E6F7 0%,  var(--N50)50.58%)' }}
+                    style={{ backgroundImage: 'linear-gradient(249deg, #D4E6F7 0%, var(--N0)50.58%)' }}
                 >
                     {renderSideInfoData()}
-                    <div className="dc__mxw-1068 flex-grow-1">
+                    <div className="dc__mxw-1068 flex-grow-1 mw-none">
                         {renderCardDetails()}
                         {renderClusterError()}
+                        {Catalog && <Catalog resourceId={clusterId} resourceType="cluster" />}
                         <GenericDescription
                             isClusterTerminal={true}
                             clusterId={clusterId}

src/components/ClusterNodes/ClusterNodeContainer.tsx

@@ -42,7 +42,6 @@ export const JOB_LIST_HEADERS = {
     RUN_IN_ENVIRONMENT: 'RUN IN ENVIRONMENT'
 }
 
-export const YET_TO_RUN = 'Yet to run'
 export const JOBLIST_EMPTY_STATE_MESSAGING = {
     createJob: 'Create your first job',
     createJobInfoText:

src/components/ClusterNodes/ClusterOverview.tsx

@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom'
 import { ReactComponent as Expand } from '../../../assets/icons/ic-dropdown-filled.svg'
 import { ReactComponent as Settings } from '../../../assets/icons/ic-settings.svg'
 import { ExpandedRowProps, Job, JobCIPipeline } from '../Types'
-import AppStatus from '../../app/AppStatus'
 import './ExpandedRow.scss'
 import { URLS } from '../../../config'
 import { environmentName } from '../Utils'
 import { DEFAULT_ENV } from '../../app/details/triggerView/Constants'
+import { AppStatus } from '@devtron-labs/devtron-fe-common-lib'
 
 export default function ExpandedRow(props: ExpandedRowProps) {
     const handleEditJob = () => {

src/components/Jobs/Constants.ts

@@ -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/ExpandedRow/ExpandedRow.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { ErrorScreenManager, Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { AppStatus, ErrorScreenManager, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 import { Pagination } from '../../common'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Edit } from '../../../assets/icons/ic-settings.svg'
 import { ReactComponent as JobIcon } from '../../../assets/icons/ic-job-node.svg'
 import { ReactComponent as Arrow } from '../../../assets/icons/ic-dropdown-filled.svg'
 import { OrderBy, SortBy } from '../../app/list/types'
-import AppStatus from '../../app/AppStatus'
 import { Job, JobListViewProps } from '../Types'
 import { JobListViewType, JOB_LIST_HEADERS } from '../Constants'
 import ExpandedRow from '../ExpandedRow/ExpandedRow'

src/components/Jobs/JobDetails/JobDetails.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/Jobs/JobList/JobListView.tsx

@@ -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,
     }