add pep modal ui update

pepkit · Sep 4, 2024 · b009019 · b009019
1 parent c47e93f
commit b009019
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 171 deletions.
diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
@@ -106,24 +106,24 @@ sample_table: samples.csv
   const { isPending: isSubmitting, submit } = useBlankProjectFormMutation(namespace);
 
   return (
-    <form id="blank-project-form" className="border-0 form-control">
-      <div className="mb-3 mt-3 form-check form-switch">
+    <form id="blank-project-form" className="border-0 form-control p-0">
+      <div className="mt-3 form-check form-switch">
         <input
           className="form-check-input"
           type="checkbox"
           role="switch"
           id="blank-is-private-toggle"
           {...register('is_private')}
         />
-        <label className="form-check-label">
+        <label className="form-check-label text-sm">
           <i className="bi bi-lock"></i>
           Private
         </label>
       </div>
-      <div className="namespace-name-tag-container">
-        <label className="fw-bold text-sm">Namespace *</label>
-        <label className="fw-bold text-sm">Name *</label>
-        <label className="fw-bold text-sm">Tag</label>
+      <div className="namespace-name-tag-container mt-2">
+        <label className="fw-semibold text-sm">Namespace*</label>
+        <label className="fw-semibold text-sm">Name*</label>
+        <label className="fw-semibold text-sm">Tag</label>
       </div>
       <div className="namespace-name-tag-container fs-4 w-full">
         <div className="d-flex flex-row align-items-center justify-content-between w-full">
@@ -161,21 +161,17 @@ sample_table: samples.csv
         </div>
         <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
       </div>
-      <p className='text-xs'>
-        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
-      </p>
+
       <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="blank_description"
-        className="form-control mt-3"
+        className="form-control"
         rows={3}
         placeholder="Describe your PEP."
         {...register('description')}
       ></textarea>
-      <label className="form-check-label mt-3 mb-1">
-        <i className="bi bi-file-earmark-break me-1"></i>
-        Schema
-      </label>
+      <label className="fw-semibold text-sm mt-2">Schema</label>
       <div>
         <Controller
           control={control}
@@ -190,9 +186,9 @@ sample_table: samples.csv
           )}
         />
       </div>
-      <Tabs defaultActiveKey="samples" id="blank-project-tabs" className="mt-3">
+      <Tabs defaultActiveKey="samples" id="blank-project-tabs" className="mt-3 text-sm">
         <Tab eventKey="samples" title="Samples">
-          <div className="p-2 -1">
+          <div className="overflow-auto border rounded-bottom-2 custom-handsontable" style={{marginTop: '-1px', zIndex: 99999}}>
             <SampleTable
               height={300}
               data={sampleTable}
@@ -203,22 +199,25 @@ sample_table: samples.csv
           </div>
         </Tab>
         <Tab eventKey="config" title="Config">
-          <div className="p-1 -0">
+          <div className="border rounded-bottom-2 pb-1">
             <ProjectConfigEditor
               value={configYAML}
               setValue={(data) => {
                 setValue('config', data);
               }}
-              height={300}
+              height={295}
             />
           </div>
         </Tab>
       </Tabs>
+      <p className='text-xs mt-1'>
+        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
+      </p>
       <div className="mt-3">
         <button
           disabled={!isValid || isSubmitting}
           id="blank-project-submit-btn"
