Skip to content

Commit a0605d5

Browse files
RohitRaj011RohitRaj011
committed
feat: CreateCICDPipeline - integrate cd node creation
1 parent 5a93461 commit a0605d5

File tree

15 files changed

+962
-391
lines changed

15 files changed

+962
-391
lines changed

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

Lines changed: 143 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,123 @@
1+
import { ChangeEvent, useState } from 'react'
2+
import { useHistory } from 'react-router-dom'
3+
14
import {
5+
API_STATUS_CODES,
26
ButtonVariantType,
37
ComponentSizeType,
48
DeploymentAppTypes,
59
Icon,
610
InfoBlock,
11+
noop,
12+
showError,
713
} from '@devtron-labs/devtron-fe-common-lib'
814

15+
import { GeneratedHelmPush } from '@Components/cdPipeline/cdPipeline.types'
16+
import { ValidationRules } from '@Components/ciPipeline/validationRules'
17+
import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
918
import { DeploymentAppRadioGroup } from '@Components/v2/values/chartValuesDiff/ChartValuesView.component'
19+
import { GITOPS_REPO_REQUIRED } from '@Components/v2/values/chartValuesDiff/constant'
20+
import { ENV_ALREADY_EXIST_ERROR } from '@Config/constants'
21+
import { URLS } from '@Config/routes'
22+
import { getGitOpsRepoConfig } from '@Services/service'
1023

