Skip to content

Commit 46728d0

Browse files
eshankvaisheshankvaish
committed
refactor: replace with custom input
1 parent 82be184 commit 46728d0

File tree

7 files changed

+54
-153
lines changed

7 files changed

+54
-153
lines changed

‎.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,6 @@ src/components/common/edge/rectangularEdge.tsx
248248
src/components/common/edge/straightEdge.tsx
249249
src/components/common/errorBoundary.tsx
250250
src/components/common/formFields/CopyButton.tsx
251-
src/components/common/formFields/CustomPassword.tsx
252251
src/components/common/formFields/DevtronSwitch.tsx
253252
src/components/common/formFields/Typeahead.tsx
254253
src/components/common/helpers/Helpers.tsx

‎src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,16 @@ import {
2626
SelectPicker,
2727
ToastVariantType,
2828
ToastManager,
29+
CustomInput,
30+
ComponentSizeType,
31+
Button,
32+
ButtonVariantType,
33+
ButtonStyleType,
2934
} from '@devtron-labs/devtron-fe-common-lib'
3035
import { useParams } from 'react-router-dom'
3136
import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
3237
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
3338
import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-interactive.svg'
34-
import { ReactComponent as AlertTriangle } from '../../../assets/icons/ic-alert-triangle.svg'
3539
import { ReactComponent as HelpIcon } from '../../../assets/icons/ic-help.svg'
3640
import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
3741
import { updateTaints } from '../clusterNodes.service'
@@ -199,45 +203,32 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
199203
{taintList?.map((taintDetails, index) => {
200204
const _errorObj = errorObj?.taintErrorList[index]
201205
return (
202-
<div className="flexbox mb-8">
203-
<div className="w-100 mr-8">
204-
<input
205-
type="text"
206-
name="key"
207-
data-index={index}
208-
value={taintDetails.key}
209-
className="form__input h-32"
210-
onChange={handleInputChange}
211-
placeholder="Key"
212-
/>
213-
{_errorObj && !_errorObj['key'].isValid && (
214-
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
215-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
216-
<span>{_errorObj['key'].message}</span>
217-
</span>
218-
)}
219-
</div>
220-
<div className="w-100 mr-8">
221-
<input
222-
type="text"
223-
name="value"
224-
data-index={index}
225-
value={taintDetails.value}
226-
className="form__input h-32"
227-
onChange={handleInputChange}
228-
placeholder="Value"
229-
/>
230-
{_errorObj && !_errorObj['value'].isValid && (
231-
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
232-
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
233-
<span>{_errorObj['value'].message}</span>
234-
</span>
235-
)}
236-
</div>
237-
238-
<div className="w-70 mr-8">
206+
<div className="flex left dc__gap-8 mb-8">
207+
<CustomInput
208+
type="text"
209+
name="key"
210+
data-index={index}
211+
value={taintDetails.key}
212+
onChange={handleInputChange}
213+
placeholder="Key"
214+
error={errorObj && !_errorObj['key'].isValid ? _errorObj['key'].message : null}
215+
fullWidth
216+
/>
217+
<CustomInput
218+
type="text"
219+
name="value"
220+
data-index={index}
221+
value={taintDetails.value}
222+
onChange={handleInputChange}
223+
placeholder="Value"
224+
error={
225+
errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null
226+
}
227+
fullWidth
228+
/>
229+
<div className="w-70">
239230
<SelectPicker
240-
inputId='select-taint-effect'
231+
inputId="select-taint-effect"
241232
options={TAINT_OPTIONS}
242233
onChange={(selectedValue: OptionType) => {
243234
onEffectChange(selectedValue, index)
@@ -247,15 +238,20 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
247238
label: taintDetails.effect,
248239
value: taintDetails.effect,
249240
}}
241+
size={ComponentSizeType.large}
250242
/>
251243
</div>
252-
<div>
253-
<DeleteIcon
254-
className="icon-dim-20 mt-4 pointer"
255-
data-index={index}
256-
onClick={deleteTaint}
257-
/>
258-
</div>
244+
<Button
245+
icon={<DeleteIcon />}
246+
dataTestId={`delete-taint-${index}`}
247+
onClick={deleteTaint}
248+
data-index={index}
249+
ariaLabel="Delete Taint"
250+
showAriaLabelInTippy={false}
251+
size={ComponentSizeType.small}
252+
variant={ButtonVariantType.borderLess}
253+
style={ButtonStyleType.negativeGrey}
254+
/>
259255
</div>
260256
)
261257
})}

