Skip to content

Commit

Permalink
refactor: replace with custom input
Browse files Browse the repository at this point in the history
  • Loading branch information
@eshankvaish
eshankvaish committed Feb 14, 2025
1 parent 82be184 commit 46728d0
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 153 deletions.
1 change: 0 additions & 1 deletion .eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,6 @@ src/components/common/edge/rectangularEdge.tsx
src/components/common/edge/straightEdge.tsx
src/components/common/errorBoundary.tsx
src/components/common/formFields/CopyButton.tsx
src/components/common/formFields/CustomPassword.tsx
src/components/common/formFields/DevtronSwitch.tsx
src/components/common/formFields/Typeahead.tsx
src/components/common/helpers/Helpers.tsx
Expand Down
88 changes: 42 additions & 46 deletions src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,16 @@ import {
SelectPicker,
ToastVariantType,
ToastManager,
CustomInput,
ComponentSizeType,
Button,
ButtonVariantType,
ButtonStyleType,
} from '@devtron-labs/devtron-fe-common-lib'
import { useParams } from 'react-router-dom'
import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-interactive.svg'
import { ReactComponent as AlertTriangle } from '../../../assets/icons/ic-alert-triangle.svg'
import { ReactComponent as HelpIcon } from '../../../assets/icons/ic-help.svg'
import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
import { updateTaints } from '../clusterNodes.service'
Expand Down Expand Up @@ -199,45 +203,32 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
{taintList?.map((taintDetails, index) => {
const _errorObj = errorObj?.taintErrorList[index]
return (
<div className="flexbox mb-8">
<div className="w-100 mr-8">
<input
type="text"
name="key"
data-index={index}
value={taintDetails.key}
className="form__input h-32"
onChange={handleInputChange}
placeholder="Key"
/>
{_errorObj && !_errorObj['key'].isValid && (
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
<span>{_errorObj['key'].message}</span>
</span>
)}
</div>
<div className="w-100 mr-8">
<input
type="text"
name="value"
data-index={index}
value={taintDetails.value}
className="form__input h-32"
onChange={handleInputChange}
placeholder="Value"
/>
{_errorObj && !_errorObj['value'].isValid && (
<span className="flexbox cr-5 mt-4 fw-5 fs-11 flexbox">
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
<span>{_errorObj['value'].message}</span>
</span>
)}
</div>

<div className="w-70 mr-8">
<div className="flex left dc__gap-8 mb-8">
<CustomInput
type="text"
name="key"
data-index={index}
value={taintDetails.key}
onChange={handleInputChange}
placeholder="Key"
error={errorObj && !_errorObj['key'].isValid ? _errorObj['key'].message : null}
fullWidth
/>
<CustomInput
type="text"
name="value"
data-index={index}
value={taintDetails.value}
onChange={handleInputChange}
placeholder="Value"
error={
errorObj && !_errorObj['value'].isValid ? _errorObj['value'].message : null
}
fullWidth
/>
<div className="w-70">
<SelectPicker
inputId='select-taint-effect'
inputId="select-taint-effect"
options={TAINT_OPTIONS}
onChange={(selectedValue: OptionType) => {
onEffectChange(selectedValue, index)
Expand All @@ -247,15 +238,20 @@ export default function EditTaintsModal({ name, version, kind, taints, closePopu
label: taintDetails.effect,
value: taintDetails.effect,
}}
size={ComponentSizeType.large}
/>
</div>
<div>
<DeleteIcon
className="icon-dim-20 mt-4 pointer"
data-index={index}
onClick={deleteTaint}
/>
</div>
<Button
icon={<DeleteIcon />}
dataTestId={`delete-taint-${index}`}
onClick={deleteTaint}
data-index={index}
ariaLabel="Delete Taint"
showAriaLabelInTippy={false}
size={ComponentSizeType.small}
variant={ButtonVariantType.borderLess}
style={ButtonStyleType.negativeGrey}
/>
</div>
)
})}
Expand Down
7 changes: 5 additions & 2 deletions src/components/cluster/ClusterForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,13 @@ import {
DeleteConfirmationModal,
DC_DELETE_SUBTITLES,
Textarea,
PasswordField,
} from '@devtron-labs/devtron-fe-common-lib'
import YAML from 'yaml'
import TippyHeadless from '@tippyjs/react/headless'
import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
import { ReactComponent as ErrorIcon } from '@Icons/ic-warning-y6.svg'
import { useForm, CustomPassword, importComponentFromFELibrary } from '../common'
import { useForm, importComponentFromFELibrary } from '../common'
import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
import { saveCluster, updateCluster, deleteCluster, validateCluster, saveClusters } from './cluster.service'
import { ReactComponent as Close } from '@Icons/ic-close.svg'
Expand Down Expand Up @@ -893,12 +894,14 @@ export default function ClusterForm({
/>
</div>
<div className="w-50 ml-8">
<CustomPassword
<PasswordField
placeholder="Enter password"
name="password"
value={state.password.value}
error={state.userName.error}
onChange={handleOnChange}
label="Password"
shouldShowDefaultPlaceholderOnBlur={false}
/>
</div>
</div>
Expand Down
57 changes: 0 additions & 57 deletions src/components/common/formFields/CustomPassword.tsx
View file

This file was deleted.

26 changes: 0 additions & 26 deletions src/components/common/formFields/customPassword.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion src/components/common/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export * from './helpers/isEmpty'
export * from './helpers/utils'
export * from './helpers/time'
export * from './Contexts'
export { CustomPassword } from './formFields/CustomPassword'
export * from './DatePickers/Calender'
export * from './DatePickers/DayPickerRangeController'
export * from './helpers/compareVersion'
Expand Down
27 changes: 7 additions & 20 deletions src/components/dockerRegistry/ManageRegistry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,56 +425,43 @@ const ManageRegistry = ({
<div className="flexbox w-100 cn-7">
<div className="flexbox w-100 mb-16">
<div className="w-50 mr-8">
<div className="mb-6"> Registry URL</div>
<input
tabIndex={3}
<CustomInput
label="Registry URL"
placeholder="Enter registry URL"
className="form__input"
name="server"
value={customCredential?.server}
onChange={onClickSpecifyImagePullSecret}
autoFocus
autoComplete="off"
/>
</div>
<div className="w-50">
<div className="mb-6">Email</div>
<input
tabIndex={4}
<CustomInput
label="Email"
placeholder="Enter email"
className="form__input"
name="email"
value={customCredential?.email}
onChange={onClickSpecifyImagePullSecret}
autoFocus
autoComplete="off"
/>
</div>
</div>
<div className="w-50 mr-8">
<div className="mb-6">Username</div>
<input
tabIndex={5}
<CustomInput
label="Username"
placeholder="Enter username"
className="form__input"
name="username"
value={customCredential?.username}
onChange={onClickSpecifyImagePullSecret}
autoFocus
autoComplete="off"
/>
</div>
<div className="w-50">
<div className="mb-6">Password</div>
<input
tabIndex={6}
<CustomInput
placeholder="Enter password"
className="form__input"
name="password"
value={customCredential?.password}
onChange={onClickSpecifyImagePullSecret}
autoFocus
autoComplete="off"
/>
</div>
</div>
Expand Down

0 comments on commit 46728d0

Please sign in to comment.