1124
import { SourceMaterialsSelector } from '../SourceMaterialsSelector'
1225
import { CDStepperContentProps } from './types'
26+
import { getEnvironmentOptions } from './utils'
27+
28+
const validationRules = new ValidationRules()
29+
30+
export const CDStepperContent = ({
31+
appId,
32+
isCreatingWorkflow,
33+
cdNodeCreateError,
34+
onRetry,
35+
ciCdPipeline,
36+
ciCdPipelineFormError,
37+
noGitOpsModuleInstalledAndConfigured,
38+
isGitOpsInstalledButNotConfigured,
39+
isGitOpsRepoNotConfigured,
40+
envIds,
41+
setCiCdPipeline,
42+
setCiCdPipelineFormError,
43+
setReloadNoGitOpsRepoConfiguredModal,
44+
}: CDStepperContentProps) => {
45+
// STATES
46+
const [gitopsConflictLoading, setGitopsConflictLoading] = useState(false)
47+
48+
// HOOKS
49+
const { push } = useHistory()
1350

14-
// TODO: Integrate this
15-
export const CDStepperContent = ({ isCreatingWorkflow, cdNodeCreateError, onRetry }: CDStepperContentProps) => {
1651
// CONSTANTS
52+
const { environments, selectedEnvironment, deploymentAppType } = ciCdPipeline.cd
1753
const isFormDisabled = isCreatingWorkflow
54+
const isHelmEnforced =
55+
selectedEnvironment &&
56+
selectedEnvironment.allowedDeploymentTypes.length === 1 &&
57+
selectedEnvironment.allowedDeploymentTypes[0] === DeploymentAppTypes.HELM
58+
const gitOpsRepoNotConfiguredAndOptionsHidden =
59+
window._env_.HIDE_GITOPS_OR_HELM_OPTION &&
60+
!noGitOpsModuleInstalledAndConfigured &&
61+
!isHelmEnforced &&
62+
isGitOpsRepoNotConfigured
63+
64+
// HANDLERS
65+
const handleEnvironmentChange = (selection: EnvironmentWithSelectPickerType) => {
66+
const { ci, cd } = structuredClone(ciCdPipeline)
67+
cd.selectedEnvironment = selection
68+
cd.generatedHelmPushAction = selection.isVirtualEnvironment
69+
? GeneratedHelmPush.DO_NOT_PUSH
70+
: GeneratedHelmPush.PUSH
71+
72+
setCiCdPipeline({ ci, cd })
73+
74+
const updatedCiCdPipelineFormError = structuredClone(ciCdPipelineFormError)
75+
updatedCiCdPipelineFormError.cd.environment = envIds.includes(selection.id)
76+
? ENV_ALREADY_EXIST_ERROR
77+
: validationRules.environment(selection.id).message
78+
79+
setCiCdPipelineFormError(updatedCiCdPipelineFormError)
80+
}
81+
82+
const handleDeploymentAppTypeChange = (event: ChangeEvent<HTMLInputElement>) => {
83+
const { ci, cd } = structuredClone(ciCdPipeline)
84+
cd.deploymentAppType = event.target.value
85+
setCiCdPipeline({ ci, cd })
86+
}
87+
88+
const checkGitOpsRepoConflict = () => {
89+
setGitopsConflictLoading(true)
90+
getGitOpsRepoConfig(+appId)
91+
.then(() => {
92+
push(`/app/${appId}/edit/${URLS.APP_GITOPS_CONFIG}`)
93+
})
94+
.catch((err) => {
95+
if (err.code === API_STATUS_CODES.CONFLICT) {
96+
setReloadNoGitOpsRepoConfiguredModal(true)
97+
} else {
98+
showError(err)
99+
}
100+
})
101+
.finally(() => {
102+
setGitopsConflictLoading(false)
103+
})
104+
}
105+
106+
// RENDERERS
107+
const gitOpsRepoConfigInfoBar = (content: string) => (
108+
<InfoBlock
109+
description={content}
110+
variant="warning"
111+
buttonProps={{
112+
dataTestId: 'configure-gitops-repo-button',
113+
variant: ButtonVariantType.text,
114+
text: 'Configure',
115+
endIcon: <Icon name="ic-arrow-right" color={null} />,
116+
onClick: checkGitOpsRepoConflict,
117+
isLoading: gitopsConflictLoading,
118+
}}
119+
/>
120+
)
18121

19122
return (
20123
<div className="flexbox-col dc__gap-20">
@@ -37,32 +140,54 @@ export const CDStepperContent = ({ isCreatingWorkflow, cdNodeCreateError, onRetr
37140
<SourceMaterialsSelector
38141
branchInputProps={{
39142
name: 'create-ci-cd-pipeline-modal-namespace',
40-
onChange: () => {},
41-
placeholder: 'Will be auto-populated based on environment',
143+
onChange: noop,
144+
placeholder:
145+
selectedEnvironment?.isVirtualEnvironment && !selectedEnvironment?.namespace
146+
? 'Not available'
147+
: 'Will be auto-populated based on environment',
42148
label: 'Namespace',
43-
value: 'dev-ns',
149+
value: selectedEnvironment?.namespace,
44150
disabled: true,
45151
}}
46152
sourceTypePickerProps={{
47153
inputId: 'create-ci-cd-pipeline-modal-select-environment',
154+
classNamePrefix: 'create-ci-cd-pipeline-modal-select-environment',
48155
label: 'Environment',
49156
placeholder: 'Select environment',
50157
isDisabled: isFormDisabled,
158+
menuPosition: 'fixed',
159+
options: getEnvironmentOptions(environments),
160+
value: selectedEnvironment,
161+
getOptionValue: (option) => option.value as string,
162+
helperText: selectedEnvironment?.isVirtualEnvironment ? 'Isolated environment' : null,
163+
error: ciCdPipelineFormError.cd.environment ?? null,
164+
onChange: handleEnvironmentChange,
51165
}}
52166
/>
53-
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
54-
<label className="form__label form__label--sentence">How do you want to deploy?</label>
55-
<DeploymentAppRadioGroup
56-
isDisabled={false}
57-
deploymentAppType={DeploymentAppTypes.HELM}
58-
handleOnChange={() => {}}
59-
allowedDeploymentTypes={[]}
60-
rootClassName="ci-cd-pipeline__deployment-app-radio-group"
61-
isFromCDPipeline
62-
// isGitOpsRepoNotConfigured={isGitOpsRepoNotConfigured}
63-
// gitOpsRepoConfigInfoBar={gitOpsRepoConfigInfoBar}
64-
// areGitopsCredentialsConfigured={!isGitOpsInstalledButNotConfigured}
65-
/>
167+
<div className="mt-16">
168+
{gitOpsRepoNotConfiguredAndOptionsHidden && gitOpsRepoConfigInfoBar(GITOPS_REPO_REQUIRED)}
169+
</div>
170+
{!window._env_.HIDE_GITOPS_OR_HELM_OPTION &&
171+
!selectedEnvironment?.isVirtualEnvironment &&
172+
selectedEnvironment?.allowedDeploymentTypes.length > 0 &&
173+
// Want to show this when gitops module is installed, does not matter if it is configured or not
174+
(!noGitOpsModuleInstalledAndConfigured || isGitOpsInstalledButNotConfigured) && (
175+
<div className="mt-16">
176+
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
177+
<label className="form__label form__label--sentence">How do you want to deploy?</label>
178+
<DeploymentAppRadioGroup
179+
deploymentAppType={deploymentAppType ?? DeploymentAppTypes.HELM}
180+
handleOnChange={handleDeploymentAppTypeChange}
181+
allowedDeploymentTypes={selectedEnvironment?.allowedDeploymentTypes}
182+
rootClassName="chartrepo-type__radio-group"
183+
isDisabled={isFormDisabled}
184+
isFromCDPipeline
185+
isGitOpsRepoNotConfigured={isGitOpsRepoNotConfigured}
186+
gitOpsRepoConfigInfoBar={gitOpsRepoConfigInfoBar}
187+
areGitopsCredentialsConfigured={!isGitOpsInstalledButNotConfigured}
188+
/>
189+
</div>
190+
)}
66191
</div>
67192
</div>
68193
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Icon } from '@devtron-labs/devtron-fe-common-lib'
33
import { CICDStepperProps } from './types'
44

55
export const CICDStepper = ({ config }: CICDStepperProps) => (
6-
<div className="ci-cd-pipeline__stepper-container flexbox-col">
6+
<div className="ci-cd-pipeline__stepper-container flexbox-col flex-grow-1 dc__align-self-start">
77
{config.map(({ id, icon, title, content }) => (
88
<div key={id} className="ci-cd-pipeline__stepper flex left top dc__gap-8">
99
<div className="dc__position-rel flex p-7 br-6 border__secondary bg__modal--secondary">

0 commit comments

Comments
 (0)