Skip to content

Commit 07d9695

Browse files
shivani170shivani170
committed
added custom input for all dashbboard
1 parent fe36523 commit 07d9695

File tree

17 files changed

+146
-146
lines changed

17 files changed

+146
-146
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
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-beta-15",
7+
"@devtron-labs/devtron-fe-common-lib": "0.0.45-beta-23",
88
"@rjsf/core": "^5.13.3",
99
"@rjsf/utils": "^5.13.3",
1010
"@rjsf/validator-ajv8": "^5.13.3",

‎src/components/ApplicationGroup/CreateAppGroup.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Checkbox,
44
CHECKBOX_VALUE,
55
ConditionalWrap,
6+
CustomInput,
67
Drawer,
78
GenericEmptyState,
89
Progressing,
@@ -327,25 +328,18 @@ export default function CreateAppGroup({
327328
return (
328329
<div className="p-20 bcn-0 dc__overflow-auto" style={{ height: 'calc(100vh - 128px)' }}>
329330
<div className="form__row mb-16">
330-
<span className="form__label dc__required-field">Name</span>
331-
<input
331+
<CustomInput
332+
label="Name"
332333
tabIndex={1}
333-
className="form__input"
334334
autoComplete="off"
335335
placeholder="Enter filter name"
336-
type="text"
337336
value={appGroupName}
338337
name="name"
339338
onChange={onInputChange}
340339
disabled={selectedAppGroup && !!selectedAppGroup.value}
340+
isRequiredField={true}
341+
error={showErrorMsg && nameErrorMessage()}
341342
/>
342-
343-
{showErrorMsg && (
344-
<span className="form__error">
345-
<Error className="form__icon form__icon--error" />
346-
{nameErrorMessage()}
347-
</span>
348-
)}
349343
</div>
350344
<div className="form__row mb-16">
351345
<span className="form__label">Description (Max 50 characters)</span>

‎src/components/CustomChart/UploadChartModal.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useRef, useState } from 'react'
22
import { ButtonWithLoader } from '../common'
3-
import { showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
3+
import { CustomInput, noop, showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
44
import { ReactComponent as CloseIcon } from '../../assets/icons/ic-close.svg'
55
import { uploadChart, validateChart } from './customChart.service'
66
import errorImage from '../../assets/img/ic_upload_chart_error.png'
@@ -121,14 +121,14 @@ export default function UploadChartModal({ closeUploadPopup }: UploadChartModalT
121121
)}
122122
<div>
123123
<div>
124-
<span className="fs-13 fw-4 cn-7 dc__required-field">
125-
Chart Name
126-
</span>
127-
<input
128-
type="text"
129-
className="w-100 br-4 en-2 bw-1 mt-6 form__input"
124+
<CustomInput
125+
label="Chart Name"
126+
name="chartName"
127+
onChange={noop}
128+
rootClassName="w-100 br-4 en-2 bw-1 mt-6 form__input"
130129
disabled
131130
value={chartDetail.chartName}
131+
isRequiredField={true}
132132
/>
133133
</div>
134134
<div className="mt-16">

‎src/components/app/create/CreateApp.tsx

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
RadioGroup,
1515
RadioGroupItem,
1616
noop,
17+
CustomInput,
1718
} from '@devtron-labs/devtron-fe-common-lib'
1819
import { AddNewAppProps, AddNewAppState } from '../types'
1920
import { ViewType, getAppComposeURL, APP_COMPOSE_STAGE, AppCreationType } from '../../../config'
@@ -306,31 +307,19 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
306307
<div className="scrollable-content p-20">
307308
<div className="form__row">
308309
<div className={`${this.props.isJobView ? 'mb-12' : ''}`}>
309-
<span className="form__label dc__required-field">
310-
{this.props.isJobView ? 'Job' : 'App'} Name
311-
</span>
312-
<input
310+
<CustomInput
313311
ref={(node) => (this._inputAppName = node)}
314312
data-testid={`${this.props.isJobView ? 'job' : 'app'}-name-textbox`}
315-
className="form__input"
316-
type="text"
317313
name="app-name"
314+
label={`${this.props.isJobView ? 'Job' : 'App'} Name`}
318315
value={this.state.form.appName}
319316
placeholder={`e.g. my-first-${this.props.isJobView ? 'job' : 'app'}`}
320-
autoComplete="off"
321317
autoFocus={true}
322318
tabIndex={1}
323319
onChange={this.handleAppname}
324-
required
320+
isRequiredField={true}
321+
error={appNameErrors && !this.state.isValid.appName && errorObject[0].message}
325322
/>
326-
<span className="form__error">
327-
{appNameErrors && !this.state.isValid.appName ? (
328-
<>
329-
<Error className="form__icon form__icon--error" />
330-
{errorObject[0].message} <br />
331-
</>
332-
) : null}
333-
</span>
334323
</div>
335324
{!this.props.isJobView && (
336325
<span className="form__text-field-info form__text-field-info--create-app">

‎src/components/cdPipeline/BuildCD.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ export default function BuildCD({
334334
<>
335335
<div className="form__row form__row--flex mt-12">
336336
<div className="w-50 mr-8">
337-
<div className="form__label">Environment*</div>
337+
<div className="form__label dc__required-field">Environment</div>
338338
<ReactSelect
339339
menuPortalTarget={isAdvanced ? null : document.getElementById('visible-modal')}
340340
closeMenuOnScroll={true}

‎src/components/charts/modal/CreateChartGroup.tsx

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react'
22
import { ChartGroup, CreateChartGroupProps } from '../charts.types'
3-
import { showError, Progressing, DialogForm } from '@devtron-labs/devtron-fe-common-lib'
3+
import { showError, Progressing, DialogForm, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
44
import { getChartGroups, saveChartGroup, updateChartGroup } from '../charts.service'
55
import { getChartGroupEditURL } from '../charts.helper'
66
import { toast } from 'react-toastify'
@@ -163,29 +163,18 @@ export default class CreateChartGroup extends Component<CreateChartGroupProps, C
163163
onSave={this.saveChartGroup}
164164
>
165165
<label className="form__row">
166-
<span className="form__label dc__required-field" data-testid="create-group-name-heading">Name</span>
167-
<input
168-
className="form__input"
169-
autoComplete="off"
170-
type="text"
166+
<CustomInput
171167
name="name"
168+
label="Name"
172169
value={this.state.name.value}
173170
data-testid="create-group-name-value"
174171
placeholder="e.g. elastic-stack"
175172
autoFocus={true}
176173
tabIndex={1}
177174
onChange={this.handleNameChange}
178-
required
175+
isRequiredField={true}
176+
error={this.state.name.error}
179177
/>
180-
<span className="form__error">
181-
{this.state.name.error.map((err) => {
182-
return (
183-
<div data-testid="chart-group-min-5-char">
184-
<Error className="form__icon form__icon--error" /> {err}
185-
</div>
186-
)
187-
})}
188-
</span>
189178
</label>
190179

191180
<label className="form__row">

‎src/components/charts/modal/DeployChart.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
DropdownIcon,
66
useJsonYaml,
77
} from '../../common'
8-
import { ServerErrors, showError, Progressing, DeleteDialog, ForceDeleteDialog, sortCallback, getTeamListMin, ResponseType, DeploymentAppTypes } from '@devtron-labs/devtron-fe-common-lib'
8+
import { ServerErrors, showError, Progressing, DeleteDialog, ForceDeleteDialog, sortCallback, getTeamListMin, ResponseType, DeploymentAppTypes, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
99
import { getEnvironmentListHelmApps, getEnvironmentListMin } from '../../../services/service'
1010
import { toast } from 'react-toastify'
1111
import { DeployChartProps } from './deployChart.types'
@@ -522,12 +522,11 @@ const DeployChart: React.FC<DeployChartProps> = ({
522522
<div className="overflown" ref={deployChartForm}>
523523
<div className="hide-scroll">
524524
<label className="form__row form__row--w-100">
525-
<span className="form__label">App Name</span>
526-
<input
527-
autoComplete="off"
525+
<CustomInput
526+
name="appName"
527+
label="App Name"
528528
tabIndex={1}
529529
placeholder="App name"
530-
className="form__input"
531530
value={appName}
532531
autoFocus
533532
disabled={!!isUpdate}

‎src/components/ciConfig/CIAdvancedConfig.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ReactComponent as Cross } from '../../assets/icons/ic-cross.svg'
55
import { ReactComponent as QuestionIcon } from '../v2/assets/icons/ic-question.svg'
66
import { ReactComponent as HelpIcon } from '../../assets/icons/ic-help.svg'
77
import { CIAdvancedConfigProps } from './types'
8-
import { TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
8+
import { CustomInput, TippyCustomized, TippyTheme } from '@devtron-labs/devtron-fe-common-lib'
99
import TargetPlatformSelector from './TargetPlatformSelector'
1010

1111
export default function CIAdvancedConfig({
@@ -96,15 +96,13 @@ export default function CIAdvancedConfig({
9696
args.map((arg, idx) => (
9797
<div className="flexbox justify-space" key={`build-${idx}`}>
9898
<div className="mt-8 w-100">
99-
<input
99+
<CustomInput
100100
data-testid={`build-pack-build-env-key${idx}`}
101101
name="arg-key"
102-
className={`w-100 dc__top-radius-4 pl-10 pr-10 pt-6 pb-6 en-2 bw-1 ${
102+
rootClassName={`w-100 dc__top-radius-4 pl-10 pr-10 pt-6 pb-6 en-2 bw-1 ${
103103
updateNotAllowed ? 'cursor-not-allowed' : ''
104104
}`}
105-
autoComplete="off"
106105
placeholder="Key"
107-
type="text"
108106
value={arg.k}
109107
data-id={idx}
110108
data-value={arg.v}

‎src/components/ciPipeline/CIPipelineAdvanced.tsx

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { RadioGroup, RadioGroupItem, Toggle } from '@devtron-labs/devtron-fe-common-lib'
2+
import { CustomInput, RadioGroup, RadioGroupItem, Toggle } from '@devtron-labs/devtron-fe-common-lib'
33
import { TriggerType, SourceTypeMap } from '../../config'
44
import { Trash, Page } from '../common'
55
import { ReactComponent as Docker } from '../../assets/icons/misc/docker.svg'
@@ -156,16 +156,15 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
156156
)}
157157
</div>
158158
<label className="form__row">
159-
<span className="form__label dc__required-field">Stage Name</span>
160-
<input
161-
className="form__input"
162-
autoComplete="off"
159+
<CustomInput
160+
name="stage-name"
161+
label="Stage Name"
163162
placeholder="Enter stage name"
164-
type="text"
165163
value={stage.name}
166164
onChange={(event) =>
167165
this.props.handleChange(event, stage.id, key, index, 'name')
168166
}
167+
isRequiredField={true}
169168
/>
170169
</label>
171170
<label className="form__row">
@@ -190,12 +189,10 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
190189
</div>
191190
</label>
192191
<label className="form__row">
193-
<span className="form__label">Report directory path</span>
194-
<input
195-
className="form__input"
196-
autoComplete="off"
192+
<CustomInput
193+
name="report-path"
194+
label="Report directory path"
197195
placeholder="Enter report directory path"
198-
type="text"
199196
value={stage.outputLocation}
200197
onChange={(event) =>
201198
this.props.handleChange(event, stage.id, key, index, 'outputLocation')
@@ -234,16 +231,15 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
234231
)}
235232
</div>
236233
<label className="form__row">
237-
<span className="form__label dc__required-field">Stage Name</span>
238-
<input
239-
className="form__input"
240-
autoComplete="off"
234+
<CustomInput
235+
name="stage-name"
236+
label="Stage Name"
241237
placeholder="Enter stage name"
242-
type="text"
243238
value={stage.name}
244239
onChange={(event) =>
245240
this.props.handleChange(event, stage.id, key, index, 'name')
246241
}
242+
isRequiredField={true}
247243
/>
248244
</label>
249245
<label className="form__row">
@@ -268,12 +264,10 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
268264
</div>
269265
</label>
270266
<label className="form__row">
271-
<span className="form__label">Report directory path</span>
272-
<input
273-
className="form__input"
274-
autoComplete="off"
267+
<CustomInput
268+
name="report-path"
269+
label="Report directory path"
275270
placeholder="Enter directory path"
276-
type="text"
277271
value={stage.outputLocation}
278272
onChange={(event) =>
279273
this.props.handleChange(event, stage.id, key, index, 'outputLocation')
@@ -374,12 +368,10 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
374368
}}
375369
/>
376370
<div className="form__field">
377-
<label className="form__label">Key</label>
378-
<input
379-
className="form__input"
380-
autoComplete="off"
371+
<CustomInput
372+
name="key"
373+
label="Key"
381374
placeholder="Name"
382-
type="text"
383375
value={arg.key}
384376
onChange={(event) => {
385377
this.props.handleDockerArgChange(event, index, 'key')
@@ -488,15 +480,14 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
488480
}`}
489481
>
490482
<label className="form__row">
491-
<span className="form__label dc__required-field">Pipeline Name</span>
492-
<input
493-
className="form__input"
494-
autoComplete="off"
483+
<CustomInput
484+
name="pipeline-name"
485+
label="Pipeline Name"
495486
disabled={!!this.props.ciPipeline.id}
496487
placeholder="e.g. my-first-pipeline"
497-
type="text"
498488
value={this.props.form.name}
499489
onChange={this.props.handlePipelineName}
490+
isRequiredField={true}
500491
/>
501492
{this.props.showError && !errorObj.isValid ? (
502493
<span className="form__error">

0 commit comments

Comments
 (0)