console: add autocomplete ability to input field

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8372
GitOrigin-RevId: dcbd61b9308aaff13e8937738a9b62fc08ec7508

frontend/libs/console/legacy-ce/src/lib/new-components/Form/FieldWrapper.tsx

@@ -14,6 +14,14 @@ export type FieldWrapperPassThroughProps = {
    * The field ID
    */
   id?: string;
+  /**
+   * The wrapped field props
+   */
+  fieldProps?: Partial<
+    React.InputHTMLAttributes<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >
+  >;
   /**
    * The field size (full: the full width of the container , medium: half the
    * width of the container)

frontend/libs/console/legacy-ce/src/lib/new-components/Form/Input.tsx

@@ -125,6 +125,7 @@ export const Input = ({
   label,
   className = '',
   rightButton,
+  fieldProps = {},
 }: InputProps) => {
   const showInputEndContainer = clearButton || (iconPosition === 'end' && icon);
 
@@ -174,6 +175,7 @@ export const Input = ({
           onInput={onInput}
           disabled={disabled}
           data-testid={name}
+          {...fieldProps}
         />
         {showInputEndContainer && (
           <div className="absolute inset-y-0 right-0 flex items-center pointer-events-none">

frontend/libs/console/legacy-ce/src/lib/new-components/Form/InputField.stories.tsx

@@ -305,6 +305,31 @@ VariantAppendLabel.parameters = {
   },
 };
 
+export const VariantAutocompleteNewPassword: ComponentStory<
+  typeof InputField
+> = () => {
+  const validationSchema = z.object({});
+
+  return (
+    <SimpleForm schema={validationSchema} onSubmit={action('onSubmit')}>
+      <InputField
+        name="inputFieldName"
+        label="New password"
+        placeholder="The new password"
+        type="password"
+        fieldProps={{ autoComplete: 'new-password' }}
+      />
+    </SimpleForm>
+  );
+};
+VariantAutocompleteNewPassword.storyName =
+  '🎭 Variant - Autocomplete new pasword';
+VariantAutocompleteNewPassword.parameters = {
+  docs: {
+    source: { state: 'open' },
+  },
+};
+
 export const StateWithDefaultValue: ComponentStory<typeof InputField> = () => {
   const defaultValues = { inputFieldName: 'value2' };
 

frontend/libs/console/legacy-ce/src/lib/new-components/Form/InputField.tsx

@@ -88,6 +88,7 @@ export const InputField = <T extends z.infer<Schema>>({
   renderDescriptionLineBreaks = false,
   clearButton,
   inputClassName,
+  fieldProps = {},
   ...wrapperProps
 }: InputFieldProps<T>) => {
   const {
@@ -154,6 +155,7 @@ export const InputField = <T extends z.infer<Schema>>({
         onChange={onInputChangeEvent}
         onClearButtonClick={onClearButtonClick}
         inputProps={regReturn}
+        fieldProps={fieldProps}
       />
     </FieldWrapper>
   );