task/WG-232-React-Listing-UI

react/package.json

@@ -36,6 +36,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "@reduxjs/toolkit": "^1.8.4",
     "@tacc/core-styles": "^2.24.1",
     "@testing-library/react": "^13.4.0",

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

@@ -0,0 +1,47 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.projectList {
+  height: 270px;
+  border-collapse: collapse;
+  align-self: center;
+  overflow-y: scroll;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.projectHeader,
+.projectHeader th {
+  background: #d0d0d0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.projectListItemButton {
+  cursor: pointer;
+  color: initial;
+  margin-right: 10px;
+}
+
+.projectListItemButton:hover {
+  color: #666;
+}
+
+.mapColumn {
+  width: 30%;
+}
+.projectColumn {
+  width: 60%;
+}
+.buttonColumn {
+  white-space: nowrap;
+}
+
+.projectName {
+  max-width: fit-content;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

react/src/components/Projects/ProjectListing.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { useProjectsWithDesignSafeInformation } from '../../hooks';
 import { Button, LoadingSpinner, Icon } from '../../core-components';
+import styles from './ProjectListing.module.css';
+import { EmptyTablePlaceholder } from '../utils';
 import CreateMapModal from '../CreateMapModal/CreateMapModal';
 import { useNavigate } from 'react-router-dom';
 
-export const ProjectListing: React.FC = () => {
+const ProjectListing: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
 
@@ -22,45 +24,85 @@ export const ProjectListing: React.FC = () => {
     return <LoadingSpinner />;
   }
 
-  if (isError) {
-    return <h4>Unable to retrieve projects</h4>;
-  }
-
   return (
-    <>
-      <table>
-        <thead>
-          <tr>
-            <th>Map</th>
-            <th>Project</th>
-            <th>
-              <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
-              <Button onClick={toggleModal} size="small">
-                Create a New Map
-              </Button>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {data?.map((proj) => (
-            <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
-              <td>{proj.name}</td>
-              <td>
-                {proj.ds_project?.value.projectId}{' '}
-                {proj.ds_project?.value.title}
-              </td>
-              <td>
-                <Button>
-                  <Icon name="edit-document"></Icon>
+    <div className={styles.root}>
+      <div className={styles.projectList}>
+        <table>
+          <thead className={styles.projectHeader}>
+            <tr>
+              <th className={styles.mapColumn}>Map</th>
+              <th className={styles.projectColumn}>Project</th>
+              <th className={styles.buttonColumn}>
+                <CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
+                <Button
+                  onClick={toggleModal}
+                  type="link"
+                  className={styles.projectListItemButton}
+                >
+                  <Icon name="add" />
+                  Create a New Map
                 </Button>
-                <Button>
-                  <Icon name="trash"></Icon>
-                </Button>
-              </td>
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-    </>
+          </thead>
+          <tbody>
+            {isError && (
+              <tr>
+                <td colSpan={3}>
+                  <EmptyTablePlaceholder type="error">
+                    There was an error gathering your maps and projects. {''}
+                    <a
+                      href="https://www.designsafe-ci.org/help/new-ticket/"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Click here to submit a ticket on DesignSafe.
+                    </a>
+                  </EmptyTablePlaceholder>
+                </td>
+              </tr>
+            )}
+            {data && data.length > 0 ? (
+              data?.map((proj) => (
+                <tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
+                  <td className={styles.projectName}>{proj.name}</td>
+                  <td>
+                    {proj.ds_project?.value.projectId}
+                    {' - '}
+                    {proj.ds_project?.value.title}
+                  </td>
+                  <td>
+                    <Button
+                      type="link"
+                      className={styles.projectListItemButton}
+                    >
+                      <Icon name="edit-document" />
+                    </Button>
+                    <Button
+                      type="link"
+                      className={styles.projectListItemButton}
+                    >
+                      <Icon name="trash" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={3}>
+                  <EmptyTablePlaceholder type="info">
+                    No projects or maps found.
+                    <br />
+                    Click Create New Map above to get started.
+                  </EmptyTablePlaceholder>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </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 '../../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,5 +1,7 @@
-@import url('@tacc/core-styles/dist/core-styles.base.css');
-@import url('@tacc/core-styles/dist/core-styles.portal.css');
+@import 'leaflet/dist/leaflet.css';
+@import '@fortawesome/fontawesome-free/css/all.css';
+@import url('https://fonts.googleapis.com/css?family=Raleway');
+@import url('https://unpkg.com/[email protected]/dist/mapillary.min.css');
 
 /* for hazmapper specific overwrites of base and portal styles" like,
 
@@ -8,3 +10,18 @@
 }
 
 */
+
+/* CSS module styles taken from Angular styles.styl */
+:root {
+  --global-font-family: 'Raleway', san-serif;
+}
+html,
+body {
+  height: 100%;
+  font-family: var(--global-font-family);
+}
+table,
+form,
+button {
+  font-family: inherit;
+}

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,8 +7,7 @@ import {
 } from '../../core-components';
 import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
 import { SystemSelect } from '../../components/Systems';
-import { ProjectListing } from '../../components/Projects/ProjectListing';
-
+import ProjectListing from '../../components/Projects';
 function MainMenu() {
   const {
     data: userData,