feat: cosmetic changes in design

Ash-exp · Ash-exp · commit a8fe5a24de25 · 2023-09-28T19:18:11.000+05:30
diff --git a/src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx b/src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx
@@ -17,6 +17,7 @@ import { getTriggerHistory } from '../../../app/service'
 import { asyncWrap, mapByKey, useAsync, useInterval } from '../../../common'
 import { getCIConfigList } from '../../AppGroup.service'
 import { AppGroupDetailDefaultType } from '../../AppGroup.types'
+import { CIPipelineBuildType } from '../../../ciPipeline/types'
 
 export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultType) {
     const { envId, pipelineId, buildId } = useParams<{
@@ -181,7 +182,7 @@ export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultTy
         replace(generatePath(path, { buildId: triggerHistory.entries().next().value[0], envId, pipelineId }))
     }
     const pipelineOptions: CICDSidebarFilterOptionType[] = (pipelineList || []).map((item) => {
-        return { value: `${item.id}`, label: item.appName, pipelineId: item.id }
+        return { value: `${item.id}`, label: item.appName, pipelineId: item.id, pipelineType: item.pipelineType }
     })
     const pipelinesMap = mapByKey(pipelineList, 'id')
     const pipeline = pipelinesMap.get(+pipelineId)
@@ -205,6 +206,7 @@ export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultTy
                         tagsEditable={tagsEditable}
                         hideImageTaggingHardDelete={hideImageTaggingHardDelete}
                         fetchIdData={fetchBuildIdData}
+                        isJobCI={pipeline.pipelineType === CIPipelineBuildType.CI_JOB}
                     />
                 </Route>
             )
