Skip to content

Commit 521e249

Browse files
shivani170shivani170
committed
charts & widget input replacement
1 parent 07d9695 commit 521e249

File tree

7 files changed

+64
-49
lines changed

7 files changed

+64
-49
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-23",
7+
"@devtron-labs/devtron-fe-common-lib": "0.0.45-beta-24",
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: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,6 @@ export default function CreateAppGroup({
331331
<CustomInput
332332
label="Name"
333333
tabIndex={1}
334-
autoComplete="off"
335334
placeholder="Enter filter name"
336335
value={appGroupName}
337336
name="name"

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

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { DialogForm, DialogFormSubmit, showError } from '@devtron-labs/devtron-fe-common-lib'
2+
import { CustomInput, DialogForm, DialogFormSubmit, showError } from '@devtron-labs/devtron-fe-common-lib'
33
import { ProjectType, ChartGroupEntry, EnvironmentType } from '../charts.types';
44
import { ReactComponent as Edit } from '../../../assets/icons/ic-edit.svg';
55
import { ReactComponent as Error } from '../../../assets/icons/ic-warning.svg';
@@ -8,6 +8,7 @@ import { Option } from '../../v2/common/ReactSelect.utils';
88
import placeHolder from '../../../assets/icons/ic-plc-chart.svg';
99
import ReactSelect from 'react-select';
1010
import { getEnvironmentListMin } from '../../../services/service';
11+
import { render } from 'react-dom';
1112

1213
interface ChartGroupBasicDeployProps {
1314
projects: ProjectType[];
@@ -192,38 +193,53 @@ function ApplicationNameList({ charts, handleNameChange, showAppNames }) {
192193
}
193194

194195
let listClassNames = "deploy-selected-chart__list";
195-
if (showAppNames) { listClassNames = `${listClassNames} show` };
196+
if (showAppNames) {
197+
listClassNames = `${listClassNames} show`
198+
}
199+
200+
const renderAdditionalErrorInfo = (suggestedName: string, index: number) => {
201+
if (suggestedName) {
202+
return (
203+
<>
204+
. Suggested Name:
205+
<span className="anchor pointer" onClick={(e) => handleNameChange(index, suggestedName)}>
206+
{suggestedName}
207+
</span>
208+
</>
209+
)
210+
}
211+
}
212+
196213
return (
197214
<div
198215
className={listClassNames}>
199216
{charts.map((chart, index) => {
200-
if (chart.isEnabled) return <div key={index} className="form__row deploy-selected-chart__list-item">
201-
<img onError={handleImageError} src={chart.chartMetaData.icon || ""} alt="" className="dc__chart-grid-item__icon" />
202-
<div className="w-100">
203-
<span className="form__label form__label--lower">{chart.chartMetaData.chartRepoName}/{chart.chartMetaData.chartName}</span>
204-
<input autoComplete="off" className={`form__input ${chart?.name?.error ? 'form__input--error' : ''}`} type="text" data-testid={`chart-name-edit-input-${index}`} tabIndex={index + 1} value={chart.name.value}
205-
onChange={(event) => {
206-
handleNameChange(index, event.target.value)
207-
}} />
208-
<span className={`form__error`}>
209-
{chart.name.error &&
210-
<><Error className="form__icon form__icon--error" />
211-
<>{chart.name.error}.
212-
{chart.name.suggestedName &&
213-
<> Suggested Name:
214-
<span className="anchor pointer"
215-
onClick={(e) => handleNameChange(index, chart.name.suggestedName)}>
216-
{chart.name.suggestedName}
217-
</span>
218-
</>
219-
}
220-
</>
221-
<br />
222-
</>
223-
}
224-
</span>
217+
if (chart.isEnabled) return (
218+
<div key={index} className="form__row deploy-selected-chart__list-item">
219+
<img
220+
onError={handleImageError}
221+
src={chart.chartMetaData.icon || ''}
222+
alt=""
223+
className="dc__chart-grid-item__icon"
224+
/>
225+
<div className="w-100">
226+
<CustomInput
227+
name="name"
228+
label={`${chart.chartMetaData.chartRepoName}/${chart.chartMetaData.chartName}`}
229+
labelClassName="form__label--lower"
230+
rootClassName={`form__input ${chart?.name?.error ? 'form__input--error' : ''}`}
231+
data-testid={`chart-name-edit-input-${index}`}
232+
tabIndex={index + 1}
233+
value={chart.name.value}
234+
onChange={(event) => {
235+
handleNameChange(index, event.target.value)
236+
}}
237+
error={chart.name.error}
238+
additionalErrorInfo={renderAdditionalErrorInfo(chart.name.suggestedName, index)}
239+
/>
240+
</div>
225241
</div>
226-
</div>
242+
)
227243
else return null
228244
})}
229245
</div>

‎src/components/ciPipeline/CIPipelineAdvanced.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -488,13 +488,8 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
488488
value={this.props.form.name}
489489
onChange={this.props.handlePipelineName}
490490
isRequiredField={true}
491+
error={this.props.showError && !errorObj.isValid && this.props.validationRules.name(this.props.form.name).message}
491492
/>
492-
{this.props.showError && !errorObj.isValid ? (
493-
<span className="form__error">
494-
<img src={error} className="form__icon" />
495-
{this.props.validationRules.name(this.props.form.name).message}
496-
</span>
497-
) : null}
498493
</label>
499494
{this.renderTriggerType()}
500495
{this.renderMaterials()}

‎src/components/common/formFields/Widgets/Widgets.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Tippy from '@tippyjs/react'
44
import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
55
import { ReactComponent as Info } from '../../../../assets/icons/info-filled.svg'
66
import { DropdownIndicator, getCommonSelectStyle, Option } from '../../../v2/common/ReactSelect.utils'
7-
import { Checkbox } from '@devtron-labs/devtron-fe-common-lib'
7+
import { Checkbox, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
88
import { ConditionalWrap } from '../../helpers/Helpers'
99
import {
1010
CheckboxWithTippyProps,
@@ -106,13 +106,13 @@ export const StyledInput = (props: StyledInputPropsType): JSX.Element => {
106106
maxLength={props.maxLength}
107107
/>
108108
) : (
109-
<input
109+
<CustomInput
110110
placeholder={props.placeholder && props.placeholder}
111111
name={props.title?.replace(/\s/g, '_') || 'input_widget'}
112-
className="form__input h-32"
112+
rootClassName="h-32"
113113
value={inputValue}
114114
onChange={onValueChange}
115-
onBlur={onInputBlur}
115+
handleOnBlur={onInputBlur}
116116
autoComplete="off"
117117
required={props.isRequired}
118118
{...(props.type === 'numberInput'

‎src/components/gitProvider/AddGitHostConfigModal.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ export class GitHostConfigModal extends Component<GitHostConfigModalProps, GitHo
6161
<CustomInput
6262
label="Git host name"
6363
name="app-name"
64-
autoComplete="off"
6564
value={this.state.name}
6665
onChange={this.handleFilterInput}
6766
placeholder="Enter name"

‎src/components/security/AddCveModal.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
2-
import { showError, Progressing, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
2+
import { showError, Progressing, VisibleModal, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
33
import { getCVEPolicies } from './security.service';
4-
import { ViewType } from '../../config';
4+
import { CVE_ID_NOT_FOUND, ViewType } from '../../config';
55
import { VulnerabilityAction } from './security.types';
66
import { ReactComponent as Error } from '../../assets/icons/ic-warning.svg';
77
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg';
@@ -156,12 +156,18 @@ export class AddCveModal extends Component<AddCveModalProps, AddCveModalState>{
156156
<form className="whitelist-cve" onSubmit={(event) => { event.preventDefault() }}>
157157
<div className="whitelist-cve__cve-id ml-24 mr-24 mb-20">
158158
<label className="dc__block flex-1 mb-5 mr-16 ">
159-
<span className="form__label">CVE ID</span>
160-
<input autoComplete="off" ref={node => this._inputRef = node} type="text" className="form__input" autoFocus tabIndex={1} placeholder="Enter CVE ID" value={this.state.cve} onChange={this.handleCveChange} />
161-
<span className="form__error">
162-
{this.state.cveError ? <><Error className="form__icon form__icon--error" /> CVE ID not found <br /></>
163-
: null}
164-
</span>
159+
<CustomInput
160+
name="cve"
161+
label="CVE ID"
162+
ref={(node) => (this._inputRef = node)}
163+
autoFocus
164+
tabIndex={1}
165+
placeholder="Enter CVE ID"
166+
value={this.state.cve}
167+
onChange={this.handleCveChange}
168+
isRequiredField={true}
169+
error={this.state.cveError && CVE_ID_NOT_FOUND}
170+
/>
165171
</label>
166172
{/* <button type="submit" className="cta mb-5" tabIndex={2} onClick={this.searchCVE}>Search</button> */}
167173
</div>

0 commit comments

Comments
 (0)