Skip to content

Commit a44c998

Browse files
shivani170shivani170
committed
replacement of input
1 parent f581eb7 commit a44c998

File tree

9 files changed

+40
-89
lines changed

9 files changed

+40
-89
lines changed

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

Lines changed: 7 additions & 10 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,9 +209,9 @@ 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'
@@ -222,7 +222,7 @@ function CustomInputOutputVariables({ type }: { type: PluginVariableType }) {
222222
autoComplete="off"
223223
name="name"
224224
onChange={(e) => handleInputOutputValueChange(e, index)}
225-
onBlur={(e) => handleBlur()}
225+
handleOnBlur={(e) => handleBlur()}
226226
/>
227227
</div>
228228

@@ -296,19 +296,16 @@ function CustomInputOutputVariables({ type }: { type: PluginVariableType }) {
296296
</div>
297297
</div>
298298
)}
299-
<input
299+
<CustomInput
300300
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 ${
301+
rootClassName={`w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__bottom-radius-4 h-32 ${
303302
type === PluginVariableType.INPUT ? 'dc__no-top-border' : ''
304303
}`}
305-
autoComplete="off"
306304
placeholder="Description"
307-
type="text"
308305
value={variable.description}
309306
name="description"
310307
onChange={(e) => handleInputOutputValueChange(e, index)}
311-
onBlur={(e) => handleBlur()}
308+
handleOnBlur={(e) => handleBlur()}
312309
/>
313310
</div>
314311

‎src/components/CIPipelineN/MountFromHost.tsx

Lines changed: 5 additions & 9 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 {
@@ -56,24 +57,19 @@ function MountFromHost() {
5657
return (
5758
<>
5859
<div className="mount-row mb-4 mt-4">
59-
<div className="fw-6 fs-13 lh-32 cn-7 "></div>
60-
<input
60+
<CustomInput
6161
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"
62+
rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__left-radius-4 dc__no-right-border"
6463
placeholder="File path on Host"
65-
type="text"
6664
onChange={(e) => handleMountPath(e, index)}
6765
value={mountPathMap[MountPathMap.FILEPATHONDISK]}
6866
name={MountPathMap.FILEPATHONDISK}
6967
/>
7068
<div className="flex bw-1 en-2">:</div>
71-
<input
69+
<CustomInput
7270
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"
71+
rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__right-radius-4 dc__no-left-border"
7572
placeholder="File path on container"
76-
type="text"
7773
onChange={(e) => handleMountPath(e, index)}
7874
value={mountPathMap[MountPathMap.FILEPATHONCONTAINER]}
7975
name={MountPathMap.FILEPATHONCONTAINER}

‎src/components/CIPipelineN/TaskTypeDetailComponent.tsx

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -382,9 +382,9 @@ export function TaskTypeDetailComponent() {
382382
<div className="mb-12">
383383
<div className="row-container">
384384
<div className="fw-6 fs-13 lh-32 cn-7 "></div>
385-
<input
386-
style={{ width: '80% !important' }}
387-
className="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
385+
<CustomInput
386+
name="mountCodeToContainerPath"
387+
rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
388388
autoComplete="off"
389389
data-testid="script-mount-container-textbox"
390390
placeholder="Eg file/folder"
@@ -440,37 +440,6 @@ export function TaskTypeDetailComponent() {
440440
)
441441
}
442442

443-
const renderDockerScript = () => {
444-
if (formData[activeStageName].steps[selectedTaskIndex].inlineStepDetail.scriptType === ScriptType.DOCKERFILE) {
445-
return (
446-
<>
447-
<div className="row-container mb-12">
448-
<div className="fw-6 fs-13 lh-32 cn-7 ">Docker path *</div>{' '}
449-
<input
450-
style={{ width: '80% !important' }}
451-
className="form__input bcn-1 w-80"
452-
autoComplete="off"
453-
placeholder="Enter Mount script path"
454-
type="text"
455-
/>
456-
</div>
457-
<div className="row-container mb-12">
458-
<Tippy className="default-tt" arrow={false} content="Path where script should be mounted">
459-
<div className="fw-6 fs-13 lh-32 cn-7 ">Mount script at *</div>
460-
</Tippy>
461-
<input
462-
style={{ width: '80% !important' }}
463-
className="form__input bcn-1 w-80"
464-
autoComplete="off"
465-
placeholder="Enter Mount script path"
466-
type="text"
467-
/>
468-
</div>
469-
</>
470-
)
471-
}
472-
}
473-
474443
if (formData[activeStageName].steps[selectedTaskIndex].inlineStepDetail.scriptType === ScriptType.SHELL) {
475444
return renderShellScript()
476445
} else if (

‎src/components/ciConfig/CIBuildpackBuildOptions.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
LanguageOptionType,
2727
VersionsOptionType,
2828
} from './types'
29-
import { stopPropagation, CIBuildType, TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
29+
import { stopPropagation, CIBuildType, TippyCustomized, TippyTheme, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
3030
import { DOCUMENTATION } from '../../config'
3131
import {
3232
AUTO_DETECT,
@@ -545,16 +545,14 @@ export default function CIBuildpackBuildOptions({
545545
<span className="checkout-path-container bcn-1 en-2 bw-1 dc__no-right-border dc__ellipsis-right">
546546
./
547547
</span>
548-
<input
548+
<CustomInput
549549
data-testid="build-pack-project-path-textbox"
550550
tabIndex={4}
551-
type="text"
552-
className="form__input file-name"
551+
rootClassName="file-name"
553552
placeholder="Project path"
554553
name="projectPath"
555554
value={projectPathVal === './' ? '' : projectPathVal}
556555
onChange={handleOnChangeConfig}
557-
autoComplete={'off'}
558556
disabled={configOverrideView && !allowOverride}
559557
/>
560558
</div>

‎src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useRef, useState } from 'react'
22
import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
33
import { ButtonWithLoader } from '../../common'
4-
import { showError, Progressing, Drawer, InfoColourBar, Reload, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
4+
import { showError, Progressing, Drawer, InfoColourBar, Reload, copyToClipboard, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
55
import { ReactComponent as Help } from '../../../assets/icons/ic-help.svg'
66
import { ReactComponent as Question } from '../../../assets/icons/ic-help-outline.svg'
77
import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
@@ -31,6 +31,7 @@ import { executeWebhookAPI, getExternalCIConfig, getWebhookAPITokenList } from '
3131
import Tippy from '@tippyjs/react'
3232
import { toast } from 'react-toastify'
3333
import CodeEditor from '../../CodeEditor/CodeEditor'
34+
import { GENERATE_TOKEN_NAME_VALIDATION } from '../../../config/constantMessaging'
3435

3536
export function WebhookDetailsModal({ close }: WebhookDetailType) {
3637
const { appId, webhookId } = useParams<{
@@ -357,10 +358,10 @@ export function WebhookDetailsModal({ close }: WebhookDetailType) {
357358
<Question className="icon-dim-16 ml-6" />
358359
</Tippy>
359360
</div>
360-
<input
361-
type="text"
361+
<CustomInput
362+
name="api-token"
362363
placeholder="Enter API token"
363-
className="bcn-0 dc__no-border form__input"
364+
rootClassName="bcn-0 dc__no-border"
364365
onChange={handleTokenChange}
365366
value={tryoutAPIToken}
366367
/>
@@ -443,19 +444,13 @@ export function WebhookDetailsModal({ close }: WebhookDetailType) {
443444
<div>
444445
<div className="mt-16">
445446
<div className="mb-8 dc__required-field">Token name</div>
446-
<input
447-
type="text"
448-
className="form__input"
447+
<CustomInput
448+
name="token-name"
449449
value={tokenName}
450450
onChange={handleTokenNameChange}
451451
disabled={!!generatedAPIToken}
452+
error={showTokenNameError && GENERATE_TOKEN_NAME_VALIDATION}
452453
/>
453-
{showTokenNameError && (
454-
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
455-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
456-
<span>Token name is required to generate token</span>
457-
</span>
458-
)}
459454
{generatedAPIToken && renderSelectedToken('Generated', generatedAPIToken)}
460455
</div>
461456
{!generatedAPIToken && (

‎src/components/workflowEditor/EmptyWorkflow.tsx

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useRef, useState } from 'react'
22
import { EmptyWorkflowProps, EmptyWorkflowState } from './types'
3-
import { DialogForm, DialogFormSubmit, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
3+
import { CustomInput, DialogForm, DialogFormSubmit, ServerErrors, showError } from '@devtron-labs/devtron-fe-common-lib'
44
import { createWorkflow } from './service'
55
import { toast } from 'react-toastify'
66
import error from '../../assets/icons/misc/errorInfo.svg'
@@ -94,23 +94,16 @@ export default function EmptyWorkflow(props: EmptyWorkflowProps) {
9494
closeOnESC={true}
9595
>
9696
<label className="form__row" htmlFor="workflow-name">
97-
<span className="form__label dc__required-field">Workflow Name</span>
98-
<input
97+
<CustomInput
9998
autoComplete="off"
100-
id="workflow-name"
101-
className="form__input"
102-
type="text"
99+
dataTestid="workflow-name"
103100
name="workflow-name"
104101
value={state.name}
105102
placeholder="Eg. my-job-workflow"
106103
onChange={handleWorkflowName}
107-
required
104+
isRequiredField={true}
105+
error={state.showError && !isNameValid().isValid && isNameValid().errorMsg}
108106
/>
109-
{state.showError && !isNameValid().isValid ? (
110-
<span className="form__error">
111-
<img src={error} alt="" className="form__icon" /> {isNameValid().errorMsg}
112-
</span>
113-
) : null}
114107
</label>
115108
<div className="flexbox dc__gap-12">
116109
<button

‎src/config/constantMessaging.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,3 +430,4 @@ export const NO_TASKS_CONFIGURED_ERROR = 'No tasks are configured in this job pi
430430
export const FEATURE_DISABLED = 'This feature is disabled'
431431

432432
export const DUPLICATE_PIPELINE_NAME_VALIDATION = "You cannot use same name for pipeline within an app."
433+
export const GENERATE_TOKEN_NAME_VALIDATION = "Token name is required to generate token"

0 commit comments

Comments
 (0)