fixed namespace, name, and tag input checks not working in modals

pepkit · Sep 4, 2024 · 36573cb · 36573cb
1 parent fcadcc4
commit 36573cb
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 18 deletions.
diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
@@ -50,7 +50,7 @@ const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
   }
 
   if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1">{msg}</p>;
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
   }
 
   return null;
@@ -147,9 +147,15 @@ sample_table: samples.csv
             // dont allow any whitespace
             {...register('project_name', {
               required: true,
+              required: {
+                value: true,
+                message: "empty",
+              },
               pattern: {
                 value: /^\S+$/,
                 message: 'No spaces allowed.',
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
               },
             })}
             id="blank-project-name"
@@ -159,10 +165,20 @@ sample_table: samples.csv
           />
           <span className="mx-1 mb-1">:</span>
         </div>
-        <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
+        <input {...register('tag', {
+            required: false,
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "invalid",
+            },
+          })} 
+          id="blank_tag" 
+          type="text" 
+          className="form-control" 
+          placeholder="default" 
+        />
       </div>
-
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <CombinedErrorMessage errors={errors}/>
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="blank_description"

diff --git a/web/src/components/forms/create-schema-form.tsx b/web/src/components/forms/create-schema-form.tsx
@@ -1,5 +1,6 @@
 import { Editor } from '@monaco-editor/react';
-import { Controller, useForm } from 'react-hook-form';
+import { ErrorMessage } from '@hookform/error-message';
+import { Controller, FieldErrors, useForm } from 'react-hook-form';
 
 import { useSession } from '../../contexts/session-context';
 import { useCreateSchemaMutation } from '../../hooks/mutations/useCreateSchemaMutation';
@@ -36,10 +37,39 @@ type FormFields = {
   schemaYaml: string;
 };
 
