feat: add GitProviderIcon component and update related components to use it

Author: RohitRaj011

src/Common/Constants.ts

@@ -421,6 +421,7 @@ export enum GitProviderType {
     BITBUCKET = 'bitbucket',
     AZURE = 'azure',
     GITEA = 'gitea',
+    GIT = 'git',
 }
 
 /**

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -36,6 +36,7 @@ import {
     SourceTypeMap,
     createGitCommitUrl,
     DropdownIndicator,
+    GitProviderType,
 } from '../../../Common'
 import { ReactComponent as ICArrowBackward } from '../../../Assets/Icon/ic-arrow-backward.svg'
 import { ReactComponent as ICDocker } from '../../../Assets/Icon/ic-docker.svg'
@@ -46,6 +47,7 @@ import { statusColor as colorMap } from '../../constants'
 import { DeploymentStatus } from '../StatusComponent'
 import { Icon } from '../Icon'
 import { getTriggerStatusIcon } from './utils'
+import { GitProviderIcon } from '../GitProviderIcon'
 
 const SummaryTooltipCard = React.memo(
     ({
@@ -91,7 +93,7 @@ const SummaryTooltipCard = React.memo(
                                     </div>
                                 ) : (
                                     <>
-                                        <Icon name="ic-git" size={24} color={null} />
+                                        <GitProviderIcon gitProvider={GitProviderType.GIT} size={24} />
                                         <div className="flex left column">
                                             <a
                                                 href={createGitCommitUrl(gitMaterialUrl, gitDetail.Commit)}

src/Shared/Components/GitProviderIcon/GitProviderIcon.tsx

@@ -0,0 +1,17 @@
+import { GitProviderType } from '@Common/Constants'
+
+import { Icon, IconName } from '../Icon'
+import { GitProviderIconProps } from './types'
+
+const gitProviderIconMap: Record<GitProviderType, IconName> = {
+    [GitProviderType.GIT]: 'ic-git',
+    [GitProviderType.GITHUB]: 'ic-github',
+    [GitProviderType.GITLAB]: 'ic-gitlab',
+    [GitProviderType.BITBUCKET]: 'ic-bitbucket',
+    [GitProviderType.GITEA]: 'ic-git',
+    [GitProviderType.AZURE]: 'ic-azure',
+}
+
+export const GitProviderIcon = ({ gitProvider, size = 20 }: GitProviderIconProps) => (
+    <Icon name={gitProviderIconMap[gitProvider] || 'ic-git'} size={size} color={null} />
+)

src/Shared/Components/GitProviderIcon/index.ts

@@ -0,0 +1,2 @@
+export * from './GitProviderIcon'
+export * from './types'

src/Shared/Components/GitProviderIcon/types.ts

@@ -0,0 +1,12 @@
+import { GitProviderType } from '@Common/Constants'
+
+import { IconsProps } from '../Icon'
+
+export interface GitProviderIconProps {
+    gitProvider: GitProviderType
+    /**
+     * The size of the icon in pixels.
+     * @default 20
+     */
+    size?: IconsProps['size']
+}

src/Shared/Components/index.ts

@@ -79,3 +79,4 @@ export * from './UnsavedChangesDialog'
 export * from './Icon'
 export * from './StatusComponent'
 export * from './RegistryIcon'
+export * from './GitProviderIcon'