From 9d43b19a9554275202ab6a14ec6e4ce969f3d006 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Wed, 29 Jan 2025 15:44:39 +0530
Subject: [PATCH 01/36] refactor: typing clean up for custom input

---
 .../APITokens/CreateAPIToken.tsx              |  2 +-
 .../Authorization/APITokens/EditAPIToken.tsx  |  1 +
 .../AddEdit/PermissionGroupForm.tsx           |  2 +-
 .../SSOLoginServices/SSOLogin.component.tsx   |  4 +-
 .../BulkSelection/BulkDeleteModal.tsx         | 25 +++++----
 .../ClusterEnvironmentDrawer.tsx              | 11 ++--
 .../List/UploadChartModal.tsx                 | 21 ++++---
 .../ConfigMapSecret/ConfigMapSecretForm.tsx   | 20 +++----
 .../ApplicationGroup/CreateAppGroup.tsx       |  3 +-
 .../Details/TriggerView/BulkSourceChange.tsx  |  2 +-
 src/components/CIPipelineN/Build.tsx          |  4 +-
 .../CIPipelineN/ConditionContainer.tsx        | 18 +++---
 .../CreatePluginFormContent.tsx               |  3 +-
 .../CreatePluginFormField.tsx                 | 17 +-----
 .../CIPipelineN/CreatePluginModal/types.ts    |  2 +-
 src/components/CIPipelineN/DockerArgs.tsx     |  4 --
 src/components/CIPipelineN/MountFromHost.tsx  |  8 ++-
 .../CIPipelineN/OutputDirectoryPath.tsx       |  1 -
 .../CIPipelineN/TaskDetailComponent.tsx       |  5 +-
 .../CIPipelineN/TaskTypeDetailComponent.tsx   | 11 ++--
 .../VariableDataTable/ValueConfigOverlay.tsx  | 10 ++--
 .../VariableConfigOverlay.tsx                 |  3 +-
 src/components/app/create/CreateApp.tsx       |  2 +-
 src/components/cdPipeline/BuildCD.tsx         |  4 +-
 src/components/chartRepo/ChartRepo.tsx        | 10 ++--
 src/components/charts/AdvancedConfig.tsx      | 22 +++++---
 .../charts/modal/ChartGroupBasicDeploy.tsx    | 27 +++++----
 .../charts/modal/CreateChartGroup.tsx         |  2 +-
 src/components/ciConfig/BuildContext.tsx      |  5 +-
 .../ciConfig/CIBuildpackBuildOptions.tsx      |  5 +-
 src/components/ciConfig/CIConfig.scss         |  4 --
 .../ciConfig/CIContainerRegistryConfig.tsx    |  2 -
 .../ciConfig/CISelfDockerBuildOption.tsx      |  4 +-
 .../ciPipeline/CIPipelineAdvanced.tsx         |  6 +-
 .../ciPipeline/LinkedCIPipelineEdit.tsx       |  2 +-
 .../ciPipeline/LinkedCIPipelineView.tsx       |  2 +-
 src/components/ciPipeline/SourceMaterials.tsx |  2 +-
 .../Webhook/WebhookDetailsModal.tsx           |  5 +-
 src/components/cluster/ClusterForm.tsx        |  8 +--
 src/components/dockerRegistry/Docker.tsx      | 34 +++--------
 .../dockerRegistry/ManageRegistry.tsx         | 20 +++----
 src/components/gitOps/GitOpsConfiguration.tsx | 50 +++--------------
 .../gitProvider/AddGitHostConfigModal.tsx     |  3 +-
 src/components/gitProvider/GitProvider.tsx    | 41 ++++++--------
 .../GlobalConfiguration.tsx                   |  4 +-
 .../globalConfiguration.type.ts               |  2 +-
 src/components/hostURL/HostURL.tsx            | 56 +++++++++----------
 src/components/hostURL/hosturl.scss           |  4 --
 src/components/login/Login.tsx                |  2 -
 src/components/material/MaterialView.tsx      |  5 +-
 .../notifications/SESConfigModal.tsx          | 12 ++--
 .../notifications/SMTPConfigModal.tsx         | 17 ++----
 .../notifications/SlackConfigModal.tsx        |  4 +-
 .../notifications/WebhookConfigModal.tsx      |  6 +-
 src/components/project/Project.tsx            |  2 +-
 src/components/security/AddCveModal.tsx       |  3 +-
 src/components/util/KeyValueFileInput.tsx     |  7 +--
 .../nodeDetail/EphemeralContainerDrawer.tsx   |  4 +-
 .../ChartValuesView.component.tsx             | 32 +++++------
 .../workflowEditor/CreateWorkflow.tsx         |  3 +-
 .../workflowEditor/EmptyWorkflow.tsx          |  4 +-
 src/stories/useForm.stories.tsx               | 18 ++++--
 62 files changed, 258 insertions(+), 364 deletions(-)

diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
index 1cacb1a8e6..7d16a30169 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
@@ -263,7 +263,7 @@ const CreateAPIToken = ({
                         onChange={onChangeHandler}
                         error={formDataErrorObj.invalidName && formDataErrorObj.invalidNameMessage}
                         label="Name"
-                        isRequiredField
+                        required
                     />
                     <Textarea
                         label="Description"
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
index c1e08aa782..0c4c2aff05 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
@@ -228,6 +228,7 @@ const EditAPIToken = ({
                 <div className="flexbox-col dc__gap-16">
                     {renderRegenerateInfoBar()}
                     <CustomInput
+                        placeholder="Enter name"
                         label="Name"
                         data-testid="api-token-name-textbox"
                         value={editData.name}
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
index e443253862..45e5d354c3 100644
--- a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
@@ -190,7 +190,7 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
                         value={name.value}
                         data-testid="permission-group-name-textbox"
                         onChange={handleGroupNameChange}
-                        isRequiredField
+                        required
                         error={name.error}
                         placeholder="Eg. Project managers"
                     />
diff --git a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
index abf407c9ac..257a8ba0c8 100644
--- a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
@@ -814,10 +814,10 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                     <CustomInput
                         value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}
                         onChange={this.handleURLChange}
-                        data-testid="sso-url-input"
                         name="sso-url"
                         label="URL"
-                        isRequiredField
+                        placeholder="Enter URL"
+                        required
                         error={this.state.isError.url}
                     />
                     <div className="flex left fw-4 pt-4">
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkDeleteModal.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkDeleteModal.tsx
index 2024745edb..e45364f1e0 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkDeleteModal.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkDeleteModal.tsx
@@ -18,6 +18,7 @@ import {
     BulkSelectionEvents,
     ConfirmationDialog,
     CustomInput,
+    CustomInputProps,
     Progressing,
     showError,
     ToastManager,
@@ -119,7 +120,7 @@ const BulkDeleteModal = ({
         }
     }
 
-    const handleKeyDown = async (event: KeyboardEvent) => {
+    const handleKeyDown: CustomInputProps['onKeyDown'] = async (event) => {
         if (event.key === 'Enter' && !isDeleteDisabled) {
             event.preventDefault()
             await handleBulkDelete()
@@ -136,16 +137,18 @@ const BulkDeleteModal = ({
         <ConfirmationDialog className="w-400">
             <DeleteIcon className="icon-dim-48" />
             <ConfirmationDialog.Body title={title} subtitle={subTitle}>
-                <CustomInput
-                    name="bulk-delete-confirmation"
-                    value={deleteConfirmationText}
-                    onChange={handleChange}
-                    label={getLabel()}
-                    inputWrapClassName="mt-12 w-100"
-                    placeholder="Type to confirm"
-                    isRequiredField
-                    onKeyDown={handleKeyDown}
-                />
+                <div className="mt-12 w-100">
+                    <CustomInput
+                        name="bulk-delete-confirmation"
+                        value={deleteConfirmationText}
+                        onChange={handleChange}
+                        label={getLabel()}
+                        fullWidth
+                        placeholder="Type to confirm"
+                        required
+                        onKeyDown={handleKeyDown}
+                    />
+                </div>
             </ConfirmationDialog.Body>
             <ConfirmationDialog.ButtonGroup>
                 <button type="button" className="cta cancel" disabled={isDeleteLoading} onClick={onClose}>
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
index 95c2fe9f73..b3c638b9f1 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
@@ -244,8 +244,6 @@ export const ClusterEnvironmentDrawer = ({
                     <div className="dc__overflow-auto p-20 flex-grow-1">
                         <div className="mb-16">
                             <CustomInput
-                                dataTestid="environment-name"
-                                labelClassName="dc__required-field"
                                 disabled={!!environmentName}
                                 placeholder={id ? 'sample-env-name' : 'Eg. production'}
                                 value={data.environmentName}
@@ -253,20 +251,19 @@ export const ClusterEnvironmentDrawer = ({
                                 {...register('environmentName')}
                                 label="Environment Name"
                                 autoFocus={!id}
-                                noTrim
+                                shouldTrim={false}
                             />
                         </div>
                         <div className="mb-16">
                             <CustomInput
-                                dataTestid="enter-namespace"
-                                labelClassName={isVirtual ? '' : 'dc__required-field'}
                                 disabled={!!namespace}
                                 placeholder={id ? 'sample-namespace' : 'Eg. prod'}
                                 value={data.namespace}
                                 error={errors.namespace}
                                 {...register('namespace')}
                                 label="Namespace"
-                                noTrim
+                                shouldTrim={false}
+                                required={isVirtual}
                             />
                         </div>
                         {!isVirtual && (
@@ -303,7 +300,7 @@ export const ClusterEnvironmentDrawer = ({
                                 {...register('description')}
                                 label="Description (Maximum 40 characters allowed)"
                                 autoFocus={!!id}
-                                noTrim
+                                shouldTrim={false}
                             />
                         </div>
                         {EnvironmentLabels && !isVirtual && (
diff --git a/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx b/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx
index e98bdff169..1a6f9cd9f7 100644
--- a/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx
+++ b/src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx
@@ -150,17 +150,16 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
                 </div>
             )}
             <div>
-                <div>
-                    <CustomInput
-                        label="Chart Name"
-                        name="chartName"
-                        onChange={noop}
-                        rootClassName="w-100 br-4 en-2 bw-1 mt-6 form__input"
-                        disabled
-                        value={chartDetail.chartName}
-                        isRequiredField
-                    />
-                </div>
+                <CustomInput
+                    placeholder="Enter chart name"
+                    label="Chart Name"
+                    name="chartName"
+                    onChange={noop}
+                    fullWidth
+                    disabled
+                    value={chartDetail.chartName}
+                    required
+                />
                 <div className="mt-16">
                     <Textarea
                         placeholder="Enter description"
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
index d2ff540a48..e3d36fa445 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
@@ -167,9 +167,9 @@ export const ConfigMapSecretForm = ({
             label="Name"
             placeholder={`Eg. ${!data.isSecret ? 'sample-configmap' : 'sample-secret'}`}
             disabled={!isCreateView || isFormDisabled}
-            isRequiredField
+            required
             error={errors.name}
-            noTrim
+            shouldTrim={false}
         />
     )
 
@@ -245,11 +245,10 @@ export const ConfigMapSecretForm = ({
                         <CustomInput
                             {...register('externalSubpathValues')}
                             value={data.externalSubpathValues}
-                            tabIndex={0}
                             placeholder="Enter keys (Eg. username,configs.json)"
                             disabled={isFormDisabled}
                             error={errors.externalSubpathValues}
-                            noTrim
+                            shouldTrim={false}
                         />
                     </div>
                 )}
@@ -287,13 +286,10 @@ export const ConfigMapSecretForm = ({
                     <CustomInput
                         value={data.filePermission}
                         {...register('filePermission')}
-                        autoComplete="off"
-                        tabIndex={0}
-                        dataTestid="configmap-file-permission-textbox"
                         placeholder="eg. 0400 or 400"
                         disabled={isFormDisabled || isChartVersion309OrBelow}
                         error={errors.filePermission}
-                        noTrim
+                        shouldTrim={false}
                     />
                 </div>
             )}
@@ -311,8 +307,8 @@ export const ConfigMapSecretForm = ({
                     helperText="Keys are mounted as files to volume"
                     disabled={isFormDisabled}
                     error={errors.volumeMountPath}
-                    isRequiredField
-                    noTrim
+                    required
+                    shouldTrim={false}
                 />
                 {renderSubPath()}
                 {renderFilePermission()}
@@ -323,15 +319,13 @@ export const ConfigMapSecretForm = ({
         (isHashiOrAWS || isESO) && (
             <div className="w-50">
                 <CustomInput
-                    dataTestid="enter-role-ARN"
                     {...register('roleARN')}
                     value={data.roleARN}
-                    autoComplete="off"
                     label="Role ARN"
                     placeholder="Enter Role ARN"
                     disabled={isFormDisabled}
                     error={errors.roleARN}
-                    noTrim
+                    shouldTrim={false}
                 />
             </div>
         )
diff --git a/src/components/ApplicationGroup/CreateAppGroup.tsx b/src/components/ApplicationGroup/CreateAppGroup.tsx
index 391f555d6f..b2932bf836 100644
--- a/src/components/ApplicationGroup/CreateAppGroup.tsx
+++ b/src/components/ApplicationGroup/CreateAppGroup.tsx
@@ -358,13 +358,12 @@ export default function CreateAppGroup({
                 <div className="form__row mb-16">
                     <CustomInput
                         label="Name"
-                        tabIndex={1}
                         placeholder="Enter filter name"
                         value={appGroupName}
                         name="name"
                         onChange={onInputChange}
                         disabled={selectedAppGroup && !!selectedAppGroup.value}
-                        isRequiredField
+                        required
                         error={showErrorMsg && nameErrorMessage()}
                     />
                 </div>
diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx
index 9378a2fc8e..70bb06ab36 100644
--- a/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx
+++ b/src/components/ApplicationGroup/Details/TriggerView/BulkSourceChange.tsx
@@ -124,7 +124,7 @@ export default function BulkSourceChange({
             <div className="p-20">
                 <div className="form__row">
                     <CustomInput
-                        labelClassName="dc__required-field"
+                        required
                         name="branch_name"
                         disabled={false}
                         value={branchName}
diff --git a/src/components/CIPipelineN/Build.tsx b/src/components/CIPipelineN/Build.tsx
index 3464ba4be7..78c663de9a 100644
--- a/src/components/CIPipelineN/Build.tsx
+++ b/src/components/CIPipelineN/Build.tsx
@@ -219,14 +219,12 @@ export const Build = ({
                 <CustomInput
                     name="name"
                     label="Pipeline Name"
-                    data-testid="build-pipeline-name-textbox"
-                    autoComplete="off"
                     disabled={!!ciPipeline?.id}
                     placeholder="e.g. my-first-pipeline"
                     type="text"
                     value={formData.name}
                     onChange={handlePipelineName}
-                    isRequiredField
+                    required
                     error={formDataErrorObj.name && !formDataErrorObj.name.isValid && formDataErrorObj.name.message}
                 />
             </label>
diff --git a/src/components/CIPipelineN/ConditionContainer.tsx b/src/components/CIPipelineN/ConditionContainer.tsx
index 86ae2fc6b8..b07743aa76 100644
--- a/src/components/CIPipelineN/ConditionContainer.tsx
+++ b/src/components/CIPipelineN/ConditionContainer.tsx
@@ -339,16 +339,14 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
                                         options={operatorOptions}
                                         isSearchable={false}
                                     />
-                                    <div className="fs-13">
-                                        <CustomInput
-                                            name="conditionalValue"
-                                            rootClassName="w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 br-4 h-32"
-                                            value={conditionDetail.conditionalValue}
-                                            onChange={(e) => {
-                                                handleConditionalValueChange(e, index)
-                                            }}
-                                        />
-                                    </div>
+                                    <CustomInput
+                                        placeholder="Enter value"
+                                        name="conditionalValue"
+                                        value={conditionDetail.conditionalValue}
+                                        onChange={(e) => {
+                                            handleConditionalValueChange(e, index)
+                                        }}
+                                    />
                                     <Close
                                         className="icon-dim-24 pointer mt-4"
                                         onClick={() => {
diff --git a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
index 6193bfba1e..9a7e2e5f35 100644
--- a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
+++ b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
@@ -274,7 +274,7 @@ const CreatePluginFormContent = ({
                             action={CreatePluginActionType.UPDATE_PLUGIN_VERSION}
                             handleChange={handleChange}
                             helperText={
-                                <span className="fs-11">
+                                <span>
                                     Using&nbsp;
                                     <a
                                         href={SEMANTIC_VERSION_DOCUMENTATION_LINK}
@@ -289,7 +289,6 @@ const CreatePluginFormContent = ({
                             }
                             placeholder="Eg. 1.0.0"
                             required
-                            labelClassName="w-100"
                         />
 
                         {/* Documentation Link */}
diff --git a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
index e544aee73c..fdb883c282 100644
--- a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
+++ b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { SyntheticEvent, useCallback } from 'react'
+import { SyntheticEvent } from 'react'
 import { CustomInput, Textarea } from '@devtron-labs/devtron-fe-common-lib'
 import { CreatePluginFormFieldProps } from './types'
 
@@ -30,16 +30,7 @@ const CreatePluginFormField = ({
     useTextArea,
     helperText,
     autoFocus,
-    labelClassName,
 }: CreatePluginFormFieldProps) => {
-    const callbackRef = useCallback((inputElement) => {
-        if (inputElement && autoFocus) {
-            setTimeout(() => {
-                inputElement.focus()
-            }, 100)
-        }
-    }, [])
-
     const handleInputChange = (e: SyntheticEvent) => {
         handleChange({ action, payload: (e.target as HTMLInputElement).value })
     }
@@ -68,14 +59,10 @@ const CreatePluginFormField = ({
             error={error}
             onChange={handleInputChange}
             placeholder={placeholder}
-            isRequiredField={required}
+            required={required}
             disabled={disabled}
-            dataTestid={action}
             autoFocus={autoFocus}
             helperText={helperText}
-            rootClassName="h-36"
-            labelClassName={labelClassName}
-            inputProps={{ ref: callbackRef } as React.InputHTMLAttributes<HTMLInputElement>}
         />
     )
 }
diff --git a/src/components/CIPipelineN/CreatePluginModal/types.ts b/src/components/CIPipelineN/CreatePluginModal/types.ts
index 95608fa39c..b935e51595 100644
--- a/src/components/CIPipelineN/CreatePluginModal/types.ts
+++ b/src/components/CIPipelineN/CreatePluginModal/types.ts
@@ -177,7 +177,7 @@ type PluginTextFieldFieldType =
       } & Pick<CustomInputProps, 'helperText' | 'autoFocus'>)
 
 export type CreatePluginFormFieldProps = Pick<CreatePluginFormContentProps, 'handleChange'> &
-    Pick<CustomInputProps, 'placeholder' | 'label' | 'value' | 'error' | 'required' | 'disabled' | 'labelClassName'> & {
+    Pick<CustomInputProps, 'placeholder' | 'label' | 'value' | 'error' | 'required' | 'disabled'> & {
         action: CreatePluginSingleInputActionType
     } & PluginTextFieldFieldType
 
diff --git a/src/components/CIPipelineN/DockerArgs.tsx b/src/components/CIPipelineN/DockerArgs.tsx
index a6ee8a8240..e89db02e29 100644
--- a/src/components/CIPipelineN/DockerArgs.tsx
+++ b/src/components/CIPipelineN/DockerArgs.tsx
@@ -55,10 +55,6 @@ const DockerArgsItem: FunctionComponent<DockerArgsItemProps> = ({
                 <CustomInput
                     name="arg-key"
                     data-testid={fromBuildPack ? `build-pack-build-env-key${index}` : `docker-arg-key-${index}`}
-                    rootClassName={`w-100 dc__top-radius-4 pl-10 pr-10 pt-6 pb-6 en-2 bw-1 ${
-                        readOnly ? 'cursor-not-allowed' : ''
-                    }`}
-                    autoComplete="off"
                     placeholder="Key"
                     type="text"
                     value={arg.key}
diff --git a/src/components/CIPipelineN/MountFromHost.tsx b/src/components/CIPipelineN/MountFromHost.tsx
index 2bf32de39d..37d9790070 100644
--- a/src/components/CIPipelineN/MountFromHost.tsx
+++ b/src/components/CIPipelineN/MountFromHost.tsx
@@ -70,7 +70,9 @@ const MountFromHost = () => {
                                 <div className="fw-6 fs-13 lh-32 cn-7 " />
                                 <CustomInput
                                     data-testid="script-mount-host-file-path-host"
-                                    rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__left-radius-4 dc__no-right-border"
+                                    borderRadiusConfig={{
+                                        right: false,
+                                    }}
                                     placeholder="File path on Host"
                                     onChange={(e) => handleMountPath(e, index)}
                                     value={mountPathMap[MountPathMap.FILEPATHONDISK]}
@@ -79,7 +81,9 @@ const MountFromHost = () => {
                                 <div className="flex bw-1 en-2">:</div>
                                 <CustomInput
                                     data-testid="script-mount-host-file-path-container"
-                                    rootClassName="bcn-1 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 dc__right-radius-4 dc__no-left-border"
+                                    borderRadiusConfig={{
+                                        left: false,
+                                    }}
                                     placeholder="File path on container"
                                     onChange={(e) => handleMountPath(e, index)}
                                     value={mountPathMap[MountPathMap.FILEPATHONCONTAINER]}
diff --git a/src/components/CIPipelineN/OutputDirectoryPath.tsx b/src/components/CIPipelineN/OutputDirectoryPath.tsx
index 05b6e24cb7..fb571b397a 100644
--- a/src/components/CIPipelineN/OutputDirectoryPath.tsx
+++ b/src/components/CIPipelineN/OutputDirectoryPath.tsx
@@ -68,7 +68,6 @@ const OutputDirectoryPath = () => {
                     <div className="custom-script__output-directory pl-220 mt-8" key={`output-directory-${index}`}>
                         <CustomInput
                             data-testid="output-directory-path-add-path-textbox"
-                            rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
                             placeholder="Enter directory path"
                             value={elm}
                             onChange={(e) => handleStoreArtifact(e, index)}
diff --git a/src/components/CIPipelineN/TaskDetailComponent.tsx b/src/components/CIPipelineN/TaskDetailComponent.tsx
index a71718945e..0a035717b3 100644
--- a/src/components/CIPipelineN/TaskDetailComponent.tsx
+++ b/src/components/CIPipelineN/TaskDetailComponent.tsx
@@ -206,20 +206,17 @@ export const TaskDetailComponent = () => {
                     <div className="row-container mb-12">
                         <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">Task name</div>
                         <CustomInput
-                            rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5-imp pb-5-imp"
-                            data-testid="preBuild-task-name-textbox"
                             type="text"
                             onChange={(e) => handleNameChange(e)}
                             value={selectedStep.name}
                             name="task-name"
+                            placeholder="Enter task name"
                             error={renderTaskNameError()}
                         />
                     </div>
                     <div className="row-container mb-12">
                         <div className="fw-6 fs-13 lh-32 cn-7 ">Description</div>
                         <CustomInput
-                            rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5-imp pb-5-imp"
-                            data-testid="preBuild-task-description-textbox"
                             type="text"
                             onChange={(e) => handleDescriptionChange(e)}
                             value={selectedStep.description}
diff --git a/src/components/CIPipelineN/TaskTypeDetailComponent.tsx b/src/components/CIPipelineN/TaskTypeDetailComponent.tsx
index 6dd439d685..4f2c0949af 100644
--- a/src/components/CIPipelineN/TaskTypeDetailComponent.tsx
+++ b/src/components/CIPipelineN/TaskTypeDetailComponent.tsx
@@ -291,7 +291,7 @@ export const TaskTypeDetailComponent = () => {
                             />
                             <div style={{ width: '80% !important' }}>
                                 <CustomInput
-                                    rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5-imp pb-5-imp"
+                                    fullWidth
                                     placeholder="Eg. /directory/filename"
                                     name="storeScriptAt"
                                     onChange={(e) => handleCustomChange(e, 'storeScriptAt')}
@@ -312,8 +312,7 @@ export const TaskTypeDetailComponent = () => {
                 <div className="row-container mb-12">
                     <TaskFieldTippyDescription taskField="Command" contentDescription={TaskFieldDescription.COMMAND} />
                     <CustomInput
-                        data-testid="custom-script-container-image-command-textbox"
-                        rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5-imp pb-5-imp"
+                        fullWidth
                         name="command"
                         placeholder="Eg. “echo”"
                         onChange={(e) => handleCommandArgs(e, TaskFieldLabel.COMMAND)}
@@ -328,8 +327,7 @@ export const TaskTypeDetailComponent = () => {
                     <TaskFieldTippyDescription taskField="Args" contentDescription={TaskFieldDescription.ARGS} />
                     <CustomInput
                         name="args"
-                        data-testid="custom-script-container-image-args-textbox"
-                        rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5-imp pb-5-imp"
+                        fullWidth
                         placeholder='Eg. "HOSTNAME", "KUBERNETES_PORT"'
                         onChange={(e) => handleCommandArgs(e, TaskFieldLabel.ARGS)}
                         value={
@@ -372,8 +370,7 @@ export const TaskTypeDetailComponent = () => {
                             <div className="fw-6 fs-13 lh-32 cn-7 " />
                             <CustomInput
                                 name="mountCodeToContainerPath"
-                                rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5"
-                                data-testid="script-mount-container-textbox"
+                                fullWidth
                                 placeholder="Eg file/folder"
                                 onChange={(e) => handleCustomChange(e, 'mountCodeToContainerPath')}
                                 value={
diff --git a/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx b/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
index a696bd7939..7ece1ebfcc 100644
--- a/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
@@ -179,14 +179,13 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
             return (
                 <div className="dc__overflow-auto p-12 flex-grow-1 flexbox-col dc__gap-12">
                     <CustomInput
-                        name="fileMount"
+                        name={`file-mount-${rowId}`}
                         label="File mount path"
                         placeholder="Enter file mount path"
                         value={fileInfo.fileMountDir}
                         onChange={handleFileMountChange}
-                        dataTestid={`file-mount-${rowId}`}
-                        inputWrapClassName="w-100"
-                        isRequiredField
+                        fullWidth
+                        required
                         error={hasFileMountError ? 'This field is required' : ''}
                         autoFocus
                     />
@@ -264,8 +263,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
                                     autoFocus={index === 0}
                                     value={value}
                                     onChange={handleChoiceChange(id)}
-                                    dataTestid={`choice-${id}`}
-                                    inputWrapClassName="w-100"
+                                    fullWidth
                                     error={error}
                                 />
                                 <div className="mt-2 dc__align-self-start">
diff --git a/src/components/CIPipelineN/VariableDataTable/VariableConfigOverlay.tsx b/src/components/CIPipelineN/VariableDataTable/VariableConfigOverlay.tsx
index 64c78a7735..a82db65669 100644
--- a/src/components/CIPipelineN/VariableDataTable/VariableConfigOverlay.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/VariableConfigOverlay.tsx
@@ -63,11 +63,12 @@ export const VariableConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOver
             <>
                 <div className="p-12 flexbox-col dc__gap-12">
                     <CustomInput
+                        placeholder="Enter variable name"
                         name="variable-name"
                         onChange={handleVariableName}
                         value={data.variable.value}
                         label="Variable"
-                        isRequiredField
+                        required
                         autoFocus
                     />
                     <Textarea
diff --git a/src/components/app/create/CreateApp.tsx b/src/components/app/create/CreateApp.tsx
index d4b62ac8ba..83b71bca34 100644
--- a/src/components/app/create/CreateApp.tsx
+++ b/src/components/app/create/CreateApp.tsx
@@ -376,7 +376,7 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
                             placeholder={`e.g. my-first-${this.props.isJobView ? 'job' : 'app'}`}
                             autoFocus
                             onChange={this.handleAppName}
-                            isRequiredField
+                            required
                             error={appNameErrors && !this.state.isValid.appName && errorObject[0].message}
                         />
                     </div>
diff --git a/src/components/cdPipeline/BuildCD.tsx b/src/components/cdPipeline/BuildCD.tsx
index 20cb6de1df..67577bacb4 100644
--- a/src/components/cdPipeline/BuildCD.tsx
+++ b/src/components/cdPipeline/BuildCD.tsx
@@ -221,7 +221,7 @@ export default function BuildCD({
                     placeholder="Pipeline name"
                     value={formData.name}
                     onChange={handlePipelineName}
-                    isRequiredField
+                    required
                     error={formDataErrorObj.name && !formDataErrorObj.name.isValid && formDataErrorObj.name.message}
                 />
             </div>
@@ -460,10 +460,8 @@ export default function BuildCD({
                     <div className="flex-1 ml-8">
                         <CustomInput
                             name="namespace"
-                            rootClassName="h-36"
                             label="Namespace"
                             placeholder={getNamespacePlaceholder(isVirtualEnvironment, formData.namespace)}
-                            data-testid="cd-pipeline-namespace-textbox"
                             disabled={!namespaceEditable}
                             value={selectedEnv?.namespace ? selectedEnv.namespace : formData.namespace}
                             onChange={handleNamespaceChange}
diff --git a/src/components/chartRepo/ChartRepo.tsx b/src/components/chartRepo/ChartRepo.tsx
index 8bac83fa69..6167a2cecb 100644
--- a/src/components/chartRepo/ChartRepo.tsx
+++ b/src/components/chartRepo/ChartRepo.tsx
@@ -421,7 +421,6 @@ const ChartForm = ({
         const isNameField: boolean = field === 'name'
         return (
             <CustomInput
-                dataTestid={isNameField ? 'add-chart-repo-name' : 'add-chart-repo-URL'}
                 value={isNameField ? state.name.value : state.url.value}
                 onChange={handleOnChange}
                 name={isNameField ? 'name' : 'url'}
@@ -429,7 +428,7 @@ const ChartForm = ({
                 label={isNameField ? 'Name' : 'URL'}
                 placeholder={isNameField ? 'Enter Repository name' : 'Enter repo URL'}
                 disabled={!isEditable}
-                isRequiredField
+                required
             />
         )
     }
@@ -483,14 +482,13 @@ const ChartForm = ({
                     (id && authMode === CHART_REPO_AUTH_TYPE.USERNAME_PASSWORD)) && (
                     <>
                         <CustomInput
-                            dataTestid="add-chart-repo-username"
+                            placeholder='Enter username'
                             value={customState.username.value}
                             onChange={customHandleChange}
                             name="username"
                             error={customState.username.error}
                             label="Username"
-                            labelClassName="mt-12"
-                            isRequiredField
+                            required
                         />
                         <ProtectedInput
                             dataTestid="add-chart-repo-password"
@@ -500,7 +498,7 @@ const ChartForm = ({
                             error={customState.password.error}
                             label="Password"
                             labelClassName="mt-12"
-                            isRequiredField
+                            required
                         />
                     </>
                 )}
diff --git a/src/components/charts/AdvancedConfig.tsx b/src/components/charts/AdvancedConfig.tsx
index 40da45d596..dc158f5da3 100644
--- a/src/components/charts/AdvancedConfig.tsx
+++ b/src/components/charts/AdvancedConfig.tsx
@@ -197,19 +197,27 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({
                     {handleNameChange && (
                         <div className="mb-16">
                             <CustomInput
+                                placeholder="Enter app name"
                                 name="appName"
                                 label="App name"
-                                rootClassName={`${appName?.error ? 'form__input--error' : ''}`}
                                 value={appName.value}
                                 onChange={(e) => handleNameChange(index, e.target.value)}
                                 data-testid="advanced-option-app-name-box"
-                                isRequiredField
+                                required
                                 error={appName?.error}
-                                additionalErrorInfo={renderAdditionalErrorInfo(
-                                    handleNameChange,
-                                    appName.suggestedName,
-                                    index,
-                                )}
+                                helperText={
+                                    appName.suggestedName ? (
+                                        <>
+                                            Suggested Name:
+                                            <span
+                                                className="anchor pointer"
+                                                onClick={() => handleNameChange(index, appName.suggestedName)}
+                                            >
+                                                {appName.suggestedName}
+                                            </span>
+                                        </>
+                                    ) : null
+                                }
                             />
                         </div>
                     )}
diff --git a/src/components/charts/modal/ChartGroupBasicDeploy.tsx b/src/components/charts/modal/ChartGroupBasicDeploy.tsx
index c3cc23f605..f5545a81d4 100644
--- a/src/components/charts/modal/ChartGroupBasicDeploy.tsx
+++ b/src/components/charts/modal/ChartGroupBasicDeploy.tsx
@@ -255,23 +255,28 @@ const ApplicationNameList = ({ charts, handleNameChange, showAppNames }) => {
                             />
                             <div className="w-100">
                                 <CustomInput
-                                    name="name"
+                                    placeholder="Enter chart name"
+                                    name={`chart-name-edit-input-${index}`}
                                     label={`${chart.chartMetaData.chartRepoName}/${chart.chartMetaData.chartName}`}
-                                    labelClassName="form__label--lower"
-                                    rootClassName={`form__input ${chart?.name?.error ? 'form__input--error' : ''}`}
-                                    data-testid={`chart-name-edit-input-${index}`}
-                                    tabIndex={index + 1}
                                     value={chart.name.value}
                                     onChange={(event) => {
                                         handleNameChange(index, event.target.value)
                                     }}
                                     error={chart.name.error}
-                                    isRequiredField
-                                    additionalErrorInfo={renderAdditionalErrorInfo(
-                                        handleNameChange,
-                                        chart.name.suggestedName,
-                                        index,
-                                    )}
+                                    required
+                                    helperText={
+                                        chart.name.suggestedName ? (
+                                            <>
+                                                Suggested Name:
+                                                <span
+                                                    className="anchor pointer"
+                                                    onClick={(e) => handleNameChange(index, chart.name.suggestedName)}
+                                                >
+                                                    {chart.name.suggestedName}
+                                                </span>
+                                            </>
+                                        ) : null
+                                    }
                                 />
                             </div>
                         </div>
diff --git a/src/components/charts/modal/CreateChartGroup.tsx b/src/components/charts/modal/CreateChartGroup.tsx
index 889a4dda53..4e7efce284 100644
--- a/src/components/charts/modal/CreateChartGroup.tsx
+++ b/src/components/charts/modal/CreateChartGroup.tsx
@@ -198,7 +198,7 @@ export default class CreateChartGroup extends Component<CreateChartGroupProps, C
                         placeholder="e.g. elastic-stack"
                         autoFocus
                         onChange={this.handleNameChange}
-                        isRequiredField
+                        required
                         error={this.state.name.error}
                     />
                     <Textarea
diff --git a/src/components/ciConfig/BuildContext.tsx b/src/components/ciConfig/BuildContext.tsx
index b79e4fcd1b..4b3ffbb186 100644
--- a/src/components/ciConfig/BuildContext.tsx
+++ b/src/components/ciConfig/BuildContext.tsx
@@ -210,8 +210,9 @@ const BuildContext: FunctionComponent<BuildContextProps> = ({
                             />
 
                             <CustomInput
-                                type="text"
-                                rootClassName="file-name"
+                                borderRadiusConfig={{
+                                    left: false,
+                                }}
                                 data-testid="build-context-path-text-box"
                                 placeholder="Project Path"
                                 name="buildContext"
diff --git a/src/components/ciConfig/CIBuildpackBuildOptions.tsx b/src/components/ciConfig/CIBuildpackBuildOptions.tsx
index 5d40b653c2..0860382386 100644
--- a/src/components/ciConfig/CIBuildpackBuildOptions.tsx
+++ b/src/components/ciConfig/CIBuildpackBuildOptions.tsx
@@ -608,8 +608,9 @@ export default function CIBuildpackBuildOptions({
                         </span>
                         <CustomInput
                             data-testid="build-pack-project-path-textbox"
-                            tabIndex={4}
-                            rootClassName="file-name"
+                            borderRadiusConfig={{
+                                left: false,
+                            }}
                             placeholder="Project path"
                             name="projectPath"
                             value={projectPathVal === './' ? '' : projectPathVal}
diff --git a/src/components/ciConfig/CIConfig.scss b/src/components/ciConfig/CIConfig.scss
index 9526cfb034..f26889c5bb 100644
--- a/src/components/ciConfig/CIConfig.scss
+++ b/src/components/ciConfig/CIConfig.scss
@@ -84,10 +84,6 @@
                     padding: 8px 10px;
                     border-radius: 4px 0 0 4px;
                 }
-
-                .file-name {
-                    border-radius: 0 4px 4px 0;
-                }
             }
         }
 
diff --git a/src/components/ciConfig/CIContainerRegistryConfig.tsx b/src/components/ciConfig/CIContainerRegistryConfig.tsx
index 348d934955..801defb80a 100644
--- a/src/components/ciConfig/CIContainerRegistryConfig.tsx
+++ b/src/components/ciConfig/CIContainerRegistryConfig.tsx
@@ -161,7 +161,6 @@ export default function CIContainerRegistryConfig({
                         <span className="fs-14 fw-4 lh-20 cn-9">{ciConfig?.dockerRepository}</span>
                     ) : (
                         <CustomInput
-                            tabIndex={2}
                             placeholder={
                                 (selectedRegistry &&
                                     REGISTRY_TYPE_MAP[selectedRegistry.registryType]?.placeholderText) ||
@@ -178,7 +177,6 @@ export default function CIContainerRegistryConfig({
                             disabled={configOverrideView && !allowOverride}
                             data-testid="container-repository-textbox"
                             error={repository_name.error}
-                            rootClassName="h-36"
                         />
                     )}
                     {!ciConfig && selectedRegistry?.registryType === 'ecr' && (
diff --git a/src/components/ciConfig/CISelfDockerBuildOption.tsx b/src/components/ciConfig/CISelfDockerBuildOption.tsx
index b7c4831911..e3ea6af0c5 100644
--- a/src/components/ciConfig/CISelfDockerBuildOption.tsx
+++ b/src/components/ciConfig/CISelfDockerBuildOption.tsx
@@ -96,7 +96,9 @@ const CISelfDockerBuildOption: FunctionComponent<CISelfDockerBuildOptionProps> =
                     </Tippy>
 
                     <CustomInput
-                        rootClassName="file-name h-36"
+                        borderRadiusConfig={{
+                            left: false,
+                        }}
                         data-testid="dockerfile-path-text-box"
                         placeholder="Dockerfile"
                         name="dockerfile"
diff --git a/src/components/ciPipeline/CIPipelineAdvanced.tsx b/src/components/ciPipeline/CIPipelineAdvanced.tsx
index 8585baf3de..2c58ce4e84 100644
--- a/src/components/ciPipeline/CIPipelineAdvanced.tsx
+++ b/src/components/ciPipeline/CIPipelineAdvanced.tsx
@@ -190,7 +190,7 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
                                         onChange={(event) =>
                                             this.props.handleChange(event, stage.id, key, index, 'name')
                                         }
-                                        isRequiredField
+                                        required
                                     />
                                 </label>
                                 <label className="form__row">
@@ -266,7 +266,7 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
                                         onChange={(event) =>
                                             this.props.handleChange(event, stage.id, key, index, 'name')
                                         }
-                                        isRequiredField
+                                        required
                                     />
                                 </label>
                                 <label className="form__row">
@@ -515,7 +515,7 @@ export class CIPipelineAdvanced extends Component<CIPipelineAdvancedProps, {}> {
                             placeholder="e.g. my-first-pipeline"
                             value={this.props.form.name}
                             onChange={this.props.handlePipelineName}
-                            isRequiredField
+                            required
                             error={
                                 this.props.showError &&
                                 !errorObj.isValid &&
diff --git a/src/components/ciPipeline/LinkedCIPipelineEdit.tsx b/src/components/ciPipeline/LinkedCIPipelineEdit.tsx
index a428af98f9..b85374922c 100644
--- a/src/components/ciPipeline/LinkedCIPipelineEdit.tsx
+++ b/src/components/ciPipeline/LinkedCIPipelineEdit.tsx
@@ -360,7 +360,7 @@ export default class LinkedCIPipeline extends Component<CIPipelineProps, LinkedC
                             value={this.state.form.name}
                             onChange={this.handleName}
                             data-testid="pipeline-name-for-linked"
-                            isRequiredField
+                            required
                             error={this.getErrorMessage()}
                         />
                     </label>
diff --git a/src/components/ciPipeline/LinkedCIPipelineView.tsx b/src/components/ciPipeline/LinkedCIPipelineView.tsx
index ffbc4b685d..edb1a00e44 100644
--- a/src/components/ciPipeline/LinkedCIPipelineView.tsx
+++ b/src/components/ciPipeline/LinkedCIPipelineView.tsx
@@ -321,7 +321,7 @@ export default class LinkedCIPipelineView extends Component<CIPipelineProps, CIP
                         placeholder="Name"
                         value={this.state.ciPipeline.name}
                         onChange={noop}
-                        isRequiredField
+                        required
                     />
                 </label>
                 {this.renderTriggerType()}
diff --git a/src/components/ciPipeline/SourceMaterials.tsx b/src/components/ciPipeline/SourceMaterials.tsx
index 29691a4a16..169621080f 100644
--- a/src/components/ciPipeline/SourceMaterials.tsx
+++ b/src/components/ciPipeline/SourceMaterials.tsx
@@ -195,7 +195,7 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = (props) => {
                                                 )
                                             }}
                                             onBlur={onBlur}
-                                            isRequiredField
+                                            required
                                             error={
                                                 errorObj &&
                                                 !errorObj.isValid &&
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
index 30bc519516..6f1a867606 100644
--- a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
+++ b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -382,11 +382,11 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
                 <CustomInput
                     name="api-token"
                     placeholder="Enter API token"
-                    rootClassName="bg__primary dc__no-border-imp w-100 h-32 pt-5-imp p-0-8-imp"
+                    // rootClassName="bg__primary dc__no-border-imp w-100 h-32 pt-5-imp p-0-8-imp"
                     onChange={handleTokenChange}
                     value={tryoutAPIToken}
                     error={showTryoutAPITokenError && WEBHOOK_NO_API_TOKEN_ERROR}
-                    inputWrapClassName="w-100"
+                    fullWidth
                 />
             </div>
         )
@@ -444,6 +444,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
             <div>
                 <div className="mt-16">
                     <CustomInput
+                        placeholder="Enter token name"
                         name="token-name"
                         label="Token name"
                         value={tokenName}
diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx
index a880680b19..4a4c4000dc 100644
--- a/src/components/cluster/ClusterForm.tsx
+++ b/src/components/cluster/ClusterForm.tsx
@@ -709,7 +709,7 @@ export default function ClusterForm({
             <>
                 <div className="form__row">
                     <CustomInput
-                        labelClassName="dc__required-field"
+                        required
                         name="cluster_name"
                         disabled={isDefaultCluster()}
                         value={state.cluster_name.value}
@@ -717,7 +717,6 @@ export default function ClusterForm({
                         onChange={handleOnChange}
                         label="Cluster Name"
                         placeholder="Cluster Name"
-                        dataTestid="cluster_name_input"
                     />
                 </div>
                 <div className="form__row mb-8-imp">
@@ -729,7 +728,6 @@ export default function ClusterForm({
                         label={clusterLabel()}
                         disabled={isDefaultCluster()}
                         placeholder="Enter server URL"
-                        dataTestid="enter_server_url_input"
                     />
                 </div>
                 <div className="form__row">
@@ -879,7 +877,8 @@ export default function ClusterForm({
                         )}
                         <div className="form__row">
                             <CustomInput
-                                labelClassName="dc__required-field"
+                                required
+                                placeholder="Enter endpoint"
                                 name="endpoint"
                                 value={state.endpoint.value}
                                 error={state.endpoint.error}
@@ -902,6 +901,7 @@ export default function ClusterForm({
                             <div className="form__row form__row--flex">
                                 <div className="w-50 mr-8 ">
                                     <CustomInput
+                                        placeholder="Enter username"
                                         name="userName"
                                         value={state.userName.value}
                                         error={state.userName.error}
diff --git a/src/components/dockerRegistry/Docker.tsx b/src/components/dockerRegistry/Docker.tsx
index 5b2b65104c..1ad0a4c9fd 100644
--- a/src/components/dockerRegistry/Docker.tsx
+++ b/src/components/dockerRegistry/Docker.tsx
@@ -1603,10 +1603,8 @@ const DockerForm = ({
                             <>
                                 <div className="form__row">
                                     <CustomInput
-                                        dataTestid="aws-access-keyid-textbox"
                                         name="awsAccessKeyId"
-                                        labelClassName="dc__required-field"
-                                        tabIndex={5}
+                                        required
                                         value={customState.awsAccessKeyId.value}
                                         error={customState.awsAccessKeyId.error}
                                         onChange={customHandleChange}
@@ -1616,10 +1614,8 @@ const DockerForm = ({
                                 </div>
                                 <div className="form__row">
                                     <CustomInput
-                                        dataTestid="aws-secret-access-key-textbox"
                                         name="awsSecretAccessKey"
-                                        labelClassName="dc__required-field"
-                                        tabIndex={6}
+                                        required
                                         value={customState.awsSecretAccessKey.value}
                                         error={customState.awsSecretAccessKey.error}
                                         onBlur={id && handleOnBlur}
@@ -1639,12 +1635,9 @@ const DockerForm = ({
                     <div className={`${isGCROrGCP ? '' : 'form__row--two-third'}`}>
                         <div className="form__row">
                             <CustomInput
-                                dataTestid="container-registry-username-textbox"
                                 name="username"
-                                labelClassName="dc__required-field"
-                                tabIndex={5}
+                                required
                                 value={customState.username.value || selectedDockerRegistryType.id.defaultValue}
-                                autoComplete="off"
                                 error={customState.username.error}
                                 onChange={customHandleChange}
                                 label={selectedDockerRegistryType.id.label}
@@ -1662,10 +1655,8 @@ const DockerForm = ({
                                 selectedDockerRegistryType.value === RegistryType.QUAY ||
                                 selectedDockerRegistryType.value === RegistryType.OTHER) && (
                                 <CustomInput
-                                    dataTestid="container-registry-password-textbox"
                                     name="password"
-                                    labelClassName="dc__required-field"
-                                    tabIndex={6}
+                                    required
                                     value={customState.password.value}
                                     error={customState.password.error}
                                     onChange={customHandleChange}
@@ -1710,12 +1701,9 @@ const DockerForm = ({
                     <div className={`${isGCROrGCP ? '' : 'form__row--two-third'}`}>
                         <div className="form__row">
                             <CustomInput
-                                dataTestid="container-registry-username-textbox"
                                 name="username"
-                                labelClassName="dc__required-field"
-                                tabIndex={5}
+                                required
                                 value={customState.username.value || selectedDockerRegistryType.id.defaultValue}
-                                autoComplete="off"
                                 error={customState.username.error}
                                 onChange={customHandleChange}
                                 label={selectedDockerRegistryType.id.label}
@@ -1733,10 +1721,8 @@ const DockerForm = ({
                                 selectedDockerRegistryType.value === RegistryType.QUAY ||
                                 selectedDockerRegistryType.value === RegistryType.OTHER) && (
                                 <CustomInput
-                                    dataTestid="container-registry-password-textbox"
                                     name="password"
-                                    labelClassName="dc__required-field"
-                                    tabIndex={6}
+                                    required
                                     value={customState.password.value}
                                     error={customState.password.error}
                                     onChange={customHandleChange}
@@ -1860,12 +1846,10 @@ const DockerForm = ({
                 <div className="form__row--two-third">
                     <div className="form__row">
                         <CustomInput
-                            dataTestid="container-registry-name"
-                            labelClassName="dc__required-field"
+                            required
                             name="id"
                             value={customState.id.value}
                             error={customState.id.error}
-                            tabIndex={1}
                             onChange={customHandleChange}
                             label="Name"
                             disabled={!!id}
@@ -1875,10 +1859,8 @@ const DockerForm = ({
                     </div>
                     <div className="form__row">
                         <CustomInput
-                            dataTestid="container-registry-url-textbox"
                             name="registryUrl"
-                            tabIndex={3}
-                            labelClassName="dc__required-field"
+                            required
                             label={selectedDockerRegistryType.registryURL.label}
                             value={customState.registryUrl.value || selectedDockerRegistryType.registryURL.defaultValue}
                             error={customState.registryUrl.error}
diff --git a/src/components/dockerRegistry/ManageRegistry.tsx b/src/components/dockerRegistry/ManageRegistry.tsx
index 136cc0f205..ef12f144c2 100644
--- a/src/components/dockerRegistry/ManageRegistry.tsx
+++ b/src/components/dockerRegistry/ManageRegistry.tsx
@@ -409,16 +409,16 @@ const ManageRegistry = ({
                             Icon={InfoIcon}
                             iconClass="icon-dim-20"
                         />
-                        <CustomInput
-                            tabIndex={2}
-                            placeholder="Enter image pull secret seperated by comma"
-                            rootClassName="mt-8"
-                            name={CredentialType.NAME}
-                            value={credentialValue}
-                            onChange={onClickSpecifyImagePullSecret}
-                            autoFocus
-                            error={errorValidation && REQUIRED_FIELD_MSG}
-                        />
+                        <div className="mt-8">
+                            <CustomInput
+                                placeholder="Enter image pull secret separated by comma"
+                                name={CredentialType.NAME}
+                                value={credentialValue}
+                                onChange={onClickSpecifyImagePullSecret}
+                                autoFocus
+                                error={errorValidation && REQUIRED_FIELD_MSG}
+                            />
+                        </div>
                     </>
                 )}
                 {credentialsType === CredentialType.CUSTOM_CREDENTIAL && (
diff --git a/src/components/gitOps/GitOpsConfiguration.tsx b/src/components/gitOps/GitOpsConfiguration.tsx
index 4da6fc93d0..c0b858ad3d 100644
--- a/src/components/gitOps/GitOpsConfiguration.tsx
+++ b/src/components/gitOps/GitOpsConfiguration.tsx
@@ -1162,18 +1162,16 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                         <CustomInput
                             value={this.state.form.host}
                             onChange={(event) => this.handleChange(event, 'host')}
-                            name="Enter host"
-                            error={this.state.isError.host}
-                            label={getGitOpsLabel()}
-                            placeholder={`Enter ${getGitOpsLabelText(this.state.providerTab)}`}
-                            labelClassName="gitops__id form__label--fs-13 fw-5 fs-13 mb-4"
-                            dataTestid={
+                            name={
                                 this.state.providerTab === GitProvider.AZURE_DEVOPS
                                     ? 'gitops-azure-organisation-url-textbox'
                                     : this.state.providerTab === GitProvider.BITBUCKET_CLOUD
                                       ? 'gitops-bitbucket-host-url-textbox'
                                       : 'gitops-github-gitlab-host-url-textbox'
                             }
+                            error={this.state.isError.host}
+                            label={getGitOpsLabel()}
+                            placeholder={`Enter ${getGitOpsLabelText(this.state.providerTab)}`}
                             autoFocus
                         />
                     </div>
@@ -1212,9 +1210,7 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                                 value={this.state.form.bitBucketWorkspaceId}
                                 onChange={(event) => this.handleChange(event, 'bitBucketWorkspaceId')}
                                 error={this.state.isError.bitBucketWorkspaceId}
-                                labelClassName="gitops__id form__label--fs-13 fw-5 fs-13 mb-4"
-                                dataTestid="gitops-bitbucket-workspace-id-textbox"
-                                isRequiredField
+                                required
                             />
                         </div>
                     )}
@@ -1232,17 +1228,7 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                             onChange={(event) => {
                                 this.handleChange(event, key)
                             }}
-                            labelClassName="gitops__id form__label--fs-13 fw-5 fs-13"
-                            dataTestid={
-                                this.state.providerTab === GitProvider.AZURE_DEVOPS
-                                    ? 'gitops-azure-project-name-textbox'
-                                    : this.state.providerTab === GitProvider.BITBUCKET_CLOUD
-                                      ? 'gitops-bitbucket-project-textbox'
-                                      : this.state.providerTab === GitProvider.GITLAB
-                                        ? 'gitops-gitlab-group-id-textbox'
-                                        : 'gitops-github-organisation-name-textbox'
-                            }
-                            isRequiredField
+                            required
                         />
                     </div>
                     <div
@@ -1292,17 +1278,7 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                                                 ? 'Bitbucket Username'
                                                 : 'GitHub Username'
                                     }
-                                    labelClassName="gitops__id form__label--fs-13 fw-5 fs-13"
-                                    dataTestid={
-                                        this.state.providerTab === GitProvider.AZURE_DEVOPS
-                                            ? 'gitops-azure-username-textbox'
-                                            : this.state.providerTab === GitProvider.BITBUCKET_CLOUD
-                                              ? 'gitops-bitbucket-username-textbox'
-                                              : this.state.providerTab === GitProvider.GITLAB
-                                                ? 'gitops-gitlab-username-textbox'
-                                                : 'gitops-github-username-textbox'
-                                    }
-                                    isRequiredField
+                                    required
                                 />
                             </div>
                             <div>
@@ -1320,17 +1296,7 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                                     onChange={(event) => this.handleChange(event, 'token')}
                                     error={this.state.isError.token}
                                     onFocus={handleOnFocus}
-                                    labelClassName="gitops__id form__label--fs-13 mb-8 fw-5 fs-13"
-                                    dataTestid={
-                                        this.state.providerTab === GitProvider.AZURE_DEVOPS
-                                            ? 'gitops-azure-pat-textbox'
-                                            : this.state.providerTab === GitProvider.BITBUCKET_CLOUD
-                                              ? 'gitops-bitbucket-pat-textbox'
-                                              : this.state.providerTab === GitProvider.GITLAB
-                                                ? 'gitops-gitlab-pat-textbox'
-                                                : 'gitops-github-pat-textbox'
-                                    }
-                                    isRequiredField
+                                    required
                                     onBlur={this.handleOnBlur}
                                 />
                             </div>
diff --git a/src/components/gitProvider/AddGitHostConfigModal.tsx b/src/components/gitProvider/AddGitHostConfigModal.tsx
index a875f085ef..e94442598d 100644
--- a/src/components/gitProvider/AddGitHostConfigModal.tsx
+++ b/src/components/gitProvider/AddGitHostConfigModal.tsx
@@ -77,8 +77,7 @@ export class GitHostConfigModal extends Component<GitHostConfigModalProps, GitHo
                         onChange={this.handleFilterInput}
                         placeholder="Enter name"
                         autoFocus
-                        tabIndex={1}
-                        isRequiredField
+                        required
                     />
                 </div>
                 <div className="flex right pt-12 pb-12 pl-20 pr-20">
diff --git a/src/components/gitProvider/GitProvider.tsx b/src/components/gitProvider/GitProvider.tsx
index fc868d7c06..a8b7056644 100644
--- a/src/components/gitProvider/GitProvider.tsx
+++ b/src/components/gitProvider/GitProvider.tsx
@@ -795,13 +795,13 @@ const GitForm = ({
         <form onSubmit={handleOnSubmit} className="git-form" autoComplete="off">
             <div className="mb-16">
                 <CustomInput
-                    dataTestid="git-account-name-textbox"
+                    placeholder="Enter name"
                     value={state.name.value}
                     onChange={handleOnChange}
                     name="name"
                     error={state.name.error}
                     label="Name"
-                    isRequiredField
+                    required
                 />
             </div>
             <div className="form__row--two-third mb-16">
@@ -825,13 +825,13 @@ const GitForm = ({
                     <div className="cr-5 fs-11">{gitHost.error}</div>
                 </div>
                 <CustomInput
-                    dataTestid="git-account-host-url-textbox"
+                    placeholder="Enter URL"
                     value={state.url.value}
                     onChange={handleOnChange}
                     name="url"
                     error={state.url.error}
                     label="URL"
-                    isRequiredField
+                    required
                 />
             </div>
             <div className="form__label dc__required-field">Authentication type</div>
@@ -877,31 +877,26 @@ const GitForm = ({
             {state.auth.value === 'USERNAME_PASSWORD' && (
                 <div className="form__row form__row--two-third">
                     <CustomInput
-                        dataTestid="git-account-user-auth-username"
+                        placeholder="Enter Username"
                         value={customState.username.value}
                         onChange={customHandleChange}
                         name="username"
                         error={customState.username.error}
                         label="Username"
-                        isRequiredField
+                        required
+                    />
+                    <CustomInput
+                        placeholder="Enter Password/Auth token"
+                        value={customState.password.value}
+                        onChange={customHandleChange}
+                        onFocus={handleOnFocus}
+                        name="password"
+                        error={customState.password.error}
+                        label="Password/Auth token"
+                        required
+                        onBlur={id && handleOnBlur}
+                        helperText="If using Github, use token instead of password."
                     />
-                    <div>
-                        <CustomInput
-                            dataTestid="git-account-user-auth-password"
-                            value={customState.password.value}
-                            onChange={customHandleChange}
-                            onFocus={handleOnFocus}
-                            name="password"
-                            error={customState.password.error}
-                            label="Password/Auth token"
-                            isRequiredField
-                            onBlur={id && handleOnBlur}
-                        />
-                        <div className="flex fs-12 left pt-4 mb-20" style={{ color: 'var(--N700)' }}>
-                            <Warn className="icon-dim-16 mr-4 " />
-                            If using Github, use token instead of password.
-                        </div>
-                    </div>
                 </div>
             )}
             {state.auth.value === 'SSH' && (
diff --git a/src/components/globalConfigurations/GlobalConfiguration.tsx b/src/components/globalConfigurations/GlobalConfiguration.tsx
index faab5ad6c0..db030263be 100644
--- a/src/components/globalConfigurations/GlobalConfiguration.tsx
+++ b/src/components/globalConfigurations/GlobalConfiguration.tsx
@@ -851,7 +851,7 @@ export const ProtectedInput = ({
     placeholder = '',
     dataTestid = '',
     onBlur = (e) => { },
-    isRequiredField = false,
+    required = false,
     autoFocus = false,
 }: ProtectedInputType) => {
     const inputRef = useRef<HTMLInputElement>()
@@ -874,7 +874,7 @@ export const ProtectedInput = ({
         <div className="flex column left top ">
             <label
                 htmlFor=""
-                className={`form__label ${labelClassName} ${isRequiredField ? 'dc__required-field' : ''}`}
+                className={`form__label ${labelClassName} ${required ? 'dc__required-field' : ''}`}
             >
                 {label}
             </label>
diff --git a/src/components/globalConfigurations/globalConfiguration.type.ts b/src/components/globalConfigurations/globalConfiguration.type.ts
index 9d78c5977a..1950b444d1 100644
--- a/src/components/globalConfigurations/globalConfiguration.type.ts
+++ b/src/components/globalConfigurations/globalConfiguration.type.ts
@@ -46,6 +46,6 @@ export interface ProtectedInputType {
     placeholder?: string
     dataTestid: string
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
-    isRequiredField?: boolean
+    required?: boolean
     autoFocus?: boolean
 }
diff --git a/src/components/hostURL/HostURL.tsx b/src/components/hostURL/HostURL.tsx
index 1a404649af..61f42485b1 100644
--- a/src/components/hostURL/HostURL.tsx
+++ b/src/components/hostURL/HostURL.tsx
@@ -27,7 +27,6 @@ import {
     ToastManager,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg'
-import { ReactComponent as Warn } from '../../assets/icons/ic-info-warn.svg'
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
 import { HostURLConfigState, HostURLConfigProps } from './hosturl.type'
 import { HEADER_TEXT, NO_HOST_URL, ViewType } from '../../config'
@@ -200,7 +199,10 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
             )
         }
         return (
-            <section className="flex column left top bg__primary h-100 dc__gap-24 px-20 py-16" data-testid="section-host-url">
+            <section
+                className="flex column left top bg__primary h-100 dc__gap-24 px-20 py-16"
+                data-testid="section-host-url"
+            >
                 <FeatureTitleWithInfo
                     title={HEADER_TEXT.HOST_URL.title}
                     renderDescriptionContent={() => HEADER_TEXT.HOST_URL.description}
@@ -233,38 +235,36 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
                             name="host-url"
                             label="Host URL"
                             value={this.state.form.value || window.location.origin}
-                            dataTestid="host"
-                            tabIndex={1}
                             placeholder="Enter Host URL"
                             onChange={this.handleChange}
-                            data-testid="host-url-textbox"
-                            isRequiredField
+                            required
                             error={!this.state.isHostUrlValid && NO_HOST_URL}
+                            helperText={
+                                <>
+                                    Auto-detected from your browser:
+                                    <button
+                                        type="button"
+                                        onClick={(e) => this.handleHostURLLocation(window.location.origin)}
+                                        className="hosturl__url fw-4 cg-5"
+                                        data-testid="clickable-url"
+                                    >
+                                        {window.location.origin}
+                                    </button>
+                                </>
+                            }
                         />
-                        <div className="hosturl__autodetection flex fs-12 left pt-4">
-                            <Warn className="icon-dim-16 mr-4 " />
-                            Auto-detected from your browser:
-                            <button
-                                type="button"
-                                onClick={(e) => this.handleHostURLLocation(window.location.origin)}
-                                className="hosturl__url fw-4 cg-5"
-                                data-testid="clickable-url"
-                            >
-                                {window.location.origin}
-                            </button>
-                        </div>
                     </div>
                     <div className="flex left w-100 dc__border-top-n1 pt-16">
-                            <button
-                                type="submit"
-                                tabIndex={2}
-                                disabled={this.state.saveLoading}
-                                className="cta small"
-                                data-testid="host-url-update-button"
-                            >
-                                {this.state.saveLoading ? <Progressing /> : this.state.form.id ? 'Update' : 'Save'}
-                            </button>
-                        </div>
+                        <button
+                            type="submit"
+                            tabIndex={2}
+                            disabled={this.state.saveLoading}
+                            className="cta small"
+                            data-testid="host-url-update-button"
+                        >
+                            {this.state.saveLoading ? <Progressing /> : this.state.form.id ? 'Update' : 'Save'}
+                        </button>
+                    </div>
                 </form>
             </section>
         )
diff --git a/src/components/hostURL/hosturl.scss b/src/components/hostURL/hosturl.scss
index 0b505b3e0f..bea883fc4b 100644
--- a/src/components/hostURL/hosturl.scss
+++ b/src/components/hostURL/hosturl.scss
@@ -26,10 +26,6 @@
     color: var(--N700);
 }
 
-.hosturl__autodetection {
-    color: var(--N700);
-}
-
 .hosturl__url {
     background: none;
     border: none;
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 9f2b5aa705..dd58ea3972 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -259,7 +259,6 @@ class Login extends Component<LoginProps, LoginFormState> {
                 <form className="login-dt__form" autoComplete="on" onSubmit={this.login}>
                     <CustomInput
                         data-testid="username-textbox"
-                        rootClassName="fs-14 mb-24"
                         placeholder="Username"
                         value={this.state.form.username}
                         name="username"
@@ -268,7 +267,6 @@ class Login extends Component<LoginProps, LoginFormState> {
                     <CustomInput
                         type={import.meta.env.VITE_NODE_ENV !== 'development' ? 'password' : 'text'}
                         data-testid="password-textbox"
-                        rootClassName="fs-14"
                         placeholder="Password"
                         value={this.state.form.password}
                         name="password"
diff --git a/src/components/material/MaterialView.tsx b/src/components/material/MaterialView.tsx
index 5eb3cb9f1e..739ad65067 100644
--- a/src/components/material/MaterialView.tsx
+++ b/src/components/material/MaterialView.tsx
@@ -680,9 +680,7 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
                             placeholder={this.gitAuthType('placeholder')}
                             value={`${this.props.material.url}`}
                             onChange={this.props.handleUrlChange}
-                            data-testid="git-repo-url-text-box"
                             error={this.props.isError.url}
-                            rootClassName="h-36"
                         />
                     </div>
                 </div>
@@ -874,9 +872,8 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
                             </div>
                         </Checkbox>
                         {this.props.isChecked && (
-                            <div className="ml-35">
+                            <div className="ml-35 w-885">
                                 <CustomInput
-                                    rootClassName="w-885"
                                     placeholder="e.g. /abc"
                                     value={this.props.material.checkoutPath}
                                     onChange={this.props.handlePathChange}
diff --git a/src/components/notifications/SESConfigModal.tsx b/src/components/notifications/SESConfigModal.tsx
index 00481a84e3..0ba8c01265 100644
--- a/src/components/notifications/SESConfigModal.tsx
+++ b/src/components/notifications/SESConfigModal.tsx
@@ -207,36 +207,33 @@ const SESConfigModal = ({
         <div className="dc__gap-16 flex-grow-1 flexbox-col mh-0 p-20 dc__overflow-auto h-100 mh-0">
             <CustomInput
                 label="Configuration Name"
-                dataTestid="add-ses-configuration-name"
                 name={ConfigurationFieldKeys.CONFIG_NAME}
                 value={form.configName}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter a name"
                 autoFocus
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.CONFIG_NAME].message}
             />
             <CustomInput
                 label="Access Key ID"
-                dataTestid="add-ses-access-key"
                 name={ConfigurationFieldKeys.ACCESS_KEY}
                 value={form.accessKey}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter access key ID"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.ACCESS_KEY].message}
             />
             <CustomInput
                 label="Secret Access Key"
-                dataTestid="add-ses-secret-access-key"
                 name={ConfigurationFieldKeys.SECRET_KEY}
                 value={form.secretKey}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter Secret access Key"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.SECRET_KEY].message}
             />
             <SelectPicker
@@ -257,14 +254,13 @@ const SESConfigModal = ({
 
             <CustomInput
                 label="Send email from"
-                dataTestid="add-ses-send-email"
                 type="email"
                 name={ConfigurationFieldKeys.FROM_EMAIL}
                 value={form.fromEmail}
                 onBlur={handleBlur}
                 placeholder="Enter sender's email"
                 onChange={handleInputChange}
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.FROM_EMAIL].message}
                 helperText="This email must be verified with SES."
             />
diff --git a/src/components/notifications/SMTPConfigModal.tsx b/src/components/notifications/SMTPConfigModal.tsx
index 30687b0810..475afc9437 100644
--- a/src/components/notifications/SMTPConfigModal.tsx
+++ b/src/components/notifications/SMTPConfigModal.tsx
@@ -153,49 +153,45 @@ export const SMTPConfigModal = ({
     const renderForm = () => (
         <div className="dc__gap-16 flex-grow-1 flexbox-col mh-0 p-20 dc__overflow-auto mh-0">
             <CustomInput
-                dataTestid={`add-smtp-${ConfigurationFieldKeys.CONFIG_NAME}`}
                 name={ConfigurationFieldKeys.CONFIG_NAME}
                 label="Configuration name"
                 value={form.configName}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter a name"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.CONFIG_NAME].message}
                 autoFocus
             />
             <CustomInput
-                dataTestid={`add-smtp-${ConfigurationFieldKeys.PORT}`}
                 name={ConfigurationFieldKeys.PORT}
                 label="SMTP Port"
                 value={form.port}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter SMTP port"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.PORT].message}
             />
             <CustomInput
-                dataTestid={`add-smtp-${ConfigurationFieldKeys.HOST}`}
                 name={ConfigurationFieldKeys.HOST}
                 label="SMTP Host address/Server"
                 value={form.host}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Eg. smtp.gmail.com"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.HOST].message}
             />
 
             <CustomInput
-                dataTestid={`add-smtp-${ConfigurationFieldKeys.AUTH_USER}`}
                 name={ConfigurationFieldKeys.AUTH_USER}
                 label="SMTP Username"
                 value={form.authUser}
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter SMTP username"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.AUTH_USER].message}
             />
             <div className="smtp-protected-input">
@@ -208,13 +204,12 @@ export const SMTPConfigModal = ({
                     label="SMTP Password"
                     labelClassName="form__label--fs-13 mb-8 fw-5 fs-13"
                     placeholder="Enter SMTP password"
-                    isRequiredField
+                    required
                     tabIndex={0}
                     onBlur={handleBlur}
                 />
             </div>
             <CustomInput
-                dataTestid="add-smtp-from-email"
                 type="email"
                 name={ConfigurationFieldKeys.FROM_EMAIL}
                 label="Send email from"
@@ -222,7 +217,7 @@ export const SMTPConfigModal = ({
                 onChange={handleInputChange}
                 onBlur={handleBlur}
                 placeholder="Enter sender’s email"
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.FROM_EMAIL].message}
             />
             <DefaultCheckbox
diff --git a/src/components/notifications/SlackConfigModal.tsx b/src/components/notifications/SlackConfigModal.tsx
index 550793cffb..250771a2ef 100644
--- a/src/components/notifications/SlackConfigModal.tsx
+++ b/src/components/notifications/SlackConfigModal.tsx
@@ -225,7 +225,7 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
                 onBlur={handleBlur}
                 placeholder="Enter channel name"
                 autoFocus
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.CONFIG_NAME].message}
             />
             <CustomInput
@@ -236,7 +236,7 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
                 placeholder="Enter incoming webhook URL"
                 onChange={handleInputChange}
                 onBlur={handleBlur}
-                isRequiredField
+                required
                 error={isFormValid[ConfigurationFieldKeys.WEBHOOK_URL].message}
             />
             <SelectPicker
diff --git a/src/components/notifications/WebhookConfigModal.tsx b/src/components/notifications/WebhookConfigModal.tsx
index c4092803f1..76ada79d0f 100644
--- a/src/components/notifications/WebhookConfigModal.tsx
+++ b/src/components/notifications/WebhookConfigModal.tsx
@@ -224,8 +224,7 @@ export const WebhookConfigModal = ({
                     placeholder="Enter a name"
                     error={isFormValid[ConfigurationFieldKeys.CONFIG_NAME].message}
                     name={ConfigurationFieldKeys.CONFIG_NAME}
-                    dataTestid="webhook-modal__name"
-                    isRequiredField
+                    required
                     autoFocus
                     onBlur={handleBlur}
                 />
@@ -236,8 +235,7 @@ export const WebhookConfigModal = ({
                     placeholder="Enter incoming webhook URL"
                     error={isFormValid[ConfigurationFieldKeys.WEBHOOK_URL].message}
                     name={ConfigurationFieldKeys.WEBHOOK_URL}
-                    dataTestid="webhook-modal__url"
-                    isRequiredField
+                    required
                     onBlur={handleBlur}
                 />
                 <WebhookConfigDynamicDataTable rows={rows} setRows={setRows} />
diff --git a/src/components/project/Project.tsx b/src/components/project/Project.tsx
index f3fe15885b..975ba9e493 100644
--- a/src/components/project/Project.tsx
+++ b/src/components/project/Project.tsx
@@ -127,7 +127,7 @@ export class Project extends Component<ProjectProps, ProjectState> {
                         onChange={this.handleActionChange}
                         autoFocus
                         data-testid="project-name-input"
-                        isRequiredField
+                        required
                         error={!isValid.name && errorMessage.name}
                     />
                     <div className="form__buttons mt-16">
diff --git a/src/components/security/AddCveModal.tsx b/src/components/security/AddCveModal.tsx
index 2261ffd47b..7de0f45d79 100644
--- a/src/components/security/AddCveModal.tsx
+++ b/src/components/security/AddCveModal.tsx
@@ -163,11 +163,10 @@ export class AddCveModal extends Component<AddCveModalProps, AddCveModalState> {
                                     name="cve"
                                     label="CVE ID"
                                     autoFocus
-                                    tabIndex={1}
                                     placeholder="Enter CVE ID"
                                     value={this.state.cve}
                                     onChange={this.handleCveChange}
-                                    isRequiredField
+                                    required
                                     error={this.state.isCveError && CVE_ID_NOT_FOUND}
                                 />
                             </label>
diff --git a/src/components/util/KeyValueFileInput.tsx b/src/components/util/KeyValueFileInput.tsx
index 0903a1f5b2..a85f99e3ea 100644
--- a/src/components/util/KeyValueFileInput.tsx
+++ b/src/components/util/KeyValueFileInput.tsx
@@ -41,7 +41,6 @@ export const KeyValueFileInput: React.FC<KeyValueFileInputProps> = (props) => {
             <div className="mb-16">
                 <CustomInput
                     label="Key (Filename)"
-                    labelClassName="dc__bold"
                     value={props.fileName}
                     placeholder="Enter the filename"
                     disabled={props.disabled}
@@ -49,13 +48,12 @@ export const KeyValueFileInput: React.FC<KeyValueFileInputProps> = (props) => {
                         props.handleChange(props.index, 'fileName', event.target.value)
                     }}
                     name="fileName"
-                    isRequiredField
+                    required
                 />
             </div>
             <div className="mb-16">
                 <CustomInput
                     label="Name (Secret key)"
-                    labelClassName="dc__bold"
                     value={props.name}
                     placeholder="Enter the secret key"
                     disabled={props.disabled}
@@ -63,13 +61,12 @@ export const KeyValueFileInput: React.FC<KeyValueFileInputProps> = (props) => {
                         props.handleChange(props.index, 'name', event.target.value)
                     }}
                     name="secret-key"
-                    isRequiredField
+                    required
                 />
             </div>
             <div className="mb-16">
                 <CustomInput
                     label="Property"
-                    labelClassName="dc__bold"
                     placeholder="Enter the property"
                     value={props.property}
                     disabled={props.disabled}
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 91319d9fc6..dbe6c3da21 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -277,8 +277,8 @@ const EphemeralContainerDrawer = ({
                     </div>
                     <CustomInput
                         name="container-name"
-                        rootClassName="w-100 br-4 en-2 bw-1 pl-10 pr-10 pt-5 pb-5 h-36"
-                        data-testid="ephemeral-container-name"
+                        fullWidth
+                        placeholder="Enter container name"
                         onChange={handleContainerChange}
                         value={ephemeralForm.basicData.containerName}
                     />
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
index dd5f0a2bb9..68c4bf7df5 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
@@ -32,6 +32,7 @@ import {
     SelectPickerOptionType,
     SelectPickerProps,
     MarkDown,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
@@ -692,14 +693,13 @@ export const ValueNameInput = ({
             <CustomInput
                 name="value-name"
                 label="Name"
-                tabIndex={1}
                 placeholder="Eg. value-template"
                 value={valueName}
                 onChange={(e) => handleValueNameChange(e.target.value)}
                 onBlur={() => handleValueNameOnBlur()}
                 disabled={valueNameDisabled}
                 data-testid="preset-values-name-input"
-                isRequiredField
+                required
                 error={invalidValueName && (invalidValueNameMessage || REQUIRED_FIELD_MSG)}
             />
         </div>
@@ -714,21 +714,19 @@ export const AppNameInput = ({
     invalidAppNameMessage,
 }: AppNameInputType) => {
     return (
-        <div className="w-100">
-            <CustomInput
-                name="app-name"
-                tabIndex={1}
-                label="App Name"
-                placeholder="Eg. app-name"
-                value={appName}
-                onChange={(e) => handleAppNameChange(e.target.value)}
-                onBlur={handleAppNameOnBlur}
-                data-testid="app-name-input"
-                isRequiredField
-                error={invalidAppName && (invalidAppNameMessage || REQUIRED_FIELD_MSG)}
-                rootClassName="h-32"
-            />
-        </div>
+        <CustomInput
+            name="app-name"
+            label="App Name"
+            placeholder="Eg. app-name"
+            value={appName}
+            onChange={(e) => handleAppNameChange(e.target.value)}
+            onBlur={handleAppNameOnBlur}
+            data-testid="app-name-input"
+            required
+            error={invalidAppName && (invalidAppNameMessage || REQUIRED_FIELD_MSG)}
+            size={ComponentSizeType.medium}
+            fullWidth
+        />
     )
 }
 
diff --git a/src/components/workflowEditor/CreateWorkflow.tsx b/src/components/workflowEditor/CreateWorkflow.tsx
index 20793d98f2..1ff92c805e 100644
--- a/src/components/workflowEditor/CreateWorkflow.tsx
+++ b/src/components/workflowEditor/CreateWorkflow.tsx
@@ -117,9 +117,8 @@ export default class AddWorkflow extends Component<AddWorkflowProps, AddWorkflow
                         value={this.state.name}
                         placeholder="e.g. production workflow"
                         autoFocus
-                        tabIndex={1}
                         onChange={this.handleWorkflowName}
-                        isRequiredField
+                        required
                         error={this.state.showError && !isValid && REQUIRED_FIELD_MSG}
                     />
                 </label>
diff --git a/src/components/workflowEditor/EmptyWorkflow.tsx b/src/components/workflowEditor/EmptyWorkflow.tsx
index 8ee1e44a16..426d5203dd 100644
--- a/src/components/workflowEditor/EmptyWorkflow.tsx
+++ b/src/components/workflowEditor/EmptyWorkflow.tsx
@@ -112,13 +112,11 @@ export default function EmptyWorkflow(props: EmptyWorkflowProps) {
         >
             <label className="form__row" htmlFor="workflow-name">
                 <CustomInput
-                    autoComplete="off"
-                    dataTestid="workflow-name"
                     name="workflow-name"
                     value={state.name}
                     placeholder="Eg. my-job-workflow"
                     onChange={handleWorkflowName}
-                    isRequiredField
+                    required
                     error={state.showError && !isNameValid().isValid && isNameValid().errorMsg}
                 />
             </label>
diff --git a/src/stories/useForm.stories.tsx b/src/stories/useForm.stories.tsx
index bc5ca61c85..0de928a0be 100644
--- a/src/stories/useForm.stories.tsx
+++ b/src/stories/useForm.stories.tsx
@@ -68,15 +68,21 @@ const FormComponent = ({ validationMode }: Pick<Parameters<typeof useForm>[0], '
                     label="Email"
                     value={data.email}
                     {...register('email')}
-                    inputProps={{ type: 'email' }}
-                    noTrim
+                    type="email"
+                    shouldTrim={false}
+                    placeholder="Enter Email"
                 />
                 {errors.email && <p className="m-0 cr-5">{errors.email}</p>}
             </div>
-            <div>
-                <CustomInput label="Password" value={data.password} {...register('password')} type="password" noTrim />
-                {errors.password && <p className="m-0 cr-5">{errors.password}</p>}
-            </div>
+            <CustomInput
+                placeholder="Enter Password"
+                label="Password"
+                value={data.password}
+                {...register('password')}
+                type="password"
+                shouldTrim={false}
+                error={errors.password}
+            />
             <Button dataTestId="useForm-story-submit-btn" buttonProps={{ type: 'submit' }} text="Submit" />
             <div style={{ marginTop: '20px' }}>
                 <strong>Form State:</strong>

From a45847290ffb8349e1dccf523f27561903147439 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:09:10 +0530
Subject: [PATCH 02/36] feat: add storybook for text field

---
 src/stories/TextField.stories.tsx | 190 ++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 src/stories/TextField.stories.tsx

diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
new file mode 100644
index 0000000000..bdd9e35de9
--- /dev/null
+++ b/src/stories/TextField.stories.tsx
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { ComponentSizeType, CustomInput, CustomInputProps } from '@devtron-labs/devtron-fe-common-lib'
+import { useEffect, useState } from 'react'
+
+const meta = {
+    component: CustomInput,
+} satisfies Meta<CustomInputProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const TextFieldTemplate: Story = {
+    render: (props) => {
+        const [value, setValue] = useState<CustomInputProps['value']>(props.value)
+
+        useEffect(() => {
+            setValue(props.value)
+        }, [props.value])
+
+        const handleChange: CustomInputProps['onChange'] = (e) => {
+            setValue(e.target.value)
+            action('changed')(e)
+        }
+
+        return <CustomInput {...props} value={value} onChange={handleChange} />
+    },
+    args: {
+        name: 'text-field',
+        label: 'Text Field',
+        value: '',
+        placeholder: 'Enter value',
+        onChange: null,
+    },
+}
+
+export const Default: Story = {
+    ...TextFieldTemplate,
+}
+
+export const WithMediumSize: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        size: ComponentSizeType.medium,
+    },
+}
+
+export const WithOnBlur: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        onBlur: action('onBlur'),
+    },
+}
+
+export const WithOnKeyDown: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        onKeyDown: action('onKeyDown'),
+    },
+}
+
+export const WithoutTrimOnBlur: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        shouldTrim: false,
+    },
+}
+
+export const WithHelperText: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        helperText: 'Helper text goes here',
+    },
+}
+
+export const WithError: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        error: 'Error goes here',
+    },
+}
+
+export const WithWarningText: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        warningText: 'Warning goes here',
+    },
+}
+
+export const WithErrorHelperAndWarningText: Story = {
+    ...Default,
+    args: {
+        ...WithError.args,
+        ...WithHelperText.args,
+        ...WithWarningText.args,
+    },
+}
+
+export const WithRequiredAttribute: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        required: true,
+    },
+}
+
+export const WithRowLayout: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        layout: 'row',
+    },
+}
+
+export const WithFullWidth: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        fullWidth: true,
+    },
+}
+
+export const HelperText: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        helperText: 'Information goes here',
+    },
+}
+
+export const WithDisabled: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+}
+
+export const WithOnFocus: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        onFocus: action('onFocus'),
+    },
+}
+
+export const WithAutoFocus: Story = {
+    ...WithOnFocus,
+    args: {
+        ...WithOnFocus.args,
+        autoFocus: true,
+    },
+}
+
+export const WithNoTopBorderRadius: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        borderRadiusConfig: {
+            top: false,
+        },
+    },
+}
+
+export const WithPasswordType: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Password',
+        placeholder: 'Enter password',
+        type: 'password',
+    },
+}
+
+export const WithNumberType: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        label: 'Age',
+        placeholder: 'Enter age',
+        type: 'number',
+    },
+}

From 3b807cda55cf682332c9d6782f8c86ee2273fa6f Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Wed, 29 Jan 2025 16:13:59 +0530
Subject: [PATCH 03/36] fix: styling issues on login page

---
 src/components/login/Login.tsx  | 34 +++++++++++++++++----------------
 src/components/login/login.scss |  2 +-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index dd58ea3972..a83f352bb5 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -257,21 +257,23 @@ class Login extends Component<LoginProps, LoginFormState> {
                 <p className="login__text">Your tool for Rapid, Reliable & Repeatable deployments</p>
                 {/* @ts-ignore */}
                 <form className="login-dt__form" autoComplete="on" onSubmit={this.login}>
-                    <CustomInput
-                        data-testid="username-textbox"
-                        placeholder="Username"
-                        value={this.state.form.username}
-                        name="username"
-                        onChange={this.handleChange}
-                    />
-                    <CustomInput
-                        type={import.meta.env.VITE_NODE_ENV !== 'development' ? 'password' : 'text'}
-                        data-testid="password-textbox"
-                        placeholder="Password"
-                        value={this.state.form.password}
-                        name="password"
-                        onChange={this.handleChange}
-                    />
+                    <div className="flexbox-col dc__gap-24">
+                        <CustomInput
+                            data-testid="username-textbox"
+                            placeholder="Username"
+                            value={this.state.form.username}
+                            name="username"
+                            onChange={this.handleChange}
+                        />
+                        <CustomInput
+                            type={import.meta.env.VITE_NODE_ENV !== 'development' ? 'password' : 'text'}
+                            data-testid="password-textbox"
+                            placeholder="Password"
+                            value={this.state.form.password}
+                            name="password"
+                            onChange={this.handleChange}
+                        />
+                    </div>
                     <div className="login__know-password">
                         <a
                             className="login__know-password--link fs-12 cb-5"
@@ -292,7 +294,7 @@ class Login extends Component<LoginProps, LoginFormState> {
                                 fullWidth
                                 size={ComponentSizeType.xl}
                                 buttonProps={{
-                                    type: 'submit'
+                                    type: 'submit',
                                 }}
                             />
                         </div>
diff --git a/src/components/login/login.scss b/src/components/login/login.scss
index bce7ff4312..331cd2cdaf 100644
--- a/src/components/login/login.scss
+++ b/src/components/login/login.scss
@@ -231,7 +231,7 @@
 
 // This is intended to be removed once login page is revamped before shipping dark mode
 .login-dt__form {
-    & .form__input {
+    & input {
         color-scheme: light;
         background: #f7fafc;
         border-color: #d0d4d9;

From 5a27b42a011de3a9266b9c655f428c6e30ca6e86 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Wed, 29 Jan 2025 18:47:20 +0530
Subject: [PATCH 04/36] refactor: code clean up

---
 src/components/app/create/CreateApp.tsx  | 46 ++++++++++--------------
 src/components/app/create/createApp.scss |  9 -----
 src/css/forms.scss                       | 20 -----------
 3 files changed, 18 insertions(+), 57 deletions(-)

diff --git a/src/components/app/create/CreateApp.tsx b/src/components/app/create/CreateApp.tsx
index 83b71bca34..2c925e8100 100644
--- a/src/components/app/create/CreateApp.tsx
+++ b/src/components/app/create/CreateApp.tsx
@@ -367,25 +367,21 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
         return (
             <div className="scrollable-content p-20">
                 <div className="form__row">
-                    <div className={`${this.props.isJobView ? 'mb-12' : ''}`}>
-                        <CustomInput
-                            data-testid={`${this.props.isJobView ? 'job' : 'app'}-name-textbox`}
-                            name="app-name"
-                            label={`${this.props.isJobView ? 'Job' : 'App'} Name`}
-                            value={this.state.form.appName}
-                            placeholder={`e.g. my-first-${this.props.isJobView ? 'job' : 'app'}`}
-                            autoFocus
-                            onChange={this.handleAppName}
-                            required
-                            error={appNameErrors && !this.state.isValid.appName && errorObject[0].message}
-                        />
-                    </div>
-                    {!this.props.isJobView && (
-                        <span className="form__text-field-info form__text-field-info--create-app">
-                            <Info className="form__icon form__icon--info form__icon--create-app" />
-                            Apps are NOT env specific and can be used to deploy to multiple environments.
-                        </span>
-                    )}
+                    <CustomInput
+                        data-testid={`${this.props.isJobView ? 'job' : 'app'}-name-textbox`}
+                        name="app-name"
+                        label={`${this.props.isJobView ? 'Job' : 'App'} Name`}
+                        value={this.state.form.appName}
+                        placeholder={`e.g. my-first-${this.props.isJobView ? 'job' : 'app'}`}
+                        autoFocus
+                        onChange={this.handleAppName}
+                        required
+                        error={appNameErrors && !this.state.isValid.appName && errorObject[0].message}
+                        helperText={
+                            !this.props.isJobView &&
+                            'Apps are NOT env specific and can be used to deploy to multiple environments.'
+                        }
+                    />
                     <div className="mt-16">
                         <Textarea
                             label="Description"
@@ -470,8 +466,9 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
                 )}
 
                 <div className="form__row">
-                    <span className="form__label dc__required-field">Project</span>
                     <SelectPicker
+                        required
+                        label="Project"
                         classNamePrefix="create-app__select-project"
                         inputId="create-app__select-project"
                         name="create-app__select-project"
@@ -479,15 +476,8 @@ export class AddNewApp extends Component<AddNewAppProps, AddNewAppState> {
                         options={this.state.projects}
                         onChange={(selected: OptionType) => this.handleProject(+selected.value)}
                         placeholder="Select project"
+                        error={showError && !this.state.isValid.projectId ? errorObject[1].message : null}
                     />
-                    <span className="form__error">
-                        {showError && !this.state.isValid.projectId ? (
-                            <>
-                                <Error className="form__icon form__icon--error" />
-                                {errorObject[1].message}
-                            </>
-                        ) : null}
-                    </span>
                 </div>
 
                 {MandatoryTagsContainer ? (
diff --git a/src/components/app/create/createApp.scss b/src/components/app/create/createApp.scss
index cf86b1aa86..dfe60623a0 100644
--- a/src/components/app/create/createApp.scss
+++ b/src/components/app/create/createApp.scss
@@ -36,15 +36,6 @@
                 font-size: 12px;
                 color: var(--N700);
             }
-
-            .form__text-field-info--create-app {
-                align-items: flex-start;
-
-                .form__icon--create-app {
-                    position: relative;
-                    top: 3px;
-                }
-            }
         }
     }
 
diff --git a/src/css/forms.scss b/src/css/forms.scss
index 4f3377ccb8..3a28552a82 100644
--- a/src/css/forms.scss
+++ b/src/css/forms.scss
@@ -129,18 +129,6 @@
     border: solid 1px var(--R500);
 }
 
-.form__text-field-info {
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 1.45;
-    letter-spacing: normal;
-    color: var(--N500);
-    vertical-align: middle;
-    text-transform: lowercase;
-    display: flex;
-    align-items: flex-end;
-}
-
 p.sentence-case {
     margin-bottom: 0px;
 }
@@ -604,14 +592,6 @@ p.sentence-case:first-letter {
     outline: none;
 }
 
-.form__input:focus ~ .form__text-field-info {
-    color: var(--B500);
-}
-
-.form__input:focus ~ .form__text-field-info path[fill='#06C'] {
-    fill: var(--B500);
-}
-
 .form__input:disabled {
     background-color: var(--N100);
     border: solid 1px var(--N200);

From 360ec02900e70acf44b74af68c7018bff575839b Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Thu, 30 Jan 2025 13:42:23 +0530
Subject: [PATCH 05/36] feat: add util classes

---
 src/css/base.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/css/base.scss b/src/css/base.scss
index c7451c4197..0ea0a31485 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -341,6 +341,10 @@ a:focus {
     top: 0;
 }
 
+.dc__top-4 {
+    top: 4px;
+}
+
 .dc__top-9 {
     top: 9px;
 }
@@ -429,6 +433,10 @@ a:focus {
     right: -3px;
 }
 
+.dc__right-4 {
+    right: 4px;
+}
+
 .dc__right-8 {
     right: 8px;
 }
@@ -3991,6 +3999,10 @@ button.anchor {
     padding-bottom: 160px;
 }
 
+.pr-36-imp {
+    padding-right: 36px !important;
+}
+
 // Margin in pixels
 .dc__m-auto {
     margin: auto;

From 00ca8f03d879211f904aeb5cd59fc9c8e5c458ea Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:29:25 +0530
Subject: [PATCH 06/36] fix: padding in host url input

---
 src/components/hostURL/HostURL.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hostURL/HostURL.tsx b/src/components/hostURL/HostURL.tsx
index 61f42485b1..db2e529980 100644
--- a/src/components/hostURL/HostURL.tsx
+++ b/src/components/hostURL/HostURL.tsx
@@ -245,7 +245,7 @@ export default class HostURLConfiguration extends Component<HostURLConfigProps,
                                     <button
                                         type="button"
                                         onClick={(e) => this.handleHostURLLocation(window.location.origin)}
-                                        className="hosturl__url fw-4 cg-5"
+                                        className="hosturl__url fw-4 cg-5 py-0"
                                         data-testid="clickable-url"
                                     >
                                         {window.location.origin}

From 62020550bbaaab8b3cd4d939a898115cbf7a91ee Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:44:37 +0530
Subject: [PATCH 07/36] Revert "feat: add util classes"

This reverts commit 360ec02900e70acf44b74af68c7018bff575839b.
---
 src/css/base.scss | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/css/base.scss b/src/css/base.scss
index 5954da366a..426615f115 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -341,10 +341,6 @@ a:focus {
     top: 0;
 }
 
-.dc__top-4 {
-    top: 4px;
-}
-
 .dc__top-9 {
     top: 9px;
 }
@@ -433,10 +429,6 @@ a:focus {
     right: -3px;
 }
 
-.dc__right-4 {
-    right: 4px;
-}
-
 .dc__right-8 {
     right: 8px;
 }
@@ -3998,10 +3990,6 @@ button.anchor {
     padding-bottom: 160px;
 }
 
-.pr-36-imp {
-    padding-right: 36px !important;
-}
-
 // Margin in pixels
 .dc__m-auto {
     margin: auto;

From 08d1f3875e9d73291843319a36390cd0260a05f6 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:44:06 +0530
Subject: [PATCH 08/36] fix: typing in button stories

---
 src/stories/Button.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index a9160533bb..f1e2979a85 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -29,7 +29,7 @@ import { ReactComponent as ICAbort } from '@Icons/ic-abort.svg'
 
 const BUTTON_TEXT = 'Hello world'
 
-const linkProps: ButtonProps['linkProps'] = {
+const linkProps: ButtonProps<ButtonComponentType.link>['linkProps'] = {
     to: '#',
     target: '_blank',
 }

From b86660dac7e57b393f9acba9b3565cf76b8706e9 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:58:08 +0530
Subject: [PATCH 09/36] feat: add support for end icon

---
 src/stories/TextField.stories.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
index bdd9e35de9..a3da9a7da4 100644
--- a/src/stories/TextField.stories.tsx
+++ b/src/stories/TextField.stories.tsx
@@ -1,7 +1,8 @@
+import { useEffect, useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import { ComponentSizeType, CustomInput, CustomInputProps } from '@devtron-labs/devtron-fe-common-lib'
-import { useEffect, useState } from 'react'
+import { ReactComponent as ICKeyBulb } from '@Icons/ic-key-bulb.svg'
 
 const meta = {
     component: CustomInput,
@@ -188,3 +189,16 @@ export const WithNumberType: Story = {
         type: 'number',
     },
 }
+
+export const WithEndIcon: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        endIconButtonConfig: {
+            icon: <ICKeyBulb />,
+            onClick: action('end icon clicked'),
+            ariaLabel: 'End icon',
+            showAriaLabelInTippy: false,
+        },
+    },
+}

From 9e5b93e0b5bcb7514a1329e67bd46d45cecbded1 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:59:50 +0530
Subject: [PATCH 10/36] refactor: remove unused styling

---
 src/css/base.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/css/base.scss b/src/css/base.scss
index 426615f115..f535d6b2a6 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -2861,12 +2861,6 @@ button.anchor {
     }
 }
 
-.info-icon-n7 {
-    circle {
-        fill: var(--N700);
-    }
-}
-
 .circle-fill-b5 {
     circle {
         fill: var(--B500);

From 5ab4087a517b96b72dac9531c7d2d87b9b33ebe6 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 12:43:06 +0530
Subject: [PATCH 11/36] fix: styling issues

---
 src/components/app/details/cIDetails/ciDetails.scss | 2 +-
 src/components/login/Login.tsx                      | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/app/details/cIDetails/ciDetails.scss b/src/components/app/details/cIDetails/ciDetails.scss
index 6707bf6ff1..55af6fa0c6 100644
--- a/src/components/app/details/cIDetails/ciDetails.scss
+++ b/src/components/app/details/cIDetails/ciDetails.scss
@@ -244,7 +244,7 @@
     }
 
     svg path {
-        fill: var(--N0);
+        fill: var(--white);
     }
 }
 
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index a83f352bb5..0d1155e249 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -266,8 +266,7 @@ class Login extends Component<LoginProps, LoginFormState> {
                             onChange={this.handleChange}
                         />
                         <CustomInput
-                            type={import.meta.env.VITE_NODE_ENV !== 'development' ? 'password' : 'text'}
-                            data-testid="password-textbox"
+                            type={import.meta.env.PROD ? 'password' : 'text'}
                             placeholder="Password"
                             value={this.state.form.password}
                             name="password"

From 217e75e50d38f6b859767af1ebb0b5062381e027 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:28:11 +0530
Subject: [PATCH 12/36] feat: stories for password field

---
 src/stories/PasswordField.stories.tsx | 54 +++++++++++++++++++++++++++
 src/stories/TextField.stories.tsx     | 10 -----
 2 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/stories/PasswordField.stories.tsx

diff --git a/src/stories/PasswordField.stories.tsx b/src/stories/PasswordField.stories.tsx
new file mode 100644
index 0000000000..5e0eb6be0a
--- /dev/null
+++ b/src/stories/PasswordField.stories.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import {
+    CustomInputProps,
+    DEFAULT_SECRET_PLACEHOLDER,
+    PasswordField,
+    PasswordFieldProps,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+const meta = {
+    component: PasswordField,
+} satisfies Meta<CustomInputProps | PasswordFieldProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const PasswordFieldTemplate: Story = {
+    render: (props) => {
+        const [value, setValue] = useState<CustomInputProps['value']>(props.value)
+
+        useEffect(() => {
+            setValue(props.value)
+        }, [props.value])
+
+        const handleChange: CustomInputProps['onChange'] = (e) => {
+            setValue(e.target.value)
+            action('changed')(e)
+        }
+
+        return <PasswordField {...props} value={value} onChange={handleChange} />
+    },
+    args: {
+        name: 'password-field',
+        label: 'Password',
+        value: '',
+        placeholder: 'Enter password',
+        onChange: null,
+        shouldShowDefaultPlaceholderOnBlur: false,
+    },
+}
+
+export const DoNotShowDefaultPlaceholderOnBlur: Story = {
+    ...PasswordFieldTemplate,
+}
+
+export const ShowDefaultPlaceholderOnBlur: Story = {
+    ...PasswordFieldTemplate,
+    args: {
+        ...PasswordFieldTemplate.args,
+        shouldShowDefaultPlaceholderOnBlur: true,
+        value: DEFAULT_SECRET_PLACEHOLDER,
+    },
+}
diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
index a3da9a7da4..69c14b8139 100644
--- a/src/stories/TextField.stories.tsx
+++ b/src/stories/TextField.stories.tsx
@@ -170,16 +170,6 @@ export const WithNoTopBorderRadius: Story = {
     },
 }
 
-export const WithPasswordType: Story = {
-    ...Default,
-    args: {
-        ...Default.args,
-        label: 'Password',
-        placeholder: 'Enter password',
-        type: 'password',
-    },
-}
-
 export const WithNumberType: Story = {
     ...Default,
     args: {

From e79c30c71336982601759b5879dc70d1c19a887e Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:14:19 +0530
Subject: [PATCH 13/36] feat: update storybook with tooltip label

---
 src/stories/SelectPicker.stories.tsx | 26 ++++++++++++++++++++++++++
 src/stories/TextField.stories.tsx    | 26 ++++++++++++++++++++++++++
 src/stories/Textarea.stories.tsx     | 26 ++++++++++++++++++++++++++
 3 files changed, 78 insertions(+)

diff --git a/src/stories/SelectPicker.stories.tsx b/src/stories/SelectPicker.stories.tsx
index 7bc314d267..4a93c3e85b 100644
--- a/src/stories/SelectPicker.stories.tsx
+++ b/src/stories/SelectPicker.stories.tsx
@@ -272,3 +272,29 @@ export const CustomPlaceholder: Story = {
         placeholder: 'Custom Placeholder',
     },
 }
+
+export const WithLabelHelperTippy: Story = {
+    ...Required,
+    args: {
+        ...Required.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        labelTippyCustomizedConfig: {
+            heading: 'Heading',
+            infoText: 'Info text',
+            documentationLink: 'https://www.devtron.ai',
+            documentationLinkText: 'Documentation',
+        },
+    },
+}
+
+export const WithLabelHelperTippyInRowLayout: Story = {
+    ...Required,
+    args: {
+        ...Required.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        layout: 'row',
+        labelTooltipConfig: {
+            content: 'Helper Text',
+        },
+    },
+}
diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
index 69c14b8139..2de7870c23 100644
--- a/src/stories/TextField.stories.tsx
+++ b/src/stories/TextField.stories.tsx
@@ -192,3 +192,29 @@ export const WithEndIcon: Story = {
         },
     },
 }
+
+export const WithLabelHelperTippy: Story = {
+    ...WithRequiredAttribute,
+    args: {
+        ...WithRequiredAttribute.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        labelTippyCustomizedConfig: {
+            heading: 'Heading',
+            infoText: 'Info text',
+            documentationLink: 'https://www.devtron.ai',
+            documentationLinkText: 'Documentation',
+        },
+    },
+}
+
+export const WithLabelHelperTippyInRowLayout: Story = {
+    ...WithRequiredAttribute,
+    args: {
+        ...WithRequiredAttribute.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        layout: 'row',
+        labelTooltipConfig: {
+            content: 'Helper Text',
+        },
+    },
+}
diff --git a/src/stories/Textarea.stories.tsx b/src/stories/Textarea.stories.tsx
index d91712dbf3..c3b876822e 100644
--- a/src/stories/Textarea.stories.tsx
+++ b/src/stories/Textarea.stories.tsx
@@ -167,3 +167,29 @@ export const WithNoTopBorderRadius: Story = {
         },
     },
 }
+
+export const WithLabelHelperTippy: Story = {
+    ...WithRequiredAttribute,
+    args: {
+        ...WithRequiredAttribute.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        labelTippyCustomizedConfig: {
+            heading: 'Heading',
+            infoText: 'Info text',
+            documentationLink: 'https://www.devtron.ai',
+            documentationLinkText: 'Documentation',
+        },
+    },
+}
+
+export const WithLabelHelperTippyInRowLayout: Story = {
+    ...WithRequiredAttribute,
+    args: {
+        ...WithRequiredAttribute.args,
+        label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis maiores natus dolorum porro vero ad quod suscipit. Eveniet quidem nemo assumenda, tempora dolore aliquam accusamus nam dolorum ad molestias libero.',
+        layout: 'row',
+        labelTooltipConfig: {
+            content: 'Helper Text',
+        },
+    },
+}

From eaeddf6e319a860be13398b958e531b52bee9b09 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:35:06 +0530
Subject: [PATCH 14/36] refactor: replace Protected Input with PasswordField

---
 src/components/chartRepo/ChartRepo.tsx        |  45 +++---
 src/components/gitOps/gitops.scss             |   5 -
 .../GlobalConfiguration.tsx                   | 137 +-----------------
 .../globalConfiguration.type.ts               |  18 ---
 .../globalConfigurations.scss                 |   7 -
 .../notifications/SMTPConfigModal.tsx         |  17 ++-
 .../notifications/notifications.scss          |  10 --
 7 files changed, 37 insertions(+), 202 deletions(-)

diff --git a/src/components/chartRepo/ChartRepo.tsx b/src/components/chartRepo/ChartRepo.tsx
index 6167a2cecb..29a50da804 100644
--- a/src/components/chartRepo/ChartRepo.tsx
+++ b/src/components/chartRepo/ChartRepo.tsx
@@ -29,11 +29,12 @@ import {
     DeleteComponent,
     ToastManager,
     ToastVariantType,
+    PasswordField,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { NavLink } from 'react-router-dom'
 import { useForm } from '../common'
-import { List, ProtectedInput } from '../globalConfigurations/GlobalConfiguration'
+import { List } from '../globalConfigurations/GlobalConfiguration'
 import {
     saveChartProviderConfig,
     updateChartProviderConfig,
@@ -481,25 +482,29 @@ const ChartForm = ({
                 {(chartRepoType !== CHART_REPO_TYPE.PUBLIC ||
                     (id && authMode === CHART_REPO_AUTH_TYPE.USERNAME_PASSWORD)) && (
                     <>
-                        <CustomInput
-                            placeholder='Enter username'
-                            value={customState.username.value}
-                            onChange={customHandleChange}
-                            name="username"
-                            error={customState.username.error}
-                            label="Username"
-                            required
-                        />
-                        <ProtectedInput
-                            dataTestid="add-chart-repo-password"
-                            value={customState.password.value}
-                            onChange={customHandleChange}
-                            name="password"
-                            error={customState.password.error}
-                            label="Password"
-                            labelClassName="mt-12"
-                            required
-                        />
+                        <div className="mt-12">
+                            <CustomInput
+                                placeholder="Enter username"
+                                value={customState.username.value}
+                                onChange={customHandleChange}
+                                name="username"
+                                error={customState.username.error}
+                                label="Username"
+                                required
+                            />
+                        </div>
+                        <div className="mt-12">
+                            <PasswordField
+                                value={customState.password.value}
+                                onChange={customHandleChange}
+                                name="password"
+                                error={customState.password.error}
+                                label="Password"
+                                required
+                                placeholder="Enter password"
+                                shouldShowDefaultPlaceholderOnBlur={false}
+                            />
+                        </div>
                     </>
                 )}
 
diff --git a/src/components/gitOps/gitops.scss b/src/components/gitOps/gitops.scss
index 2f154ccf95..e70ed35636 100644
--- a/src/components/gitOps/gitops.scss
+++ b/src/components/gitOps/gitops.scss
@@ -17,11 +17,6 @@
 .gitops__id {
     color: var(--N700);
 }
-.form__label {
-    &.form__label--fs-13 {
-        font-size: 13px;
-    }
-}
 .git_impt {
     border: solid 1px var(--V200);
 }
diff --git a/src/components/globalConfigurations/GlobalConfiguration.tsx b/src/components/globalConfigurations/GlobalConfiguration.tsx
index db030263be..bcb1194e66 100644
--- a/src/components/globalConfigurations/GlobalConfiguration.tsx
+++ b/src/components/globalConfigurations/GlobalConfiguration.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { lazy, useState, useEffect, Suspense, isValidElement, useRef } from 'react'
+import { lazy, useState, useEffect, Suspense, isValidElement } from 'react'
 import { Route, NavLink, Router, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
 import {
     showError,
@@ -31,7 +31,6 @@ import { URLS } from '../../config'
 import { ErrorBoundary, importComponentFromFELibrary } from '../common'
 import arrowTriangle, { ReactComponent as Dropdown } from '../../assets/icons/ic-chevron-down.svg'
 import { AddNotification } from '../notifications/AddNotification'
-import { ReactComponent as FormError } from '../../assets/icons/ic-warning.svg'
 import { getHostURLConfiguration, getAppCheckList } from '../../services/service'
 import './globalConfigurations.scss'
 import {
@@ -44,7 +43,7 @@ import {
 import ExternalLinks from '../externalLinks/ExternalLinks'
 import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
 import { getModuleInfo } from '../v2/devtronStackManager/DevtronStackManager.service'
-import { BodyType, ProtectedInputType } from './globalConfiguration.type'
+import { BodyType } from './globalConfiguration.type'
 import { GlobalConfigurationProvider, useGlobalConfiguration } from './GlobalConfigurationProvider'
 import { OffendingPipelineModalAppView } from '@Pages/GlobalConfigurations/PluginPolicy/OffendingPipelineModal'
 
@@ -826,138 +825,6 @@ export const List = ({ dataTestId = '', children = null, className = '', ...prop
     )
 }
 
-function handleError(error: any): any[] {
-    if (!error) {
-        return []
-    }
-
-    if (!Array.isArray(error)) {
-        return [error]
-    }
-
-    return error
-}
-
-export const ProtectedInput = ({
-    name,
-    value,
-    error,
-    onChange,
-    label = '',
-    tabIndex = 1,
-    disabled = false,
-    hidden = true,
-    labelClassName = '',
-    placeholder = '',
-    dataTestid = '',
-    onBlur = (e) => { },
-    required = false,
-    autoFocus = false,
-}: ProtectedInputType) => {
-    const inputRef = useRef<HTMLInputElement>()
-
-    useEffect(() => {
-        setTimeout(() => {
-            // Added timeout to ensure the autofocus code is executed post the re-renders
-            if (inputRef.current && autoFocus) {
-                inputRef.current.focus()
-            }
-        }, 100)
-    }, [autoFocus])
-    
-    const [shown, toggleShown] = useState(false)
-    useEffect(() => {
-        toggleShown(!hidden)
-    }, [hidden])
-
-    return (
-        <div className="flex column left top ">
-            <label
-                htmlFor=""
-                className={`form__label ${labelClassName} ${required ? 'dc__required-field' : ''}`}
-            >
-                {label}
-            </label>
-            <div className="dc__position-rel w-100">
-                <input
-                    data-testid={dataTestid}
-                    type={shown ? 'text' : 'password'}
-                    tabIndex={tabIndex}
-                    className={error ? 'form__input form__input--error pl-42' : 'form__input pl-42 fs-13'}
-                    name={name}
-                    placeholder={placeholder}
-                    onChange={(e) => {
-                        e.persist()
-                        onChange(e)
-                    }}
-                    value={value}
-                    disabled={disabled}
-                    onBlur={onBlur}
-                    autoFocus={autoFocus}
-                    ref={inputRef}
-                />
-                <ShowHide
-                    className="protected-input__toggle"
-                    hidden={!shown}
-                    defaultOnClick={(e) => toggleShown(!shown)}
-                    disabled={disabled}
-                />
-            </div>
-            {error && (
-                <div className="form__error">
-                    <FormError className="form__icon form__icon--error" />
-                    {error}
-                </div>
-            )}
-        </div>
-    )
-}
-
-export const ShowHide = ({
-    hidden = true,
-    className = '',
-    onClick = null,
-    defaultOnClick = null,
-    disabled = false,
-}) => {
-    return hidden ? (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            className={className}
-            viewBox="0 0 24 24"
-            onClick={disabled ? () => { } : onClick || defaultOnClick}
-        >
-            <g fill="none" fillRule="evenodd">
-                <path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" />
-                <path
-                    fill="#767D84"
-                    d="M12 6a9.77 9.77 0 0 1 8.82 5.5 9.647 9.647 0 0 1-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68A11.738 11.738 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02a2.5 2.5 0 0 1-2.5-2.5c0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75a4.6 4.6 0 0 0-.36 1.78 4.507 4.507 0 0 0 6.27 4.14l.98.98c-.88.24-1.8.38-2.75.38a9.77 9.77 0 0 1-8.82-5.5c.7-1.43 1.72-2.61 2.93-3.53z"
-                />
-            </g>
-        </svg>
-    ) : (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            className={className}
-            viewBox="0 0 24 24"
-            onClick={disabled ? () => { } : onClick || defaultOnClick}
-        >
-            <g fill="none" fillRule="evenodd">
-                <path d="M0 0h24v24H0z" />
-                <path
-                    fill="#959BA1"
-                    d="M12 6a9.77 9.77 0 0 1 8.82 5.5A9.77 9.77 0 0 1 12 17a9.77 9.77 0 0 1-8.82-5.5A9.77 9.77 0 0 1 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5a2.5 2.5 0 0 1 0 5 2.5 2.5 0 0 1 0-5m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
-                />
-            </g>
-        </svg>
-    )
-}
-
-ProtectedInput.ShowHide = ShowHide
 List.Logo = Logo
 List.Title = Title
 List.Toggle = ListToggle
diff --git a/src/components/globalConfigurations/globalConfiguration.type.ts b/src/components/globalConfigurations/globalConfiguration.type.ts
index 1950b444d1..a867a6a665 100644
--- a/src/components/globalConfigurations/globalConfiguration.type.ts
+++ b/src/components/globalConfigurations/globalConfiguration.type.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { AppCheckList, ChartCheckList } from '../checkList/checklist.type'
 
 interface CheckList {
@@ -32,20 +31,3 @@ export interface BodyType {
     handleChecklistUpdate: (itemName: string) => void
     isSuperAdmin: boolean
 }
-
-export interface ProtectedInputType {
-    name: string
-    value: string | number
-    onChange: (e: any) => void
-    error?: React.ReactNode
-    label?: React.ReactNode
-    tabIndex?: number
-    disabled?: boolean
-    hidden?: boolean
-    labelClassName?: string
-    placeholder?: string
-    dataTestid: string
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
-    required?: boolean
-    autoFocus?: boolean
-}
diff --git a/src/components/globalConfigurations/globalConfigurations.scss b/src/components/globalConfigurations/globalConfigurations.scss
index 2426de41c6..ac8941fc1d 100644
--- a/src/components/globalConfigurations/globalConfigurations.scss
+++ b/src/components/globalConfigurations/globalConfigurations.scss
@@ -81,13 +81,6 @@
             }
         }
     }
-
-    .protected-input__toggle {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-    }
 }
 
 .page-enter {
diff --git a/src/components/notifications/SMTPConfigModal.tsx b/src/components/notifications/SMTPConfigModal.tsx
index 475afc9437..889c38d579 100644
--- a/src/components/notifications/SMTPConfigModal.tsx
+++ b/src/components/notifications/SMTPConfigModal.tsx
@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 import { useState, useEffect } from 'react'
-import { showError, CustomInput, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    showError,
+    CustomInput,
+    ToastManager,
+    ToastVariantType,
+    PasswordField,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory } from 'react-router-dom'
 import { getSMTPConfiguration, saveEmailConfiguration } from './notifications.service'
-import { ProtectedInput } from '../globalConfigurations/GlobalConfiguration'
 import { ConfigurationFieldKeys, ConfigurationsTabTypes, DefaultSMTPValidation } from './constants'
 import { SMTPConfigModalProps, SMTPFormType } from './types'
 import { ConfigurationTabDrawerModal } from './ConfigurationDrawerModal'
@@ -194,19 +199,17 @@ export const SMTPConfigModal = ({
                 required
                 error={isFormValid[ConfigurationFieldKeys.AUTH_USER].message}
             />
-            <div className="smtp-protected-input">
-                <ProtectedInput
-                    dataTestid="add-smtp-password"
+            <div className="mb-8">
+                <PasswordField
                     name={ConfigurationFieldKeys.AUTH_PASSWORD}
                     value={form.authPassword}
                     onChange={handleInputChange}
                     error={isFormValid[ConfigurationFieldKeys.AUTH_PASSWORD].message}
                     label="SMTP Password"
-                    labelClassName="form__label--fs-13 mb-8 fw-5 fs-13"
                     placeholder="Enter SMTP password"
                     required
-                    tabIndex={0}
                     onBlur={handleBlur}
+                    shouldShowDefaultPlaceholderOnBlur={false}
                 />
             </div>
             <CustomInput
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 70b220f624..796a5207cf 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -315,16 +315,6 @@
     }
 }
 
-.smtp-protected-input {
-    .protected-input__toggle {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        -webkit-transform: translateY(-50%);
-        transform: translateY(-50%);
-    }
-}
-
 .no-email-channel-warning {
     path {
         fill: var(--Y700);

From 3b6f722b8217df910f68a896a7cf80bd1678f8b3 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:36:38 +0530
Subject: [PATCH 15/36] chore: version bump

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a9f8cd4aa8..62c94729b8 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.6.1",
+        "@devtron-labs/devtron-fe-common-lib": "1.6.1-beta-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/yarn.lock b/yarn.lock
index 738bc0513e..40b9b97ec7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1103,10 +1103,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.6.1.tgz#f24addd5a50d47a2dbaef982329e2128f5f2b3ed"
-  integrity sha512-PdTiyyvSZQhcQCC+NlbdP73DlBYzhDk1binuJJqmnW5MZ7JmqzdaZXvrlV3eWcEDRvk1PDnEAMWsxxCTf00BcQ==
+"@devtron-labs/devtron-fe-common-lib@1.6.1-beta-1":
+  version "1.6.1-beta-1"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.6.1-beta-1.tgz#def30626cff3334535e53d0c0d7960cd0ce0292e"
+  integrity sha512-wj9GcJPIYZpB/D08svAiLf0DcWLg3mFp84qaUU4vGhtbA51W6uV4ikVENEgtwwoXlXG1BzhyYxbIqp5FZjDoNg==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"

From 65a6277d8c28c092cff186231be93fb7109dc91e Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 17:08:09 +0530
Subject: [PATCH 16/36] refactor: update select in docker and label

---
 .../CIPipelineN/TaskDetailComponent.tsx       |  3 +-
 src/components/dockerRegistry/Docker.tsx      | 58 +++++--------------
 .../dockerRegistry/creatableStyles.ts         | 46 ---------------
 3 files changed, 17 insertions(+), 90 deletions(-)
 delete mode 100644 src/components/dockerRegistry/creatableStyles.ts

diff --git a/src/components/CIPipelineN/TaskDetailComponent.tsx b/src/components/CIPipelineN/TaskDetailComponent.tsx
index 0a035717b3..9360912f14 100644
--- a/src/components/CIPipelineN/TaskDetailComponent.tsx
+++ b/src/components/CIPipelineN/TaskDetailComponent.tsx
@@ -204,14 +204,15 @@ export const TaskDetailComponent = () => {
             <div className="p-20 dc__overflow-auto">
                 <div>
                     <div className="row-container mb-12">
-                        <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">Task name</div>
                         <CustomInput
                             type="text"
                             onChange={(e) => handleNameChange(e)}
                             value={selectedStep.name}
                             name="task-name"
                             placeholder="Enter task name"
+                            label="Task name"
                             error={renderTaskNameError()}
+                            required
                         />
                     </div>
                     <div className="row-container mb-12">
diff --git a/src/components/dockerRegistry/Docker.tsx b/src/components/dockerRegistry/Docker.tsx
index 1ad0a4c9fd..a8287db3f2 100644
--- a/src/components/dockerRegistry/Docker.tsx
+++ b/src/components/dockerRegistry/Docker.tsx
@@ -38,18 +38,15 @@ import {
     noop,
     InfoIconTippy,
     DEFAULT_SECRET_PLACEHOLDER,
-    ClearIndicator,
-    MultiValueRemove,
-    MultiValueChipContainer,
     OptionType,
     DeleteComponent,
     SelectPicker,
     ToastVariantType,
     ToastManager,
     Textarea,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
-import CreatableSelect from 'react-select/creatable'
 import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
 import { useForm, handleOnBlur, handleOnFocus, parsePassword, importComponentFromFELibrary } from '../common'
 import {
@@ -85,16 +82,12 @@ import ManageRegistry from './ManageRegistry'
 import {
     CredentialType,
     CustomCredential,
-    EAModeRegistryType,
     RemoteConnectionType,
     RemoteConnectionTypeRegistry,
     SSHAuthenticationType,
 } from './dockerType'
 import { ReactComponent as InfoIcon } from '../../assets/icons/info-filled.svg'
 import { VALIDATION_STATUS, ValidateForm } from '../common/ValidateForm/ValidateForm'
-import { ReactComponent as ErrorInfo } from '../../assets/icons/misc/errorInfo.svg'
-import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
-import { creatableSelectStyles } from './creatableStyles'
 
 const RegistryHelmPushCheckbox = importComponentFromFELibrary('RegistryHelmPushCheckbox')
 const RemoteConnectionRadio = importComponentFromFELibrary('RemoteConnectionRadio')
@@ -106,13 +99,6 @@ enum CERTTYPE {
     SECURE_WITH_CERT = 'secure-with-cert',
 }
 
-const creatableComponents = {
-    DropdownIndicator: null,
-    ClearIndicator,
-    MultiValueRemove,
-    MultiValueContainer: (props) => <MultiValueChipContainer {...props} />,
-}
-
 const getInitialSSHAuthenticationType = (remoteConnectionConfig: any): SSHAuthenticationType => {
     const sshConfig = remoteConnectionConfig?.sshConfig
     if (sshConfig) {
@@ -1486,39 +1472,25 @@ const DockerForm = ({
         return (
             <>
                 <div className="mb-12">
-                    <div className="dc__required-field fs-13 cn-9 mb-6">List of repositories</div>
-                    <CreatableSelect
+                    <SelectPicker
+                        required
+                        label="List of repositories"
                         isMulti
-                        isClearable
+                        options={[]}
                         autoFocus
-                        value={customState.repositoryList.value}
+                        isClearable
+                        placeholder="Enter repository name and press enter"
                         inputValue={customState.repositoryList.inputValue}
-                        tabIndex={3}
-                        menuIsOpen={false}
-                        styles={creatableSelectStyles}
-                        components={creatableComponents}
-                        onChange={handleCreatableChange}
-                        onInputChange={handleCreatableInputChange}
+                        value={customState.repositoryList.value}
                         onBlur={setRepoListValue}
+                        onInputChange={handleCreatableInputChange}
                         onKeyDown={handleCreatableKeyDown}
-                        placeholder="Enter repository name and press enter"
+                        onChange={handleCreatableChange}
+                        inputId="repository-list"
+                        error={repositoryError || customState.repositoryList?.error}
+                        shouldHideMenu
+                        size={ComponentSizeType.large}
                     />
-                    {repositoryError.length > 0 && (
-                        <div className="error-label flex left dc__align-start fs-11 fw-4 mt-6">
-                            <div className="error-label-icon">
-                                <ErrorInfo className="icon-dim-16" />
-                            </div>
-                            <div className="ml-4 cr-5">{repositoryError}</div>
-                        </div>
-                    )}
-                    {customState.repositoryList?.error && (
-                        <div className="error-label flex left dc__align-start fs-11 fw-4 mt-6">
-                            <div className="error-label-icon">
-                                <AlertTriangle className="icon-dim-16" />
-                            </div>
-                            <div className="ml-4 cr-5">{customState.repositoryList?.error}</div>
-                        </div>
-                    )}
                 </div>
                 {registryStorageType === RegistryStorageType.OCI_PUBLIC && (
                     <InfoColourBar
@@ -1760,7 +1732,7 @@ const DockerForm = ({
     // For EA Mode GCR is not available as it is not OCI compliant
     const EA_MODE_REGISTRY_TYPE_MAP = Object.fromEntries(Object.entries(REGISTRY_TYPE_MAP).filter(([key,_]) => key !== 'gcr'))
     return (
-        <form onSubmit={handleOnSubmit} className="docker-form divider" autoComplete="off">
+        <form onSubmit={handleOnSubmit} className="docker-form divider" autoComplete="off" noValidate>
             <div className="pl-20 pr-20 pt-20 pb-20">
                 <div
                     className={`form__row--two-third ${
diff --git a/src/components/dockerRegistry/creatableStyles.ts b/src/components/dockerRegistry/creatableStyles.ts
deleted file mode 100644
index 4ea70d9c3b..0000000000
--- a/src/components/dockerRegistry/creatableStyles.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { getCommonSelectStyle } from '@devtron-labs/devtron-fe-common-lib'
-
-const baseStyles = getCommonSelectStyle()
-
-export const creatableSelectStyles = {
-    ...baseStyles,
-    multiValue: (base) => ({
-        ...base,
-        border: '1px solid var(--N200)',
-        borderRadius: '4px',
-        background: 'var(--bg-primary)',
-        height: '28px',
-        margin: 0,
-    }),
-    control: (base, state) => ({
-        ...baseStyles.control(base, state),
-        minHeight: '36px',
-        height: 'auto',
-    }),
-    indicatorsContainer: (base) => ({
-        ...base,
-        height: '34px',
-    }),
-    valueContainer: (base, state) => ({
-        ...baseStyles.valueContainer(base, state),
-        maxHeight: '100%',
-        gap: '4px',
-        paddingBlock: '4px',
-    }),
-}

From 87b0528535e44bcaf8c7300ef313bf92cac2f508 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 31 Jan 2025 22:41:41 +0530
Subject: [PATCH 17/36] refactor: usage of custom input

---
 src/components/gitOps/UserGitRepo.tsx                          | 1 +
 src/components/notifications/SlackConfigModal.tsx              | 1 +
 .../k8Resource/nodeDetail/EphemeralContainerDrawer.tsx         | 3 +++
 .../NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx         | 1 +
 4 files changed, 6 insertions(+)

diff --git a/src/components/gitOps/UserGitRepo.tsx b/src/components/gitOps/UserGitRepo.tsx
index ab74aa5b93..6d17edea73 100644
--- a/src/components/gitOps/UserGitRepo.tsx
+++ b/src/components/gitOps/UserGitRepo.tsx
@@ -53,6 +53,7 @@ const UserGitRepo: FunctionComponent<UserGitRepoProps> = ({
         )
     }
 
+    // TODO: update
     const InputUrlBox = () => {
         const _repoUrl = repoURL
         return (
diff --git a/src/components/notifications/SlackConfigModal.tsx b/src/components/notifications/SlackConfigModal.tsx
index 250771a2ef..ac60a25e71 100644
--- a/src/components/notifications/SlackConfigModal.tsx
+++ b/src/components/notifications/SlackConfigModal.tsx
@@ -152,6 +152,7 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
         </a>
     )
 
+    // TODO: Fix both
     const renderWebhookUrlLabel = () => (
         <div className="flex left dc__gap-6">
             <div className="dc__required-field">Webhook URL </div>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 6bbe2e40bb..9adef09994 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -263,6 +263,7 @@ const EphemeralContainerDrawer = ({
         return (
             <div className="p-20 flex-grow-1">
                 <div className="dc__row-container mb-12">
+                    {/* TODO: Update */}
                     <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
                         <Tippy
                             className="default-tt"
@@ -286,6 +287,7 @@ const EphemeralContainerDrawer = ({
                 </div>
 
                 <div className="dc__row-container mb-12">
+                    {/* TODO: Update */}
                     <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
                         <Tippy
                             className="default-tt"
@@ -322,6 +324,7 @@ const EphemeralContainerDrawer = ({
                 </div>
 
                 <div className="dc__row-container mb-12">
+                    {/* TODO: Update */}
                     <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
                         <Tippy
                             className="default-tt"
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
index 8e0a79c503..f15a7251e1 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
@@ -144,6 +144,7 @@ export const InputForSelectedOption = ({
         case CUSTOM_LOGS_FILTER.LINES:
             return (
                 <div className="flexbox-col cn-7">
+                    {/* TODO:  */}
                     <div className="dc__required-field mb-6 fs-13">
                         {filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? 'View logs for last' : 'Set number of lines'}
                     </div>

From 8986a745c748dedf76d838c08b1e823ba8c7c67e Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Thu, 13 Feb 2025 18:01:36 +0530
Subject: [PATCH 18/36] fix: custom input

---
 src/components/CIPipelineN/MountFromHost.tsx  |  2 -
 .../CIPipelineN/OutputDirectoryPath.tsx       |  1 -
 .../Webhook/WebhookDetailsModal.tsx           |  1 +
 src/components/material/MaterialView.tsx      |  1 -
 .../notifications/SlackConfigModal.tsx        | 50 ++++++-------------
 .../nodeDetail/EphemeralContainerDrawer.tsx   | 44 +++++-----------
 6 files changed, 28 insertions(+), 71 deletions(-)

diff --git a/src/components/CIPipelineN/MountFromHost.tsx b/src/components/CIPipelineN/MountFromHost.tsx
index 37d9790070..939d208fc2 100644
--- a/src/components/CIPipelineN/MountFromHost.tsx
+++ b/src/components/CIPipelineN/MountFromHost.tsx
@@ -69,7 +69,6 @@ const MountFromHost = () => {
                             <div className="mount-row mb-4 mt-4">
                                 <div className="fw-6 fs-13 lh-32 cn-7 " />
                                 <CustomInput
-                                    data-testid="script-mount-host-file-path-host"
                                     borderRadiusConfig={{
                                         right: false,
                                     }}
@@ -80,7 +79,6 @@ const MountFromHost = () => {
                                 />
                                 <div className="flex bw-1 en-2">:</div>
                                 <CustomInput
-                                    data-testid="script-mount-host-file-path-container"
                                     borderRadiusConfig={{
                                         left: false,
                                     }}
diff --git a/src/components/CIPipelineN/OutputDirectoryPath.tsx b/src/components/CIPipelineN/OutputDirectoryPath.tsx
index fb571b397a..504fade5bd 100644
--- a/src/components/CIPipelineN/OutputDirectoryPath.tsx
+++ b/src/components/CIPipelineN/OutputDirectoryPath.tsx
@@ -67,7 +67,6 @@ const OutputDirectoryPath = () => {
                 return (
                     <div className="custom-script__output-directory pl-220 mt-8" key={`output-directory-${index}`}>
                         <CustomInput
-                            data-testid="output-directory-path-add-path-textbox"
                             placeholder="Enter directory path"
                             value={elm}
                             onChange={(e) => handleStoreArtifact(e, index)}
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
index 8841db10f5..d0a2b52a29 100644
--- a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
+++ b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -382,6 +382,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
                 <CustomInput
                     name="api-token"
                     placeholder="Enter API token"
+                    // TODO: Remove border here
                     // rootClassName="bg__primary dc__no-border-imp w-100 h-32 pt-5-imp p-0-8-imp"
                     onChange={handleTokenChange}
                     value={tryoutAPIToken}
diff --git a/src/components/material/MaterialView.tsx b/src/components/material/MaterialView.tsx
index ffe1fa4b1d..0c56a51fe5 100644
--- a/src/components/material/MaterialView.tsx
+++ b/src/components/material/MaterialView.tsx
@@ -885,7 +885,6 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
                                     placeholder="e.g. /abc"
                                     value={this.props.material.checkoutPath}
                                     onChange={this.props.handlePathChange}
-                                    data-testid="clone-directory-path"
                                     name="clone-directory-path"
                                     error={this.props.isError.checkoutPath}
                                 />
diff --git a/src/components/notifications/SlackConfigModal.tsx b/src/components/notifications/SlackConfigModal.tsx
index ac60a25e71..309d51f3a3 100644
--- a/src/components/notifications/SlackConfigModal.tsx
+++ b/src/components/notifications/SlackConfigModal.tsx
@@ -25,10 +25,8 @@ import {
     ComponentSizeType,
     OptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Tippy from '@tippyjs/react'
 import { useHistory } from 'react-router-dom'
 import { saveSlackConfiguration, getSlackConfiguration } from './notifications.service'
-import { ReactComponent as ICHelpOutline } from '../../assets/icons/ic-help-outline.svg'
 import { ProjectListTypes, SlackConfigModalProps, SlackFormType } from './types'
 import {
     ConfigurationFieldKeys,
@@ -146,38 +144,6 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
         }
     }
 
-    const renderInfoText = () => (
-        <a href={SlackIncomingWebhookUrl} target="_blank" rel="noopener noreferrer">
-            <span className="dc__link">How to setup slack webhooks?</span>
-        </a>
-    )
-
-    // TODO: Fix both
-    const renderWebhookUrlLabel = () => (
-        <div className="flex left dc__gap-6">
-            <div className="dc__required-field">Webhook URL </div>
-            {renderInfoText()}
-        </div>
-    )
-
-    const renderProjectLabel = () => (
-        <div className="flex dc__gap-6 left">
-            <span className="dc__required-field">Project</span>
-            <Tippy
-                className="default-tt"
-                arrow
-                trigger="click"
-                interactive
-                placement="top"
-                content="Required to control user Access"
-            >
-                <span>
-                    <ICHelpOutline className="icon-dim-16 cursor flex" />
-                </span>
-            </Tippy>
-        </div>
-    )
-
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = event.target
         setForm((prevForm) => ({ ...prevForm, [name]: value }))
@@ -231,7 +197,7 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
             />
             <CustomInput
                 data-testid="add-webhook-url"
-                label={renderWebhookUrlLabel()}
+                label="Webhook URL"
                 name={ConfigurationFieldKeys.WEBHOOK_URL}
                 value={form.webhookUrl}
                 placeholder="Enter incoming webhook URL"
@@ -239,10 +205,18 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
                 onBlur={handleBlur}
                 required
                 error={isFormValid[ConfigurationFieldKeys.WEBHOOK_URL].message}
+                labelTippyCustomizedConfig={{
+                    heading: 'Setup webhooks',
+                    infoText: (
+                        <a href={SlackIncomingWebhookUrl} target="_blank" rel="noopener noreferrer">
+                            <span className="dc__link">How to setup slack webhooks?</span>
+                        </a>
+                    ),
+                }}
             />
             <SelectPicker
                 name={ConfigurationFieldKeys.PROJECT_ID}
-                label={renderProjectLabel()}
+                label="Project"
                 inputId="slack-project"
                 value={selectedProject}
                 onChange={handleProjectChange}
@@ -252,6 +226,10 @@ export const SlackConfigModal: React.FC<SlackConfigModalProps> = ({
                 error={isFormValid[ConfigurationFieldKeys.PROJECT_ID].message}
                 onBlur={handleProjectBlur}
                 selectRef={projectRef}
+                labelTippyCustomizedConfig={{
+                    heading: 'Why is project required?',
+                    infoText: 'Required to control user Access',
+                }}
             />
         </div>
     )
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 9adef09994..525862f4ef 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -262,32 +262,23 @@ const EphemeralContainerDrawer = ({
     const renderBasicEphemeral = (): JSX.Element => {
         return (
             <div className="p-20 flex-grow-1">
-                <div className="dc__row-container mb-12">
-                    {/* TODO: Update */}
-                    <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
-                        <Tippy
-                            className="default-tt"
-                            arrow={false}
-                            content={
-                                <span style={{ display: 'block', width: '220px' }}>
-                                    {EPHEMERAL_CONTAINER.CONTAINER_NAME}
-                                </span>
-                            }
-                        >
-                            <span className="text-underline-dashed">Container name prefix</span>
-                        </Tippy>
-                    </div>
+                <div className="mb-12">
                     <CustomInput
                         name="container-name"
                         fullWidth
                         placeholder="Enter container name"
                         onChange={handleContainerChange}
                         value={ephemeralForm.basicData.containerName}
+                        layout="row"
+                        label="Container name prefix"
+                        labelTooltipConfig={{
+                            content: EPHEMERAL_CONTAINER.CONTAINER_NAME,
+                        }}
+                        required
                     />
                 </div>
 
                 <div className="dc__row-container mb-12">
-                    {/* TODO: Update */}
                     <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
                         <Tippy
                             className="default-tt"
@@ -323,21 +314,7 @@ const EphemeralContainerDrawer = ({
                     />
                 </div>
 
-                <div className="dc__row-container mb-12">
-                    {/* TODO: Update */}
-                    <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
-                        <Tippy
-                            className="default-tt"
-                            arrow={false}
-                            content={
-                                <span style={{ display: 'block', width: '220px' }}>
-                                    {EPHEMERAL_CONTAINER.TARGET_CONTAINER_NAME}
-                                </span>
-                            }
-                        >
-                            <span className="text-underline-dashed">Target Container Name</span>
-                        </Tippy>
-                    </div>
+                <div className="mb-12">
                     <SelectPicker
                         inputId="target-container-name"
                         name="target-container-name"
@@ -346,6 +323,11 @@ const EphemeralContainerDrawer = ({
                         classNamePrefix="select-token-expiry-duration"
                         isSearchable={false}
                         onChange={(e) => handleEphemeralChange(e, 'targetContainerName', targetContainerOption[0])}
+                        labelTooltipConfig={{
+                            content: EPHEMERAL_CONTAINER.TARGET_CONTAINER_NAME,
+                        }}
+                        required
+                        label="Target Container Name"
                     />
                 </div>
             </div>

From fdf97f8d41d77ca20cab21a1f3e40a7199c8c2aa Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Thu, 13 Feb 2025 18:43:16 +0530
Subject: [PATCH 19/36] fix: update the select in ephemeral container drawer

---
 .../K8sObjectPermissions/K8sListItemCard.tsx  |  3 +-
 .../ClusterNodes/ClusterTerminal.tsx          |  9 ++-
 src/components/bulkEdits/bulkEdit.scss        |  4 -
 src/components/cluster/cluster.type.ts        |  3 +-
 src/components/cluster/cluster.util.ts        |  4 +-
 src/components/common/helpers/Helpers.tsx     |  5 +-
 src/components/gitOps/GitOpsConfiguration.tsx | 64 ++++++++-------
 .../nodeDetail/EphemeralContainerDrawer.tsx   | 78 +++++++------------
 .../k8Resource/nodeDetail/nodeDetail.type.ts  |  4 +-
 .../k8Resource/nodeDetail/nodeDetail.util.tsx | 15 ----
 src/css/base.scss                             | 13 ----
 11 files changed, 82 insertions(+), 120 deletions(-)

diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
index 6ca36ab342..eeefcd1711 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
@@ -31,6 +31,7 @@ import {
     ButtonVariantType,
     ButtonStyleType,
     ResourceListPayloadType,
+    SelectPickerOptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { K8S_EMPTY_GROUP } from '@Components/ResourceBrowser/Constants'
 import {
@@ -79,7 +80,7 @@ const K8sListItemCard = ({
 }: K8sListItemCardType) => {
     const { customRoles } = useAuthorizationContext()
     const { showStatus, userStatus } = usePermissionConfiguration()
-    const [clusterOptions, setClusterOptions] = useState<OptionType[]>([])
+    const [clusterOptions, setClusterOptions] = useState<SelectPickerOptionType<string>[]>([])
     const [processedData, setProcessedData] = useState<Map<string, K8SObjectType>>()
     const [allInKindMapping, setAllInKindMapping] = useState<OptionType[]>([])
     const [
diff --git a/src/components/ClusterNodes/ClusterTerminal.tsx b/src/components/ClusterNodes/ClusterTerminal.tsx
index 0f93bdbb71..d2d7843e87 100644
--- a/src/components/ClusterNodes/ClusterTerminal.tsx
+++ b/src/components/ClusterNodes/ClusterTerminal.tsx
@@ -28,6 +28,7 @@ import {
     ComponentSizeType,
     TabProps,
     NodeTaintType,
+    SelectPickerOptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useLocation, useParams, useHistory } from 'react-router-dom'
 import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
@@ -92,7 +93,7 @@ const ClusterTerminal = ({
     const queryParamsData = getClusterTerminalParamsData(
         queryParams,
         imageList,
-        defaultNamespaceList,
+        defaultNamespaceList as OptionType[],
         nodeGroups,
         clusterShellTypes,
     )
@@ -103,7 +104,9 @@ const ClusterTerminal = ({
     const [terminalCleared, setTerminalCleared] = useState<boolean>(false)
     const [isPodCreated, setPodCreated] = useState<boolean>(true)
     const [socketConnection, setSocketConnection] = useState<SocketConnectionType>(SocketConnectionType.CONNECTING)
-    const [selectedImage, setImage] = useState<OptionType>(queryParamsData.selectedImage || imageList[0])
+    const [selectedImage, setImage] = useState<SelectPickerOptionType<string>>(
+        queryParamsData.selectedImage || imageList[0],
+    )
     const [selectedNamespace, setNamespace] = useState(queryParamsData.selectedNamespace || defaultNameSpace)
     const [resourceData, setResourceData] = useState(null)
     const [update, setUpdate] = useState<boolean>(false)
@@ -1024,7 +1027,7 @@ node-details-full-screen
         },
         metadata: {
             node: selectedNodeName?.label ?? '',
-            namespace: selectedNamespace?.label ?? '',
+            namespace: (selectedNamespace?.label as string) ?? '',
         },
     }
 
diff --git a/src/components/bulkEdits/bulkEdit.scss b/src/components/bulkEdits/bulkEdit.scss
index 00d1320703..10c6d9d754 100644
--- a/src/components/bulkEdits/bulkEdit.scss
+++ b/src/components/bulkEdits/bulkEdit.scss
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-.select-width {
-    width: 240px;
-}
-
 .updated-container {
     height: 'calc(100vh - 100px)';
     min-height: 0;
diff --git a/src/components/cluster/cluster.type.ts b/src/components/cluster/cluster.type.ts
index 55d2a00b92..6baadf2fcd 100644
--- a/src/components/cluster/cluster.type.ts
+++ b/src/components/cluster/cluster.type.ts
@@ -15,6 +15,7 @@
  */
 
 import { RouteComponentProps } from 'react-router-dom'
+import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { SERVER_MODE_TYPE } from '../../config'
 import { OptionType } from '../app/types'
 
@@ -148,7 +149,7 @@ export interface ClusterStepModal {
 }
 
 export interface ClusterTerminalParamsType {
-    selectedImage: OptionType
+    selectedImage: SelectPickerOptionType<string>
     selectedNamespace: OptionType
     selectedNode: OptionType
     selectedShell: OptionType
diff --git a/src/components/cluster/cluster.util.ts b/src/components/cluster/cluster.util.ts
index 1580d912cf..7dea845466 100644
--- a/src/components/cluster/cluster.util.ts
+++ b/src/components/cluster/cluster.util.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { NodeTaintType } from '@devtron-labs/devtron-fe-common-lib'
+import { NodeTaintType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { OptionType } from '../app/types'
 import {
     ClusterComponentType,
@@ -56,7 +56,7 @@ export function getEnvName(components: ClusterComponentType[], agentInstallation
 
 export function getClusterTerminalParamsData(
     params: URLSearchParams,
-    imageList: OptionType[],
+    imageList: SelectPickerOptionType<string>[],
     namespaceList: OptionType[],
     nodeList: { options: OptionType[]; label: string }[],
     clusterShellList: OptionType[],
diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
index 2336c4aa7e..f56064870c 100644
--- a/src/components/common/helpers/Helpers.tsx
+++ b/src/components/common/helpers/Helpers.tsx
@@ -28,6 +28,7 @@ import {
     PipelineBuildStageType,
     SeverityCount,
     useMainContext,
+    SelectPickerOptionType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import { Link } from 'react-router-dom'
@@ -766,12 +767,12 @@ export const convertToOptionsList = (
     customValue?: string,
     customDescription?: string,
     customFieldKey?: string,
-): OptionType[] => {
+): SelectPickerOptionType<string>[] => {
     if (!Array.isArray(arr) || !arr) {
         return []
     }
     return arr.map((ele) => {
-        const _option = {
+        const _option: SelectPickerOptionType<string> = {
             label: customLabel ? ele[customLabel] : ele,
             value: customValue ? ele[customValue] : ele,
             description: customDescription ? ele[customDescription] : '',
diff --git a/src/components/gitOps/GitOpsConfiguration.tsx b/src/components/gitOps/GitOpsConfiguration.tsx
index c0b858ad3d..512aa7e5b1 100644
--- a/src/components/gitOps/GitOpsConfiguration.tsx
+++ b/src/components/gitOps/GitOpsConfiguration.tsx
@@ -31,6 +31,7 @@ import {
     FeatureTitleWithInfo,
     ToastVariantType,
     ToastManager,
+    CustomInputProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 import {
     TLSConnectionFormActionType,
@@ -1056,15 +1057,23 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
 
         const initialGitOps = this.state.gitList.find((item) => item.provider === this.state.form.provider)
 
-        const renderInputLabels = (label: string, link: string, linkText: string) => {
-            return (
-                <div className="flex">
-                    <span className="dc__required-field">{label}</span>&nbsp;
-                    <a target="_blank" href={link} className="cursor fs-13 onlink ml-4" rel="noreferrer">
-                        {linkText}
-                    </a>
-                </div>
-            )
+        const getInputLabelProps = (
+            label: string,
+            link: string,
+            linkText: string,
+        ): Pick<CustomInputProps, 'labelTippyCustomizedConfig' | 'label' | 'required'> => {
+            return {
+                label,
+                required: true,
+                labelTippyCustomizedConfig: {
+                    heading: label,
+                    infoText: (
+                        <a target="_blank" href={link} className="cursor fs-13 onlink ml-4" rel="noreferrer">
+                            {linkText}
+                        </a>
+                    ),
+                },
+            }
         }
 
         const renderGitOpsTabs = () => (
@@ -1202,33 +1211,31 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                             <CustomInput
                                 name="workspaceID"
                                 placeholder="Enter Bitbucket Workspace ID"
-                                label={renderInputLabels(
-                                    'Bitbucket Workspace ID',
-                                    GitLink.BITBUCKET_WORKSPACE,
-                                    '(How to create workspace in bitbucket?)',
-                                )}
                                 value={this.state.form.bitBucketWorkspaceId}
                                 onChange={(event) => this.handleChange(event, 'bitBucketWorkspaceId')}
                                 error={this.state.isError.bitBucketWorkspaceId}
-                                required
+                                {...getInputLabelProps(
+                                    'Bitbucket Workspace ID',
+                                    GitLink.BITBUCKET_WORKSPACE,
+                                    'How to create workspace in bitbucket?',
+                                )}
                             />
                         </div>
                     )}
                     <div className="w-100">
                         <CustomInput
                             name="groupID"
-                            label={renderInputLabels(
-                                LinkAndLabelSpec[this.state.providerTab].label,
-                                LinkAndLabelSpec[this.state.providerTab].link,
-                                LinkAndLabelSpec[this.state.providerTab].linkText,
-                            )}
                             placeholder={`Enter ${LinkAndLabelSpec[this.state.providerTab].label}`}
                             value={this.state.form[key]}
                             error={this.state.isError[key]}
                             onChange={(event) => {
                                 this.handleChange(event, key)
                             }}
-                            required
+                            {...getInputLabelProps(
+                                LinkAndLabelSpec[this.state.providerTab].label,
+                                LinkAndLabelSpec[this.state.providerTab].link,
+                                LinkAndLabelSpec[this.state.providerTab].linkText,
+                            )}
                         />
                     </div>
                     <div
@@ -1285,19 +1292,18 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                                 <CustomInput
                                     name="token"
                                     placeholder="Enter access token"
-                                    label={renderInputLabels(
-                                        this.state.providerTab === GitProvider.AZURE_DEVOPS
-                                            ? 'Azure DevOps Access Token '
-                                            : 'Personal Access Token ',
-                                        PROVIDER_DOC_LINK_MAP[this.state.providerTab],
-                                        '(Check permissions required for PAT)',
-                                    )}
                                     value={this.state.form.token}
                                     onChange={(event) => this.handleChange(event, 'token')}
                                     error={this.state.isError.token}
                                     onFocus={handleOnFocus}
-                                    required
                                     onBlur={this.handleOnBlur}
+                                    {...getInputLabelProps(
+                                        this.state.providerTab === GitProvider.AZURE_DEVOPS
+                                            ? 'Azure DevOps Access Token '
+                                            : 'Personal Access Token ',
+                                        PROVIDER_DOC_LINK_MAP[this.state.providerTab],
+                                        'Check permissions required for PAT',
+                                    )}
                                 />
                             </div>
                         </div>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 525862f4ef..d0f5efbb16 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -23,18 +23,15 @@ import {
     YAMLStringify,
     InfoIconTippy,
     CodeEditor,
-    SelectOption,
     ToastManager,
     ToastVariantType,
     TabGroup,
     SelectPicker,
     MODES,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useEffect, useState } from 'react'
 import yamlJsParser from 'yaml'
-import ReactSelect from 'react-select'
-import Tippy from '@tippyjs/react'
-import CreatableSelect from 'react-select/creatable'
 import {
     EphemeralContainerDrawerType,
     EphemeralForm,
@@ -51,12 +48,10 @@ import {
 import sampleConfig from './sampleConfig.json'
 import IndexStore from '../../index.store'
 import { generateEphemeralUrl } from './nodeDetail.api'
-import { menuComponentForImage } from '../../../common/ReactSelect.utils'
 import { getHostURLConfiguration } from '../../../../../services/service'
-import { IMAGE_LIST } from '../../../../ClusterNodes/constants'
+import { CLUSTER_TERMINAL_MESSAGING, IMAGE_LIST } from '../../../../ClusterNodes/constants'
 import { Options } from '../../appDetails.type'
 import { EPHEMERAL_CONTAINER } from '../../../../../config/constantMessaging'
-import { selectStyles } from './nodeDetail.util'
 import { DEFAULT_CONTAINER_NAME, SwitchItemValues, DOCUMENTATION, EDITOR_VIEW } from '../../../../../config'
 
 const EphemeralContainerDrawer = ({
@@ -208,10 +203,7 @@ const EphemeralContainerDrawer = ({
     const handleEphemeralChange = (selected, key, defaultOptions) => {
         const defaultVal = defaultOptions.length && defaultOptions[0]
         if (key === 'image') {
-            const newImageOption = {
-                value: selected.value,
-                label: selected.value,
-            }
+            const newImageOption = selected
             const existingImageOption = imageListOption.find((option) => option.value === selected.value)
             const newImageListOption = [newImageOption, ...imageListOption]
             if (!existingImageOption) {
@@ -251,14 +243,6 @@ const EphemeralContainerDrawer = ({
         }
     }
 
-    const getImageTippyContent = (data) => {
-        return (
-            <span style={{ display: 'block', width: '220px' }}>
-                <span className="fs-12 fw-4">{data.description}</span>
-            </span>
-        )
-    }
-
     const renderBasicEphemeral = (): JSX.Element => {
         return (
             <div className="p-20 flex-grow-1">
@@ -278,39 +262,36 @@ const EphemeralContainerDrawer = ({
                     />
                 </div>
 
-                <div className="dc__row-container mb-12">
-                    <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">
-                        <Tippy
-                            className="default-tt"
-                            arrow={false}
-                            content={
-                                <span style={{ display: 'block', width: '220px' }}>{EPHEMERAL_CONTAINER.IMAGE}</span>
-                            }
-                        >
-                            <span className="text-underline-dashed">Image</span>
-                        </Tippy>
-                    </div>
-
-                    <CreatableSelect
+                <div className="mb-12">
+                    <SelectPicker
                         value={selectedImageList || imageListOption[0]}
                         options={imageListOption}
-                        className="select-width"
-                        classNamePrefix="select-token-expiry-duration"
+                        inputId="select-token-expiry-duration"
                         onChange={(e) => handleEphemeralChange(e, 'image', imageListOption)}
-                        components={{
-                            IndicatorSeparator: null,
-                            MenuList: menuComponentForImage,
-                            Option: (props) => (
-                                <SelectOption
-                                    showTippy
-                                    tippyClass="default-tt"
-                                    tippyContent={getImageTippyContent(props.data)}
-                                    {...props}
-                                />
-                            ),
-                        }}
-                        styles={selectStyles}
                         onKeyDown={handleKeyDown}
+                        label="Image"
+                        labelTooltipConfig={{
+                            content: EPHEMERAL_CONTAINER.IMAGE,
+                        }}
+                        required
+                        renderMenuListFooter={() => (
+                            <div className="fw-4 lh-20 pl-8 pr-8 pt-6 pb-6 cn-7 fs-13 dc__italic-font-style">
+                                {CLUSTER_TERMINAL_MESSAGING.CUSTOM_PATH}
+                            </div>
+                        )}
+                        isCreatable
+                        size={ComponentSizeType.large}
+                        layout="row"
+                        onCreateOption={(inputValue) =>
+                            handleEphemeralChange(
+                                {
+                                    label: inputValue,
+                                    value: inputValue,
+                                },
+                                'image',
+                                imageListOption,
+                            )
+                        }
                     />
                 </div>
 
@@ -328,6 +309,7 @@ const EphemeralContainerDrawer = ({
                         }}
                         required
                         label="Target Container Name"
+                        layout="row"
                     />
                 </div>
             </div>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts
index fde8887184..04e1943db3 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts
@@ -68,8 +68,8 @@ export interface EphemeralContainerDrawerType {
     setEphemeralContainerType: React.Dispatch<React.SetStateAction<string>>
     targetContainerOption: OptionType[]
     setTargetContainerOption?: React.Dispatch<React.SetStateAction<OptionType[]>>
-    imageListOption: OptionType[]
-    setImageListOption?: React.Dispatch<React.SetStateAction<OptionType[]>>
+    imageListOption: SelectPickerOptionType<string>[]
+    setImageListOption?: React.Dispatch<React.SetStateAction<SelectPickerOptionType<string>[]>>
     isResourceBrowserView: boolean
     containers?: Options[]
     setContainers?: React.Dispatch<React.SetStateAction<Options[]>>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx
index 38950ae73a..3e7b7753cd 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx
@@ -361,21 +361,6 @@ export const getGroupedContainerOptions = (containers: Options[],isTerminal?, is
     return []
 }
 
-export const selectStyles = {
-    ...multiSelectStyles,
-    control: (base) => ({
-        ...base,
-        minHeight: '36px',
-        fontWeight: '400',
-        backgroundColor: 'var(--bg-secondary)',
-        cursor: 'pointer',
-    }),
-    dropdownIndicator: (base) => ({
-        ...base,
-        padding: '0 8px',
-    }),
-}
-
 /**
  * @description This function is used to trim the manifest data by removing the managed fields from the manifest data
  */
diff --git a/src/css/base.scss b/src/css/base.scss
index fe516f8575..120b2f905a 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -4695,19 +4695,6 @@ textarea::placeholder {
     }
 }
 
-.dc__row-container {
-    display: grid;
-    grid-template-columns: 220px auto;
-
-    .radio-group {
-        justify-content: flex-start;
-    }
-
-    .form__radio-item {
-        min-width: 0px !important;
-    }
-}
-
 .ci-cd-details__sidebar-typography {
     color: var(--N900);
     font-size: 13px;

From b0fd0ea9a2a1a7b1f3e9ac5c9f797dc60180d5b5 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 11:45:39 +0530
Subject: [PATCH 20/36] fix: story book issues

---
 src/stories/TextField.stories.tsx | 22 ++++++++++++++++++++++
 src/stories/useForm.stories.tsx   |  5 +++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/stories/TextField.stories.tsx b/src/stories/TextField.stories.tsx
index 2de7870c23..219650ccc8 100644
--- a/src/stories/TextField.stories.tsx
+++ b/src/stories/TextField.stories.tsx
@@ -4,8 +4,28 @@ import { action } from '@storybook/addon-actions'
 import { ComponentSizeType, CustomInput, CustomInputProps } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICKeyBulb } from '@Icons/ic-key-bulb.svg'
 
+const TEXT_FIELD_LAYOUT_MAP: Record<CustomInputProps['layout'], null> = {
+    row: null,
+    column: null,
+}
+
+const TEXT_FIELD_SIZE_MAP: Record<CustomInputProps['size'], null> = {
+    medium: null,
+    large: null,
+}
+
 const meta = {
     component: CustomInput,
+    argTypes: {
+        layout: {
+            options: Object.keys(TEXT_FIELD_LAYOUT_MAP),
+            control: { type: 'radio' },
+        },
+        size: {
+            options: Object.keys(TEXT_FIELD_SIZE_MAP),
+            control: { type: 'radio' },
+        },
+    },
 } satisfies Meta<CustomInputProps>
 
 export default meta
@@ -32,6 +52,8 @@ const TextFieldTemplate: Story = {
         value: '',
         placeholder: 'Enter value',
         onChange: null,
+        layout: 'column',
+        size: ComponentSizeType.large,
     },
 }
 
diff --git a/src/stories/useForm.stories.tsx b/src/stories/useForm.stories.tsx
index 0de928a0be..121a67be27 100644
--- a/src/stories/useForm.stories.tsx
+++ b/src/stories/useForm.stories.tsx
@@ -20,6 +20,7 @@ import { action } from '@storybook/addon-actions'
 import {
     Button,
     CustomInput,
+    PasswordField,
     useForm,
     UseFormSubmitHandler,
     UseFormValidations,
@@ -74,14 +75,14 @@ const FormComponent = ({ validationMode }: Pick<Parameters<typeof useForm>[0], '
                 />
                 {errors.email && <p className="m-0 cr-5">{errors.email}</p>}
             </div>
-            <CustomInput
+            <PasswordField
                 placeholder="Enter Password"
                 label="Password"
                 value={data.password}
                 {...register('password')}
-                type="password"
                 shouldTrim={false}
                 error={errors.password}
+                shouldShowDefaultPlaceholderOnBlur={false}
             />
             <Button dataTestId="useForm-story-submit-btn" buttonProps={{ type: 'submit' }} text="Submit" />
             <div style={{ marginTop: '20px' }}>

From 9364e739b4049dc9a41eb14cafc959d628b19d6c Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:14:06 +0530
Subject: [PATCH 21/36] feat: update select and input in custom logs modal

---
 .../CustomLogsModal/CustomLogsModal.tsx       | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
index f15a7251e1..5781246e2a 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { RadioGroupItem, VisibleModal, RadioGroup, InfoColourBar } from '@devtron-labs/devtron-fe-common-lib'
+import { RadioGroupItem, VisibleModal, RadioGroup, InfoColourBar, SelectPicker, ComponentSizeType, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
 import Select from 'react-select'
 import { SingleDatePicker } from 'react-dates'
 import 'react-dates/initialize'
@@ -148,49 +148,38 @@ export const InputForSelectedOption = ({
                     <div className="dc__required-field mb-6 fs-13">
                         {filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? 'View logs for last' : 'Set number of lines'}
                     </div>
-                    <div className="flex dc__align-start">
-                        <div className="flexbox-col dc__gap-8">
-                            <input
+                    <div className="flex left dc__align-start">
+                        <div className="flex-grow-1">
+                            <CustomInput
+                                name="range-input"
                                 type="number"
-                                autoComplete="off"
-                                min={1}
-                                className="input-focus-none"
                                 value={customLogFilterOptions[filterTypeRadio].value}
                                 onChange={handleInputChange}
                                 onBlur={checkInputError}
+                                error={customLogFilterOptions[filterTypeRadio].error}
+                                placeholder="Enter value"
+                                borderRadiusConfig={{
+                                    right: false,
+                                }}
                             />
-                            {customLogFilterOptions[filterTypeRadio].error && (
-                                <div className="fs-11 cr-5 flex flex-justify-start">
-                                    <Warn className="form__icon form__icon--error mr-4" />
-                                    {customLogFilterOptions[filterTypeRadio].error}
-                                </div>
-                            )}
                         </div>
-                        <div className="flex-grow-1">
+                        <div>
                             {filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? (
-                                <Select
+                                <SelectPicker
                                     options={getDurationUnits()}
                                     onChange={changeTimeUnits}
                                     value={getDurationUnits().find(
                                         (option) => option.value === customLogFilterOptions[filterTypeRadio].unit,
                                     )}
-                                    styles={{
-                                        ...multiSelectStyles,
-                                        control: (base) => ({
-                                            ...base,
-                                            border: '1px solid var(--N200)',
-                                            borderRadius: '0 4px 4px 0',
-                                            boxShadow: 'none',
-                                            cursor: 'pointer',
-                                        }),
-                                    }}
-                                    components={{
-                                        IndicatorSeparator: null,
-                                        Option: (props) => <Option {...props} style={{ direction: 'rtl' }} />,
+                                    inputId="time-selector"
+                                    size={ComponentSizeType.large}
+                                    menuSize={ComponentSizeType.xs}
+                                    borderRadiusConfig={{
+                                        left: false,
                                     }}
                                 />
                             ) : (
-                                <div className="dc__border h-38 dc__right-radius-4 flex fs-13 flex-justify-start pl-8 cn-9">
+                                <div className="dc__border h-36 dc__right-radius-4 flex fs-13 flex-justify-start px-16 cn-9 dc__no-shrink">
                                     Lines
                                 </div>
                             )}

From 677c788b75b689807b5f6bf163d49f5cd9d62f25 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:57:32 +0530
Subject: [PATCH 22/36] fix: update custom input in gitops configuration

---
 src/components/gitOps/GitOpsConfiguration.tsx |  2 +-
 src/components/gitOps/UserGitRepo.tsx         | 13 +++++--------
 src/components/gitOps/gitops.scss             |  3 ---
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/gitOps/GitOpsConfiguration.tsx b/src/components/gitOps/GitOpsConfiguration.tsx
index 20cc9c1e62..a3dfdb6995 100644
--- a/src/components/gitOps/GitOpsConfiguration.tsx
+++ b/src/components/gitOps/GitOpsConfiguration.tsx
@@ -1265,7 +1265,7 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                             />
                         </div>
                     ) : (
-                        <div className="form__row--two-third gitops__id fs-13 w-100">
+                        <div className="form__row--two-third w-100">
                             <div>
                                 <CustomInput
                                     value={this.state.form.username}
diff --git a/src/components/gitOps/UserGitRepo.tsx b/src/components/gitOps/UserGitRepo.tsx
index 6d17edea73..84634ec68c 100644
--- a/src/components/gitOps/UserGitRepo.tsx
+++ b/src/components/gitOps/UserGitRepo.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { FunctionComponent } from 'react'
-import { GitOpsAuthModeType, InfoColourBar, RadioGroup, RadioGroupItem } from '@devtron-labs/devtron-fe-common-lib'
+import { CustomInput, GitOpsAuthModeType, InfoColourBar, RadioGroup, RadioGroupItem } from '@devtron-labs/devtron-fe-common-lib'
 import './gitops.scss'
 import { repoType } from '../../config/constants'
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
@@ -53,23 +53,20 @@ const UserGitRepo: FunctionComponent<UserGitRepoProps> = ({
         )
     }
 
-    // TODO: update
     const InputUrlBox = () => {
         const _repoUrl = repoURL
         return (
             <div className={`${!isAuthModeSSH ? 'ml-26' : ''} mt-8`}>
-                <div className="gitops__id fw-5 fs-13 mb-8 dc__required-field">Git Repo URL</div>
-                <input
-                    type="text"
-                    autoComplete="off"
+                <CustomInput
+                    label="Git Repo URL"
+                    required
                     name="name"
                     value={_repoUrl.trim()}
                     placeholder="Enter repository URL"
-                    className="form__input"
                     onChange={onChange}
                     disabled={staleData}
+                    error={_repoUrl.length === 0 ? REQUIRED_FIELD_MSG : null}
                 />
-                {_repoUrl.length === 0 && renderValidationErrorLabel()}
             </div>
         )
     }
diff --git a/src/components/gitOps/gitops.scss b/src/components/gitOps/gitops.scss
index e70ed35636..d4bc5e641a 100644
--- a/src/components/gitOps/gitops.scss
+++ b/src/components/gitOps/gitops.scss
@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-.gitops__id {
-    color: var(--N700);
-}
 .git_impt {
     border: solid 1px var(--V200);
 }

From eb15c41daed26260fa85868f8ebb4171d027ba90 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:01:46 +0530
Subject: [PATCH 23/36] fix: styling in webhook details modal

---
 .../ciPipeline/Webhook/WebhookDetailsModal.tsx         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
index d0a2b52a29..3511c46d10 100644
--- a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
+++ b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -348,7 +348,7 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
 
     const renderWebhookTokenLabel = (): JSX.Element => {
         return (
-            <div className="lh-14 pt-2 pr-8 pb-2 pl-8 fs-12 br-2 flex w-100px dc__border-right">
+            <div className="lh-14 pt-2 pr-8 pb-2 pl-8 fs-12 br-2 flex w-120 br-4 border__primary dc__no-right-radius dc__no-right-border">
                 api-token
                 <Tippy
                     className="default-white no-content-padding tippy-shadow w-300"
@@ -377,17 +377,19 @@ export const WebhookDetailsModal = ({ close }: WebhookDetailType) => {
 
     const renderWebhookURLTokenContainer = (): JSX.Element => {
         return (
-            <div className="flexbox w-100 dc__position-rel en-2 bw-1 br-4 h-32 mb-16">
+            <div className="flexbox w-100 dc__position-rel h-32 mb-16">
                 {renderWebhookTokenLabel()}
                 <CustomInput
                     name="api-token"
                     placeholder="Enter API token"
-                    // TODO: Remove border here
-                    // rootClassName="bg__primary dc__no-border-imp w-100 h-32 pt-5-imp p-0-8-imp"
                     onChange={handleTokenChange}
                     value={tryoutAPIToken}
                     error={showTryoutAPITokenError && WEBHOOK_NO_API_TOKEN_ERROR}
                     fullWidth
+                    borderRadiusConfig={{
+                        left: false,
+                    }}
+                    size={ComponentSizeType.medium}
                 />
             </div>
         )

From 82be1847be245ed2fe8980765aca3c2b140e2407 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:05:26 +0530
Subject: [PATCH 24/36] fix: missing props for custom input usage

---
 .../ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx      | 2 +-
 src/components/CIPipelineN/ConditionContainer.tsx              | 2 ++
 .../CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx  | 1 +
 .../CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx    | 3 +++
 src/components/CIPipelineN/CreatePluginModal/types.ts          | 2 +-
 src/components/CIPipelineN/OutputDirectoryPath.tsx             | 1 +
 6 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
index 45d64e8263..1d78cce27f 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
@@ -277,7 +277,7 @@ export const ClusterEnvironmentDrawer = ({
                                 {...register('namespace')}
                                 label="Namespace"
                                 shouldTrim={false}
-                                required={isVirtual}
+                                required={!isVirtual}
                             />
                         </div>
                         {!isVirtual && (
diff --git a/src/components/CIPipelineN/ConditionContainer.tsx b/src/components/CIPipelineN/ConditionContainer.tsx
index b07743aa76..0ea7be2790 100644
--- a/src/components/CIPipelineN/ConditionContainer.tsx
+++ b/src/components/CIPipelineN/ConditionContainer.tsx
@@ -24,6 +24,7 @@ import {
     PipelineFormType,
     SelectPicker,
     SelectPickerVariantType,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Dropdown } from '../../assets/icons/ic-chevron-down.svg'
 import { ConditionContainerType } from '../ciPipeline/types'
@@ -346,6 +347,7 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
                                         onChange={(e) => {
                                             handleConditionalValueChange(e, index)
                                         }}
+                                        size={ComponentSizeType.medium}
                                     />
                                     <Close
                                         className="icon-dim-24 pointer mt-4"
diff --git a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
index 9a7e2e5f35..cc9ced5279 100644
--- a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
+++ b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx
@@ -289,6 +289,7 @@ const CreatePluginFormContent = ({
                             }
                             placeholder="Eg. 1.0.0"
                             required
+                            fullWidth
                         />
 
                         {/* Documentation Link */}
diff --git a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
index 8134ed8889..56173ebcf8 100644
--- a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
+++ b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
@@ -30,6 +30,7 @@ const CreatePluginFormField = ({
     useTextArea,
     helperText,
     autoFocus,
+    ...props
 }: CreatePluginFormFieldProps) => {
     const handleInputChange = (e: SyntheticEvent) => {
         handleChange({ action, payload: (e.target as HTMLInputElement).value })
@@ -38,6 +39,7 @@ const CreatePluginFormField = ({
     if (useTextArea) {
         return (
             <Textarea
+                {...props}
                 label={label}
                 required={required}
                 name={action}
@@ -53,6 +55,7 @@ const CreatePluginFormField = ({
 
     return (
         <CustomInput
+            {...props}
             name={action}
             label={label}
             value={value}
diff --git a/src/components/CIPipelineN/CreatePluginModal/types.ts b/src/components/CIPipelineN/CreatePluginModal/types.ts
index b935e51595..045789f15d 100644
--- a/src/components/CIPipelineN/CreatePluginModal/types.ts
+++ b/src/components/CIPipelineN/CreatePluginModal/types.ts
@@ -177,7 +177,7 @@ type PluginTextFieldFieldType =
       } & Pick<CustomInputProps, 'helperText' | 'autoFocus'>)
 
 export type CreatePluginFormFieldProps = Pick<CreatePluginFormContentProps, 'handleChange'> &
-    Pick<CustomInputProps, 'placeholder' | 'label' | 'value' | 'error' | 'required' | 'disabled'> & {
+    Pick<CustomInputProps, 'placeholder' | 'label' | 'value' | 'error' | 'required' | 'disabled' | 'fullWidth'> & {
         action: CreatePluginSingleInputActionType
     } & PluginTextFieldFieldType
 
diff --git a/src/components/CIPipelineN/OutputDirectoryPath.tsx b/src/components/CIPipelineN/OutputDirectoryPath.tsx
index 504fade5bd..b0aa5f719a 100644
--- a/src/components/CIPipelineN/OutputDirectoryPath.tsx
+++ b/src/components/CIPipelineN/OutputDirectoryPath.tsx
@@ -67,6 +67,7 @@ const OutputDirectoryPath = () => {
                 return (
                     <div className="custom-script__output-directory pl-220 mt-8" key={`output-directory-${index}`}>
                         <CustomInput
+                            fullWidth
                             placeholder="Enter directory path"
                             value={elm}
                             onChange={(e) => handleStoreArtifact(e, index)}

From 46728d0d3f1d948e88624c7a086f7d460065b0fc Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:25:45 +0530
Subject: [PATCH 25/36] refactor: replace with custom input

---
 .eslintignore                                 |  1 -
 .../NodeActions/EditTaintsModal.tsx           | 88 +++++++++----------
 src/components/cluster/ClusterForm.tsx        |  7 +-
 .../common/formFields/CustomPassword.tsx      | 57 ------------
 .../common/formFields/customPassword.css      | 26 ------
 src/components/common/index.ts                |  1 -
 .../dockerRegistry/ManageRegistry.tsx         | 27 ++----
 7 files changed, 54 insertions(+), 153 deletions(-)
 delete mode 100644 src/components/common/formFields/CustomPassword.tsx
 delete mode 100644 src/components/common/formFields/customPassword.css

diff --git a/.eslintignore b/.eslintignore
index acdb7fe434..fcd6dee850 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -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
diff --git a/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx b/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
index f9fe674bab..230c44a9ea 100644
--- a/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
+++ b/src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
@@ -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'
@@ -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)
@@ -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>
                         )
                     })}
diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx
index e72953db2b..5a9a2c5195 100644
--- a/src/components/cluster/ClusterForm.tsx
+++ b/src/components/cluster/ClusterForm.tsx
@@ -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'
@@ -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>
diff --git a/src/components/common/formFields/CustomPassword.tsx b/src/components/common/formFields/CustomPassword.tsx
deleted file mode 100644
index fafc57a3c2..0000000000
--- a/src/components/common/formFields/CustomPassword.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useState } from 'react'
-import { ReactComponent as Show } from '../../../assets/icons/ic-visibility-off.svg'
-import { ReactComponent as FormError } from '../../../assets/icons/ic-warning.svg'
-import './customPassword.css'
-
-export const CustomPassword = ({ name, value, error, onChange, label, disabled = false }) => {
-    const [showPassword, setShowPassword] = useState(false)
-    const type = showPassword ? 'text' : 'password'
-    return (
-        <div className="flex column left top">
-            <label className="form__label">{label}</label>
-            <div className="pos-relative w-100">
-                <input
-                    type={type}
-                    name={name}
-                    className="form__input p-r-41"
-                    onChange={(e) => {
-                        e.persist()
-                        onChange(e)
-                    }}
-                    value={value}
-                    disabled={disabled}
-                />
-                <button
-                    type="button"
-                    className="dc__transparent custom-password__show-btn"
-                    onClick={(e) => setShowPassword(!showPassword)}
-                    style={{ bottom: error ? 28 : 7 }}
-                >
-                    <Show className={`icon-dim-24 ${showPassword ? 'scn-5' : 'scn-3'}`} />
-                </button>
-            </div>
-            {error && (
-                <div className="form__error">
-                    <FormError className="form__icon form__icon--error" />
-                    {error}
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/src/components/common/formFields/customPassword.css b/src/components/common/formFields/customPassword.css
deleted file mode 100644
index 5faa559b95..0000000000
--- a/src/components/common/formFields/customPassword.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2024. Devtron Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.custom-password__show-btn {
-    position: absolute;
-    bottom: 7px;
-    right: 10px;
-    height: 28px;
-}
-
-.p-r-41 {
-    padding-right: 41px;
-}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 6cb87c5a0f..51b463e651 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -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'
diff --git a/src/components/dockerRegistry/ManageRegistry.tsx b/src/components/dockerRegistry/ManageRegistry.tsx
index ef12f144c2..96c24f96c3 100644
--- a/src/components/dockerRegistry/ManageRegistry.tsx
+++ b/src/components/dockerRegistry/ManageRegistry.tsx
@@ -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>

From 14f03602c4d1907445c7c13bac35deb94a167f24 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:31:19 +0530
Subject: [PATCH 26/36] fix: remove label

---
 src/components/dockerRegistry/ManageRegistry.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/dockerRegistry/ManageRegistry.tsx b/src/components/dockerRegistry/ManageRegistry.tsx
index 96c24f96c3..ba17f96af6 100644
--- a/src/components/dockerRegistry/ManageRegistry.tsx
+++ b/src/components/dockerRegistry/ManageRegistry.tsx
@@ -435,7 +435,6 @@ const ManageRegistry = ({
                                 />
                             </div>
                             <div className="w-50">
-                                <div className="mb-6">Email</div>
                                 <CustomInput
                                     label="Email"
                                     placeholder="Enter email"
@@ -446,7 +445,6 @@ const ManageRegistry = ({
                             </div>
                         </div>
                         <div className="w-50 mr-8">
-                            <div className="mb-6">Username</div>
                             <CustomInput
                                 label="Username"
                                 placeholder="Enter username"
@@ -456,7 +454,6 @@ const ManageRegistry = ({
                             />
                         </div>
                         <div className="w-50">
-                            <div className="mb-6">Password</div>
                             <CustomInput
                                 placeholder="Enter password"
                                 name="password"

From 2521c18c5b126b7cd9263930e5a7b47257f0c1d1 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 16:11:04 +0530
Subject: [PATCH 27/36] fix: error state in create chart group

---
 src/components/charts/modal/CreateChartGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/charts/modal/CreateChartGroup.tsx b/src/components/charts/modal/CreateChartGroup.tsx
index 4e7efce284..8a87a12578 100644
--- a/src/components/charts/modal/CreateChartGroup.tsx
+++ b/src/components/charts/modal/CreateChartGroup.tsx
@@ -199,7 +199,7 @@ export default class CreateChartGroup extends Component<CreateChartGroupProps, C
                         autoFocus
                         onChange={this.handleNameChange}
                         required
-                        error={this.state.name.error}
+                        error={this.state.name.error?.length > 0 ? this.state.name.error : undefined}
                     />
                     <Textarea
                         label="Description"

From afa6e2ccb9fe958255f9c21bbef1aa42b8a212cd Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 16:35:15 +0530
Subject: [PATCH 28/36] fix: alignment issue in task detail

---
 src/components/CIPipelineN/TaskDetailComponent.tsx | 8 +++++---
 src/components/ciPipeline/ciPipeline.scss          | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/CIPipelineN/TaskDetailComponent.tsx b/src/components/CIPipelineN/TaskDetailComponent.tsx
index 9360912f14..703b7561f5 100644
--- a/src/components/CIPipelineN/TaskDetailComponent.tsx
+++ b/src/components/CIPipelineN/TaskDetailComponent.tsx
@@ -203,7 +203,7 @@ export const TaskDetailComponent = () => {
 
             <div className="p-20 dc__overflow-auto">
                 <div>
-                    <div className="row-container mb-12">
+                    <div className="mb-12">
                         <CustomInput
                             type="text"
                             onChange={(e) => handleNameChange(e)}
@@ -213,16 +213,18 @@ export const TaskDetailComponent = () => {
                             label="Task name"
                             error={renderTaskNameError()}
                             required
+                            layout="row"
                         />
                     </div>
-                    <div className="row-container mb-12">
-                        <div className="fw-6 fs-13 lh-32 cn-7 ">Description</div>
+                    <div className="mb-12">
                         <CustomInput
+                            label="Description"
                             type="text"
                             onChange={(e) => handleDescriptionChange(e)}
                             value={selectedStep.description}
                             placeholder="Enter task description"
                             name="task-description"
+                            layout="row"
                         />
                     </div>
 
diff --git a/src/components/ciPipeline/ciPipeline.scss b/src/components/ciPipeline/ciPipeline.scss
index c44adc0ff0..22dd5fec36 100644
--- a/src/components/ciPipeline/ciPipeline.scss
+++ b/src/components/ciPipeline/ciPipeline.scss
@@ -343,7 +343,8 @@
 
 .row-container {
     display: grid;
-    grid-template-columns: 220px auto;
+    grid-template-columns: 250px auto;
+    column-gap: 6px;
 
     .radio-group {
         justify-content: flex-start;

From 6a4974dbe3cbab89e8f9510f21cfaf5b450acf0b Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Fri, 14 Feb 2025 18:48:02 +0530
Subject: [PATCH 29/36] feat: update readme

---
 README.md | 244 +++++++++++++-----------------------------------------
 1 file changed, 59 insertions(+), 185 deletions(-)

diff --git a/README.md b/README.md
index e88833e4ff..34f4fffd46 100644
--- a/README.md
+++ b/README.md
@@ -1,211 +1,85 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Devtron Dashboard
 
-## Available Scripts
+<p align="start">
+<a href="https://github.com/devtron-labs/devtron/releases"><img src="https://img.shields.io/github/v/release/devtron-labs/devtron"></a>
+<a href="https://discord.gg/jsRG5qx2gp"><img src="https://img.shields.io/discord/687207715902193673?logo=discord&label=Discord&color=5865F2&logoColor=white" alt="Join Discord"></a>
+<a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
+<img src="https://img.shields.io/github/contributors/devtron-labs/dashboard" alt="contributors">
+<img src="https://img.shields.io/github/commit-activity/m/devtron-labs/devtron" alt="Commit Activity">
+</p>
 
-In the project directory, you can run:
+[![Dashboard CI](https://github.com/devtron-labs/dashboard/actions/workflows/ci.yml/badge.svg)](https://github.com/devtron-labs/dashboard/actions/workflows/ci.yml)
 
-### `yarn start`
+This is the client side web app for [devtron](https://github.com/devtron-labs/devtron).
+This web app is written in [React](https://react.dev/) frontend-library. Uses a typescript + vite for setup.
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## Local Development
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+This project uses `yarn` as package manager. By default the backend is pointed to [https://preview.devtron.ai](https://preview.devtron.ai). To change it, update the `TARGET_URL` in `./vite.config.mts` to your devtron instance url.
 
-### `yarn test`
+- To install all dependencies and initialize the project just run the command:
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn run build`
-
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-### `commit process`
-
--   Now before commiting lint will run and check for errors.
--   It will not allow to commit if there are lint errors.
--   To fix them run `yarn lint-fix` (check package.json). It is not capable of fixing everything so some fixes has to be done manually.
-
-### Do's
-
--   Try to make only one state per page rest every thing shall be pure.
--   A method should do one and only one thing.
--   Do function and variable namings so good you don't need comments.
--   While making smaller Components make them reusable.
--   Do most of the heavy lifting tasks inside smaller components not in the state component.
--   Do all the parsing and error handling on service state component should not get anything more than (success and data) or (error and data).
--   Use BEM to name CSS classes and structure it.
-
-### Don'ts
-
--   Don't add if else on render add functions which render checks on smaller functions.
--   Don't add IDs for CSS if done correctly you never need ids.
--   Don't add unnecessary Indentations it doesn't improve readability.
--   Never add checks on the basis of text.
--   Don't use float use display instead, use display flex-box, inline, inline-block.
--   Don't use mix type methods in a class
-
-### Sentry Config
-
--   SENTRY_AUTH_TOKEN=""
--   SENTRY_ORG="devtron-labs"
--   SENTRY_PROJECT="dashboard"
--   DSN=""
--   SENTRY_TRACES_SAMPLE_RATE="0.2"
-
-### Sentry sourcemap upload
-
-```console
-foo@bar:~$ sh sentry.sh
+```bash
+yarn install
 ```
 
-### Set custom sentry environment during production deployment, default is staging
+- To start a dev server at [http://localhost:3000](http://localhost:3000), execute:
 
-```console
-foo@bar~$ docker run -p 3000:80 -e SENTRY_ENV=my-custom-env -t artifact/tag
+```bash
+yarn start
 ```
 
-### Disable sentry error logging during production deployment, default enabled
+Check out `package.json` for more scripts.
 
-```console
-foo@bar~$ docker run -p 3000:80 -e ENTRY_ERROR_ENABLED=false -t artifact/tag
-```
+### Commit Process
 
-### Disable sentry performance monitoring during production deployment, default enabled
+- We use husky to run compile and lint-staged before commit staged changes
+- If husky finds any errors during either the compilation stage or linting stage, the attempt to commit will fail
+- To fix auto-fixable issues, execute:
 
-```console
-foo@bar~$ docker run -p 3000:80 -e SENTRY_PERFORMANCE_ENABLED=false -t artifact/tag
+```bash
+yarn lint-fix
 ```
 
-### Enable Hotjar during production deployment, default disabled
-
-```console
-foo@bar~$ docker run -p 3000:80 -e HOTJAR_ENABLED=false -t artifact/tag
-```
-
-### Enable google analytics during production deployment, default disabled
-
-```console
-foo@bar~$ docker run -p 3000:80 -e GA_ENABLED=true -t artifact/tag
-```
-
-### Create test coverage report and save summary in report.txt
-
-```console
-foo@bar~$ npm run test -- --coverage --watchAll=false > report.txt
-```
-
-### Upload Summary on slack
-
-```console
-foo@bar~$ python uploadTestReport.py
-```
-
-### Run Following Scripts after release
+### Do's
 
-```console
-foo@bar~$ sh sentry.sh
-foo@bar~$ npm run test -- --coverage --watchAll=false > report.txt
-foo@bar~$ python uploadTestReport.py
-```
+- Try to make only one state per page rest every thing shall be pure.
+- A method should do one and only one thing.
+- Do function and variable namings so good you don't need comments.
+- While making smaller Components make them reusable.
+- Do most of the heavy lifting tasks inside smaller components not in the state component.
+- Do all the parsing and error handling on service state component should not get anything more than (success and data) or (error and data).
+- Use BEM to name CSS classes and structure it.
 
-### Development setup with proxy.
-
-#### **`vite.config.ts`**
-Update the `vite.config.ts` file to include the proxy configuration.
-In proxy object, add the target URL of the orchestrator and grafana.
-
-```js
-server: {
-            port: 3000,
-            proxy: {
-                '/orchestrator': {
-                    target: 'https://preview.devtron.ai/',
-                    changeOrigin: true,
-                },
-                '/grafana': 'https://preview.devtron.ai/',
-            },
-        }
-```
+### Don'ts
 
-#### **`.env.development`**
+- Don't add if else on render add functions which render checks on smaller functions.
+- Don't add IDs for CSS if done correctly you never need ids.
+- Don't add unnecessary Indentations it doesn't improve readability.
+- Never add checks on the basis of text.
+- Don't use float use display instead, use display flex-box, inline, inline-block.
+- Don't use mix type methods in a class
 
-```console
-VITE_GRAFANA_ORG_ID=2
-REACT_APP_EDITOR=code
-VITE_ORCHESTRATOR_ROOT=/orchestrator
-REACT_APP_PASSWORD=argocd-server-74b7b94945-nxxnh
-```
+## How do I make a contribution?
 
-### Development setup without proxy.
+Never made an open source contribution before? Wondering how contributions work in our project? Here's a quick rundown!
 
-#### **`.env.development`**
+- Find an issue that you are interested in addressing or a feature that you would like to add.
+- Fork this repository to your local GitHub organization. This means that you will have a copy of the repository under your-GitHub-username/repository-name.
+- Clone the repository to your local machine using:
 
-```console
-VITE_GRAFANA_ORG_ID=2
-REACT_APP_EDITOR=code
-VITE_ORCHESTRATOR_ROOT=http://demo.devtron.info:32080/orchestrator
-REACT_APP_PASSWORD=argocd-server-74b7b94945-nxxnh
+```bash
+git clone https://github.com/github-username/dashboard.git
 ```
 
-## How do I make a contribution?
-
-Never made an open source contribution before? Wondering how contributions work in our project? Here's a quick rundown!
-
--   Find an issue that you are interested in addressing or a feature that you would like to add.
--   Fork the repository https://github.com/devtron-labs/dashboard.git to your local GitHub organization. This means that you will have a copy of the repository under your-GitHub-username/repository-name.
--   Clone the repository to your local machine using
-    `git clone https://github.com/github-username/dashboard.git.`
--   Create a new branch for your fix using `git checkout -b branch-name-here`.
--   Make the appropriate changes for the issue you are trying to address or the feature that you want to add.
--   Use `git add insert-paths-of-changed-files-here` to add the file contents of the changed files to the "snapshot" git uses to manage the state of the project, also known as the index.
--   Use `git commit -m ‘Insert a short message of the changes made here’` to store the contents of the index with a descriptive message.
--   Push the changes to the remote repository using `git push origin branch-name-here`.
--   Submit a pull request to the upstream repository.
--   Title the pull request with a short description of the changes made and the issue or bug number associated with your change. For example, you can title an issue like so "Added failsafe check to resolve #1423".
--   In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it!
--   Wait for the pull request to be reviewed by a maintainer.
--   Make changes to the pull request if the reviewing maintainer recommends them.
--   Celebrate your success after your pull request is merged!
-
-## How do I run it locally?
-
-First you need to have the backend project up and running and the dashboard repo cloned on your machine after that follow the below process:
-
--   Run yarn in the dashboard repo root
--   Open the project in your preferred IDE
--   Open the `vite.config.ts` file
--   Change the target URL of the orchestrator. Replace it with the URL of your orchestrator
--   Save the file
--   Run `yarn start`
--   Go to `localhost:3000`
--   Click Login as administrator
--   Provide Admin as username and password from Devtron BE
--   After login, you will be able to see the dashboard running on your local machine
-
-## Code walkthrough/Project structure
-
-We have a `src` folder at the root level which holds everything related to the dashboard
-
--   `src/assets` have all the image folders like logo, icons, gif etc. These folders have, the related files
--   `src/components` have all the components used in the project further divided into folder component specific folders. Specific component folders hold their local CSS file specific to that component, service file specific to that component, and some required child component.tsx as well
--   `src/config` has config files like constants, route, etc which holds all the constants, route path constants respectively
--   `src/css has` the common CSS files
--   `src/services` have the common services used across projects
+- Create a new branch for your fix using `git checkout -b branch-name-here`.
+- Make the appropriate changes for the issue you are trying to address or the feature that you want to add.
+- Use `git add insert-paths-of-changed-files-here` to add the file contents of the changed files to the "snapshot" git uses to manage the state of the project, also known as the index.
+- Use `git commit -m ‘Insert a short message of the changes made here’` to store the contents of the index with a descriptive message.
+- Push the changes to the remote repository using `git push origin branch-name-here`.
+- Submit a pull request to the upstream repository.
+- Title the pull request with a short description of the changes made and the issue or bug number associated with your change. For example, you can title an issue like so `fix: Added failsafe check to resolve #1423`.
+- In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it!
+- Wait for the pull request to be reviewed by a maintainer.
+- Make changes to the pull request if the reviewing maintainer recommends them.
+- Celebrate your success after your pull request is merged!

From 9e34ae58a7d8e88db95663ff54cc3245abe038bc Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 11:19:35 +0530
Subject: [PATCH 30/36] refactor: replace password fields

---
 src/components/dockerRegistry/Docker.tsx      | 16 +++++++---------
 src/components/gitOps/GitOpsConfiguration.tsx | 18 +++---------------
 src/components/gitProvider/GitProvider.tsx    |  8 ++++----
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/components/dockerRegistry/Docker.tsx b/src/components/dockerRegistry/Docker.tsx
index 892852df87..7a0f8dbfdc 100644
--- a/src/components/dockerRegistry/Docker.tsx
+++ b/src/components/dockerRegistry/Docker.tsx
@@ -49,6 +49,7 @@ import {
     DeleteConfirmationModal,
     Textarea,
     ComponentSizeType,
+    PasswordField,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
@@ -1588,13 +1589,12 @@ const DockerForm = ({
                                     />
                                 </div>
                                 <div className="form__row">
-                                    <CustomInput
+                                    <PasswordField
                                         name="awsSecretAccessKey"
                                         required
                                         value={customState.awsSecretAccessKey.value}
                                         error={customState.awsSecretAccessKey.error}
-                                        onBlur={id && handleOnBlur}
-                                        onFocus={handleOnFocus}
+                                        shouldShowDefaultPlaceholderOnBlur={!!id}
                                         onChange={customHandleChange}
                                         label={selectedDockerRegistryType.password.label}
                                         placeholder={selectedDockerRegistryType.password.placeholder}
@@ -1629,14 +1629,13 @@ const DockerForm = ({
                                 selectedDockerRegistryType.value === RegistryType.ACR ||
                                 selectedDockerRegistryType.value === RegistryType.QUAY ||
                                 selectedDockerRegistryType.value === RegistryType.OTHER) && (
-                                <CustomInput
+                                <PasswordField
+                                    shouldShowDefaultPlaceholderOnBlur={!!id}
                                     name="password"
                                     required
                                     value={customState.password.value}
                                     error={customState.password.error}
                                     onChange={customHandleChange}
-                                    onBlur={id && handleOnBlur}
-                                    onFocus={handleOnFocus}
                                     label={selectedDockerRegistryType.password.label}
                                     placeholder={
                                         selectedDockerRegistryType.password.placeholder
@@ -1695,14 +1694,13 @@ const DockerForm = ({
                                 selectedDockerRegistryType.value === RegistryType.ACR ||
                                 selectedDockerRegistryType.value === RegistryType.QUAY ||
                                 selectedDockerRegistryType.value === RegistryType.OTHER) && (
-                                <CustomInput
+                                <PasswordField
+                                    shouldShowDefaultPlaceholderOnBlur={!!id}
                                     name="password"
                                     required
                                     value={customState.password.value}
                                     error={customState.password.error}
                                     onChange={customHandleChange}
-                                    onBlur={id && handleOnBlur}
-                                    onFocus={handleOnFocus}
                                     label={selectedDockerRegistryType.password.label}
                                     placeholder={
                                         selectedDockerRegistryType.password.placeholder
diff --git a/src/components/gitOps/GitOpsConfiguration.tsx b/src/components/gitOps/GitOpsConfiguration.tsx
index a3dfdb6995..0979d99d04 100644
--- a/src/components/gitOps/GitOpsConfiguration.tsx
+++ b/src/components/gitOps/GitOpsConfiguration.tsx
@@ -32,6 +32,7 @@ import {
     ToastManager,
     CustomInputProps,
     InfoBlock,
+    PasswordField,
 } from '@devtron-labs/devtron-fe-common-lib'
 import {
     TLSConnectionFormActionType,
@@ -39,7 +40,6 @@ import {
     getCertificateAndKeyDependencyError,
     getIsTLSDataPresent,
     getTLSConnectionPayloadValues,
-    handleOnFocus,
     importComponentFromFELibrary,
     parsePassword,
     TLSConnectionForm,
@@ -370,17 +370,6 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
         })
     }
 
-    handleOnBlur = (event): void => {
-        if (!event.target.value && this.state.form.id) {
-            this.setState({
-                form: {
-                    ...this.state.form,
-                    token: DEFAULT_SECRET_PLACEHOLDER,
-                },
-            })
-        }
-    }
-
     requiredFieldCheck(formValueType: string): string {
         return formValueType?.length ? '' : 'This is a required field'
     }
@@ -1286,14 +1275,13 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
                                 />
                             </div>
                             <div>
-                                <CustomInput
+                                <PasswordField
+                                    shouldShowDefaultPlaceholderOnBlur={!!this.state.form.id}
                                     name="token"
                                     placeholder="Enter access token"
                                     value={this.state.form.token}
                                     onChange={(event) => this.handleChange(event, 'token')}
                                     error={this.state.isError.token}
-                                    onFocus={handleOnFocus}
-                                    onBlur={this.handleOnBlur}
                                     {...getInputLabelProps(
                                         this.state.providerTab === GitProvider.AZURE_DEVOPS
                                             ? 'Azure DevOps Access Token '
diff --git a/src/components/gitProvider/GitProvider.tsx b/src/components/gitProvider/GitProvider.tsx
index b3620742f0..bbce597b27 100644
--- a/src/components/gitProvider/GitProvider.tsx
+++ b/src/components/gitProvider/GitProvider.tsx
@@ -39,6 +39,7 @@ import {
     ButtonVariantType,
     DeleteConfirmationModal,
     Textarea,
+    PasswordField,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -890,7 +891,7 @@ const GitForm = ({
             )}
             {state.auth.error && <div className="form__error">{state.auth.error}</div>}
             {state.auth.value === 'USERNAME_PASSWORD' && (
-                <div className="form__row form__row--two-third">
+                <div className="mb-16 form__row--two-third">
                     <CustomInput
                         placeholder="Enter Username"
                         value={customState.username.value}
@@ -900,17 +901,16 @@ const GitForm = ({
                         label="Username"
                         required
                     />
-                    <CustomInput
+                    <PasswordField
                         placeholder="Enter Password/Auth token"
                         value={customState.password.value}
                         onChange={customHandleChange}
-                        onFocus={handleOnFocus}
                         name="password"
                         error={customState.password.error}
                         label="Password/Auth token"
                         required
-                        onBlur={id && handleOnBlur}
                         helperText="If using Github, use token instead of password."
+                        shouldShowDefaultPlaceholderOnBlur={!!id}
                     />
                 </div>
             )}

From 88dd2a0822b8c881695ecaf3e76b8eee444f6860 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 12:55:14 +0530
Subject: [PATCH 31/36] fix: required attribute and size

---
 .../ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx       | 2 ++
 .../k8Resource/nodeDetail/EphemeralContainerDrawer.tsx          | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
index 1d78cce27f..b5c09f87f9 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
@@ -254,6 +254,7 @@ export const ClusterEnvironmentDrawer = ({
                 <form
                     className="flex-grow-1 flexbox-col mh-0"
                     onSubmit={handleSubmit(namespaceLabels.labels ? withLabelEditValidation : onValidation())}
+                    noValidate
                 >
                     <div className="dc__overflow-auto p-20 flex-grow-1">
                         <div className="mb-16">
@@ -266,6 +267,7 @@ export const ClusterEnvironmentDrawer = ({
                                 label="Environment Name"
                                 autoFocus={!id}
                                 shouldTrim={false}
+                                required
                             />
                         </div>
                         <div className="mb-16">
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
index 53389c1dae..e4068c1a6d 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -309,6 +309,7 @@ const EphemeralContainerDrawer = ({
                         required
                         label="Target Container Name"
                         layout="row"
+                        size={ComponentSizeType.large}
                     />
                 </div>
             </div>

From 9f9fa165c1d64b7b74b5dc4156ed1ff36f4856f8 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:06:37 +0530
Subject: [PATCH 32/36] fix: styling for underline

---
 src/css/base.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/base.scss b/src/css/base.scss
index fdbf224055..552d1b8c00 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -1759,7 +1759,8 @@ button.anchor {
     text-decoration-style: dotted;
     text-decoration-color: var(--N300);
     text-decoration-thickness: 12%;
-    text-underline-offset: 25%;
+    text-underline-offset: 20%;
+    text-decoration-skip-ink: auto;
 }
 
 .dc__strike-through {

From 26dbde052098bad3f8b5c41d2416259dedd222b2 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:53:47 +0530
Subject: [PATCH 33/36] fix: custom input overrides

---
 .../externalLinks/ExternalLinks.type.ts       |  4 +--
 .../ExternalLinksCRUD/AddExternalLink.scss    | 15 ----------
 .../ExternalLinksCRUD/ConfigureLinkAction.tsx | 30 ++++++++-----------
 .../externalLinks.component.scss              | 16 ----------
 src/components/security/AddCveModal.tsx       |  1 +
 5 files changed, 15 insertions(+), 51 deletions(-)

diff --git a/src/components/externalLinks/ExternalLinks.type.ts b/src/components/externalLinks/ExternalLinks.type.ts
index 2596d5604f..5fae40ca51 100644
--- a/src/components/externalLinks/ExternalLinks.type.ts
+++ b/src/components/externalLinks/ExternalLinks.type.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ImgHTMLAttributes, ReactElement } from 'react'
+import React, { ImgHTMLAttributes, ReactElement, ReactNode } from 'react'
 import { ResponseType, AppDetails as CommonAppDetails } from '@devtron-labs/devtron-fe-common-lib'
 import { AppDetails } from '../app/types'
 import { ActionResponse } from '../external-apps/ExternalAppService'
@@ -216,7 +216,7 @@ export interface IdentifierSelectorProps {
         key?: number,
         value?: OptionTypeWithIcon | IdentifierOptionType[] | string | boolean | ExternalLinkScopeType | LinkAction,
     ) => void
-    getErrorLabel: (field: string, type?: string) => JSX.Element
+    getErrorLabel: (field: string, type?: string) => ReactNode
 }
 
 export enum LinkValidationKeys {
diff --git a/src/components/externalLinks/ExternalLinksCRUD/AddExternalLink.scss b/src/components/externalLinks/ExternalLinksCRUD/AddExternalLink.scss
index 0592035f2e..0ba273fc44 100644
--- a/src/components/externalLinks/ExternalLinksCRUD/AddExternalLink.scss
+++ b/src/components/externalLinks/ExternalLinksCRUD/AddExternalLink.scss
@@ -114,21 +114,6 @@
                     .configure-link-action-content {
                         display: grid;
                         row-gap: 8px;
-
-                        .link-name {
-                            display: flex;
-                            flex-direction: column;
-
-                            input {
-                                width: 100%;
-                                height: 36px;
-                                padding: 10px 6px;
-                                background-color: var(--bg-secondary);
-                                color: var(--N900);
-                                border: 1px solid var(--N200);
-                                border-radius: 4px;
-                            }
-                        }
                     }
 
                     .link-monitoring-tool {
diff --git a/src/components/externalLinks/ExternalLinksCRUD/ConfigureLinkAction.tsx b/src/components/externalLinks/ExternalLinksCRUD/ConfigureLinkAction.tsx
index 6be7cdb311..247c356444 100644
--- a/src/components/externalLinks/ExternalLinksCRUD/ConfigureLinkAction.tsx
+++ b/src/components/externalLinks/ExternalLinksCRUD/ConfigureLinkAction.tsx
@@ -36,6 +36,7 @@ import { ToolSelectStyles } from '../ExternalLinks.utils'
 import { customOptionWithIcon, customValueContainerWithIcon, ToolsMenuList } from '../ExternalLinks.component'
 import IdentifierSelector from './IdentifierSelector'
 import { CONFIGURE_LINK_NO_NAME } from '../../../config'
+import { ReactNode } from 'react'
 
 export default function ConfigureLinkAction({
     isFullMode,
@@ -50,7 +51,7 @@ export default function ConfigureLinkAction({
     onToolSelection,
     handleLinksDataActions,
 }: ConfigureLinkActionType): JSX.Element {
-    const getErrorLabel = (field: string, type?: string): JSX.Element => {
+    const getErrorLabel = (field: string, type?: string): ReactNode => {
         const errorLabel = (label: string): JSX.Element => {
             return (
                 <div className="error-label flex left dc__align-start fs-11 mt-4">
@@ -62,16 +63,12 @@ export default function ConfigureLinkAction({
             )
         }
         switch (field) {
-            case 'tool':
-                return errorLabel('Please select monitoring tool')
-            case 'name':
-                return errorLabel('Please provide name for the tool you want to link')
             case 'identifiers':
                 return errorLabel(`Please select one or more ${type}`)
             case 'url':
-                return errorLabel('Please enter URL template')
+                return 'Please enter URL template'
             case 'invalidProtocol':
-                return errorLabel('The url should start with http:// or https://')
+                return 'The url should start with http:// or https://'
             default:
                 return <></>
         }
@@ -155,17 +152,14 @@ export default function ConfigureLinkAction({
                 />
             </div>
             <div className="configure-link-action-content">
-                <div className="link-name">
-                    <CustomInput
-                        name={LinkValidationKeys.name}
-                        placeholder="Link name"
-                        value={link.name}
-                        onChange={onNameChange}
-                        onBlur={validateAndUpdateLinksData}
-                        data-testid="external-link-name-input"
-                        error={link.invalidName && CONFIGURE_LINK_NO_NAME}
-                    />
-                </div>
+                <CustomInput
+                    name={LinkValidationKeys.name}
+                    placeholder="Link name"
+                    value={link.name}
+                    onChange={onNameChange}
+                    onBlur={validateAndUpdateLinksData}
+                    error={link.invalidName && CONFIGURE_LINK_NO_NAME}
+                />
                 <Textarea
                     name="external-link-description-input"
                     placeholder="Description"
diff --git a/src/components/externalLinks/externalLinks.component.scss b/src/components/externalLinks/externalLinks.component.scss
index 26642fe45d..18ec6194ec 100644
--- a/src/components/externalLinks/externalLinks.component.scss
+++ b/src/components/externalLinks/externalLinks.component.scss
@@ -97,22 +97,6 @@
                         display: flex;
                         align-items: flex-start;
 
-                        .link-name {
-                            display: flex;
-                            flex-direction: column;
-                            width: 200px;
-
-                            input {
-                                width: 200px;
-                                height: 32px;
-                                padding: 10px 6px;
-                                background-color: var(--bg-secondary);
-                                color: var(--N900);
-                                border: 1px solid var(--N200);
-                                border-radius: 4px;
-                            }
-                        }
-
                         .monitoring-tool {
                             width: 150px;
 
diff --git a/src/components/security/AddCveModal.tsx b/src/components/security/AddCveModal.tsx
index 7de0f45d79..7632c2b180 100644
--- a/src/components/security/AddCveModal.tsx
+++ b/src/components/security/AddCveModal.tsx
@@ -156,6 +156,7 @@ export class AddCveModal extends Component<AddCveModalProps, AddCveModalState> {
                         onSubmit={(event) => {
                             event.preventDefault()
                         }}
+                        noValidate
                     >
                         <div className="whitelist-cve__cve-id ml-24 mr-24 mb-20">
                             <label className="dc__block flex-1 mb-5 mr-16 ">

From 6ddb28f3389869e7c2f2143f15ed5abeb970a740 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 15:38:11 +0530
Subject: [PATCH 34/36] fix: remove redundant props

---
 .../CreatePluginFormField.tsx                 | 38 ++-----------------
 1 file changed, 3 insertions(+), 35 deletions(-)

diff --git a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
index 56173ebcf8..15c0735dce 100644
--- a/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
+++ b/src/components/CIPipelineN/CreatePluginModal/CreatePluginFormField.tsx
@@ -18,20 +18,7 @@ import { SyntheticEvent } from 'react'
 import { CustomInput, Textarea } from '@devtron-labs/devtron-fe-common-lib'
 import { CreatePluginFormFieldProps } from './types'
 
-const CreatePluginFormField = ({
-    label,
-    value,
-    error,
-    action,
-    handleChange,
-    placeholder,
-    required,
-    disabled,
-    useTextArea,
-    helperText,
-    autoFocus,
-    ...props
-}: CreatePluginFormFieldProps) => {
+const CreatePluginFormField = ({ action, handleChange, useTextArea, ...props }: CreatePluginFormFieldProps) => {
     const handleInputChange = (e: SyntheticEvent) => {
         handleChange({ action, payload: (e.target as HTMLInputElement).value })
     }
@@ -40,34 +27,15 @@ const CreatePluginFormField = ({
         return (
             <Textarea
                 {...props}
-                label={label}
-                required={required}
+                value={props.value as string}
                 name={action}
-                placeholder={placeholder}
-                value={value as string}
                 onChange={handleInputChange}
                 onBlur={handleInputChange}
-                disabled={disabled}
-                error={error}
             />
         )
     }
 
-    return (
-        <CustomInput
-            {...props}
-            name={action}
-            label={label}
-            value={value}
-            error={error}
-            onChange={handleInputChange}
-            placeholder={placeholder}
-            required={required}
-            disabled={disabled}
-            autoFocus={autoFocus}
-            helperText={helperText}
-        />
-    )
+    return <CustomInput {...props} name={action} onChange={handleInputChange} />
 }
 
 export default CreatePluginFormField

From e4d59d2b503a5d80d67366004b6c41aeee3447d4 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Mon, 17 Feb 2025 18:37:28 +0530
Subject: [PATCH 35/36] chore: version bump

---
 package.json                   |  2 +-
 src/components/login/Login.tsx |  1 -
 yarn.lock                      | 34 +++++-----------------------------
 3 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 954ad0c3e3..ed1336e0f4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.7.2",
+        "@devtron-labs/devtron-fe-common-lib": "1.7.2-beta-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 0d1155e249..e411bd4fd5 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -255,7 +255,6 @@ class Login extends Component<LoginProps, LoginFormState> {
                     height="120px"
                 />
                 <p className="login__text">Your tool for Rapid, Reliable & Repeatable deployments</p>
-                {/* @ts-ignore */}
                 <form className="login-dt__form" autoComplete="on" onSubmit={this.login}>
                     <div className="flexbox-col dc__gap-24">
                         <CustomInput
diff --git a/yarn.lock b/yarn.lock
index cd50e33df5..de8939d133 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,10 +1105,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.2.tgz#9838ec9ba713cf8994563e22d8e260b042aa17c0"
-  integrity sha512-oAjTgv4F/2J7UKWq0vFM05oNXGK8oljgTL08+qvR1OQdTcJydHKl8WyJi9SMUofRC/w7Ze0e/O3qJDJqhT0j+g==
+"@devtron-labs/devtron-fe-common-lib@1.7.2-beta-3":
+  version "1.7.2-beta-3"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.2-beta-3.tgz#3d90cd35c3d5df277a22488b17f03b4d960635b1"
+  integrity sha512-1iJNSF8dvpUfc2uCHB4H86g7de+XvTx8XVX82e8zJ8SgJ/qWW9jS7f0yaplcd+qfvj/pANgqScTxaxagw2kLuA==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"
@@ -1125,7 +1125,7 @@
     dayjs "^1.11.13"
     fast-json-patch "^3.1.1"
     framer-motion "^6.5.1"
-    jsonpath-plus "^10.0.0"
+    jsonpath-plus "^10.3.0"
     marked "^13.0.3"
     nanoid "^3.3.8"
     react-codemirror-merge "4.23.6"
@@ -1659,21 +1659,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@jsep-plugin/assignment@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.2.1.tgz"
-  integrity sha512-gaHqbubTi29aZpVbBlECRpmdia+L5/lh2BwtIJTmtxdbecEyyX/ejAOg7eQDGNvGOUmPY7Z2Yxdy9ioyH/VJeA==
-
 "@jsep-plugin/assignment@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@jsep-plugin/assignment/-/assignment-1.3.0.tgz#fcfc5417a04933f7ceee786e8ab498aa3ce2b242"
   integrity sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ==
 
-"@jsep-plugin/regex@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.3.tgz"
-  integrity sha512-XfZgry4DwEZvSFtS/6Y+R48D7qJYJK6R9/yJFyUFHCIUMEEHuJ4X95TDgJp5QkmzfLYvapMPzskV5HpIDrREug==
-
 "@jsep-plugin/regex@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@jsep-plugin/regex/-/regex-1.0.4.tgz#cb2fc423220fa71c609323b9ba7f7d344a755fcc"
@@ -6093,11 +6083,6 @@ jsdoc-type-pratt-parser@^4.0.0:
   resolved "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz"
   integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==
 
-jsep@^1.3.9:
-  version "1.3.9"
-  resolved "https://registry.npmjs.org/jsep/-/jsep-1.3.9.tgz"
-  integrity sha512-i1rBX5N7VPl0eYb6+mHNp52sEuaS2Wi8CDYx1X5sn9naevL78+265XJqy1qENEk7mRKwS06NHpUqiBwR7qeodw==
-
 jsep@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/jsep/-/jsep-1.4.0.tgz#19feccbfa51d8a79f72480b4b8e40ce2e17152f0"
@@ -6214,15 +6199,6 @@ jsonify@^0.0.1:
   resolved "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz"
   integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
-jsonpath-plus@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.1.0.tgz"
-  integrity sha512-gHfV1IYqH8uJHYVTs8BJX1XKy2/rR93+f8QQi0xhx95aCiXn1ettYAd5T+7FU6wfqyDoX/wy0pm/fL3jOKJ9Lg==
-  dependencies:
-    "@jsep-plugin/assignment" "^1.2.1"
-    "@jsep-plugin/regex" "^1.0.3"
-    jsep "^1.3.9"
-
 jsonpath-plus@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jsonpath-plus/-/jsonpath-plus-10.3.0.tgz#59e22e4fa2298c68dfcd70659bb47f0cad525238"

From 02a0f95aaf56c696ede635215b7a3ddeb6f1f785 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Tue, 18 Feb 2025 11:25:14 +0530
Subject: [PATCH 36/36] chore: bump version to 1.7.3

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ed1336e0f4..1d7759c78b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.7.2-beta-3",
+        "@devtron-labs/devtron-fe-common-lib": "1.7.3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/yarn.lock b/yarn.lock
index de8939d133..2bd47769fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,10 +1105,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.7.2-beta-3":
-  version "1.7.2-beta-3"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.2-beta-3.tgz#3d90cd35c3d5df277a22488b17f03b4d960635b1"
-  integrity sha512-1iJNSF8dvpUfc2uCHB4H86g7de+XvTx8XVX82e8zJ8SgJ/qWW9jS7f0yaplcd+qfvj/pANgqScTxaxagw2kLuA==
+"@devtron-labs/devtron-fe-common-lib@1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.7.3.tgz#adb61f009316ea1b462da25591639bf87c91274e"
+  integrity sha512-wFykQOU7Jmyn9v9poJe6yZ+M8ReXHrs3TVIhYqEZauuVzBu+gbjzrDtVlqOVkFFW/XajSyYccNFHSds9ksN6rQ==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"