feat: add support for multiple version control icons and improve rendering logic in CICD components

Author: AbhishekA1509

src/Assets/Icon/ic-aws-codecommit.svg

@@ -24,10 +24,9 @@ import { ReactComponent as ICArrowBackward } from '@Icons/ic-arrow-backward.svg'
 import { ReactComponent as ICDocker } from '@Icons/ic-docker.svg'
 import { ReactComponent as ICCalendar } from '@Icons/ic-calendar.svg'
 import { ReactComponent as ICUserCircle } from '@Icons/ic-user-circle.svg'
-import { ReactComponent as ICGithub } from '@Icons/ic-github.svg'
 import { ReactComponent as ICBranch } from '@Icons/ic-branch.svg'
 import { DeploymentStageType } from '@Shared/constants'
-import { getHandleOpenURL } from '@Shared/Helpers'
+import { getHandleOpenURL, renderMaterialIcon } from '@Shared/Helpers'
 import {
     SidebarType,
     CICDSidebarFilterOptionType,
@@ -83,6 +82,7 @@ const GitTriggerList = memo(
                     if (sourceType !== SourceTypeMap.WEBHOOK && !gitDetail) {
                         return null
                     }
+
                     return (
                         <div className={`${addMarginTop ? 'mt-22' : ''} ci-material-detail"`} key={ciMaterial.id}>
                             {sourceType === SourceTypeMap.WEBHOOK ? (
@@ -96,7 +96,7 @@ const GitTriggerList = memo(
                             ) : (
                                 <div className="flexbox-col dc__gap-8">
                                     <div className="flexbox dc__gap-4 dc__align-start">
-                                        <ICGithub className="icon-dim-20 dc__no-shrink" />
+                                        {renderMaterialIcon(gitDetail?.GitRepoName)}
 
                                         {gitDetail?.GitRepoName && (
                                             <>
@@ -111,7 +111,7 @@ const GitTriggerList = memo(
                                         )}
 
                                         <a
-                                            href={createGitCommitUrl(gitMaterialUrl, gitDetail.Commit)}
+                                            href={createGitCommitUrl(gitMaterialUrl, gitDetail?.Commit)}
                                             target="_blank"
                                             rel="noopener noreferrer"
                                             className="anchor flexbox dc__gap-2 dc__align-items-center"

src/Assets/Icon/ic-bitbucket.svg

@@ -157,7 +157,6 @@ export const WorkerStatus = React.memo(
                     <div className="flexbox dc__gap-8">
                         <div className={`flexbox cn-9 ${titleClassName}`}>
                             <span>{stage === DeploymentStageType.DEPLOY && !podStatus ? 'Message' : 'Worker'}</span>
-                            &nbsp;
                             {podStatus && (
                                 <span>
                                     :&nbsp;{WORKFLOW_STAGE_STATUS_TO_TEXT_MAP[podStatus] || podStatus.toLowerCase()}

src/Assets/Icon/ic-git.svg

@@ -16,6 +16,7 @@
 
 /* eslint-disable no-param-reassign */
 import { useEffect, useRef, useState, ReactElement } from 'react'
+import { PromptProps } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 import { Pair } from 'yaml'
 import moment from 'moment'
@@ -25,7 +26,11 @@ import { MaterialHistoryType } from '@Shared/Services/app.types'
 import { ReactComponent as ICPullRequest } from '@Icons/ic-pull-request.svg'
 import { ReactComponent as ICTag } from '@Icons/ic-tag.svg'
 import { ReactComponent as ICWebhook } from '@Icons/ic-webhook.svg'
-import { PromptProps } from 'react-router-dom'
+import { ReactComponent as ICGithub } from '@Icons/ic-github.svg'
+import { ReactComponent as ICGitlab } from '@Icons/ic-gitlab.svg'
+import { ReactComponent as ICGit } from '@Icons/ic-git.svg'
+import { ReactComponent as ICBitbucket } from '@Icons/ic-bitbucket.svg'
+import { ReactComponent as ICAWSCodeCommit } from '@Icons/ic-aws-codecommit.svg'
 import {
     handleUTCTime,
     ManualApprovalType,
@@ -1004,3 +1009,27 @@ export const sanitizeTargetPlatforms = (
 
     return uniquePlatforms
 }
+
+// Should contain git-codecommit.*.amazonaws.com
+export const isAWSCodeCommitURL = (url: string = ''): boolean =>
+    url.includes('git-codecommit.') && url.includes('.amazonaws.com')
+
+export const renderMaterialIcon = (url: string = '') => {
+    if (url.includes('gitlab')) {
+        return <ICGitlab className="dc__vertical-align-middle icon-dim-20" />
+    }
+
+    if (url.includes('github')) {
+        return <ICGithub className="dc__vertical-align-middle icon-dim-20 fcn-8" />
+    }
+
+    if (url.includes('bitbucket')) {
+        return <ICBitbucket className="dc__vertical-align-middle icon-dim-20" />
+    }
+
+    if (isAWSCodeCommitURL(url)) {
+        return <ICAWSCodeCommit className="dc__vertical-align-middle icon-dim-18" />
+    }
+
+    return <ICGit className="dc__vertical-align-middle icon-dim-20" />
+}