433 added field clear button

src/components/FormComponents/FormAnyOrDict.tsx

@@ -1,4 +1,5 @@
-import { TextField, TextFieldProps } from '@mui/material'
+import { Clear } from '@mui/icons-material'
+import { IconButton, InputAdornment, TextField, TextFieldProps } from '@mui/material'
 import { defaultTextFieldProps } from 'components/FormComponents'
 import { ChangeEvent } from 'react'
 import { RegisterOptions, useFormContext } from 'react-hook-form'
@@ -22,11 +23,29 @@ const FormAnyOrDict = ({ registerKey, registerOptions, ...textFieldProps }: Form
     if(error.message) textFieldProps.helperText = error.message
   }
 
+  const endAdornment = (
+    <InputAdornment position="end">
+      {!textFieldProps.disabled &&
+        <IconButton
+          onClick={() => {
+            setValue(registerKey, undefined)
+          }}
+        >
+          <Clear />
+        </IconButton>
+      }
+    </InputAdornment>
+  )
+  if (textFieldProps.InputProps && !textFieldProps.disabled) textFieldProps.InputProps.endAdornment = endAdornment
+  else textFieldProps.InputProps = {
+    endAdornment: endAdornment
+  }
+
   return (
     <TextField
       {...defaultTextFieldProps}
       {...textFieldProps}
-      value={ invalid ? currentValue : JSON.stringify(currentValue)}
+      value={ currentValue === undefined ? '' : ( invalid ? currentValue : JSON.stringify(currentValue))}
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
         if(event.target.value === '') {
             clearErrors(registerKey)

src/components/FormComponents/FormTextField.tsx

@@ -1,4 +1,4 @@
-import { Visibility, VisibilityOff } from '@mui/icons-material'
+import { Clear, Visibility, VisibilityOff } from '@mui/icons-material'
 import { IconButton, InputAdornment, MenuItem, TextField, TextFieldProps } from '@mui/material'
 import { useMountedState } from 'hooks/useMountedState'
 import { DateTime } from 'luxon'
@@ -20,7 +20,7 @@ const defaultTextFieldProps: TextFieldProps = {
 }
 
 const FormTextField = ({ registerKey, registerOptions, menuOptions, ...textFieldProps }: FormTextFieldProps) => {
-  const { register, getFieldState, watch } = useFormContext()
+  const { register, getFieldState, watch, setValue } = useFormContext()
   const [showPassword, setShowPassword] = useMountedState(false)
 
   const currentValue = watch(registerKey)
@@ -31,14 +31,25 @@ const FormTextField = ({ registerKey, registerOptions, menuOptions, ...textField
     if(error.message) textFieldProps.helperText = error.message
   }
 
-  if(textFieldProps.type === 'password'){
+  if(!menuOptions){
     const endAdornment = (
       <InputAdornment position="end">
-        <IconButton
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          {showPassword ? <Visibility /> : <VisibilityOff />}
-        </IconButton>
+        {textFieldProps.type === 'password' && 
+          <IconButton
+            onClick={() => setShowPassword(!showPassword)}
+            sx={{mr: -2}}
+          >
+            {showPassword ? <Visibility /> : <VisibilityOff />}
+          </IconButton>
+        }
+        {!textFieldProps.disabled &&
+          <IconButton
+            onClick={() => setValue(registerKey, '')}
+            sx={{mr: -2}}
+          >
+            <Clear />
+          </IconButton>
+        }
       </InputAdornment>
     )
     if (textFieldProps.InputProps) textFieldProps.InputProps.endAdornment = endAdornment
@@ -72,6 +83,7 @@ const FormTextField = ({ registerKey, registerOptions, menuOptions, ...textField
       {...defaultTextFieldProps}
       value={(currentValue === 0 || currentValue) ? currentValue : ''}
       {...textFieldProps}
+      type={showPassword ? 'string' : textFieldProps.type}
       {...register(registerKey, registerOptions)}
     />
   )

src/components/GardenConnectionForm/garden-connection-form-components/ConnectionHttpFields.tsx

@@ -25,7 +25,7 @@ const ConnectionHttpFields = ({connectionType, textFieldProps, ...gridProps}: Co
                   label="Host"
                 />
               </Grid>
-              <Grid item minWidth="125px" maxWidth="125px" xs={1}>
+              <Grid item minWidth="150px" maxWidth="150px" xs={1}>
                 <FormTextField
                   {...textFieldProps}
                   registerKey="connection_params.http.port"

src/components/GardenConnectionForm/garden-connection-form-components/ConnectionStompFields.tsx

@@ -32,7 +32,7 @@ const ConnectionStompFields = ({connectionType, textFieldProps, ...gridProps}: C
                   label="Host"
                 />
               </Grid>
-              <Grid item minWidth="125px" maxWidth="125px" xs={1}>
+              <Grid item minWidth="150px" maxWidth="150px" xs={1}>
                 <FormTextField
                   {...textFieldProps}
                   registerKey="connection_params.stomp.port"