+type CombinedErrorMessageProps = {
+  errors: FieldErrors<POPInputs>;
+};
+
+const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
+  const { errors } = props;
+  const nameError = errors.name?.message;
+  let msg = null;
+
+  if (nameError == 'empty') {
+    msg = 'Project Name must not be empty.';
+  } else if (nameError == 'invalid') {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
+  }
+
+  if (nameError) {
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
+  }
+
+  return null;
+};
+
 export const CreateSchemaForm = (props: Props) => {
   const { onCancel, onSubmit, editorHeight, defaultNamespace } = props;
   const { user } = useSession();
-  const { formState, watch, register, control, reset } = useForm<FormFields>({
+  const { 
+    watch, 
+    register, 
+    control, 
+    reset, 
+    formState: { isValid, isDirty, errors }, 
+  } = useForm<FormFields>({
+    mode: 'onChange',
     defaultValues: {
       namespace: defaultNamespace || user?.login || undefined,
       schemaYaml: defaultSchemaYaml,
@@ -94,9 +124,15 @@ export const CreateSchemaForm = (props: Props) => {
             // dont allow any whitespace
             {...register('name', {
               required: true,
+              required: {
+                value: true,
+                message: "empty",
+              },
               pattern: {
                 value: /^\S+$/,
                 message: 'No spaces allowed.',
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
               },
             })}
             id="schema-name"
@@ -106,6 +142,7 @@ export const CreateSchemaForm = (props: Props) => {
           />
         </div>
       </div>
+      <CombinedErrorMessage errors={errors} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         {...register('description')}
@@ -137,7 +174,7 @@ export const CreateSchemaForm = (props: Props) => {
       </p>
       <div className="mt-3">
         <button
-          disabled={isSubmitting || !formState.isDirty}
+          disabled={isSubmitting || !isDirty || !isValid}
           type="button"
           className="btn btn-success float-end"
           onClick={() => {

diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
@@ -44,7 +44,7 @@ const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
   }
 
   if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1">{msg}</p>;
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
   }
 
   return null;
@@ -123,9 +123,15 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
             // dont allow any whitespace
             {...register('project_name', {
               required: true,
+              required: {
+                value: true,
+                message: "empty",
+              },
               pattern: {
                 value: /^\S+$/,
                 message: 'No spaces allowed.',
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
               },
             })}
             id="blank-project-name"
@@ -136,10 +142,22 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           <span className="mx-1 mb-1">:</span>
         </div>
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
-          <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
+          <input 
+            {...register('tag', {
+            required: false,
+              pattern: {
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
+              },
+            })} 
+            id="blank_tag" 
+            type="text" 
+            className="form-control" 
+            placeholder="default" 
+          />
         </div>
       </div>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <CombinedErrorMessage errors={errors} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="blank_description"

diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
@@ -48,7 +48,7 @@ const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
   }
 
   if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1">{msg}</p>;
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
   }
 
   return null;
@@ -133,19 +133,37 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
             // dont allow any whitespace
             {...register('name', {
               required: true,
+              required: {
+                value: true,
+                message: "empty",
+              },
               pattern: {
                 value: /^\S+$/,
                 message: 'No spaces allowed.',
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
               },
             })}
           />
           <span className="mx-1 mb-1">:</span>
         </div>
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
-          <input id="tag" type="text" className="form-control" placeholder="default" {...register('tag')} />
+          <input 
+            {...register('tag', {
+            required: false,
+              pattern: {
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
+              },
+            })}
+            id="tag" 
+            type="text" 
+            className="form-control" 
+            placeholder="default" 
+          />
         </div>
       </div>
-      <ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
+      <CombinedErrorMessage errors={errors} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
@@ -223,7 +241,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
               },
             );
           }}
-          disabled={isUploading}
+          disabled={!isValid || isUploading}
           type="button"
           id="new-project-submit-btn"
           className="btn btn-success float-end"

diff --git a/web/src/components/forms/upload-schema-form.tsx b/web/src/components/forms/upload-schema-form.tsx
@@ -22,6 +22,28 @@ type Props = {
   defaultNamespace?: string;
 };
 
+type CombinedErrorMessageProps = {
+  errors: FieldErrors<POPInputs>;
+};
+
+const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
+  const { errors } = props;
+  const nameError = errors.name?.message;
+  let msg = null;
+
+  if (nameError == 'empty') {
+    msg = 'Project Name must not be empty.';
+  } else if (nameError == 'invalid') {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
+  }
+
+  if (nameError) {
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
+  }
+
+  return null;
+};
+
 export const SchemaUploadForm = (props: Props) => {
   const { defaultNamespace, onCancel, onSubmit } = props;
 
@@ -34,7 +56,7 @@ export const SchemaUploadForm = (props: Props) => {
     register,
     control,
     watch,
-    formState: { errors },
+    formState: { isValid, errors },
   } = useForm<FromFileInputs>({
     mode: 'onChange',
     defaultValues: {
@@ -99,15 +121,21 @@ export const SchemaUploadForm = (props: Props) => {
             // dont allow any whitespace
             {...register('name', {
               required: true,
+              required: {
+                value: true,
+                message: "empty",
+              },
               pattern: {
                 value: /^\S+$/,
                 message: 'No spaces allowed.',
+                value: /^[a-zA-Z0-9_-]+$/,
+                message: "invalid",
               },
             })}
           />
         </div>
       </div>
-      <ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
+      <CombinedErrorMessage errors={errors} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
@@ -159,7 +187,7 @@ export const SchemaUploadForm = (props: Props) => {
               },
             );
           }}
-          disabled={isUploading}
+          disabled={!isValid || isUploading}
           type="button"
           id="new-project-submit-btn"
           className="btn btn-success float-end"

diff --git a/web/src/components/modals/fork-pep.tsx b/web/src/components/modals/fork-pep.tsx
@@ -52,7 +52,7 @@ const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
   }
 
   if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1">{msg}</p>;
+    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
   }
 
   return null;