Skip to content

Commit a7b9be3

Browse files
shivani170shivani170
authored
Merge pull request #1528 from devtron-labs/common-custom-input
feat: Generalized custom input
2 parents 97f95ee + acea1b5 commit a7b9be3

File tree

65 files changed

+907
-1149
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+907
-1149
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.0.45",
7+
"@devtron-labs/devtron-fe-common-lib": "0.0.46",
88
"@rjsf/core": "^5.13.3",
99
"@rjsf/utils": "^5.13.3",
1010
"@rjsf/validator-ajv8": "^5.13.3",
@@ -46,13 +46,13 @@
4646
"react-virtualized": "^9.22.3",
4747
"recharts": "^2.1.9",
4848
"rxjs": "^7.5.4",
49+
"tippy.js": "^6.3.7",
4950
"xterm": "^4.19.0",
5051
"xterm-addon-fit": "^0.5.0",
5152
"xterm-addon-search": "^0.9.0",
5253
"xterm-webfont": "^2.0.0",
5354
"yaml": "^1.7.2",
54-
"yamljs": "^0.3.0",
55-
"tippy.js": "^6.3.7"
55+
"yamljs": "^0.3.0"
5656
},
5757
"scripts": {
5858
"lint": "eslint src/**/*.tsx",

‎src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ export default function BulkSourceChange({ closePopup, responseList, changeBranc
103103
<div className="form__row">
104104
<CustomInput
105105
labelClassName="dc__required-field"
106-
autoComplete="off"
107106
name="branch_name"
108107
disabled={false}
109108
value={branchName}

‎src/components/CIPipelineN/AdvancedConfigOptions.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { deepEqual } from '../common'
88
import { ComponentStates } from '../EnvironmentOverride/EnvironmentOverrides.type'
99
import { AdvancedConfigOptionsProps, CIConfigParentState } from '../ciConfig/types'
1010
import { DockerConfigOverrideKeys } from '../ciPipeline/types'
11-
import { CIBuildConfigType, CIBuildType, noop, TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
11+
import { CIBuildConfigType, CIBuildType, CustomInput, noop, TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
1212
import { getTargetPlatformMap } from '../ciConfig/CIConfig.utils'
1313
import TargetPlatformSelector from '../ciConfig/TargetPlatformSelector'
1414
import { OptionType } from '../app/types'
@@ -186,9 +186,10 @@ export default function AdvancedConfigOptions({
186186
return (
187187
<div className="flexbox justify-space" key={`build-${index}`}>
188188
<div className="mt-8 w-100">
189-
<input
189+
<CustomInput
190+
name="arg-key"
190191
data-testid={`docker-arg-key-${index}`}
191-
className="w-100 dc__top-radius-4 pl-10 pr-10 pt-6 pb-6 en-2 bw-1"
192+
rootClassName="w-100 dc__top-radius-4 pl-10 pr-10 pt-6 pb-6 en-2 bw-1"
192193
autoComplete="off"
193194
placeholder="Key"
194195
type="text"

‎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/CIPipelineN/ConditionContainer.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
RadioGroupItem,
77
ConditionType,
88
PluginType,
9+
CustomInput,
910
} from '@devtron-labs/devtron-fe-common-lib'
1011
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
1112
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
@@ -377,9 +378,9 @@ export function ConditionContainer({ type }: { type: ConditionContainerType }) {
377378
/>
378379
</div>
379380
<div className="fs-13 mr-10">
380-
<input
381-
className="w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 br-4 h-32"
382-
type="text"
381+
<CustomInput
382+
name="conditionalValue"
383+
rootClassName="w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 br-4 h-32"
383384
value={conditionDetail.conditionalValue}
384385
onChange={(e) => {
385386
handleConditionalValueChange(e, index)

‎src/components/CIPipelineN/CustomImageTags.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ function CustomImageTags({
104104
<Tippy
105105
content={
106106
<div className="fs-12">
107-
{`{x}`} is an auto increasing number. It will increase by one on each build trigger.
107+
{`{x}`} is an auto increasing number. It will increase by one on each {isCDBuild ? getCDStageTypeSelectorValue(formData.customTagStage).label : " build "} trigger.
108108
</div>
109109
}
110110
placement="top"
@@ -138,7 +138,7 @@ function CustomImageTags({
138138
name="image_tag"
139139
autoComplete="off"
140140
autoFocus={true}
141-
data-testid="container-repository-textbox"
141+
data-testid="custom-image-tag-textarea"
142142
value={formData.customTag?.tagPattern}
143143
onChange={onChangeCustomInput}
144144
draggable={false}
@@ -162,10 +162,13 @@ function CustomImageTags({
162162
</div>
163163
)}
164164
</div>
165-
<div className="mt-4 cn-7 fs-12 flex left">
166-
<Warning className="mr-4 icon-dim-16 image-tag-alert-icon" />
167-
Build will fail if resulting image tag has already been built
168-
</div>
165+
{!isCDBuild && (
166+
<div className="mt-4 cn-7 fs-12 flex left">
167+
<Warning className="mr-4 icon-dim-16 image-tag-alert-icon" />
168+
Build will fail if resulting image tag has already been built
169+
</div>
170+
)}
171+
169172
<hr className="mt-12 mb-12" />
170173
<div className="flex left cn-7">
171174
Value of {renderCounterXTippy(`{x}`)} will be
@@ -180,7 +183,8 @@ function CustomImageTags({
180183
onKeyPress={handleCounterKeyPress}
181184
defaultValue={'0'}
182185
/>
183-
in the next build trigger {isCDBuild ? renderCustomTagStageOnCD() : null}
186+
in the next {isCDBuild ? ' trigger of ' : ' build trigger '}
187+
{isCDBuild ? renderCustomTagStageOnCD() : null}
184188
{formDataErrorObj.counterX?.message.length > 0
185189
? renderInputErrorMessage(formDataErrorObj.counterX.message)
186190
: null}
@@ -201,14 +205,13 @@ function CustomImageTags({
201205

202206
const renderCustomTagCollapsedValue = () => {
203207
return (
204-
<div className="white-card pl-12 pr-12 pt-8 pb-8 dc__ff-monospace mt-12 mb-12 ml-54">
205-
<div className="flex dc__content-space">
206-
<div>{formData.customTag?.tagPattern}</div>
208+
<div className="white-card pl-12 pr-12 pt-8 pb-8 mt-12 mb-12 ml-54">
209+
<div className="flex dc__content-space dc__ff-monospace">
210+
<div className="bcn-1 pl-8 pr-8 br-4 mb-4">{formData.customTag?.tagPattern}</div>
207211
<Edit className="icon-dim-20" onClick={toggleEditToShowCreateImageView} />
208212
</div>
209-
<hr className="mt-8 mb-8" />
210213
<div className="dc__italic-font-style cn-7">
211-
{`{X}`} = {formData.customTag.counterX} in the next trigger
214+
{`{X}`} = {formData.customTag.counterX} in the next {!isCDBuild ? " build " : "" } trigger
212215
{isCDBuild && formData.customTagStage
213216
? ` of ${getCDStageTypeSelectorValue(formData.customTagStage).label}`
214217
: ''}

‎src/components/CIPipelineN/CustomInputOutputVariables.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext } from 'react'
2-
import { ConditionType, RefVariableType } from '@devtron-labs/devtron-fe-common-lib'
2+
import { ConditionType, CustomInput, RefVariableType } from '@devtron-labs/devtron-fe-common-lib'
33
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
44
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
55
import { ReactComponent as Equal } from '../../assets/icons/ic-variable-equal.svg'
@@ -209,20 +209,19 @@ function CustomInputOutputVariables({ type }: { type: PluginVariableType }) {
209209
width: type === PluginVariableType.OUTPUT ? '80%' : '100%',
210210
}}
211211
>
212-
<input
212+
<CustomInput
213213
data-testid={`custom-script-${type.toLowerCase()}-variable-add-variable-variable-name-textbox`}
214-
className={`w-100 en-2 bw-1 pl-10 pr-10 pt-4 pb-4 h-32 dc__no-bottom-border ${
214+
rootClassName={`w-100 en-2 bw-1 pl-10 pr-10 pt-4 pb-4 h-32 dc__no-bottom-border ${
215215
type === PluginVariableType.INPUT
216216
? 'dc__top-radius-4'
217217
: 'dc__top-left-radius'
218218
}`}
219219
type="text"
220220
placeholder="Variable name"
221221
value={variable.name}
222-
autoComplete="off"
223222
name="name"
224223
onChange={(e) => handleInputOutputValueChange(e, index)}
225-
onBlur={(e) => handleBlur()}
224+
handleOnBlur={handleBlur}
226225
/>
227226
</div>
228227

@@ -296,19 +295,16 @@ function CustomInputOutputVariables({ type }: { type: PluginVariableType }) {
296295
</div>
297296
</div>
298297
)}
299-
<input
298+
<CustomInput
300299
data-testid={`custom-script-${type.toLowerCase()}-variable-add-description-textbox`}
301-
style={{ width: '80% !important' }}
302-
className={`w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__bottom-radius-4 h-32 ${
300+
rootClassName={`w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__bottom-radius-4 h-32 ${
303301
type === PluginVariableType.INPUT ? 'dc__no-top-border' : ''
304302
}`}
305-
autoComplete="off"
306303
placeholder="Description"
307-
type="text"
308304
value={variable.description}
309305
name="description"
310306
onChange={(e) => handleInputOutputValueChange(e, index)}
311-
onBlur={(e) => handleBlur()}
307+
handleOnBlur={handleBlur}
312308
/>
313309
</div>
314310

‎src/components/CIPipelineN/MountFromHost.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
44
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
55
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
66
import { pipelineContext } from '../workflowEditor/workflowEditor'
7+
import { CustomInput } from '@devtron-labs/devtron-fe-common-lib'
78

89
function MountFromHost() {
910
const {
@@ -57,23 +58,19 @@ function MountFromHost() {
5758
<>
5859
<div className="mount-row mb-4 mt-4">
5960
<div className="fw-6 fs-13 lh-32 cn-7 "></div>
60-
<input
61+
<CustomInput
6162
data-testid="script-mount-host-file-path-host"
62-
className="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__left-radius-4 dc__no-right-border"
63-
autoComplete="off"
63+
rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__left-radius-4 dc__no-right-border"
6464
placeholder="File path on Host"
65-
type="text"
6665
onChange={(e) => handleMountPath(e, index)}
6766
value={mountPathMap[MountPathMap.FILEPATHONDISK]}
6867
name={MountPathMap.FILEPATHONDISK}
6968
/>
7069
<div className="flex bw-1 en-2">:</div>
71-
<input
70+
<CustomInput
7271
data-testid="script-mount-host-file-path-container"
73-
className="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__right-radius-4 dc__no-left-border"
74-
autoComplete="off"
72+
rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__right-radius-4 dc__no-left-border"
7573
placeholder="File path on container"
76-
type="text"
7774
onChange={(e) => handleMountPath(e, index)}
7875
value={mountPathMap[MountPathMap.FILEPATHONCONTAINER]}
7976
name={MountPathMap.FILEPATHONCONTAINER}

‎src/components/CIPipelineN/OutputDirectoryPath.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
44
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
55
import TaskFieldTippyDescription from './TaskFieldTippyDescription'
66
import { pipelineContext } from '../workflowEditor/workflowEditor'
7+
import { CustomInput } from '@devtron-labs/devtron-fe-common-lib'
78

89
function OutputDirectoryPath() {
910
const {
@@ -54,14 +55,13 @@ function OutputDirectoryPath() {
5455
{formData[activeStageName].steps[selectedTaskIndex].outputDirectoryPath?.map((elm, index) => {
5556
return (
5657
<div className="custom-script__output-directory pl-220 mt-8" key={`output-directory-${index}`}>
57-
<input
58+
<CustomInput
5859
data-testid="output-directory-path-add-path-textbox"
59-
className="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
60-
autoComplete="off"
60+
rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
6161
placeholder="Enter directory path"
62-
type="text"
6362
value={elm}
6463
onChange={(e) => handleStoreArtifact(e, index)}
64+
name="directory-path"
6565
/>
6666
<Close
6767
className="icon-dim-24 pointer mt-6 ml-6"

0 commit comments

Comments
 (0)