feat: [CDE-285]: added fallback icon for repoType (#2633)

* feat: [CDE-285]: added fallback icon for repoType

web/src/cde-gitness/components/GitspaceListing/ListGitspaces.tsx

@@ -34,7 +34,6 @@ import { Intent, Menu, MenuItem, PopoverInteractionKind, Position } from '@bluep
 import { useHistory } from 'react-router-dom'
 import type { IconName } from '@harnessio/icons'
 import moment from 'moment'
-import { defaultTo } from 'lodash-es'
 import RegionIcon from 'cde-gitness/assests/globe.svg?url'
 import { UseStringsReturn, useStrings } from 'framework/strings'
 import { useAppContext } from 'AppContext'
@@ -42,7 +41,7 @@ import { getErrorMessage } from 'utils/Utils'
 import { useConfirmAct } from 'hooks/useConfirmAction'
 import VSCode from 'cde-gitness/assests/VSCode.svg?url'
 import { GitspaceActionType, GitspaceStatus } from 'cde-gitness/constants'
-import type { EnumGitspaceStateType, EnumIDEType, TypesGitspaceConfig, EnumGitspaceCodeRepoType } from 'services/cde'
+import type { EnumGitspaceStateType, EnumIDEType, TypesGitspaceConfig } from 'services/cde'
 import gitspaceIcon from 'cde-gitness/assests/gitspace.svg?url'
 import { useModalHook } from 'hooks/useModalHook'
 import pause from 'cde-gitness/assests/pause.svg?url'
@@ -52,14 +51,9 @@ import vsCodeWebIcon from 'cde-gitness/assests/vsCodeWeb.svg?url'
 import { useGitspaceActions } from 'cde-gitness/hooks/useGitspaceActions'
 import { useDeleteGitspaces } from 'cde-gitness/hooks/useDeleteGitspaces'
 import { useOpenVSCodeBrowserURL } from 'cde-gitness/hooks/useOpenVSCodeBrowserURL'
-import { scmOptions } from 'cde-gitness/pages/GitspaceCreate/CDECreateGitspace'
+import { getIconByRepoType } from 'cde-gitness/utils/SelectRepository.utils'
 import css from './ListGitspaces.module.scss'
 
-const getIconByRepoType = ({ repoType }: { repoType?: EnumGitspaceCodeRepoType }): React.ReactNode => {
-  const scmOption = scmOptions.find(option => option.value === repoType)
-  return <img height={24} width={24} src={defaultTo(scmOption?.icon, '')} style={{ marginRight: '10px' }} />
-}
-
 export const getStatusColor = (status?: EnumGitspaceStateType) => {
   switch (status) {
     case GitspaceStatus.RUNNING:
@@ -197,7 +191,7 @@ export const RenderRepository: Renderer<CellProps<TypesGitspaceConfig>> = ({ row
         spacing={'small'}
         flex={{ alignItems: 'center', justifyContent: 'start' }}>
         <Container height={24} width={24}>
-          {getIconByRepoType({ repoType: code_repo_type })}
+          {getIconByRepoType({ repoType: code_repo_type, height: 24 })}
         </Container>
         <Text lineClamp={1} color={Color.PRIMARY_7} title={name} font={{ align: 'left', size: 'normal' }}>
           {name}

web/src/cde-gitness/components/SelectIDE/SelectIDE.tsx

@@ -72,7 +72,7 @@ export const SelectIDE = () => {
                   text={
                     <Layout.Vertical spacing="small">
                       <Text font={{ size: 'normal', weight: 'bold' }}>{label}</Text>
-                      <Text font="small">1.2.3</Text>
+                      <Text font="small">1.81.0</Text>
                     </Layout.Vertical>
                   }
                   onClick={() => {

web/src/cde-gitness/pages/GitspaceCreate/CDECreateGitspace.tsx

@@ -26,6 +26,7 @@ import { getErrorMessage } from 'utils/Utils'
 import { GitspaceSelect } from 'cde-gitness/components/GitspaceSelect/GitspaceSelect'
 import harnessCode from 'cde-gitness/assests/harnessCode.svg?url'
 import genericGit from 'cde-gitness/assests/genericGit.svg?url'
+import gitnessIcon from 'cde-gitness/assests/gitness.svg?url'
 import github from 'cde-gitness/assests/github.svg?url'
 import gitlab from 'cde-gitness/assests/gitlab.svg?url'
 import bitbucket from 'cde-gitness/assests/bitbucket.svg?url'
@@ -58,6 +59,14 @@ export interface RepoQueryParams {
 }
 
 export const scmOptions: SCMType[] = [
+  { name: 'Harness Code', value: EnumGitspaceCodeRepoType.HARNESS_CODE, icon: harnessCode },
+  { name: 'GitHub Cloud', value: EnumGitspaceCodeRepoType.GITHUB, icon: github },
+  { name: 'GitLab Cloud', value: EnumGitspaceCodeRepoType.GITLAB, icon: gitlab },
+  { name: 'Bitbucket', value: EnumGitspaceCodeRepoType.BITBUCKET, icon: bitbucket },
+  { name: 'Any public Git repository', value: EnumGitspaceCodeRepoType.UNKNOWN, icon: genericGit },
+  { name: 'Gitness', value: EnumGitspaceCodeRepoType.GITNESS, icon: gitnessIcon }
+]
+export const scmOptionsCDE: SCMType[] = [
   { name: 'Harness Code', value: EnumGitspaceCodeRepoType.HARNESS_CODE, icon: harnessCode },
   { name: 'GitHub Cloud', value: EnumGitspaceCodeRepoType.GITHUB, icon: github },
   { name: 'GitLab Cloud', value: EnumGitspaceCodeRepoType.GITLAB, icon: gitlab },
@@ -145,7 +154,7 @@ export const CDECreateGitspace = () => {
       formName="importRepoForm"
       enableReinitialize>
       {formik => {
-        const scmOption = scmOptions.find(item => item.value === formik.values.code_repo_type) as SCMType
+        const scmOption = scmOptionsCDE.find(item => item.value === formik.values.code_repo_type) as SCMType
         return (
           <>
             <Layout.Horizontal
@@ -174,7 +183,7 @@ export const CDECreateGitspace = () => {
                     }
                     renderMenu={
                       <Menu>
-                        {scmOptions.map(item => (
+                        {scmOptionsCDE.map(item => (
                           <MenuItem
                             active={item.name === scmOption.name}
                             key={item.name}

web/src/cde-gitness/utils/SelectRepository.utils.tsx

@@ -15,9 +15,10 @@
  */
 
 import React from 'react'
-import { Bitbucket as BitbucketIcon, Code, GitLabFull, GithubCircle } from 'iconoir-react'
-import type { EnumCodeRepoType } from 'services/cde'
+import { defaultTo } from 'lodash-es'
 import type { EnumGitspaceCodeRepoType } from 'cde-gitness/services'
+import genericGit from 'cde-gitness/assests/genericGit.svg?url'
+import { scmOptions } from 'cde-gitness/pages/GitspaceCreate/CDECreateGitspace'
 
 export const isValidUrl = (url: string) => {
   const urlPattern = new RegExp(
@@ -58,20 +59,11 @@ export const getIconByRepoType = ({
   repoType,
   height = 40
 }: {
-  repoType?: EnumCodeRepoType | EnumGitspaceCodeRepoType
+  repoType?: EnumGitspaceCodeRepoType
   height?: number
 }): React.ReactNode => {
-  switch (repoType) {
-    case CodeRepoType.Github:
-      return <GithubCircle height={height} />
-    case CodeRepoType.Gitlab:
-      return <GitLabFull height={height} />
-    case CodeRepoType.Bitbucket:
-      return <BitbucketIcon height={height} />
-    default:
-    case CodeRepoType.Unknown:
-    case CodeRepoType.HarnessCode:
-    case 'harness_code':
-      return <Code height={height} />
-  }
+  const scmOption = scmOptions.find(option => option.value === repoType)
+  return (
+    <img height={height} width={height} src={defaultTo(scmOption?.icon, genericGit)} style={{ marginRight: '10px' }} />
+  )
 }