feat: Add basic form validation for path input

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddDiffusersModel.tsx

@@ -66,13 +66,13 @@ export default function AddDiffusersModel() {
   };
 
   return (
-    <Flex overflow="scroll" maxHeight={window.innerHeight - 270}>
+    <Flex overflow="scroll" maxHeight={window.innerHeight - 270} width="100%">
       <Formik
         initialValues={addModelFormValues}
         onSubmit={addModelFormSubmitHandler}
       >
         {({ handleSubmit, errors, touched }) => (
-          <IAIForm onSubmit={handleSubmit}>
+          <IAIForm onSubmit={handleSubmit} w="full">
             <VStack rowGap={2}>
               <IAIFormItemWrapper>
                 {/* Name */}
@@ -90,7 +90,6 @@ export default function AddDiffusersModel() {
                       name="name"
                       type="text"
                       validate={baseValidation}
-                      width="2xl"
                       isRequired
                     />
                     {!!errors.name && touched.name ? (
@@ -119,7 +118,6 @@ export default function AddDiffusersModel() {
                       id="description"
                       name="description"
                       type="text"
-                      width="2xl"
                       isRequired
                     />
                     {!!errors.description && touched.description ? (
@@ -153,13 +151,7 @@ export default function AddDiffusersModel() {
                     {t('modelManager.modelLocation')}
                   </FormLabel>
                   <VStack alignItems="start">
-                    <Field
+                    <Field as={IAIInput} id="path" name="path" type="text" />
-                      as={IAIInput}
-                      id="path"
-                      name="path"
-                      type="text"
-                      width="2xl"
-                    />
                     {!!errors.path && touched.path ? (
                       <FormErrorMessage>{errors.path}</FormErrorMessage>
                     ) : (
@@ -181,7 +173,6 @@ export default function AddDiffusersModel() {
                       id="repo_id"
                       name="repo_id"
                       type="text"
-                      width="2xl"
                     />
                     {!!errors.repo_id && touched.repo_id ? (
                       <FormErrorMessage>{errors.repo_id}</FormErrorMessage>
@@ -220,7 +211,6 @@ export default function AddDiffusersModel() {
                       id="vae.path"
                       name="vae.path"
                       type="text"
-                      width="2xl"
                     />
                     {!!errors.vae?.path && touched.vae?.path ? (
                       <FormErrorMessage>{errors.vae?.path}</FormErrorMessage>
@@ -245,7 +235,6 @@ export default function AddDiffusersModel() {
                       id="vae.repo_id"
                       name="vae.repo_id"
                       type="text"
-                      width="2xl"
                     />
                     {!!errors.vae?.repo_id && touched.vae?.repo_id ? (
                       <FormErrorMessage>{errors.vae?.repo_id}</FormErrorMessage>

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next';
 
 import type { RootState } from 'app/store/store';
 import IAIButton from 'common/components/IAIButton';
-import IAIInput from 'common/components/IAIInput';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
 
 import { makeToast } from 'app/components/Toaster';
+import IAIMantineTextInput from 'common/components/IAIMantineInput';
 import { addToast } from 'features/system/store/systemSlice';
 import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
 import { components } from 'services/api/schema';
@@ -62,6 +62,10 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
       config: retrievedModel.config ? retrievedModel.config : '',
       variant: retrievedModel.variant,
     },
+    validate: {
+      path: (value) =>
+        value.trim().length === 0 ? 'Must provide a path' : null,
+    },
   });
 
   const editModelFormSubmitHandler = (values: CheckpointModelConfig) => {
@@ -119,7 +123,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
           )}
         >
           <Flex flexDirection="column" overflowY="scroll" gap={4}>
-            <IAIInput
+            <IAIMantineTextInput
               label={t('modelManager.description')}
               {...checkpointEditForm.getInputProps('description')}
             />
@@ -133,15 +137,15 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
               data={variantSelectData}
               {...checkpointEditForm.getInputProps('variant')}
             />
-            <IAIInput
+            <IAIMantineTextInput
               label={t('modelManager.modelLocation')}
               {...checkpointEditForm.getInputProps('path')}
             />
-            <IAIInput
+            <IAIMantineTextInput
               label={t('modelManager.vaeLocation')}
               {...checkpointEditForm.getInputProps('vae')}
             />
-            <IAIInput
+            <IAIMantineTextInput
               label={t('modelManager.config')}
               {...checkpointEditForm.getInputProps('config')}
             />

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -9,7 +9,7 @@ import { useForm } from '@mantine/form';
 import { makeToast } from 'app/components/Toaster';
 import type { RootState } from 'app/store/store';
 import IAIButton from 'common/components/IAIButton';
-import IAIInput from 'common/components/IAIInput';
+import IAIMantineTextInput from 'common/components/IAIMantineInput';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
 import { addToast } from 'features/system/store/systemSlice';
@@ -58,6 +58,10 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
       vae: retrievedModel.vae ? retrievedModel.vae : '',
       variant: retrievedModel.variant,
     },
+    validate: {
+      path: (value) =>
+        value.trim().length === 0 ? 'Must provide a path' : null,
+    },
   });
 
   const editModelFormSubmitHandler = (values: DiffusersModelConfig) => {
@@ -107,7 +111,7 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
         )}
       >
         <Flex flexDirection="column" overflowY="scroll" gap={4}>
-          <IAIInput
+          <IAIMantineTextInput
             label={t('modelManager.description')}
             {...diffusersEditForm.getInputProps('description')}
           />
@@ -121,11 +125,11 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
             data={variantSelectData}
             {...diffusersEditForm.getInputProps('variant')}
           />
-          <IAIInput
+          <IAIMantineTextInput
             label={t('modelManager.modelLocation')}
             {...diffusersEditForm.getInputProps('path')}
           />
-          <IAIInput
+          <IAIMantineTextInput
             label={t('modelManager.vaeLocation')}
             {...diffusersEditForm.getInputProps('vae')}
           />