diff --git a/src/components/CIPipelineN/CIPipeline.tsx b/src/components/CIPipelineN/CIPipeline.tsx
@@ -182,7 +182,16 @@ export default function CIPipeline({
         ) {
             localStorage.removeItem('takeMeThereClicked')
         }
-    }, [location.pathname])
+        // redirect to ci-job based on pipeline type
+        if (
+            location.pathname.includes(`/${URLS.APP_CI_CONFIG}/`) &&
+            ciPipelineId &&
+            ciPipeline.pipelineType === CIPipelineBuildType.CI_JOB 
+        ) {
+            const editCIPipelineURL: string = location.pathname.replace(`/${URLS.APP_CI_CONFIG}/`, `/${URLS.APP_JOB_CI_CONFIG}/`)
+            window.location.href =  editCIPipelineURL
+        }
+    }, [location.pathname, ciPipeline.pipelineType])
 
     const getEnvironments = (envId) => {
         envId = envId || 0
diff --git a/src/components/app/details/cIDetails/CIDetails.tsx b/src/components/app/details/cIDetails/CIDetails.tsx
@@ -22,6 +22,7 @@ import LogsRenderer from '../cicdHistory/LogsRenderer'
 import { EMPTY_STATE_STATUS } from '../../../../config/constantMessaging'
 import { ReactComponent as NoVulnerability } from '../../../../assets/img/ic-vulnerability-not-found.svg'
 import { ScannedByToolModal } from '../../../common/security/ScannedByToolModal'
+import { CIPipelineBuildType } from '../../../ciPipeline/types'
 
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
 let statusSet = new Set(['starting', 'running', 'pending'])
@@ -156,7 +157,7 @@ export default function CIDetails({ isJobView }: { isJobView?: boolean }) {
         replace(generatePath(path, { appId, pipelineId: pipelines[0].id }))
     }
     const pipelineOptions: CICDSidebarFilterOptionType[] = (pipelines || []).map((item) => {
-        return { value: `${item.id}`, label: item.name, pipelineId: item.id }
+        return { value: `${item.id}`, label: item.name, pipelineId: item.id, pipelineType: item.pipelineType}
     })
     const pipelinesMap = mapByKey(pipelines, 'id')
     const pipeline = pipelinesMap.get(+pipelineId)
@@ -221,6 +222,7 @@ export default function CIDetails({ isJobView }: { isJobView?: boolean }) {
                                             appReleaseTags={appReleaseTags}
                                             hideImageTaggingHardDelete={hideImageTaggingHardDelete}
                                             fetchIdData={fetchBuildIdData}
+                                            isJobCI={pipeline.pipelineType === CIPipelineBuildType.CI_JOB}
                                         />
                                     </Route>
                                 ) : pipeline.parentCiPipeline || pipeline.pipelineType === 'LINKED' ? (
@@ -259,12 +261,14 @@ export const Details = ({
     isSecurityModuleInstalled,
     isBlobStorageConfigured,
     isJobView,
+    isJobCI,
     appIdFromParent,
     tagsEditable,
     appReleaseTags,
     hideImageTaggingHardDelete,
     fetchIdData,
 }: BuildDetails) => {
+    const isJobCard: boolean = isJobView || isJobCI
     const { pipelineId, appId, buildId } = useParams<{ appId: string; buildId: string; pipelineId: string }>()
     const triggerDetails = triggerHistory.get(+buildId)
     const [triggerDetailsLoading, triggerDetailsResult, triggerDetailsError, reloadTriggerDetails] = useAsync(
@@ -403,7 +407,7 @@ export const Details = ({
                                     Artifacts
                                 </NavLink>
                             </li>
-                            {!isJobView && isSecurityModuleInstalled && (
+                            {!isJobCard && isSecurityModuleInstalled && (
                                 <li className="tab-list__tab">
                                     <NavLink
                                         replace
@@ -425,6 +429,7 @@ export const Details = ({
                 triggerDetails={triggerDetails}
                 isBlobStorageConfigured={isBlobStorageConfigured}
                 isJobView={isJobView}
+                isJobCI={isJobCI}
                 appIdFromParent={appIdFromParent}
                 appReleaseTags={appReleaseTags}
                 tagsEditable={tagsEditable}
@@ -438,12 +443,14 @@ const HistoryLogs = ({
     triggerDetails,
     isBlobStorageConfigured,
     isJobView,
+    isJobCI,
     appIdFromParent,
     appReleaseTags,
     tagsEditable,
     hideImageTaggingHardDelete,
 }: HistoryLogsType) => {
     let { path } = useRouteMatch()
+    const isJobCard: boolean = isJobCI || isJobView
     const { pipelineId, buildId } = useParams<{ buildId: string; pipelineId: string }>()
     const [ref, scrollToTop, scrollToBottom] = useScrollable({
         autoBottomScroll: triggerDetails.status.toLowerCase() !== 'succeeded',
@@ -479,6 +486,7 @@ const HistoryLogs = ({
                         getArtifactPromise={_getArtifactPromise}
                         isArtifactUploaded={triggerDetails.isArtifactUploaded}
                         isJobView={isJobView}
+                        isJobCI={isJobCI}
                         imageComment={triggerDetails.imageComment}
                         imageReleaseTags={triggerDetails.imageReleaseTags}
                         ciPipelineId={triggerDetails.ciPipelineId}
@@ -489,7 +497,7 @@ const HistoryLogs = ({
                         type={HistoryComponentType.CI}
                     />
                 </Route>
-                {!isJobView && (
+                {!isJobCard && (
                     <Route path={`${path}/security`}>
                         <SecurityTab
                             ciPipelineId={triggerDetails.ciPipelineId}
diff --git a/src/components/app/details/cIDetails/types.tsx b/src/components/app/details/cIDetails/types.tsx
@@ -14,6 +14,7 @@ export interface BuildDetails {
     isSecurityModuleInstalled: boolean
     isBlobStorageConfigured: boolean
     isJobView?: boolean
+    isJobCI?: boolean
     appIdFromParent?: string
     appReleaseTags?: []
     tagsEditable: boolean
@@ -25,6 +26,7 @@ export interface HistoryLogsType {
     triggerDetails: History
     isBlobStorageConfigured?: boolean
     isJobView?: boolean
+    isJobCI?: boolean
     appIdFromParent?: string
     appReleaseTags?: []
     tagsEditable: boolean
diff --git a/src/components/app/details/cicdHistory/Artifacts.tsx b/src/components/app/details/cicdHistory/Artifacts.tsx
@@ -29,6 +29,7 @@ export default function Artifacts({
     ciPipelineId,
     artifactId,
     isJobView,
+    isJobCI,
     imageComment,
     imageReleaseTags,
     type,
@@ -94,12 +95,29 @@ export default function Artifacts({
         status.toLowerCase() === TERMINAL_STATUS_MAP.FAILED ||
         status.toLowerCase() === TERMINAL_STATUS_MAP.CANCELLED
     ) {
+        if (isJobCI) {
+            return (
+                <GenericEmptyState
+                    title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.FailedToFetchArtifacts}
+                    subTitle={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.FailedToFetchArtifactsError}
+                />
+            ) 
+        }
+
         return (
             <GenericEmptyState
                 title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsGenerated}
                 subTitle={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsError}
             />
         )
+    } else if (!artifactId && status.toLowerCase() === TERMINAL_STATUS_MAP.SUCCEEDED) {
+        return (
+            <GenericEmptyState
+                title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsFound}
+                subTitle={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsFoundError}
+                image={noartifact}
+            />
+        )
     } else {
         return (
             <div className="flex left column p-16">
diff --git a/src/components/app/details/cicdHistory/Sidebar.tsx b/src/components/app/details/cicdHistory/Sidebar.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import { ConditionalWrap, createGitCommitUrl } from '../../../common'
 import { useRouteMatch, useParams, useHistory, generatePath, useLocation } from 'react-router'
-import ReactSelect from 'react-select'
-import { Option, DropdownIndicator } from '../../../v2/common/ReactSelect.utils'
+import ReactSelect, { components } from 'react-select'
+import { DropdownIndicator, getCustomOptionSelectionStyle } from '../../../v2/common/ReactSelect.utils'
 import moment from 'moment'
 import { Moment12HourFormat, SourceTypeMap } from '../../../../config'
 import { CiPipelineSourceConfig } from '../../../ciPipeline/CiPipelineSourceConfig'
@@ -87,6 +87,27 @@ const Sidebar = React.memo(
                 return HISTORY_LABEL.ENVIRONMENT
             }
         }
+
+        const containerRegistryOption = (props): JSX.Element => {
+            props.selectProps.styles.option = getCustomOptionSelectionStyle()
+            console.log(props.data.pipelineType?.toLowerCase())
+            return (
+                <components.Option {...props}>
+                    <div style={{ display: 'flex' }}>
+                        {(type === HistoryComponentType.CI || type === HistoryComponentType.GROUP_CI) && (
+                            <div
+                                className={
+                                    'dc__ci-pipeline-type-icon mr-5 ' +
+                                        props.data.pipelineType?.toLowerCase() || ''
+                                }
+                            ></div>
+                        )}
+                        {props.label}
+                    </div>
+                </components.Option>
+            )
+        }
+
         return (
             <>
                 <div
@@ -109,8 +130,8 @@ const Sidebar = React.memo(
                         onChange={handleFilterChange}
                         components={{
                             IndicatorSeparator: null,
+                            Option: containerRegistryOption,
                             DropdownIndicator,
-                            Option,
                         }}
                         styles={FILTER_STYLE}
                         menuPortalTarget={document.body}
diff --git a/src/components/app/details/cicdHistory/types.tsx b/src/components/app/details/cicdHistory/types.tsx
@@ -74,6 +74,7 @@ export interface ArtifactType {
     isArtifactUploaded?: boolean
     getArtifactPromise?: () => Promise<any>
     isJobView?: boolean
+    isJobCI?: boolean
     type: HistoryComponentType
     ciPipelineId?: number
     artifactId?: number
@@ -247,6 +248,7 @@ export interface StartDetailsType {
 
 export interface CICDSidebarFilterOptionType extends OptionType {
     pipelineId: number
+    pipelineType?: string
     deploymentAppDeleteRequest?: boolean
 }
 
diff --git a/src/config/constantMessaging.ts b/src/config/constantMessaging.ts
@@ -210,6 +210,10 @@ export const EMPTY_STATE_STATUS = {
         NoFilesGenerated: 'No files were generated by the job pipeline.',
         NoArtifactsGenerated: 'No artifacts generated',
         NoArtifactsError: 'Errr..!! We couldn’t build your code.',
+        FailedToFetchArtifacts: 'Fail to find artifacts',
+        FailedToFetchArtifactsError: 'Errr..!! The pipeline execution failed',
+        NoArtifactsFound: 'No new artifacts found',
+        NoArtifactsFoundError: 'No new artifacts were found',
     },
     CI_BUILD_HISTORY_PIPELINE_TRIGGER: {
         TITLE: 'pipeline not triggered',
diff --git a/src/css/base.scss b/src/css/base.scss
@@ -2170,6 +2170,21 @@ button.anchor {
     }
 }
 
+.dc__ci-pipeline-type-icon {
+    width: 20px;
+    height: 20px;
+    background-size: contain;
+    background-image: url('../assets/icons/ic-CI.svg');
+
+    &.normal {
+        background-image: url('../assets/icons/ic-CI.svg');
+    }
+
+    &.ci_job {
+        background-image: url('../assets/icons/ic-job-node.svg');
+    }
+}
+
 .dc__environment-icon {
     width: 18px;
     height: 18px;
