chore: updated value type in environment list of build cd

Author: shivani170

src/components/CIPipelineN/EnvironmentList.tsx

@@ -22,7 +22,7 @@ import {
     SelectPickerVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { createClusterEnvGroup } from '../common'
-import { EnvironmentListType } from './types'
+import { EnvironmentListType, EnvironmentWithSelectPickerType } from './types'
 import { GroupBase } from 'react-select'
 
 export const EnvironmentList = ({
@@ -41,7 +41,7 @@ export const EnvironmentList = ({
 
     const envList = createClusterEnvGroup(environments as Environment[], 'clusterName')
 
-    const getEnvListOptions = (): GroupBase<SelectPickerOptionType<Environment>>[] =>
+    const getEnvListOptions = (): GroupBase<EnvironmentWithSelectPickerType>[] =>
         envList.reduce((acc, _elm) => {
             if (_elm.label) {
                 return [
@@ -71,11 +71,11 @@ export const EnvironmentList = ({
             ]
         }, [])
 
-    const getSelectedEnvironment = (): SelectPickerOptionType<Environment> => {
-        let _selectedEnv: SelectPickerOptionType<Environment> = {
+    const getSelectedEnvironment = (): EnvironmentWithSelectPickerType => {
+        let _selectedEnv: EnvironmentWithSelectPickerType = {
             ...selectedEnv,
             label: selectedEnv?.name,
-            value: selectedEnv, // assuming the whole object is set as value
+            value: selectedEnv?.id, // assuming the whole object is set as value
             startIcon: !isBuildStage ? <div className="dc__environment-icon" /> : null,
         }
 
@@ -96,7 +96,7 @@ export const EnvironmentList = ({
         >
             <div className={`${!isBuildStage ? 'w-250 dc__align-items-center flex left' : ''}`}>
                 {getEnvironmentSelectLabel()}
-                <SelectPicker<Environment, false>
+                <SelectPicker
                     required
                     inputId="job-pipeline-environment-dropdown"
                     name="job-pipeline-environment-dropdown"

src/components/CIPipelineN/types.ts

@@ -20,6 +20,7 @@ import {
     StepType,
     PipelineFormType,
     Environment,
+    SelectPickerOptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ExtendedOptionType } from '@Components/app/types'
 
@@ -102,10 +103,11 @@ export interface InputPluginSelectionType {
     selectedVariableIndex: number
 }
 
+export interface EnvironmentWithSelectPickerType extends Environment, SelectPickerOptionType {}
 export interface EnvironmentListType {
     isBuildStage?: boolean
-    environments: Environment[]
-    selectedEnv: Environment
-    setSelectedEnv?: React.Dispatch<React.SetStateAction<Environment>>
+    environments: EnvironmentWithSelectPickerType[]
+    selectedEnv: EnvironmentWithSelectPickerType
+    setSelectedEnv?: React.Dispatch<React.SetStateAction<EnvironmentWithSelectPickerType>>
     isBorderLess?: boolean
 }

src/components/app/details/triggerView/types.ts

@@ -43,6 +43,7 @@ import {
     Environment,
 } from '@devtron-labs/devtron-fe-common-lib'
 import React from 'react'
+import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
 import { HostURLConfig } from '../../../../services/service.types'
 import { DeploymentHistoryDetail } from '../cdDetails/cd.type'
 import { WorkflowDimensions } from './config'
@@ -222,8 +223,8 @@ export interface CIMaterialProps extends RouteComponentProps<CIMaterialRouterPro
         action: any
         metadataField: string
     }
-    selectedEnv?: Environment
-    setSelectedEnv?: React.Dispatch<React.SetStateAction<Environment>>
+    selectedEnv?: EnvironmentWithSelectPickerType
+    setSelectedEnv?: React.Dispatch<React.SetStateAction<EnvironmentWithSelectPickerType>>
     environmentLists?: any[]
     isJobCI?: boolean
     handleRuntimeParamChange: HandleRuntimeParamChange

src/components/cdPipeline/BuildCD.tsx

@@ -61,7 +61,7 @@ import { ReactComponent as ICInfo } from '../../assets/icons/ic-info-filled.svg'
 
 import PullImageDigestToggle from './PullImageDigestToggle'
 import { PipelineFormDataErrorType } from '@Components/workflowEditor/types'
-import { GroupBase } from 'react-select'
+import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
 
 const VirtualEnvSelectionInfoText = importComponentFromFELibrary('VirtualEnvSelectionInfoText')
 const HelmManifestPush = importComponentFromFELibrary('HelmManifestPush')
@@ -149,7 +149,7 @@ export default function BuildCD({
         setFormData(_form)
     }
 
-    const selectEnvironment = (selection: Environment): void => {
+    const selectEnvironment = (selection: EnvironmentWithSelectPickerType): void => {
         const _form = { ...formData, deploymentAppName: '' }
         const _formDataErrorObj = { ...formDataErrorObj }
 
@@ -378,9 +378,10 @@ export default function BuildCD({
     const renderEnvSelector = () => {
         const envId = formData.environmentId
         const _environment = formData.environments.find((env) => env.id == envId)
-        const selectedEnv = {
-            label: _environment?.name,
-            value: _environment,
+        const selectedEnv: EnvironmentWithSelectPickerType = _environment &&{
+            ..._environment,
+            label: _environment.name,
+            value: _environment.id.toString(),
         }
         const envList = createClusterEnvGroup(formData.environments as Environment[], 'clusterName')
 
@@ -390,18 +391,19 @@ export default function BuildCD({
             }
         }
 
-        const getEnvListOptions = (): GroupBase<SelectPickerOptionType<Environment>>[] =>
+        const getEnvListOptions = () =>
             envList.map((_elm) => ({
                 label: `Cluster: ${_elm.label}`,
                 options: _elm.options.map((_option) => ({
+                    ..._option,
                     label: _option?.name,
-                    value: _option,
+                    value: _option?.id.toString(),
                 })),
             }))
 
         return (
             <>
-                <SelectPicker<Environment, false>
+                <SelectPicker
                     label="Environment"
                     required
                     inputId="environment"
@@ -413,13 +415,13 @@ export default function BuildCD({
                     options={
                         releaseMode === ReleaseMode.MIGRATE_HELM
                             ? getEnvListOptions().filter((env) =>
-                                  env.options.filter(({ value }) => !value.isVirtualEnvironment),
+                                  env.options.filter((_env) => !_env.isVirtualEnvironment),
                               )
                             : getEnvListOptions()
                     }
                     value={selectedEnv}
-                    getOptionValue={(option) => option.value?.id as unknown as string}
-                    onChange={(selected) => selectEnvironment(selected.value)}
+                    getOptionValue={(option) => option.value as unknown as string}
+                    onChange={selectEnvironment}
                     size={ComponentSizeType.large}
                 />
                 {isEnvUsedState && (

src/components/ciConfig/CIConfigForm.tsx

@@ -74,9 +74,9 @@ export default function CIConfigForm({
                 )
               : sourceConfig.material[0]
 
-    const getCurrentMaterial = (): SelectedGitMaterialType => {
+    const getParsedCurrentMaterial = (material?): SelectedGitMaterialType => {
         const _currentMaterial: SelectedGitMaterialType = {
-            ...currentMaterial,
+            ...(material ? material : currentMaterial),
             value: currentMaterial.checkoutPath,
             label: currentMaterial.name,
             startIcon: getGitProviderIcon(currentMaterial.url),
@@ -87,14 +87,14 @@ export default function CIConfigForm({
     const getParsedSourceConfig = (): SourceConfigType => {
         const _sourceConfig = { ...sourceConfig }
         _sourceConfig.material = _sourceConfig.material.map((_material) => {
-            return { ..._material, value: _material.checkoutPath, label: _material.name, startIcon: getGitProviderIcon(_material.url) }
+            return getParsedCurrentMaterial(_material)
         })
         return _sourceConfig
     }
 
-    const currentBuildContextGitMaterial = buildCtxGitMaterial || getCurrentMaterial()
+    const currentBuildContextGitMaterial = buildCtxGitMaterial || getParsedCurrentMaterial()
 
-    const [selectedMaterial, setSelectedMaterial] = useState<SelectedGitMaterialType>(getCurrentMaterial)
+    const [selectedMaterial, setSelectedMaterial] = useState<SelectedGitMaterialType>(getParsedCurrentMaterial)
     const [selectedBuildContextGitMaterial, setSelectedBuildContextGitMaterial] =
         useState(currentBuildContextGitMaterial)
     const currentRegistry =
@@ -360,7 +360,7 @@ export default function CIConfigForm({
                     configOverrideView={configOverrideView}
                     allowOverride={allowOverride}
                     selectedCIPipeline={selectedCIPipeline}
-                    currentMaterial={getCurrentMaterial()}
+                    currentMaterial={getParsedCurrentMaterial()}
                     currentBuildContextGitMaterial={currentBuildContextGitMaterial}
                     selectedMaterial={selectedMaterial}
                     selectedBuildContextGitMaterial={selectedBuildContextGitMaterial}

src/components/ciConfig/types.tsx

@@ -25,10 +25,10 @@ import {
     CommonNodeAttr,
     WorkflowType,
     Material,
-    Environment,
     SelectPickerOptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { OptionTypeWithIcon } from '@Components/externalLinks/ExternalLinks.type'
+import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
 import { ConfigOverrideWorkflowDetails } from '../../services/service.types'
 import { CiPipeline, CiPipelineResult } from '../app/details/triggerView/types'
 import { OptionType } from '../app/types'
@@ -373,9 +373,9 @@ export interface CIPipelineSidebarType {
             postBuildStage: Map<string, VariableType>[]
         }>
     >
-    environments?: Environment[]
-    selectedEnv?: Environment
-    setSelectedEnv?: React.Dispatch<React.SetStateAction<Environment>>
+    environments?: EnvironmentWithSelectPickerType[]
+    selectedEnv?: EnvironmentWithSelectPickerType
+    setSelectedEnv?: React.Dispatch<React.SetStateAction<EnvironmentWithSelectPickerType>>
 }
 
 export interface TaskListType {