task/WG-232-React-Listing-UI (#268)

* task/WG-232-React-Listing-UI-clean

* - Linting

* - Adds better response and error handling.
- Brings over EmptyTablePlaceholder from TUP UI
that CMD collaborated with us on

* - Linting

* - Addresses Type 'ReactNode' is not assignable to
type 'NonNullable<ReactNodeLike>' error in unit test

* - Linting

* - Address changes - removed fontawesome,
error handling, removed global styles to apply at end

* - Addresses changes
- Centers error and no data
messages
- Linting
- TODO hover behavior

* - Linting

* - Undoing unnecessary diff

* - Adds hover function

* - Fixes hover change to reduce diff

* - Adds placeholder for empty DS projects

* - Removes issue with width
- Adds width for error message

* - Linting

* - Casts error message to avoid type issues
- Addresses incomplete merge
- Adds style so icon changes color on hover

* - Ensures content fits within column containers

* - Linting

react/src/components/Projects/ProjectListing.module.css

@@ -0,0 +1,50 @@
+.root {
+  display: flex;
+  width: 100%;
+}
+.projectList {
+  width: 100%;
+  table-layout: fixed;
+  padding: 10px;
+}
+.errorMessage {
+  width: 100%;
+  padding: 10px;
+}
+.projectList th {
+  background: #d0d0d0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.projectList tr,
+td {
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.projectList tr:hover td {
+  color: white;
+  background-color: var(--global-color-accent--light);
+}
+.projectList tr:hover td button {
+  color: white;
+}
+.mapColumn {
+  width: 42%;
+}
+.projectColumn {
+  width: 42%;
+}
+.buttonColumn {
+  width: 16%;
+  text-align: end;
+}
+.buttonColumn button {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  justify-content: flex-start;
+}

react/src/components/Projects/ProjectListing.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import { useProjectsWithDesignSafeInformation } from '@hazmapper/hooks';
-import { Button, LoadingSpinner } from '@tacc/core-components';
+import { Button, LoadingSpinner, SectionMessage } from '@tacc/core-components';
+import { EmptyTablePlaceholder } from '../utils';
+import styles from './ProjectListing.module.css';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import DeleteMapModal from '../DeleteMapModal/DeleteMapModal';
 import { Project } from '../../types';
 import { useNavigate } from 'react-router-dom';
 
-export const ProjectListing: React.FC = () => {
+const ProjectListing: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedProjectForDeletion, setSelectedProjectForDeletion] =
     useState<Project | null>(null);
@@ -20,74 +22,93 @@ export const ProjectListing: React.FC = () => {
     setIsModalOpen(!isModalOpen);
   };
 
-  const { data, isLoading, isError } = useProjectsWithDesignSafeInformation();
+  const { data, isLoading, isError, error } =
+    useProjectsWithDesignSafeInformation();
 
   if (isLoading) {
     return <LoadingSpinner />;
   }
 
   if (isError) {
-    return <h4>Unable to retrieve projects</h4>;
+    return (
+      <div className={styles.root}>
+        <div className={styles.errorMessage}>
+          <SectionMessage type="error">
+            There was an error gathering your maps.{' '}
+            {error?.message ? error?.message : 'An unknown error occurred.'}
+            <br />
+            <a
+              href="https://www.designsafe-ci.org/help/new-ticket/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Click here to submit a ticket to DesignSafe.
+            </a>
+          </SectionMessage>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <>
-      <table>
+    <div className={styles.root}>
+      <table className={styles.projectList}>
         <thead>
           <tr>
-            <th>Map</th>
-            <th>Project</th>
-            <th>
+            <th className={styles.mapColumn}>Map</th>
+            <th className={styles.projectColumn}>Project</th>
+            <th className={styles.buttonColumn}>
               <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
-              <Button onClick={toggleModal} size="small">
+              <Button onClick={toggleModal} type="link" iconNameBefore="add">
                 Create a New Map
               </Button>
             </th>
           </tr>
         </thead>
         <tbody>
-          {data?.map((proj) => (
-            <tr key={proj.id}>
-              <td>
-                {' '}
-                <Button
-                  type="link"
-                  onClick={() => navigateToProject(proj.uuid)}
-                >
-                  {proj.name}
-                </Button>
-              </td>
-              <td>
-                {' '}
-                <Button
-                  type="link"
-                  onClick={() => navigateToProject(proj.uuid)}
-                >
+          {data && data?.length > 0 ? (
+            data.map((proj) => (
+              <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
+                <td className={styles.mapColumn}>{proj.name}</td>
+                <td className={styles.projectColumn}>
                   {proj.ds_project
                     ? `${proj.ds_project?.value.projectId} |
                 ${proj.ds_project?.value.title}`
                     : '---------'}
-                </Button>
-              </td>
-              <td>
-                <Button iconNameBefore="edit-document"></Button>
-                <Button
-                  iconNameBefore="trash"
-                  onClick={() => setSelectedProjectForDeletion(proj)}
-                ></Button>
-              </td>
-            </tr>
-          ))}
+                </td>
+                <td className={styles.buttonColumn}>
+                  <Button type="link" iconNameBefore="edit-document"></Button>
+                  <Button
+                    type="link"
+                    iconNameBefore="trash"
+                    onClick={() => setSelectedProjectForDeletion(proj)}
+                  ></Button>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <td colSpan={3}>
+              <EmptyTablePlaceholder type="info">
+                No maps found.
+                <br />
+                <Button type="link" onClick={toggleModal}>
+                  Create New Map
+                </Button>{' '}
+                to get started.
+              </EmptyTablePlaceholder>
+            </td>
+          )}
         </tbody>
       </table>
-
       {selectedProjectForDeletion && (
         <DeleteMapModal
           isOpen={!!selectedProjectForDeletion}
           close={() => setSelectedProjectForDeletion(null)}
           project={selectedProjectForDeletion}
         />
       )}
-    </>
+    </div>
   );
 };
+
+export default ProjectListing;

react/src/components/Projects/index.ts

@@ -1 +1 @@
-export { ProjectListing } from './ProjectListing';
+export { default } from './ProjectListing';

react/src/components/utils/EmptyTablePlaceholder.module.css

@@ -0,0 +1,12 @@
+/* Table Placeholder */
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty > :first-child {
+  margin-top: 10px;
+  padding: 50px;
+  border: 1px solid var(--global-color-primary--dark);
+}

react/src/components/utils/EmptyTablePlaceholder.tsx

@@ -0,0 +1,25 @@
+import { SectionMessage } from '@tacc/core-components';
+import styles from './EmptyTablePlaceholder.module.css';
+import React from 'react';
+
+interface EmptyPlaceholderProps {
+  children?: React.ReactNode;
+  type: 'error' | 'warning' | 'info' | 'success';
+}
+
+export const EmptyTablePlaceholder: React.FC<EmptyPlaceholderProps> = ({
+  children,
+  type,
+}) => {
+  return (
+    <div className={styles['empty']}>
+      {children ? (
+        <SectionMessage type={type}>{children}</SectionMessage>
+      ) : (
+        <SectionMessage type={type}>No data available.</SectionMessage>
+      )}
+    </div>
+  );
+};
+
+export default EmptyTablePlaceholder;

react/src/components/utils/index.ts

@@ -0,0 +1 @@
+export { default as EmptyTablePlaceholder } from './EmptyTablePlaceholder';

react/src/hazmapper.css

@@ -1,10 +1,7 @@
-@import url('@tacc/core-styles/dist/core-styles.base.css');
-@import url('@tacc/core-styles/dist/core-styles.portal.css');
-
 /* for hazmapper specific overwrites of base and portal styles" like,
 
 :root {
-  --global-color-accent--xx-light: blue;
+--global-color-accent--xx-light: blue;
 }
 */
 

react/src/hooks/projects/useProjects.ts

@@ -7,6 +7,10 @@ import {
 } from '@hazmapper/types';
 import { useGet, useDelete } from '@hazmapper/requests';
 
+type QueryError = {
+  message?: string;
+};
+
 export const useProjects = (): UseQueryResult<Project[]> => {
   const query = useGet<Project[]>({
     endpoint: '/projects/',
@@ -49,7 +53,8 @@ export const useDsProjects = (): UseQueryResult<
 };
 
 export function useProjectsWithDesignSafeInformation(): UseQueryResult<
-  Project[]
+  Project[],
+  QueryError
 > {
   const dsProjectQuery = useDsProjects();
   const projectQuery = useProjects();
@@ -77,8 +82,8 @@ export function useProjectsWithDesignSafeInformation(): UseQueryResult<
     isLoading: dsProjectQuery.isLoading || projectQuery.isLoading,
     isError: dsProjectQuery.error || projectQuery.error,
     isSuccess: dsProjectQuery.isSuccess && projectQuery.isSuccess,
-    error: dsProjectQuery.error || projectQuery.error,
-  } as UseQueryResult<Project[]>;
+    error: (dsProjectQuery.error || projectQuery.error) as QueryError,
+  } as UseQueryResult<Project[], QueryError>;
 }
 
 export const useDeleteProject = (projectId: number) => {

react/src/index.css

@@ -3,7 +3,7 @@
 /* prettier-ignore */
 @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
 
-@import url('@tacc/core-styles/dist/core-styles.base.css'); /* layer(base);*/
-@import url('@tacc/core-styles/dist/core-styles.portal.css'); /* layer(base);*/
+@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base);
+@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base);
 
 @import url('./hazmapper.css') layer(project);

react/src/pages/MainMenu/MainMenu.tsx

@@ -7,7 +7,7 @@ import {
 } from '@tacc/core-components';
 import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import { SystemSelect } from '@hazmapper/components/Systems';
-import { ProjectListing } from '@hazmapper/components/Projects/ProjectListing';
+import ProjectListing from '@hazmapper/components/Projects/ProjectListing';
 
 const MainMenu = () => {
   const {