From 3131ecb959bd31ea3109f8ac10d85e79eea13ea6 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Tue, 17 Sep 2024 15:14:21 -0400
Subject: [PATCH] split combined error message component and cleaned up browse
 page slightly

---
 web/src/components/browse/namespace-grid.tsx  |   4 +-
 .../components/browse/namespace-long-row.tsx  |   4 +-
 .../components/browse/project-accordion.tsx   |   6 +-
 .../components/forms/blank-project-form.tsx   |  32 +----
 .../components/combined-error-message.tsx     |  49 ++++++++
 .../components/forms/create-schema-form.tsx   |  25 +---
 web/src/components/forms/pop-form.tsx         |  32 +----
 .../components/forms/project-upload-form.tsx  |  36 +-----
 .../components/forms/upload-schema-form.tsx   |  25 +---
 web/src/pages/Browse.tsx                      |   6 +-
 web/src/pages/Namespace.tsx                   |   1 +
 web/src/pages/Schemas copy.tsx                | 110 ------------------
 12 files changed, 72 insertions(+), 258 deletions(-)
 create mode 100644 web/src/components/forms/components/combined-error-message.tsx
 delete mode 100644 web/src/pages/Schemas copy.tsx

diff --git a/web/src/components/browse/namespace-grid.tsx b/web/src/components/browse/namespace-grid.tsx
index 33ad4a71..0ca136ec 100644
--- a/web/src/components/browse/namespace-grid.tsx
+++ b/web/src/components/browse/namespace-grid.tsx
@@ -18,7 +18,7 @@ export const NamespaceGrid = (props: Props) => {
   return (
     <div className="row mt-1">
       <div className="col-12 col-lg-10 offset-lg-1">
-        <div className="row row-cols-1 row-cols-sm-3 row-cols-xl-5 g-lg-4 g-3">
+        <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xxl-5 g-lg-4 g-3">
           {namespaces && (
             Object.values(namespaces).map((item, index: number) => (
               <div key={index} className="col">
@@ -30,7 +30,7 @@ export const NamespaceGrid = (props: Props) => {
                       </a>
                     </p>
                     <p className={`card-text mb-2 text-sm ${item?.namespace === selectedNamespace ? 'fw-medium' : 'fw-normal'}`}>
-                      {item?.number_of_projects} Projects
+                      {item?.number_of_projects} {item?.number_of_projects === 1 ? 'Project' : 'Projects'}
                     </p>
                   </div>
                 </div>
diff --git a/web/src/components/browse/namespace-long-row.tsx b/web/src/components/browse/namespace-long-row.tsx
index 0dcae945..e1933e8f 100644
--- a/web/src/components/browse/namespace-long-row.tsx
+++ b/web/src/components/browse/namespace-long-row.tsx
@@ -59,7 +59,7 @@ export const NamespaceLongRow = (props: Props) => {
             <div 
               key={index} 
               ref={(el) => { itemRefs.current[item.namespace] = el; }}
-              className="col-xl-2 col-md-4 flex-shrink-0" 
+              className="col-xxl-2 col-lg-3 col-md-4 col-sm-6 flex-shrink-0" 
               style={{ scrollSnapAlign: 'start' }}
             >
               <div className={`card shadow-sm position-relative cursor-pointer ${item?.namespace === selectedNamespace ? 'bg-primary-subtle' : 'bg-body-tertiary namespace-card'}`}>
@@ -70,7 +70,7 @@ export const NamespaceLongRow = (props: Props) => {
                     </a>
                   </p>
                   <p className={`card-text mb-2 text-sm ${item?.namespace === selectedNamespace ? 'fw-medium' : 'fw-normal'}`}>
-                    {item?.number_of_projects} Projects
+                    {item?.number_of_projects} {item?.number_of_projects === 1 ? 'Project' : 'Projects'}
                   </p>
                 </div>
               </div>
diff --git a/web/src/components/browse/project-accordion.tsx b/web/src/components/browse/project-accordion.tsx
index 91161075..ca8ae125 100644
--- a/web/src/components/browse/project-accordion.tsx
+++ b/web/src/components/browse/project-accordion.tsx
@@ -28,15 +28,15 @@ export const ProjectAccordion = (props: Props) => {
               aria-controls={`collapse${key}`}
             >
               <span style={{minWidth: '2.5em'}}>{index + 1}.</span>
-              <span className='w-75'>{project.namespace}/<span className='fw-semibold'>{project.name}</span>:{project.tag}</span>
+              <div className='col-lg-9 col-md-7'>{project.namespace}/<span className='fw-semibold'>{project.name}</span>:{project.tag}</div>
               
-              <span className='text-xs text-start d-flex justify-content-between' style={{width: '15%'}}>
+              <div className='d-none d-md-flex text-xs text-start justify-content-between' style={{width: '15%'}}>
 
                 <span className='ps-1' style={{minWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}><span className='fw-medium'>Sample Count: </span>{project.number_of_samples}</span>
                 <span> | </span>
                 <span className='ps-1' style={{minWidth: '20%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}><span className='fw-medium'>Stars: </span>{project.stars_number}</span>
 
-              </span>
+              </div>
             </button>
           </h2>
           <div
diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index 26e973c2..82cccb94 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -10,6 +10,7 @@ import { arraysToSampleList, sampleListToArrays } from '../../utils/sample-table
 import { ProjectConfigEditor } from '../project/project-config';
 import { SampleTable } from '../tables/sample-table';
 import { SchemaDropdown } from './components/schemas-databio-dropdown';
+import { CombinedErrorMessage } from './components/combined-error-message'
 
 interface BlankProjectInputs {
   is_private: boolean;
@@ -27,35 +28,6 @@ interface Props {
   defaultNamespace?: string;
 }
 
-type CombinedErrorMessageProps = {
-  errors: FieldErrors<BlankProjectInputs>;
-};
-
-const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors } = props;
-  const nameError = errors.project_name?.message;
-  const tagError = errors.tag?.message;
-  let msg = null;
-
-  if (nameError == 'empty' && !tagError) {
-    msg = 'Project Name must not be empty.';
-  } else if (nameError == 'invalid' && !tagError) {
-    msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'empty' && tagError == 'invalid') {
-    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'invalid' && tagError == 'invalid') {
-    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (!nameError && tagError == 'invalid') {
-    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'.";
-  }
-
-  if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
-  }
-
-  return null;
-};
-
 export const BlankProjectForm = (props: Props) => {
   const { onHide, defaultNamespace } = props;
   // get user innfo
@@ -175,7 +147,7 @@ sample_table: samples.csv
           placeholder="default" 
         />
       </div>
-      <CombinedErrorMessage errors={errors}/>
+      <CombinedErrorMessage errors={errors} formType={'project'}/>
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="blank_description"
diff --git a/web/src/components/forms/components/combined-error-message.tsx b/web/src/components/forms/components/combined-error-message.tsx
new file mode 100644
index 00000000..85a689cd
--- /dev/null
+++ b/web/src/components/forms/components/combined-error-message.tsx
@@ -0,0 +1,49 @@
+import { FC } from 'react';
+
+type CombinedErrorMessageProps = {
+  errors: FieldErrors<any>;
+  formType: string;
+};
+
+export const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
+  const { errors, formType } = props;
+
+  if (formType === 'schema') {
+    const nameError = errors.name?.message;
+    let msg = null;
+
+    if (nameError == 'empty') {
+      msg = 'Schema Name must not be empty.';
+    } else if (nameError == 'invalid') {
+      msg = "Schema Name must contain only alphanumeric characters, '.', '-', or '_'.";
+    }
+
+    if (nameError) {
+      return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
+    }
+    return null;
+  } else if (formType === 'project') {
+    const nameError = errors.project_name?.message;
+    const tagError = errors.tag?.message;
+    let msg = null;
+
+    if (nameError == 'empty' && !tagError) {
+      msg = 'Project Name must not be empty.';
+    } else if (nameError == 'invalid' && !tagError) {
+      msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
+    } else if (nameError == 'empty' && tagError == 'invalid') {
+      msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'.";
+    } else if (nameError == 'invalid' && tagError == 'invalid') {
+      msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'.";
+    } else if (!nameError && tagError == 'invalid') {
+      msg = "Project Tag must contain only alphanumeric characters, '-', or '_'.";
+    }
+
+    if (nameError || tagError) {
+      return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
+    }
+
+    return null;
+  }
+  
+};
\ No newline at end of file
diff --git a/web/src/components/forms/create-schema-form.tsx b/web/src/components/forms/create-schema-form.tsx
index 9bdbc8f8..458fc610 100644
--- a/web/src/components/forms/create-schema-form.tsx
+++ b/web/src/components/forms/create-schema-form.tsx
@@ -4,6 +4,7 @@ import { Controller, FieldErrors, useForm } from 'react-hook-form';
 
 import { useSession } from '../../contexts/session-context';
 import { useCreateSchemaMutation } from '../../hooks/mutations/useCreateSchemaMutation';
+import { CombinedErrorMessage } from './components/combined-error-message'
 
 const defaultSchemaYaml = `properties:
   samples:
@@ -43,28 +44,6 @@ type FormFields = {
   schemaYaml: string;
 };
 
-type CombinedErrorMessageProps = {
-  errors: FieldErrors<BlankSchemaInputs>;
-};
-
-const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors } = props;
-  const nameError = errors.name?.message;
-  let msg = null;
-
-  if (nameError == 'empty') {
-    msg = 'Schema Name must not be empty.';
-  } else if (nameError == 'invalid') {
-    msg = "Schema 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();
@@ -145,7 +124,7 @@ export const CreateSchemaForm = (props: Props) => {
           />
         </div>
       </div>
-      <CombinedErrorMessage errors={errors} />
+      <CombinedErrorMessage errors={errors} formType={'schema'} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         {...register('description')}
diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
index fbce5e4a..ad7d6c05 100644
--- a/web/src/components/forms/pop-form.tsx
+++ b/web/src/components/forms/pop-form.tsx
@@ -6,6 +6,7 @@ import { ProjectAnnotation } from '../../../types';
 import { useSession } from '../../contexts/session-context';
 import { usePopCreateMutation } from '../../hooks/mutations/usePopCreateMutation';
 import { PepSelector } from './components/pep-selector';
+import { CombinedErrorMessage } from './components/combined-error-message'
 
 interface POPInputs {
   is_private: boolean;
@@ -21,35 +22,6 @@ interface Props {
   defaultNamespace?: string;
 }
 
-type CombinedErrorMessageProps = {
-  errors: FieldErrors<POPInputs>;
-};
-
-const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors } = props;
-  const nameError = errors.project_name?.message;
-  const tagError = errors.tag?.message;
-  let msg = null;
-
-  if (nameError == 'empty' && !tagError) {
-    msg = 'Project Name must not be empty.';
-  } else if (nameError == 'invalid' && !tagError) {
-    msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'empty' && tagError == 'invalid') {
-    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'invalid' && tagError == 'invalid') {
-    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (!nameError && tagError == 'invalid') {
-    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'.";
-  }
-
-  if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
-  }
-
-  return null;
-};
-
 export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
   // get user innfo
   const { user } = useSession();
@@ -154,7 +126,7 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           />
         </div>
       </div>
-      <CombinedErrorMessage errors={errors} />
+      <CombinedErrorMessage errors={errors} formType={'project'} />
       <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
index e4190ad5..56fb2a91 100644
--- a/web/src/components/forms/project-upload-form.tsx
+++ b/web/src/components/forms/project-upload-form.tsx
@@ -9,6 +9,7 @@ import { popFileFromFileList } from '../../utils/dragndrop';
 import { GitHubAvatar } from '../badges/github-avatar';
 import { FileDropZone } from './components/file-dropzone';
 import { SchemaDropdown } from './components/schemas-databio-dropdown';
+import { CombinedErrorMessage } from './components/combined-error-message'
 
 interface FromFileInputs {
   is_private: boolean;
@@ -25,35 +26,6 @@ interface Props {
   defaultNamespace?: string;
 }
 
-type CombinedErrorMessageProps = {
-  errors: FieldErrors<FromFileInputs>;
-};
-
-const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors } = props;
-  const nameError = errors.name?.message;
-  const tagError = errors.tag?.message;
-  let msg = null;
-
-  if (nameError == 'empty' && !tagError) {
-    msg = 'Project Name must not be empty.';
-  } else if (nameError == 'invalid' && !tagError) {
-    msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'empty' && tagError == 'invalid') {
-    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (nameError == 'invalid' && tagError == 'invalid') {
-    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'.";
-  } else if (!nameError && tagError == 'invalid') {
-    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'.";
-  }
-
-  if (nameError || tagError) {
-    return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
-  }
-
-  return null;
-};
-
 export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
   // get user info
   const { user } = useSession();
@@ -77,7 +49,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
 
   const uploadFiles = watch('files');
   const namespace = watch('namespace');
-  const projectName = watch('name');
+  const projectName = watch('project_name');
   const tag = watch('tag');
   const description = watch('description');
   const isPrivate = watch('is_private');
@@ -131,7 +103,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
             className="form-control"
             placeholder="name"
             // dont allow any whitespace
-            {...register('name', {
+            {...register('project_name', {
               required: {
                 value: true,
                 message: "empty",
@@ -160,7 +132,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
           />
         </div>
       </div>
-      <CombinedErrorMessage errors={errors} />
+      <CombinedErrorMessage errors={errors} formType={'project'} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
diff --git a/web/src/components/forms/upload-schema-form.tsx b/web/src/components/forms/upload-schema-form.tsx
index 40f07a9f..b3db9f6a 100644
--- a/web/src/components/forms/upload-schema-form.tsx
+++ b/web/src/components/forms/upload-schema-form.tsx
@@ -7,6 +7,7 @@ import { useSession } from '../../contexts/session-context';
 import { useUploadSchemaFile } from '../../hooks/mutations/useUploadSchemaFile';
 import { GitHubAvatar } from '../badges/github-avatar';
 import { FileDropZone } from './components/file-dropzone';
+import { CombinedErrorMessage } from './components/combined-error-message'
 
 type FromFileInputs = {
   isPrivate: boolean;
@@ -22,28 +23,6 @@ type Props = {
   defaultNamespace?: string;
 };
 
-type CombinedErrorMessageProps = {
-  errors: FieldErrors<FromFileInputs>;
-};
-
-const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors } = props;
-  const nameError = errors.name?.message;
-  let msg = null;
-
-  if (nameError == 'empty') {
-    msg = 'Schema Name must not be empty.';
-  } else if (nameError == 'invalid') {
-    msg = "Schema 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;
 
@@ -132,7 +111,7 @@ export const SchemaUploadForm = (props: Props) => {
           />
         </div>
       </div>
-      <CombinedErrorMessage errors={errors} />
+      <CombinedErrorMessage errors={errors} formType={'schema'} />
       <label className="fw-semibold text-sm mt-2">Description</label>
       <textarea
         id="description"
diff --git a/web/src/pages/Browse.tsx b/web/src/pages/Browse.tsx
index aa2c2246..0826213c 100644
--- a/web/src/pages/Browse.tsx
+++ b/web/src/pages/Browse.tsx
@@ -163,7 +163,7 @@ export function Browse() {
 
             <div className="row mt-0">
               <div className="col-12">
-                {topNamespace?.data?.results ? (
+                {topNamespace?.data?.results || isLoading ? (
                   <>
                     <div className="d-flex flex-wrap align-items-center justify-content-between">
                       <div className="fs-6 fw-medium pt-3">Top 10 Starred PEPs</div>
@@ -181,11 +181,11 @@ export function Browse() {
                       Want to see more? Visit the namespace to view remaining projects.
                     </p>
                   </>
-                ) : selectedNamespace ? (
+                ) : (
                   <div className="col-12 mt-4 text-center">
                     <LoadingSpinner />
                   </div>
-                ) : null}
+                )}
               </div>
             </div>
           </>
diff --git a/web/src/pages/Namespace.tsx b/web/src/pages/Namespace.tsx
index ac7ae83c..20ca7075 100644
--- a/web/src/pages/Namespace.tsx
+++ b/web/src/pages/Namespace.tsx
@@ -269,6 +269,7 @@ export const NamespacePage = () => {
           </Fragment>
         ) : view === 'schemas' ? (
           <Fragment>
+            <span /> {/* for some reason react duplicates star cards without this span */}
             <div className="mt-3">
               <SchemaListSearchBar
                 limit={schemaLimit}
diff --git a/web/src/pages/Schemas copy.tsx b/web/src/pages/Schemas copy.tsx
deleted file mode 100644
index 75c73066..00000000
--- a/web/src/pages/Schemas copy.tsx	
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from 'react';
-
-import { PageLayout } from '../components/layout/page-layout';
-import { CreateSchemaModal } from '../components/modals/create-schema-modal';
-import { SchemasPagePlaceholder } from '../components/schemas/placeholders/schemas-page-placeholder';
-import { SchemaCard } from '../components/schemas/schema-card';
-import { SchemasNav } from '../components/schemas/schemas-nav';
-import { useAllSchemas } from '../hooks/queries/useAllSchemas';
-import { useDebounce } from '../hooks/useDebounce';
-
-const NoSchemas = () => {
-  return (
-    <div
-      style={{
-        height: '400px',
-      }}
-      className="d-flex flex-column align-items-center justify-content-center w-100"
-    >
-      <p className="text-muted mb-0">No schemas found</p>
-      <i className="bi bi-emoji-smile-upside-down text-muted" style={{ fontSize: '2rem' }}></i>
-    </div>
-  );
-};
-
-export function Schemas() {
-  const [limit, setLimit] = useState(25);
-  const [offset, setOffset] = useState(0);
-  const [search, setSearch] = useState('');
-  const [orderBy, setOrderBy] = useState('update_date');
-  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
-  const [showCreateSchemaModal, setShowCreateSchemaModal] = useState(false);
-
-  const searchDebounced = useDebounce(search, 500);
-
-  const {
-    data: schemas,
-    isFetching: isLoading,
-    error,
-  } = useAllSchemas({
-    limit,
-    offset,
-    search: searchDebounced,
-    order,
-    orderBy,
-  });
-
-  const noSchemasInDatabase = schemas?.count === 0;
-
-  if (isLoading) {
-    return (
-      <PageLayout title="Schemas">
-        <div className="w-100">
-          <SchemasPagePlaceholder />
-        </div>
-      </PageLayout>
-    );
-  }
-
-  if (error) {
-    return (
-      <PageLayout title="Schemas">
-        <div className="w-100">
-          <div className="alert alert-danger" role="alert">
-            Error fetching schemas
-          </div>
-          <div>
-            <pre>{JSON.stringify(error, null, 2)}</pre>
-          </div>
-        </div>
-      </PageLayout>
-    );
-  }
-
-  return (
-    <PageLayout title="Schemas">
-      <div className="p-2">
-        <SchemasNav
-          limit={limit}
-          setLimit={setLimit}
-          offset={offset}
-          setOffset={setOffset}
-          orderBy={orderBy}
-          setOrderBy={setOrderBy}
-          order={order}
-          setOrder={setOrder}
-          search={search}
-          setSearch={setSearch}
-          setCreateModalOpen={setShowCreateSchemaModal}
-        />
-        <div className="d-flex flex-col align-items-center">
-          {noSchemasInDatabase ? (
-            <NoSchemas />
-          ) : (
-            <div className="schemas-grid w-100 py-2">
-              {schemas?.results.map((s, i) => (
-                <SchemaCard key={`${i}-${s.namespace}/${s.name}`} schema={s} />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-      <CreateSchemaModal
-        show={showCreateSchemaModal}
-        onHide={() => {
-          setShowCreateSchemaModal(false);
-        }}
-      />
-    </PageLayout>
-  );
-}