-          className="btn btn-success me-1"
+          className="btn btn-success float-end"
           type="button"
           onClick={() => {
             try {
@@ -257,7 +256,7 @@ sample_table: samples.csv
         </button>
         <button
           type="button"
-          className="btn btn-outline-dark me-1"
+          className="btn btn-outline-dark me-1 float-end"
           data-bs-dismiss="modal"
           onClick={() => {
             resetForm();

diff --git a/web/src/components/forms/create-schema-form.tsx b/web/src/components/forms/create-schema-form.tsx
@@ -68,9 +68,9 @@ export const CreateSchemaForm = (props: Props) => {
           id="is-private-toggle"
         />
       </div> */}
-      <div className="namespace-name-tag-container">
-        <label className="fw-bold text-sm">Namespace *</label>
-        <label className="fw-bold text-sm">Name *</label>
+      <div className="namespace-name-tag-container mt-2">
+        <label className="fw-semibold text-sm">Namespace*</label>
+        <label className="fw-semibold text-sm">Name*</label>
       </div>
       <div className="namespace-name-tag-container fs-4">
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
@@ -106,21 +106,14 @@ export const CreateSchemaForm = (props: Props) => {
           />
         </div>
       </div>
-      <p className='text-xs'>
-        * Namespace and Schema Name are required.
-      </p>
-      <div className="my-1">
-        <label className="fw-bold text-sm" htmlFor="schema-description">
-          Description
-        </label>
-        <textarea
-          {...register('description')}
-          id="schema-description"
-          className="form-control"
-          placeholder="Schema description"
-        />
-      </div>
-      <div className="border rounded mt-2 p-1">
+      <label className="fw-semibold text-sm mt-2">Description</label>
+      <textarea
+        {...register('description')}
+        id="schema-description"
+        className="form-control"
+        placeholder="Schema description"
+      />
+      <div className="border rounded mt-3 py-1">
         <Controller
           name="schemaYaml"
           control={control}
@@ -139,11 +132,14 @@ export const CreateSchemaForm = (props: Props) => {
           )}
         />
       </div>
-      <div className="d-flex align-items-center gap-1 w-100 justify-content-start my-2">
+      <p className='text-xs mt-1'>
+        * Namespace and Schema Name are required.
+      </p>
+      <div className="mt-3">
         <button
           disabled={isSubmitting || !formState.isDirty}
           type="button"
-          className="btn btn-success"
+          className="btn btn-success float-end"
           onClick={() => {
             submit(
               {
@@ -166,7 +162,7 @@ export const CreateSchemaForm = (props: Props) => {
           {isSubmitting ? 'Creating...' : 'Create'}
         </button>
         <button
-          className="btn btn-outline-dark"
+          className="btn btn-outline-dark me-1 float-end"
           onClick={() => {
             reset();
             onCancel();

diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
@@ -82,24 +82,24 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
   const { isPending: isSubmitting, submit } = usePopCreateMutation(namespace);
 
   return (
-    <form id="blank-project-form" className="border-0 form-control">
-      <div className="mb-3 mt-3 form-check form-switch">
+    <form id="blank-project-form" className="border-0 form-control p-0">
+      <div className="mt-3 form-check form-switch">
         <input
           className="form-check-input"
           type="checkbox"
           role="switch"
           id="blank-is-private-toggle"
           {...register('is_private')}
         />
-        <label className="form-check-label">
+        <label className="form-check-label text-sm">
           <i className="bi bi-lock"></i>
           Private
         </label>
       </div>
-      <div className="namespace-name-tag-container">
-        <label className="fw-bold text-sm">Namespace *</label>
-        <label className="fw-bold text-sm">Name *</label>
-        <label className="fw-bold text-sm">Tag</label>
+      <div className="namespace-name-tag-container mt-2">
+        <label className="fw-semibold text-sm">Namespace*</label>
+        <label className="fw-semibold text-sm">Name*</label>
+        <label className="fw-semibold text-sm">Tag</label>
       </div>
       <div className="namespace-name-tag-container fs-4">
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
@@ -139,18 +139,16 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
         </div>
       </div>
-      <p className='text-xs'>
-        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
-      </p>
       <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="blank_description"
-        className="form-control mt-3"
+        className="form-control"
         rows={3}
         placeholder="Describe your POP."
         {...register('description')}
       ></textarea>
-      <label className="form-check-label mt-3 mb-1">Add PEPs to your POP</label>
+      <label className="fw-semibold text-sm mt-2">Add PEPs to your POP</label>
       {/* Add a dropdown here */}
       <div>
         <Controller
@@ -196,11 +194,14 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           })}
         </div>
       ) : null}
+      <p className='text-xs mt-1'>
+        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
+      </p>
       <div className="mt-3">
         <button
           disabled={!isValid || isSubmitting || peps.length === 0}
           id="blank-project-submit-btn"
-          className="btn btn-success me-1"
+          className="btn btn-success float-end"
           type="button"
           onClick={() =>
             submit(
@@ -232,7 +233,7 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
         </button>
         <button
           type="button"
-          className="btn btn-outline-dark me-1"
+          className="btn btn-outline-dark me-1 float-end"
           data-bs-dismiss="modal"
           onClick={() => {
             onHide();

diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
@@ -87,24 +87,24 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
   const { isPending: isUploading, upload } = useUploadMutation(namespace);
 
   return (
-    <form id="new-project-form" className="border-0 form-control">
-      <div className="mb-3 mt-3 form-check form-switch">
+    <form id="new-project-form" className="border-0 form-control p-0">
+      <div className="mt-3 form-check form-switch">
         <input
           className="form-check-input"
           type="checkbox"
           role="switch"
           id="is-private-toggle"
           {...register('is_private')}
         />
-        <label className="form-check-label">
+        <label className="form-check-label text-sm">
           <i className="bi bi-lock"></i>
           Private
         </label>
       </div>
-      <div className="namespace-name-tag-container">
-        <label className="fw-bold text-sm">Namespace *</label>
-        <label className="fw-bold text-sm">Name *</label>
-        <label className="fw-bold text-sm">Tag</label>
+      <div className="namespace-name-tag-container mt-2">
+        <label className="fw-semibold text-sm">Namespace*</label>
+        <label className="fw-semibold text-sm">Name*</label>
+        <label className="fw-semibold text-sm">Tag</label>
       </div>
       <div className="namespace-name-tag-container fs-4">
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
@@ -145,21 +145,16 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
           <input id="tag" type="text" className="form-control" placeholder="default" {...register('tag')} />
         </div>
       </div>
-      <p className='text-xs'>
-        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
-      </p>
       <ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
+      <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
-        className="form-control mt-3"
+        className="form-control"
         rows={3}
         placeholder="Describe your PEP."
         {...register('description')}
       ></textarea>
-      <label className="form-check-label mt-3 mb-1">
-        <i className="bi bi-file-earmark-break me-1"></i>
-        Schema
-      </label>
+      <label className="fw-semibold text-sm mt-2">Schema</label>
       <div>
         <Controller
           control={control}
@@ -201,7 +196,10 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
       ) : (
         <FileDropZone name="files" control={control} multiple={true} innerRef={fileDialogRef} />
       )}
-      <div className="mt-2">
+      <p className='text-xs mt-1'>
+        * Namespace and Project Name are required. A tag value of "default" will be supplied if the Tag input is left empty.
+      </p>
+      <div className="mt-3">
         <button
           onClick={() => {
             if (projectName === '') {
@@ -228,14 +226,14 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
           disabled={isUploading}
           type="button"
           id="new-project-submit-btn"
-          className="btn btn-success me-1"
+          className="btn btn-success float-end"
         >
           <i className="bi bi-plus-circle me-1"></i>
           {isUploading ? 'Submitting...' : 'Submit'}
         </button>
         <button
           type="button"
-          className="btn btn-outline-dark me-1"
+          className="btn btn-outline-dark me-1 float-end"
           data-bs-dismiss="modal"
           onClick={() => {
             resetForm();

diff --git a/web/src/components/forms/upload-schema-form.tsx b/web/src/components/forms/upload-schema-form.tsx
@@ -54,7 +54,7 @@ export const SchemaUploadForm = (props: Props) => {
   const { isPending: isUploading, upload } = useUploadSchemaFile();
 
   return (
-    <form id="upload-form" className="border-0 form-control">
+    <form id="upload-form" className="border-0 form-control p-0">
       {/* <div className="mb-3 mt-3 form-check form-switch">
         <input
           className="form-check-input"
@@ -68,9 +68,9 @@ export const SchemaUploadForm = (props: Props) => {
           Private
         </label>
       </div> */}
-      <div className="namespace-name-tag-container">
-        <label className="fw-bold text-sm">Namespace *</label>
-        <label className="fw-bold text-sm">Name *</label>
+      <div className="namespace-name-tag-container mt-2">
+        <label className="fw-semibold text-sm">Namespace*</label>
+        <label className="fw-semibold text-sm">Name*</label>
       </div>
       <div className="namespace-name-tag-container fs-4">
         <div className="d-flex flex-row align-items-center justify-content-between w-full ">
@@ -107,13 +107,11 @@ export const SchemaUploadForm = (props: Props) => {
           />
         </div>
       </div>
-      <p className='text-xs'>
-        * Namespace and Schema Name are required.
-      </p>
       <ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
+      <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
-        className="form-control mt-3"
+        className="form-control"
         rows={3}
         placeholder="Describe your schema."
         {...register('description')}
@@ -139,6 +137,9 @@ export const SchemaUploadForm = (props: Props) => {
       ) : (
         <FileDropZone name="file" control={control} multiple={false} innerRef={fileDialogRef} />
       )}
+      <p className='text-xs mt-1'>
+        * Namespace and Schema Name are required.
+      </p>
       <div className="mt-2">
         <button
           onClick={() => {