Skip to content

Commit f581eb7

Browse files
shivani170shivani170
authored
Merge pull request #1529 from devtron-labs/custom-input-bug-fix
feat: Custom input bug fixes
2 parents 27286bc + 621253c commit f581eb7

File tree

11 files changed

+106
-101
lines changed

11 files changed

+106
-101
lines changed

‎src/components/CIPipelineN/Build.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { SourceTypeMap, ViewType } from '../../config'
33
import { createWebhookConditionList } from '../ciPipeline/ciPipeline.service'
44
import { SourceMaterials } from '../ciPipeline/SourceMaterials'
55
import { ValidationRules } from '../ciPipeline/validationRules'
6-
import { Progressing, Toggle, CiPipelineSourceTypeOption } from '@devtron-labs/devtron-fe-common-lib'
6+
import { Progressing, Toggle, CiPipelineSourceTypeOption, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
77
import { BuildType, WebhookCIProps } from '../ciPipeline/types'
88
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
99
import { ReactComponent as BugScanner } from '../../assets/icons/scanner.svg'
@@ -202,23 +202,19 @@ export function Build({
202202
const renderPipelineName = () => {
203203
return (
204204
<label className="form__row">
205-
<span className="form__label dc__required-field">Pipeline Name</span>
206-
<input
207-
className="form__input"
205+
<CustomInput
206+
name="name"
207+
label="Pipeline Name"
208208
data-testid="build-pipeline-name-textbox"
209209
autoComplete="off"
210210
disabled={!!ciPipeline?.id}
211211
placeholder="e.g. my-first-pipeline"
212212
type="text"
213213
value={formData.name}
214214
onChange={handlePipelineName}
215+
isRequiredField={true}
216+
error={formDataErrorObj.name && !formDataErrorObj.name.isValid && formDataErrorObj.name.message}
215217
/>
216-
{formDataErrorObj.name && !formDataErrorObj.name.isValid && (
217-
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
218-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
219-
<span>{formDataErrorObj.name.message}</span>
220-
</span>
221-
)}
222218
</label>
223219
)
224220
}

‎src/components/app/details/triggerView/BranchRegexModal.tsx

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { ReactComponent as BitBucket } from '../../../../assets/icons/git/bitbuc
66
import { SourceTypeMap } from '../../../../config'
77
import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
88
import { ReactComponent as LeftIcon } from '../../../../assets/icons/ic-arrow-backward.svg'
9-
import { ReactComponent as Error } from '../../../../assets/icons/ic-alert-triangle.svg'
109
import { BranchRegexModalProps } from './types'
1110
import { TriggerViewContext } from './config'
1211
import { BRANCH_REGEX_MODAL_MESSAGING } from './Constants'
1312
import { REQUIRED_FIELD_MSG } from '../../../../config/constantMessaging'
1413
import { ButtonWithLoader } from '../../../common'
14+
import { CustomInput } from '@devtron-labs/devtron-fe-common-lib'
1515

1616
export default function BranchRegexModal({
1717
material,
@@ -94,20 +94,19 @@ export default function BranchRegexModal({
9494
)
9595
}
9696

97-
const renderValidationErrorLabel = (message: string): JSX.Element => {
98-
return (
99-
<div className="error-label flex left dc__align-start fs-11 fw-4 mt-6 ml-36">
100-
<Error className="icon-dim-16" />
101-
<div className="ml-4 cr-5">{message}</div>
102-
</div>
103-
)
104-
}
105-
10697
const onClickBackArrow = (): void => {
10798
onCloseBranchRegexModal()
10899
onShowCIModal()
109100
}
110101

102+
const getErrorMessage = (regexValue) => {
103+
if (!regexValue.value) {
104+
return REQUIRED_FIELD_MSG
105+
} else if (regexValue.isInvalid) {
106+
return BRANCH_REGEX_MODAL_MESSAGING.NoMatchingBranchName
107+
} else return ''
108+
}
109+
111110
return (
112111
<>
113112
{renderBranchRegexMaterialHeader()}
@@ -150,21 +149,19 @@ export default function BranchRegexModal({
150149
</div>
151150
</span>
152151
</div>
153-
<input
154-
data-testid={`branch-name-matching-regex-textbox${index}`}
155-
tabIndex={index}
156-
placeholder={BRANCH_REGEX_MODAL_MESSAGING.MatchingBranchNameRegex}
157-
className="form__input ml-36 w-95"
158-
name="name"
159-
value={_regexValue.value}
160-
onChange={(e) => handleRegexInputValue(mat.gitMaterialId, e.target.value, mat)}
161-
autoFocus
162-
autoComplete="off"
163-
/>
164-
{_regexValue.value &&
165-
_regexValue.isInvalid &&
166-
renderValidationErrorLabel(BRANCH_REGEX_MODAL_MESSAGING.NoMatchingBranchName)}
167-
{!_regexValue.value && renderValidationErrorLabel(REQUIRED_FIELD_MSG)}
152+
<div className="ml-36-imp">
153+
<CustomInput
154+
name="name"
155+
data-testid={`branch-name-matching-regex-textbox${index}`}
156+
tabIndex={index}
157+
placeholder={BRANCH_REGEX_MODAL_MESSAGING.MatchingBranchNameRegex}
158+
rootClassName="w-95-imp"
159+
value={_regexValue.value}
160+
onChange={(e) => handleRegexInputValue(mat.gitMaterialId, e.target.value, mat)}
161+
autoFocus
162+
error={getErrorMessage(_regexValue)}
163+
/>
164+
</div>
168165
</div>
169166
)
170167
)

‎src/components/cdPipeline/BuildCD.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
CustomInput,
23
DeploymentAppTypes,
34
InfoColourBar,
45
Progressing,
@@ -170,16 +171,15 @@ export default function BuildCD({
170171
const renderPipelineNameInput = () => {
171172
return (
172173
<div className="form__row">
173-
<label className="form__label dc__required-field">Pipeline Name</label>
174-
<input
175-
className="form__input"
176-
autoComplete="off"
174+
<CustomInput
175+
name="pipeline-name"
176+
label="Pipeline Name"
177177
disabled={!!cdPipelineId}
178178
data-testid="advance-pipeline-name-textbox"
179179
placeholder="Pipeline name"
180-
type="text"
181180
value={formData.name}
182181
onChange={handlePipelineName}
182+
isRequiredField={true}
183183
/>
184184
{formDataErrorObj.name && !formDataErrorObj.name.isValid && (
185185
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
@@ -374,24 +374,20 @@ export default function BuildCD({
374374
{renderVirtualEnvironmentInfo()}
375375
</div>
376376
<div className="flex-1 ml-8">
377-
<span className="form__label">Namespace</span>
378-
<input
379-
className="form__input"
380-
autoComplete="off"
377+
<CustomInput
378+
name="namespace"
379+
label="Namespace"
381380
placeholder={getNamespaceplaceholder()}
382381
data-testid="cd-pipeline-namespace-textbox"
383-
type="text"
384382
disabled={!namespaceEditable}
385383
value={selectedEnv?.namespace ? selectedEnv.namespace : formData.namespace}
386384
onChange={handleNamespaceChange}
385+
error={
386+
!formDataErrorObj.nameSpaceError.isValid &&
387+
!isVirtualEnvironment &&
388+
formDataErrorObj.nameSpaceError.message
389+
}
387390
/>
388-
389-
{!formDataErrorObj.nameSpaceError.isValid && !isVirtualEnvironment ? (
390-
<span className="form__error">
391-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
392-
{formDataErrorObj.nameSpaceError.message}
393-
</span>
394-
) : null}
395391
</div>
396392
</div>
397393
{renderNamespaceInfo(namespaceEditable)}

‎src/components/cdPipeline/CDPipeline.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
TippyTheme,
2929
sortCallback,
3030
DeploymentAppTypes,
31+
CustomInput,
3132
} from '@devtron-labs/devtron-fe-common-lib'
3233
import {
3334
getDeploymentStrategyList,
@@ -1514,10 +1515,9 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
15141515
{renderVirtualEnvironmentInfo()}
15151516
</div>
15161517
<div className="flex-1 ml-8">
1517-
<span className="form__label">Namespace</span>
1518-
<input
1519-
className="form__input"
1520-
autoComplete="off"
1518+
<CustomInput
1519+
name="namespace"
1520+
label="Namespace"
15211521
placeholder={getNamespaceplaceholder()}
15221522
data-testid="cd-pipeline-namespace-textbox"
15231523
type="text"
@@ -1585,23 +1585,20 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
15851585
renderPipelineNameInput = () => {
15861586
return (
15871587
<div className="form__row">
1588-
<label className="form__label dc__required-field">Pipeline Name</label>
1589-
<input
1590-
className="form__input"
1591-
autoComplete="off"
1588+
<CustomInput
1589+
name="pipelineName"
1590+
label="Pipeline Name"
15921591
disabled={!!this.state.pipelineConfig.id}
15931592
data-testid="advance-pipeline-name-textbox"
15941593
placeholder="Pipeline name"
1595-
type="text"
1594+
isRequiredField={true}
15961595
value={this.state.pipelineConfig.name}
15971596
onChange={this.handlePipelineName}
1597+
error={
1598+
!this.state.errorForm.pipelineNameError.isValid &&
1599+
this.state.errorForm.pipelineNameError.message
1600+
}
15981601
/>
1599-
{!this.state.errorForm.pipelineNameError.isValid && (
1600-
<span className="form__error">
1601-
<img src={error} className="form__icon" />
1602-
{this.state.errorForm.pipelineNameError.message}
1603-
</span>
1604-
)}
16051602
</div>
16061603
)
16071604
}

‎src/components/ciConfig/CICreateDockerfileOption.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Tippy from '@tippyjs/react'
33
import ReactSelect from 'react-select'
44
import { MODES } from '../../config'
55
import CodeEditor from '../CodeEditor/CodeEditor'
6-
import { showError, Progressing, CIBuildType, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
6+
import { showError, Progressing, CIBuildType, copyToClipboard, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
77
import {
88
DropdownIndicator,
99
Option,
@@ -559,10 +559,10 @@ export default function CICreateDockerfileOption({
559559
onChange={handleBuildContextCheckoutPathChange}
560560
isDisabled={configOverrideView && !allowOverride}
561561
/>
562-
<input
562+
<CustomInput
563563
tabIndex={4}
564564
type="text"
565-
className="form__input file-name"
565+
rootClassName="file-name"
566566
data-testid="build-context-path-text-box"
567567
placeholder="Enter Path"
568568
name="buildContext"

‎src/components/ciConfig/CIDockerFileConfig.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
TippyTheme,
2626
OptionType,
2727
Progressing,
28+
CustomInput,
2829
} from '@devtron-labs/devtron-fe-common-lib'
2930
import Tippy from '@tippyjs/react'
3031
import { BuildersAndFrameworksType, CIDockerFileConfigProps, LoadingState } from './types'
@@ -479,10 +480,9 @@ export default function CIDockerFileConfig({
479480
{selectedMaterial?.checkoutPath}
480481
</span>
481482
</Tippy>
482-
<input
483+
<CustomInput
483484
tabIndex={4}
484-
type="text"
485-
className="form__input file-name"
485+
rootClassName="file-name"
486486
data-testid="dockerfile-path-text-box"
487487
placeholder="Dockerfile"
488488
name="dockerfile"
@@ -633,10 +633,10 @@ export default function CIDockerFileConfig({
633633
onChange={handleBuildContextCheckoutPathChange}
634634
isDisabled={configOverrideView && !allowOverride}
635635
/>
636-
<input
636+
<CustomInput
637637
tabIndex={4}
638638
type="text"
639-
className="form__input file-name"
639+
rootClassName="file-name"
640640
data-testid="build-context-path-text-box"
641641
placeholder="Project Path"
642642
name="buildContext"
@@ -646,7 +646,6 @@ export default function CIDockerFileConfig({
646646
: formState.buildContext.value
647647
}
648648
onChange={handleOnChangeConfig}
649-
autoComplete="off"
650649
autoFocus={!configOverrideView}
651650
disabled={configOverrideView && !allowOverride}
652651
/>

‎src/components/ciPipeline/LinkedCIPipelineEdit.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
showError,
88
Progressing,
99
multiSelectStyles,
10+
CustomInput,
1011
} from '@devtron-labs/devtron-fe-common-lib'
1112
import { CIPipelineBuildType, CIPipelineProps, LinkedCIPipelineState } from './types'
1213
import { Typeahead, TypeaheadOption, TypeaheadErrorOption } from '../common'
@@ -21,6 +22,7 @@ import './ciPipeline.scss'
2122
import { appListOptions, noOptionsMessage } from '../AppSelector/AppSelectorUtil'
2223
import AsyncSelect from 'react-select/async'
2324
import { ReactComponent as Warning } from '../../assets/icons/ic-warning.svg'
25+
import { DUPLICATE_PIPELINE_NAME_VALIDATION, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
2426

2527
export default class LinkedCIPipeline extends Component<CIPipelineProps, LinkedCIPipelineState> {
2628
validationRules
@@ -270,6 +272,14 @@ export default class LinkedCIPipeline extends Component<CIPipelineProps, LinkedC
270272

271273
loadAppListOptions = (inputValue: string) => appListOptions(inputValue, false)
272274

275+
getErrorMessage = () => {
276+
if (!this.state.form.name) {
277+
return REQUIRED_FIELD_MSG
278+
} else if (!this.state.isValid.name) {
279+
return DUPLICATE_PIPELINE_NAME_VALIDATION
280+
} else return ''
281+
}
282+
273283
renderCIPipelineBody() {
274284
if (this.state.view === ViewType.LOADING) {
275285
return (
@@ -304,21 +314,16 @@ export default class LinkedCIPipeline extends Component<CIPipelineProps, LinkedC
304314
{this.renderCIPipelinesDropdown(null)}
305315
{this.state.form.parentCIPipelineId ? (
306316
<label className="form__row">
307-
<span className="form__label dc__required-field">Name</span>
308-
<input
309-
className="form__input"
317+
<CustomInput
318+
name="name"
319+
label="Name"
310320
placeholder="Enter pipeline name"
311-
type="text"
312321
value={this.state.form.name}
313322
onChange={this.handleName}
314323
data-testid="pipeline-name-for-linked"
324+
isRequiredField={true}
325+
error={this.getErrorMessage()}
315326
/>
316-
{!this.state.isValid.name ? (
317-
<span className="form__error">
318-
<img src={error} alt="" className="form__icon" />
319-
You cannot use same name for pipeline within an app.
320-
</span>
321-
) : null}
322327
</label>
323328
) : null}
324329
</>

‎src/components/ciPipeline/LinkedCIPipelineView.tsx

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
ServerErrors,
1313
RadioGroup,
1414
RadioGroupItem,
15+
CustomInput,
16+
noop,
1517
} from '@devtron-labs/devtron-fe-common-lib'
1618
import { toast } from 'react-toastify';
1719
import { Link } from 'react-router-dom';
@@ -235,16 +237,24 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
235237
return <div style={{ minHeight: "380px" }} className="flex"><Progressing pageLoader /></div>
236238
}
237239
else {
238-
return <>
239-
<label className="form__row">
240-
<span className="form__label dc__required-field">Pipeline Name</span>
241-
<input className="form__input" disabled={!!this.state.ciPipeline.id} placeholder="Name" type="text"
242-
value={this.state.ciPipeline.name} />
243-
</label>
244-
{this.renderTriggerType()}
245-
{this.renderMaterials()}
246-
{this.renderDeleteCIModal()}
247-
</>
240+
return (
241+
<>
242+
<label className="form__row">
243+
<CustomInput
244+
name="name"
245+
label="Pipeline Name"
246+
disabled={!!this.state.ciPipeline.id}
247+
placeholder="Name"
248+
value={this.state.ciPipeline.name}
249+
onChange={noop}
250+
isRequiredField={true}
251+
/>
252+
</label>
253+
{this.renderTriggerType()}
254+
{this.renderMaterials()}
255+
{this.renderDeleteCIModal()}
256+
</>
257+
)
248258
}
249259
}
250260

0 commit comments

Comments
 (0)