A number of misc minor polishings and fixes for the demo today, inclu…

…ding... use TrakBaseSerializer for removing null fields before sending to RCRAInfo for additional Info serializer Add a new Group called Org Admin that has permission to see all haztrak specific model instances sidebar html structure fixes misc aria fixes update HtSpinner props to allow for automatic centering adjust logic for manifest Floating Action Buttons
USEPA · Dec 15, 2023 · 8e168ba · 8e168ba
1 parent 17d9150
commit 8e168ba
Show file tree

Hide file tree

Showing 23 changed files with 198 additions and 94 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -45,7 +45,7 @@ function App(): ReactElement {
       <Notifications />
       <Suspense
         fallback={
-          <Container fluid className="d-flex justify-content-center vh-100">
+          <Container fluid className="d-flex justify-content-center align-items-center vh-100">
             <HtSpinner size="6x" className="my-auto" />
           </Container>
         }

diff --git a/client/src/components/Layout/Nav/NavItem.tsx b/client/src/components/Layout/Nav/NavItem.tsx
@@ -4,6 +4,7 @@ import { NavContext, NavContextProps } from 'components/Layout/Root';
 import { Route } from 'components/Layout/Sidebar/SidebarRoutes';
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { NavLink } from 'react-bootstrap';
 
 interface NavItemProps {
   route: Route;
@@ -18,13 +19,14 @@ export function NavItem({ route, targetBlank }: NavItemProps) {
   };
 
   return (
-    <Link
+    <NavLink
       className="text-decoration-none text-dark py-2 d-flex align-items-center "
+      as={Link}
       to={route.url}
       target={targetBlank ? '_blank' : undefined}
       onClick={toggleSidebar}
     >
-      <FontAwesomeIcon icon={route.icon} className="me-2 text-primary" />
+      <FontAwesomeIcon icon={route.icon} className="me-2 text-primary ms-2" size="lg" />
       <span className=" mb-0">{route.text}</span>
       {route.external && (
         <FontAwesomeIcon
@@ -33,6 +35,6 @@ export function NavItem({ route, targetBlank }: NavItemProps) {
           size="xs"
         />
       )}
-    </Link>
+    </NavLink>
   );
 }
diff --git a/client/src/components/Layout/Nav/NavSection.tsx b/client/src/components/Layout/Nav/NavSection.tsx
@@ -10,39 +10,17 @@ interface SidebarSectionProps {
 }
 
 export function NavSection({ section }: SidebarSectionProps) {
-  const [collapsed, setCollapsed] = useState(true);
   return (
     <>
-      {/*<Button*/}
-      {/*  className="border-0 shadow-none bg-transparent d-flex py-2 ps-0 position-relative align-items-center"*/}
-      {/*  onClick={() => setCollapsed(!collapsed)}*/}
-      {/*  aria-controls="collapseSite"*/}
-      {/*  aria-expanded={collapsed}*/}
-      {/*>*/}
-      {/*  <h3 className="h5 text-dark">{section.name}</h3>*/}
-      {/*  <span*/}
-      {/*    className={`sb-sidenav-collapse-arrow nav-dropdown-arrow d-inline-block ms-auto text-secondary ${*/}
-      {/*      !collapsed ? '' : 'rotate-90-cc'*/}
-      {/*    } `}*/}
-      {/*  >*/}
-      {/*    <FontAwesomeIcon icon={faAngleDown} size="lg" />*/}
-      {/*  </span>*/}
-      {/*</Button>*/}
-      {/*<Collapse in={!collapsed}>*/}
-      {/*  <div className="ms-3">*/}
-      <p className="mt-2 mb-1">
-        {section.name}
-        <hr className="my-0" />
-      </p>
+      <hr className="my-0" />
+      <p className="text-secondary mt-1 mb-1">{section.name}</p>
       {section.routes.map((route) => {
         return (
           <div key={route.id}>
             <NavItem route={route} />
           </div>
         );
       })}
-      {/*  </div>*/}
-      {/*</Collapse>*/}
     </>
   );
 }
diff --git a/client/src/components/Layout/Root.tsx b/client/src/components/Layout/Root.tsx
@@ -26,13 +26,7 @@ export function Root() {
         <Sidebar />
         <Container fluid>
           <ErrorBoundary>
-            <Suspense
-              fallback={
-                <Container fluid className="d-flex justify-content-center vh-100">
-                  <HtSpinner size="6x" className="my-auto" />
-                </Container>
-              }
-            >
+            <Suspense fallback={<HtSpinner center className="my-auto" />}>
               <Outlet />
             </Suspense>
           </ErrorBoundary>

diff --git a/client/src/components/Manifest/Buttons/ManifestFABs.tsx b/client/src/components/Manifest/Buttons/ManifestFABs.tsx
@@ -14,7 +14,7 @@ export function ManifestFABs({ onSignClick }: ManifestActionBtnsProps) {
   const { nextSigningSite, readOnly, status, signAble } = useContext(ManifestContext);
   const rcraSiteType = manifest.siteTypeToRcraSiteType(nextSigningSite?.siteType);
   let component: ReactElement | undefined = undefined;
-  if (!readOnly || status === 'NotAssigned') {
+  if (!readOnly) {
     component = <ManifestSaveBtn />;
   } else if (signAble) {
     component = <QuickSignBtn siteType={rcraSiteType} onClick={onSignClick} />;

diff --git a/client/src/components/Manifest/Handler/Search/HandlerSearchForm.tsx b/client/src/components/Manifest/Handler/Search/HandlerSearchForm.tsx
@@ -1,9 +1,9 @@
 import { ManifestContext, ManifestContextType } from 'components/Manifest/ManifestForm';
 import { Manifest, SiteType, Transporter } from 'components/Manifest/manifestSchema';
 import { RcraSite } from 'components/RcraSite';
-import { HtForm, HtSpinner, HtTooltip } from 'components/UI';
+import { HtForm } from 'components/UI';
 import React, { useContext, useEffect, useState } from 'react';
-import { Badge, Button, Col, Row } from 'react-bootstrap';
+import { Button, Col, Row } from 'react-bootstrap';
 import {
   Controller,
   SubmitHandler,
@@ -104,10 +104,6 @@ export function HandlerSearchForm({
     setOptions([...allOptions]);
   }, [data, rcrainfoData]);
 
-  useEffect(() => {
-    setRcrainfoSitesLoading(isLoading || fetchingFromRcrainfo);
-  }, [isLoading, fetchingFromRcrainfo]);
-
   const handleInputChange = async (value: string) => {
     setInputValue(value);
   };
@@ -126,7 +122,7 @@ export function HandlerSearchForm({
             </Col>
             <Col className="d-flex justify-content-end">
               <RcrainfoSiteSearchBadge
-                isFetching={rcrainfoSitesLoading}
+                isFetching={fetchingFromRcrainfo}
                 error={rcrainfoError}
                 data={rcrainfoData}
                 rcraInfoIntegrated={org?.rcrainfoIntegrated || false}

diff --git a/client/src/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx b/client/src/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge.tsx
@@ -18,10 +18,12 @@ export function RcrainfoSiteSearchBadge({
   rcraInfoIntegrated,
 }: RcrainfoInfoStatusProps) {
   let bg = 'secondary';
+  let text = 'white';
   let message = 'Ready to search RCRAInfo';
   if (!rcraInfoIntegrated) {
     message = 'RCRAInfo not integrated';
     bg = 'warning';
+    text = 'dark';
   }
   if (error) {
     message = 'Error searching RCRAInfo';
@@ -36,7 +38,7 @@ export function RcrainfoSiteSearchBadge({
 
   return (
     <div className="my-2">
-      <Badge bg={bg} pill>
+      <Badge className="p-2" bg={bg} text={text} pill>
         <span>{message}</span>
         {isFetching ? (
           <HtSpinner size="lg" />

diff --git a/client/src/components/Manifest/ManifestForm.tsx b/client/src/components/Manifest/ManifestForm.tsx
@@ -117,12 +117,9 @@ export function ManifestForm({
     resolver: zodResolver(manifestSchema),
   });
   const {
-    watch,
     formState: { errors },
   } = manifestForm;
 
-  console.log(watch('designatedFacility'));
-
   useEffect(() => {
     if (createData) {
       if ('manifestTrackingNumber' in createData) {
@@ -270,12 +267,12 @@ export function ManifestForm({
         <FormProvider {...manifestForm}>
           <HtForm onSubmit={manifestForm.handleSubmit(onSubmit)}>
             <div className="d-flex justify-content-between">
-              <h2 className="fw-bold mt-2">
+              <h1 className="fw-bold mt-2 h2">
                 {`${manifestData?.manifestTrackingNumber || 'Draft Manifest'}`}
                 {manifestData?.manifestTrackingNumber?.endsWith('DFT') && (
                   <sup className="text-info"> (draft)</sup>
                 )}
-              </h2>
+              </h1>
             </div>
             <Stack direction="vertical" gap={3} className="px-0 px-sm-3 px-md-5">
               <HtCard id="general-form-card" title="General Info">
@@ -505,7 +502,7 @@ export function ManifestForm({
                           horizontalAlign
                           onClick={toggleShowAddGenerator}
                           children={'Add Generator'}
-                          variant="outline-info"
+                          variant="outline-primary"
                         />
                       </Row>
                       <Row>
@@ -545,7 +542,7 @@ export function ManifestForm({
                     <HtButton
                       onClick={toggleTranSearchShow}
                       children={'Add Transporter'}
-                      variant="outline-info"
+                      variant="outline-primary"
                       horizontalAlign
                     />
                   )}
@@ -574,7 +571,7 @@ export function ManifestForm({
                     <HtButton
                       onClick={toggleWlFormShow}
                       children={'Add Waste'}
-                      variant="outline-info"
+                      variant="outline-primary"
                       horizontalAlign
                     />
                   )}
@@ -615,7 +612,7 @@ export function ManifestForm({
                     <HtButton
                       onClick={toggleTsdfFormShow}
                       children={'Add TSDF'}
-                      variant="outline-info"
+                      variant="outline-primary"
                       horizontalAlign
                     />
                   )}

diff --git a/client/src/components/Manifest/UpdateRcra/UpdateRcra.tsx b/client/src/components/Manifest/UpdateRcra/UpdateRcra.tsx
@@ -46,7 +46,7 @@ export function UpdateRcra({ taskId }: UpdateRcraProps) {
   } else {
     return (
       <div className="overlay-spinner">
-        <HtSpinner className="text-light" size="5x" />
+        <HtSpinner center className="text-light" />
       </div>
     );
   }

diff --git a/client/src/components/RcraProfile/RcraProfile.tsx b/client/src/components/RcraProfile/RcraProfile.tsx
@@ -67,13 +67,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
       .catch((error: AxiosError) => toast.error(error.message));
   };
 
-  if (profile.isLoading) {
-    return (
-      <Container>
-        <HtSpinner />
-      </Container>
-    );
-  }
+  if (profile.isLoading) return <HtSpinner center />;
 
   return (
     <>
@@ -166,7 +160,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
       <Container>
         <h4>RCRAInfo Sites</h4>
         {inProgress ? (
-          <HtSpinner />
+          <HtSpinner center />
         ) : (
           <Table striped bordered hover responsive>
             <thead>

diff --git a/client/src/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.tsx b/client/src/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.tsx
@@ -13,8 +13,10 @@ export function RcraApiUserBtn({ children, ...props }: HtApiUserBtnProps) {
   const active = !props.disabled && profile.org?.rcrainfoIntegrated;
 
   return (
-    <Button {...props} disabled={!active}>
-      {children}
-    </Button>
+    <>
+      <Button {...props} disabled={!active}>
+        {children}
+      </Button>
+    </>
   );
 }
diff --git a/client/src/components/UI/HtCard/HtCard.tsx b/client/src/components/UI/HtCard/HtCard.tsx
@@ -24,7 +24,7 @@ export function HtCard({ className, title, children, ...props }: CardProps): Rea
     <div {...props} className={classAttributes}>
       {title ? (
         <div className="row d-flex justify-content-start m-1 mb-0">
-          <h3 className="mb-0">{title}</h3>
+          <h2 className="mb-0 h3">{title}</h2>
         </div>
       ) : (
         <></>

diff --git a/client/src/components/UI/HtSpinner.tsx b/client/src/components/UI/HtSpinner.tsx
@@ -1,21 +1,28 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faGear } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import React, { ReactElement } from 'react';
+import { Container } from 'react-bootstrap';
 
 interface HtSpinnerProps extends Omit<FontAwesomeIconProps, 'icon'> {
-  className?: string;
+  center?: boolean;
+  icon?: IconProp;
 }
 
-export function HtSpinner({ className, size }: HtSpinnerProps): ReactElement {
+export function HtSpinner({ className, size, center, ...props }: HtSpinnerProps): ReactElement {
   const defaultCLasses = 'text-muted bg-transparent';
   return (
-    <>
+    <Container
+      fluid
+      className={center ? 'd-flex justify-content-center align-items-center m-5' : ''}
+    >
       <FontAwesomeIcon
         icon={faGear}
         className={`${defaultCLasses} ${className}`}
         spin
-        size={size ?? '2xl'}
+        size={size ?? '6x'}
+        {...props}
       />
-    </>
+    </Container>
   );
 }
diff --git a/client/src/components/User/UserInfoForm.tsx b/client/src/components/User/UserInfoForm.tsx
@@ -45,20 +45,15 @@ export function UserInfoForm({ user, profile }: UserProfileProps) {
       .catch((error: AxiosError) => toast.error(error.message));
   };
 
-  if (user?.isLoading || profile?.loading) {
-    return (
-      <Container>
-        <HtSpinner />
-      </Container>
-    );
-  }
+  if (user?.isLoading || profile?.loading) return <HtSpinner center />;
 
   return (
     <HtForm onSubmit={handleSubmit(onSubmit)}>
       <Row className="p-2">
         <input
           type="file"
           accept="image/png,image/jpeg"
+          aria-label="Profile Picture"
           ref={fileRef}
           style={{ display: 'none' }}
         />

diff --git a/client/src/features/ManifestList/ManifestList.tsx b/client/src/features/ManifestList/ManifestList.tsx
@@ -40,7 +40,7 @@ export function ManifestList(): ReactElement {
         <HtCard>
           <HtCard.Body>
             {isLoading ? (
-              <HtSpinner />
+              <HtSpinner center />
             ) : data ? (
               <MtnTable manifests={data} pageSize={pageSize} />
             ) : (

diff --git a/client/src/features/MmanifestDetails/ManifestDetails.tsx b/client/src/features/MmanifestDetails/ManifestDetails.tsx
@@ -26,7 +26,7 @@ export function ManifestDetails() {
   }
 
   return loading ? (
-    <HtSpinner />
+    <HtSpinner center />
   ) : manifestData ? (
     <ManifestForm
       manifestData={manifestData}

diff --git a/client/src/features/SiteDetails/SiteDetails.tsx b/client/src/features/SiteDetails/SiteDetails.tsx
@@ -20,7 +20,7 @@ export function SiteDetails(): ReactElement {
   const navigate = useNavigate();
 
   if (error) throw error;
-  if (isLoading) return <HtSpinner />;
+  if (isLoading) return <HtSpinner center />;
   if (data)
     return (
       <Container>

diff --git a/client/src/features/SiteList/SiteList.tsx b/client/src/features/SiteList/SiteList.tsx
@@ -11,13 +11,13 @@ export function SiteList() {
   useTitle('Sites');
   const { data, isLoading, error } = useGetUserHaztrakSitesQuery(); // ToDO global error handling
 
+  if (isLoading) return <HtSpinner center size="6x" />;
+
   return (
     <Container className="my-3">
       <HtCard title="My Sites">
         <HtCard.Body>
-          {isLoading && !error ? (
-            <HtSpinner />
-          ) : data ? (
+          {data ? (
             <SiteListGroup sites={data} />
           ) : (
             <div className="text-muted text-center">