Task/wp 209 header, footer main menu (#282)

* task/WP-209-Footer-Main-Menu
- Adds assets

* - Moved assets to public
- Created Main Menu layout similar to prod

* - Need to merge in project listing to see if this
works

* Linting

* - Moves assets to src/assets
- Moves user guide link to ProjectListing component

* - Gets listing to scroll and take up whole pages
- Needs sticky header row

* Linting

* - Adds header component and footer
- Updates project listing and main menu to make table scroll
- Updates Main Menu page with header and footer

* - Prettier

* - Linting

* - Changes name to HeaderNavBar
- Implements Header to Map pages
- Used global header style height

* Left over unstaged changes from last commit

* Update react/src/pages/MainMenu/MainMenu.tsx

Co-authored-by: Nathan Franklin <[email protected]>

* Update react/src/pages/MainMenu/MainMenu.tsx

Co-authored-by: Nathan Franklin <[email protected]>

* Update react/src/pages/MainMenu/MainMenu.tsx

Co-authored-by: Nathan Franklin <[email protected]>

* - Regression in delete button

* - Factors out user hook to only HeaderNavBar
- Adds refetch to hook to get username after login
- Changes auth slice to store the user to state in a way that gets picked up by userData

* - Removes debugging test statement

* - Factors out user guide and logo to Main Menu
- Some adjustments for better container handling of listing

* - Updates test to include refetch

* - Removes unused flex container

* Removes refetch

* - Adds Taggit link

---------

Co-authored-by: Nathan Franklin <[email protected]>

react/src/components/HeaderNavBar/HeaderNavBar.module.css

@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  height: var(--hazmapper-header-navbar-height);
+}
+.userName {
+  color: white;
+}

react/src/components/HeaderNavBar/HeaderNavBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Layout } from 'antd';
+import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
+import { useNavigate } from 'react-router-dom';
+import { Button, InlineMessage, LoadingSpinner } from '@tacc/core-components';
+import styles from './HeaderNavBar.module.css';
+
+export const HeaderNavBar: React.FC = () => {
+  const { Header } = Layout;
+  const navigate = useNavigate();
+
+  const {
+    data: userData,
+    isLoading: isUserLoading,
+    error: isUserError,
+  } = useAuthenticatedUser();
+
+  const handleLogin = () => {
+    const url = `/login?to=${encodeURIComponent(location.pathname)}`;
+    navigate(url);
+  };
+
+  if (isUserLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (isUserError) {
+    return (
+      <InlineMessage type="error">
+        {' '}
+        There was an error loading your username.
+      </InlineMessage>
+    );
+  }
+
+  return (
+    <Header className={styles.root}>
+      <img
+        width="150px"
+        src="./src/assets/hazmapper-header-logo.png"
+        alt="Hazmapper Logo"
+      />
+      {userData && userData.username ? (
+        <div className={styles.userName}>{userData.username}</div>
+      ) : (
+        <Button type="link" className={styles.userName} onClick={handleLogin}>
+          Login
+        </Button>
+      )}
+    </Header>
+  );
+};
+export default HeaderNavBar;

react/src/components/HeaderNavBar/index.tsx

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

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

@@ -1,50 +1,90 @@
 .root {
   display: flex;
+  flex-direction: column;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+.errorMessage {
   width: 100%;
+  padding: 10px;
 }
+.errorMessage p {
+  justify-content: center;
+}
+
 .projectList {
-  width: 100%;
-  table-layout: fixed;
+  flex-grow: 1;
+  overflow: hidden;
+  justify-content: center;
   padding: 10px;
 }
-.errorMessage {
+
+.projectList table {
   width: 100%;
-  padding: 10px;
+  table-layout: fixed;
+  border-collapse: collapse;
 }
-.projectList th {
+
+.projectList thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   background: #d0d0d0;
+}
+
+.projectList thead th {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  background: #d0d0d0;
+}
+
+.projectList tbody {
+  display: block;
+  max-height: 300px;
+  overflow-y: auto;
 }
-.projectList tr,
-td {
+
+.projectList tr {
+  display: table;
   width: 100%;
+  table-layout: fixed;
   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%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .projectColumn {
   width: 42%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .buttonColumn {
   width: 16%;
   text-align: end;
 }
+
 .buttonColumn button {
   max-width: 100%;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   justify-content: flex-start;
 }