‎src/components/cluster/ClusterForm.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,13 @@ import {
4040
DeleteConfirmationModal,
4141
DC_DELETE_SUBTITLES,
4242
Textarea,
43+
PasswordField,
4344
} from '@devtron-labs/devtron-fe-common-lib'
4445
import YAML from 'yaml'
4546
import TippyHeadless from '@tippyjs/react/headless'
4647
import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
4748
import { ReactComponent as ErrorIcon } from '@Icons/ic-warning-y6.svg'
48-
import { useForm, CustomPassword, importComponentFromFELibrary } from '../common'
49+
import { useForm, importComponentFromFELibrary } from '../common'
4950
import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
5051
import { saveCluster, updateCluster, deleteCluster, validateCluster, saveClusters } from './cluster.service'
5152
import { ReactComponent as Close } from '@Icons/ic-close.svg'
@@ -893,12 +894,14 @@ export default function ClusterForm({
893894
/>
894895
</div>
895896
<div className="w-50 ml-8">
896-
<CustomPassword
897+
<PasswordField
898+
placeholder="Enter password"
897899
name="password"
898900
value={state.password.value}
899901
error={state.userName.error}
900902
onChange={handleOnChange}
901903
label="Password"
904+
shouldShowDefaultPlaceholderOnBlur={false}
902905
/>
903906
</div>
904907
</div>

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

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎src/components/common/formFields/customPassword.css

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/components/common/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export * from './helpers/isEmpty'
3030
export * from './helpers/utils'
3131
export * from './helpers/time'
3232
export * from './Contexts'
33-
export { CustomPassword } from './formFields/CustomPassword'
3433
export * from './DatePickers/Calender'
3534
export * from './DatePickers/DayPickerRangeController'
3635
export * from './helpers/compareVersion'

‎src/components/dockerRegistry/ManageRegistry.tsx

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -425,56 +425,43 @@ const ManageRegistry = ({
425425
<div className="flexbox w-100 cn-7">
426426
<div className="flexbox w-100 mb-16">
427427
<div className="w-50 mr-8">
428-
<div className="mb-6"> Registry URL</div>
429-
<input
430-
tabIndex={3}
428+
<CustomInput
429+
label="Registry URL"
431430
placeholder="Enter registry URL"
432-
className="form__input"
433431
name="server"
434432
value={customCredential?.server}
435433
onChange={onClickSpecifyImagePullSecret}
436434
autoFocus
437-
autoComplete="off"
438435
/>
439436
</div>
440437
<div className="w-50">
441438
<div className="mb-6">Email</div>
442-
<input
443-
tabIndex={4}
439+
<CustomInput
440+
label="Email"
444441
placeholder="Enter email"
445-
className="form__input"
446442
name="email"
447443
value={customCredential?.email}
448444
onChange={onClickSpecifyImagePullSecret}
449-
autoFocus
450-
autoComplete="off"
451445
/>
452446
</div>
453447
</div>
454448
<div className="w-50 mr-8">
455449
<div className="mb-6">Username</div>
456-
<input
457-
tabIndex={5}
450+
<CustomInput
451+
label="Username"
458452
placeholder="Enter username"
459-
className="form__input"
460453
name="username"
461454
value={customCredential?.username}
462455
onChange={onClickSpecifyImagePullSecret}
463-
autoFocus
464-
autoComplete="off"
465456
/>
466457
</div>
467458
<div className="w-50">
468459
<div className="mb-6">Password</div>
469-
<input
470-
tabIndex={6}
460+
<CustomInput
471461
placeholder="Enter password"
472-
className="form__input"
473462
name="password"
474463
value={customCredential?.password}
475464
onChange={onClickSpecifyImagePullSecret}
476-
autoFocus
477-
autoComplete="off"
478465
/>
479466
</div>
480467
</div>

0 commit comments

Comments
 (0)