feat: modification on chart registry && git provider icon method

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.19.0-pre-5",
+    "version": "1.19.0-beta-8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/CIPipeline.Types.ts

@@ -27,6 +27,7 @@ export interface MaterialType {
     gitProviderId: number
     regex?: string
     isRegex: boolean
+    url: string
 }
 
 export interface Githost {

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -18,7 +18,6 @@ import { useParams } from 'react-router-dom'
 
 import { ReactComponent as Down } from '@Icons/ic-arrow-forward.svg'
 import { ReactComponent as OpenInNew } from '@Icons/ic-arrow-out.svg'
-import docker from '@Icons/ic-docker.svg'
 import { ReactComponent as Download } from '@Icons/ic-download.svg'
 import folder from '@Icons/ic-folder.svg'
 import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg'
@@ -30,6 +29,7 @@ import { useDownload } from '@Shared/Hooks'
 import { ClipboardButton, extractImage, GenericEmptyState, ImageTagsContainer, useGetUserRoles } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
 import { DocLink } from '../DocLink'
+import { RegistryIcon } from '../RegistryIcon'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
 import { ArtifactType, CIListItemType } from './types'
@@ -62,6 +62,7 @@ export const CIListItem = ({
     renderCIListHeader,
     targetPlatforms,
     isDeploymentWithoutApproval,
+    artifact,
 }: CIListItemType) => {
     const showCIListHeader =
         !!renderCIListHeader &&
@@ -99,7 +100,11 @@ export const CIListItem = ({
             >
                 <div className="flex left dc__gap-12">
                     <div className="bcn-1 flex br-4 icon-dim-40">
-                        <img src={type === 'report' ? folder : docker} className="icon-dim-20" alt="type" />
+                        {type === 'report' ? (
+                            <img src={folder} width={20} height={20} alt="type" />
+                        ) : (
+                            <RegistryIcon registryUrl={artifact} />
+                        )}
                     </div>
                     {children}
                 </div>
@@ -228,6 +233,7 @@ const Artifacts = ({
                         isSuperAdmin={isSuperAdmin}
                         renderCIListHeader={renderCIListHeader}
                         targetPlatforms={targetPlatforms}
+                        artifact={artifact}
                     >
                         <div className="flex column left hover-trigger">
                             <div className="cn-9 fs-14 flex left" data-testid="artifact-text-visibility">

src/Shared/Components/CICDHistory/History.components.tsx

@@ -204,6 +204,7 @@ export const GitChanges = ({
                         renderCIListHeader={renderCIListHeader}
                         targetPlatforms={targetPlatforms}
                         isDeploymentWithoutApproval={isDeploymentWithoutApproval}
+                        artifact={artifact}
                     >
                         <div className="flex column left hover-trigger">
                             <div className="cn-9 fs-14 flex left">

src/Shared/Components/CICDHistory/types.tsx

@@ -435,6 +435,7 @@ export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDepl
               tagsEditable: boolean
               hideImageTaggingHardDelete: boolean
               isSuperAdmin: boolean
+              artifact: string
           }
         | {
               type: 'report'
@@ -448,6 +449,7 @@ export type CIListItemType = Pick<History, 'promotionApprovalMetadata' | 'isDepl
               tagsEditable?: never
               hideImageTaggingHardDelete?: never
               isSuperAdmin?: never
+              artifact?: never
           }
     )
 

src/Shared/Components/GitProviderIcon/utils.ts

@@ -18,6 +18,9 @@
 
 import { IconName } from '../Icon'
 
+export const isAWSCodeCommitURL = (url: string = ''): boolean =>
+    url.includes('git-codecommit.') && url.includes('.amazonaws.com')
+
 export const getGitIconName = (repoUrl: string): IconName => {
     if (repoUrl.includes(GitProviderType.GITHUB)) {
         return 'ic-github'
@@ -28,5 +31,12 @@
     if (repoUrl.includes(GitProviderType.BITBUCKET)) {
         return 'ic-bitbucket'
     }
+    if (repoUrl.includes(GitProviderType.AZURE)) {
+        return 'ic-azure'
+    }
+    if (isAWSCodeCommitURL(repoUrl)) {
+        return 'ic-aws-codecommit'
+    }
+
     return 'ic-git'
 }

src/Shared/Components/Icon/Icon.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as ICArrowsClockwise } from '@IconsV2/ic-arrows-clockwis
 import { ReactComponent as ICArrowsLeftRight } from '@IconsV2/ic-arrows-left-right.svg'
 import { ReactComponent as ICAsterisk } from '@IconsV2/ic-asterisk.svg'
 import { ReactComponent as ICAther } from '@IconsV2/ic-ather.svg'
+import { ReactComponent as ICAwsCodecommit } from '@IconsV2/ic-aws-codecommit.svg'
 import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
 import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg'
 import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg'
@@ -253,6 +254,7 @@ export const iconMap = {
     'ic-arrows-left-right': ICArrowsLeftRight,
     'ic-asterisk': ICAsterisk,
     'ic-ather': ICAther,
+    'ic-aws-codecommit': ICAwsCodecommit,
     'ic-azure-aks': ICAzureAks,
     'ic-azure': ICAzure,
     'ic-bg-cluster': ICBgCluster,

src/Shared/Components/RegistryIcon/RegistryIcon.tsx

@@ -34,6 +34,34 @@ const registryIconMap: Record<RegistryType, IconName> = {
     [RegistryType.OTHER]: 'ic-container-registry',
 }
 
-export const RegistryIcon = ({ registryType, size = 20 }: RegistryIconProps) => (
-    <Icon name={registryIconMap[registryType] || 'ic-container-registry'} size={size} color={null} />
+const getRegistryUrlIconName = (registryUrl: string): IconName => {
+    if (!registryUrl) return 'ic-container-registry'
+
+    const registryTypesToCheck: RegistryType[] = [
+        RegistryType.ECR,
+        RegistryType.GCR,
+        RegistryType.DOCKER_HUB,
+        RegistryType.DOCKER,
+        RegistryType.QUAY,
+        RegistryType.GITLAB,
+        RegistryType.GITHUB,
+        RegistryType.BITBUCKET,
+        RegistryType.ACR,
+        RegistryType.ARTIFACT_REGISTRY,
+    ]
+
+    const matchedType = registryTypesToCheck.find((type) => registryUrl.includes(type))
+
+    if (!matchedType) return 'ic-container-registry'
+
+    // Special case for Docker/DockerHub
+    return matchedType === RegistryType.DOCKER ? registryIconMap[RegistryType.DOCKER_HUB] : registryIconMap[matchedType]
+}
+
+export const RegistryIcon = ({ registryType, size = 20, registryUrl }: RegistryIconProps) => (
+    <Icon
+        name={registryType ? registryIconMap[registryType] : getRegistryUrlIconName(registryUrl)}
+        size={size}
+        color={null}
+    />
 )

src/Shared/Components/RegistryIcon/types.ts

@@ -18,11 +18,28 @@ import { RegistryType } from '@Shared/types'
 
 import { IconsProps } from '../Icon'
 
-export interface RegistryIconProps {
-    registryType: RegistryType
-    /**
-     * The size of the icon in pixels.
-     * @default 20
-     */
-    size?: IconsProps['size']
-}
+export type RegistryIconProps =
+    | {
+          registryType?: RegistryType
+          /**
+           * The size of the icon in pixels.
+           * @default 20
+           */
+          size?: IconsProps['size']
+          /**
+           * The registry URL to determine the icon.
+           */
+          registryUrl?: never
+      }
+    | {
+          registryType?: never
+          /**
+           * The size of the icon in pixels.
+           * @default 20
+           */
+          size?: IconsProps['size']
+          /**
+           * The registry URL to determine the icon.
+           */
+          registryUrl: string
+      }