fix: Isse in build context

Author: shivani170

src/components/ciConfig/BuildContext.tsx

@@ -17,7 +17,13 @@
 // Disabling for ReactSelect
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import { FunctionComponent, useEffect, useState } from 'react'
-import { CustomInput, OptionType, InfoIconTippy, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    CustomInput,
+    OptionType,
+    InfoIconTippy,
+    SelectPicker,
+    ComponentSizeType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { renderOptionIcon } from './CIBuildpackBuildOptions'
 import { BuildContextProps } from './types'
 import { ReactComponent as Dropdown } from '../../assets/icons/ic-chevron-down.svg'
@@ -178,6 +184,7 @@ const BuildContext: FunctionComponent<BuildContextProps> = ({
                             options={sourceConfig.material}
                             value={getSelectedBuildContextGitMaterial()}
                             onChange={handleBuildContextPathChange}
+                            size={ComponentSizeType.large}
                         />
 
                         {repositoryError && <label className="form__error">{repositoryError}</label>}
@@ -199,6 +206,7 @@ const BuildContext: FunctionComponent<BuildContextProps> = ({
                                 getOptionValue={(option) => `${option.value}`}
                                 value={getCheckoutPathValue(useRootBuildContextFlag)}
                                 onChange={handleBuildContextCheckoutPathChange}
+                                size={ComponentSizeType.large}
                             />
 
                             <CustomInput

src/components/ciConfig/CIConfig.tsx

@@ -17,11 +17,11 @@
 import React, { useState, useEffect } from 'react'
 import { showError, Progressing } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams } from 'react-router-dom'
-import { sortObjectArrayAlphabetically } from '../common'
+import { getGitProviderIcon, sortObjectArrayAlphabetically } from '../common'
 import { getDockerRegistryMinAuth } from './service'
 import { getSourceConfig, getCIConfig } from '../../services/service'
 import { ComponentStates } from '../../Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types'
-import { CIConfigProps } from './types'
+import { CIConfigProps, MaterialOptionType } from './types'
 import './CIConfig.scss'
 import CIConfigForm from './CIConfigForm'
 
@@ -53,6 +53,7 @@ export default function CIConfig({
         }
     }, [])
 
+
     async function initialise() {
         try {
             setLoading(true)
@@ -66,7 +67,18 @@ export default function CIConfig({
             sourceConfig &&
                 Array.isArray(sourceConfig.material) &&
                 sortObjectArrayAlphabetically(sourceConfig.material, 'name')
-            setSourceConfig(sourceConfig)
+                const _sourceConfig = { ...sourceConfig }
+                const sourceConfigMaterial = sourceConfig.material?.map((material: MaterialOptionType) => {
+                    console.log(material)
+                    return {
+                        ...material,
+                        label: material?.name,
+                        value: material?.id,
+                        startIcon: getGitProviderIcon(material.url),
+                    }
+                })
+                _sourceConfig.material = sourceConfigMaterial
+                setSourceConfig(_sourceConfig)
             setCIConfig(ciConfig)
 
             if (setParentState) {

src/components/ciConfig/CICreateDockerfileOption.tsx

@@ -21,7 +21,6 @@ import CreateDockerFileLanguageOptions from './CreateDockerFileLanguageOptions'
 import BuildContext from './BuildContext'
 import { RootBuildContext } from './ciConfigConstant'
 import { CICreateDockerfileOptionProps, FrameworkOptionType, LanguageOptionType, TemplateDataType } from './types'
-import { getGitProviderIcon } from '@Components/common'
 import { getSelectStartIcon } from './utils'
 
 export default function CICreateDockerfileOption({

src/components/common/helpers/utils.tsx

@@ -75,7 +75,7 @@ export const swap = (array: any[], indexA: number, indexB: number) => {
 
 export const getGitProviderIcon = (gitUrl: string): JSX.Element => {
     let IconComponent: React.ElementType = Git // Using React.ElementType for any JSX component
-
+    if(!gitUrl) return null
     if (gitUrl.includes('gitlab')) {
         IconComponent = GitLab
     } else if (gitUrl.includes('github')) {