Skip to content

Commit 619cf1e

Browse files
RohitRaj011RohitRaj011
committed
feat: BuildCD - replace env & namespace selector with SourceMaterialsSelector component
1 parent e8b6ed1 commit 619cf1e

File tree

6 files changed

+60
-110
lines changed

6 files changed

+60
-110
lines changed

‎src/Pages/App/Configurations/WorkflowEditor/CreateCICDPipeline/CDStepperContent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export const CDStepperContent = ({
139139
<div>
140140
<SourceMaterialsSelector
141141
branchInputProps={{
142-
name: 'create-ci-cd-pipeline-modal-namespace',
142+
name: 'cd-pipeline-namespace',
143143
onChange: noop,
144144
placeholder:
145145
selectedEnvironment?.isVirtualEnvironment && !selectedEnvironment?.namespace
@@ -150,8 +150,8 @@ export const CDStepperContent = ({
150150
disabled: true,
151151
}}
152152
sourceTypePickerProps={{
153-
inputId: 'create-ci-cd-pipeline-modal-select-environment',
154-
classNamePrefix: 'create-ci-cd-pipeline-modal-select-environment',
153+
inputId: 'cd-pipeline-environment',
154+
classNamePrefix: 'cd-pipeline-environment',
155155
label: 'Environment',
156156
placeholder: 'Select environment',
157157
isDisabled: isFormDisabled,

‎src/Pages/App/Configurations/WorkflowEditor/CreateCICDPipeline/CIStepperContent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ export const CIStepperContent = ({
172172
label: 'Source Type',
173173
placeholder: 'Source Type',
174174
classNamePrefix: `sourceType-${name}`,
175+
isSearchable: false,
175176
options: !isMultiGit
176177
? ciPipelineSourceTypeOptions
177178
: ciPipelineSourceTypeOptions.slice(0, 2),

‎src/Pages/App/Configurations/WorkflowEditor/SourceMaterialsSelector/SourceMaterialsSelector.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const SourceMaterialsSelector = ({
1818
<SelectPicker<string | number, false>
1919
{...sourceTypePickerProps}
2020
required
21-
isSearchable={false}
2221
isClearable={false}
2322
closeMenuOnSelect
2423
size={ComponentSizeType.large}

‎src/Pages/App/Configurations/WorkflowEditor/SourceMaterialsSelector/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export interface SourceMaterialsSelectorProps {
44
repoName?: string
55
sourceTypePickerProps: Omit<
66
SelectPickerProps<string | number, false>,
7-
'required' | 'isSearchable' | 'isClearable' | 'closeMenuOnSelect' | 'size'
7+
'required' | 'isClearable' | 'closeMenuOnSelect' | 'size'
88
>
99
branchInputProps: Omit<CustomInputProps, 'required' | 'type'> & {
1010
hideInput?: boolean

‎src/components/cdPipeline/BuildCD.tsx

Lines changed: 54 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import {
2828
SelectPicker,
2929
ToastVariantType,
3030
ToastManager,
31-
ComponentSizeType,
3231
showError,
3332
TriggerType,
3433
InfoBlock,
@@ -39,21 +38,17 @@ import { useParams, useHistory } from 'react-router-dom'
3938
import yamlJsParser from 'yaml'
4039
import { ReactComponent as ICArrowRight } from '@Icons/ic-arrow-right.svg'
4140
import { ReactComponent as Add } from '@Icons/ic-add.svg'
42-
import { ReactComponent as AlertTriangle } from '@Icons/ic-alert-triangle.svg'
4341
import { ReactComponent as Help } from '@Icons/ic-help.svg'
4442
import { ReactComponent as ICInfo } from '@Icons/ic-info-filled.svg'
4543
import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
4644
import settings from '@Icons/ic-settings.svg'
4745
import trash from '@Icons/misc/delete.svg'
48-
import error from '@Icons/misc/errorInfo.svg'
49-
import { Info } from '../common/icons/Icons'
5046
import { ENV_ALREADY_EXIST_ERROR, RegistryPayloadWithSelectType, URLS, ViewType } from '../../config'
5147
import { GeneratedHelmPush, MigrateToDevtronFormState, TriggerTypeRadioProps } from './cdPipeline.types'
5248
import { createClusterEnvGroup, getDeploymentAppType, importComponentFromFELibrary, Select } from '../common'
5349
import { pipelineContext } from '../workflowEditor/workflowEditor'
5450
import { getNamespacePlaceholder } from './cdpipeline.util'
5551
import { ValidationRules } from '../ciPipeline/validationRules'
56-
import { DeploymentAppRadioGroup } from '../v2/values/chartValuesDiff/ChartValuesView.component'
5752
import CustomImageTags from '../CIPipelineN/CustomImageTags'
5853
import { GITOPS_REPO_REQUIRED } from '../v2/values/chartValuesDiff/constant'
5954
import { getGitOpsRepoConfig } from '../../services/service'
@@ -64,9 +59,8 @@ import { BuildCDProps } from './types'
6459
import { MigrateToDevtron } from './MigrateToDevtron'
6560
import TriggerTypeRadio from './TriggerTypeRadio'
6661
import { MigrateToDevtronProps } from './MigrateToDevtron/types'
67-
import { CDPipelineDeploymentAppType } from '@Pages/App/Configurations'
62+
import { CDPipelineDeploymentAppType, SourceMaterialsSelector } from '@Pages/App/Configurations'
6863

69-
const VirtualEnvSelectionInfoText = importComponentFromFELibrary('VirtualEnvSelectionInfoText')
7064
const HelmManifestPush = importComponentFromFELibrary('HelmManifestPush')
7165

7266
export default function BuildCD({
@@ -268,24 +262,6 @@ export default function BuildCD({
268262
)
269263
}
270264

271-
const renderNamespaceInfo = (namespaceEditable: boolean) => {
272-
if (namespaceEditable) {
273-
return (
274-
<div className="dc__info-container info__container--cd-pipeline">
275-
<Info />
276-
<div className="flex column left">
277-
<div className="dc__info-title">Set Namespace</div>
278-
<div className="dc__info-subtitle">
279-
The entered namespace will be applicable to selected environment across all the pipelines
280-
for this application.
281-
</div>
282-
</div>
283-
</div>
284-
)
285-
}
286-
return null
287-
}
288-
289265
const checkGitOpsRepoConflict = () => {
290266
setGitopsConflictLoading(true)
291267
getGitOpsRepoConfig(+appId)
@@ -382,21 +358,27 @@ export default function BuildCD({
382358
setFormData(_form)
383359
}
384360

385-
const renderEnvSelector = () => {
361+
const renderEnvNamespaceAndTriggerType = () => {
386362
const envId = formData.environmentId
387363
const _environment = formData.environments.find((env) => env.id == envId)
388364
const selectedEnv: EnvironmentWithSelectPickerType = _environment && {
389365
..._environment,
390366
label: _environment.name,
391367
value: _environment.id.toString(),
392368
}
393-
const envList = createClusterEnvGroup(formData.environments as Environment[], 'clusterName')
394369

395-
const renderVirtualEnvironmentInfo = () => {
396-
if (isVirtualEnvironment && VirtualEnvSelectionInfoText) {
397-
return <VirtualEnvSelectionInfoText />
398-
}
399-
}
370+
const isHelmEnforced =
371+
formData.allowedDeploymentTypes.length === 1 &&
372+
formData.allowedDeploymentTypes[0] === DeploymentAppTypes.HELM
373+
374+
const gitOpsRepoNotConfiguredAndOptionsHidden =
375+
window._env_.HIDE_GITOPS_OR_HELM_OPTION &&
376+
selectedEnv &&
377+
!noGitOpsModuleInstalledAndConfigured &&
378+
!isHelmEnforced &&
379+
isGitOpsRepoNotConfigured
380+
381+
const envList = createClusterEnvGroup(formData.environments as Environment[], 'clusterName')
400382

401383
const getEnvListOptions = () =>
402384
envList.map((_elm) => ({
@@ -408,86 +390,53 @@ export default function BuildCD({
408390
})),
409391
}))
410392

411-
return (
412-
<>
413-
<SelectPicker
414-
label="Environment"
415-
required
416-
inputId="environment"
417-
menuPosition={isAdvanced ? null : 'fixed'}
418-
isDisabled={!!cdPipelineId}
419-
classNamePrefix="cd-pipeline-environment-dropdown"
420-
placeholder="Select Environment"
421-
autoFocus
422-
options={
423-
releaseMode === ReleaseMode.MIGRATE_EXTERNAL_APPS
424-
? getEnvListOptions().filter((env) =>
425-
env.options.filter((_env) => !_env.isVirtualEnvironment),
426-
)
427-
: getEnvListOptions()
428-
}
429-
value={selectedEnv}
430-
getOptionValue={(option) => option.value as unknown as string}
431-
onChange={selectEnvironment}
432-
size={ComponentSizeType.large}
433-
/>
434-
{isEnvUsedState && (
435-
<span className="form__error">
436-
<img src={error} className="form__icon" />
437-
{ENV_ALREADY_EXIST_ERROR}
438-
</span>
439-
)}
440-
{!formDataErrorObj.envNameError.isValid ? (
441-
<span className="form__error">
442-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
443-
{formDataErrorObj.envNameError.message}
444-
</span>
445-
) : null}
446-
{renderVirtualEnvironmentInfo()}
447-
</>
448-
)
449-
}
450-
451-
const renderEnvNamespaceAndTriggerType = () => {
452-
const envId = formData.environmentId
453-
const selectedEnv: Environment = formData.environments.find((env) => env.id == envId)
454-
const namespaceEditable = false
455-
456-
const isHelmEnforced =
457-
formData.allowedDeploymentTypes.length === 1 &&
458-
formData.allowedDeploymentTypes[0] === DeploymentAppTypes.HELM
393+
const getEnvError = () => {
394+
if (isEnvUsedState) {
395+
return ENV_ALREADY_EXIST_ERROR
396+
}
459397

460-
const gitOpsRepoNotConfiguredAndOptionsHidden =
461-
window._env_.HIDE_GITOPS_OR_HELM_OPTION &&
462-
selectedEnv &&
463-
!noGitOpsModuleInstalledAndConfigured &&
464-
!isHelmEnforced &&
465-
isGitOpsRepoNotConfigured
398+
return !formDataErrorObj.envNameError.isValid ? formDataErrorObj.envNameError.message : null
399+
}
466400

467401
return (
468402
<>
469-
<div className="form__row form__row--flex mt-12">
470-
<div className="w-50 mr-8">{renderEnvSelector()}</div>
471-
<div className="flex-1 ml-8">
472-
<CustomInput
473-
name="namespace"
474-
label="Namespace"
475-
placeholder={getNamespacePlaceholder(isVirtualEnvironment, formData.namespace)}
476-
disabled={!namespaceEditable}
477-
value={selectedEnv?.namespace ? selectedEnv.namespace : formData.namespace}
478-
onChange={handleNamespaceChange}
479-
error={
480-
!formDataErrorObj.nameSpaceError.isValid &&
481-
!isVirtualEnvironment &&
482-
formDataErrorObj.nameSpaceError.message
483-
}
484-
/>
485-
</div>
486-
</div>
403+
<SourceMaterialsSelector
404+
branchInputProps={{
405+
name: 'cd-pipeline-namespace',
406+
onChange: handleNamespaceChange,
407+
placeholder: getNamespacePlaceholder(isVirtualEnvironment, formData.namespace),
408+
label: 'Namespace',
409+
value: selectedEnv?.namespace ? selectedEnv.namespace : formData.namespace,
410+
disabled: true,
411+
error:
412+
!formDataErrorObj.nameSpaceError.isValid &&
413+
!isVirtualEnvironment &&
414+
formDataErrorObj.nameSpaceError.message,
415+
}}
416+
sourceTypePickerProps={{
417+
inputId: 'cd-pipeline-environment',
418+
classNamePrefix: 'cd-pipeline-environment',
419+
label: 'Environment',
420+
placeholder: 'Select environment',
421+
isDisabled: !!cdPipelineId,
422+
menuPosition: isAdvanced ? null : 'fixed',
423+
options:
424+
releaseMode === ReleaseMode.MIGRATE_EXTERNAL_APPS
425+
? getEnvListOptions().filter((env) =>
426+
env.options.filter((_env) => !_env.isVirtualEnvironment),
427+
)
428+
: getEnvListOptions(),
429+
value: selectedEnv,
430+
getOptionValue: (option) => option.value as string,
431+
helperText: isVirtualEnvironment ? 'Isolated environment' : null,
432+
error: getEnvError(),
433+
onChange: selectEnvironment,
434+
autoFocus: true,
435+
}}
436+
/>
487437
<div className="mb-16">
488438
{gitOpsRepoNotConfiguredAndOptionsHidden && gitOpsRepoConfigInfoBar(GITOPS_REPO_REQUIRED)}
489439
</div>
490-
{renderNamespaceInfo(namespaceEditable)}
491440
{isVirtualEnvironment
492441
? HelmManifestPush && (
493442
<HelmManifestPush

‎src/components/ciPipeline/SourceMaterials.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ export const SourceMaterials = ({
163163
label: 'Source Type',
164164
placeholder: 'Source Type',
165165
classNamePrefix: `select-build-pipeline-sourcetype-${index}`,
166+
isSearchable: false,
166167
options: !isMultiGit
167168
? ciPipelineSourceTypeOptions
168169
: ciPipelineSourceTypeOptions.slice(0, 2),

0 commit comments

Comments
 (0)