feat: update the API for CustomInput

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"

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}

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx

@@ -178,7 +178,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"
                     />

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -798,10 +798,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">

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 [

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx

@@ -258,29 +258,26 @@
                     <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}
                                 error={errors.environmentName}
                                 {...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 && (
@@ -317,7 +314,7 @@
                                 {...register('description')}
                                 label="Description (Maximum 40 characters allowed)"
                                 autoFocus={!!id}
-                                noTrim
+                                shouldTrim={false}
                             />
                         </div>
                         {EnvironmentLabels && !isVirtual && (

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx

@@ -150,17 +150,16 @@
                 </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"

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx

@@ -167,9 +167,9 @@
             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 @@
                         <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 @@
                     <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 @@
                     helperText="Keys are mounted as files to volume"
                     disabled={isFormDisabled}
                     error={errors.volumeMountPath}
-                    isRequiredField
-                    noTrim
+                    required
+                    shouldTrim={false}
                 />
                 {renderSubPath()}
                 {renderFilePermission()}
@@ -323,15 +319,13 @@
         (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>
         )

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>

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}

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>

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={() => {

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 */}

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>}
         />
     )
 }

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
 

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}

src/components/CIPipelineN/MountFromHost.tsx

@@ -69,17 +69,19 @@
                             <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"
-                                    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]}
                                     name={MountPathMap.FILEPATHONDISK}
                                 />
                                 <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]}

src/components/CIPipelineN/OutputDirectoryPath.tsx

@@ -67,8 +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"
-                            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)}

src/components/CIPipelineN/TaskDetailComponent.tsx

@@ -204,22 +204,20 @@ 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
-                            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"
+                            label="Task name"
                             error={renderTaskNameError()}
+                            required
                         />
                     </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}