welcome content (#472)

* update server dependencies

* UnderConstruction component for placeholder situations

* add react-table dependency

* NewManifestBtn component

* add 'Getting Started' card to homepage

client/package.json

@@ -31,6 +31,7 @@
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.8.0",
     "react-select": "^5.6.1",
+    "react-table": "^7.8.0",
     "sass": "^1.58.3",
     "web-vitals": "^3.0.2",
     "zod": "^3.21.4"

client/src/App.tsx

@@ -2,6 +2,7 @@ import { ErrorBoundary } from 'components/ErrorBoundary';
 import { HtCard } from 'components/Ht';
 import { Sidebar, TopNav } from 'components/Nav';
 import { PrivateRoute } from 'components/PrivateRoute';
+import { UnderConstruction } from 'features/comingSoon';
 import { About } from 'features/help';
 import { Home } from 'features/home';
 import { Login } from 'features/login';
@@ -22,7 +23,6 @@ function App(): ReactElement {
   const profile = useAppSelector<RcraProfileState>((state) => state.rcraProfile);
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  console.log('user', user);
 
   useEffect(() => {
     if (user) {
@@ -78,6 +78,7 @@ function App(): ReactElement {
                   </PrivateRoute>
                 }
               />
+              <Route path="/coming-soon" element={<UnderConstruction />} />
               <Route path="/login" element={<Login />} />
               <Route path="/about" element={<About />} />
               {/* If unknown route, display 404*/}

client/src/components/buttons/NewManifestBtn.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+interface NewManifestBtnProps {
+  siteId?: string;
+}
+
+export function NewManifestBtn({ siteId }: NewManifestBtnProps) {
+  const navigate = useNavigate();
+
+  // By default, don't create a new manifest as a specific site.
+  let newManifestURL = '/manifest/new';
+  if (siteId) {
+    newManifestURL = `/site/${siteId}/manifest/new`;
+  }
+
+  return (
+    <Button variant={'success'} onClick={() => navigate(newManifestURL)}>
+      New Manifest
+    </Button>
+  );
+}

client/src/features/comingSoon/UnderConstruction.tsx

@@ -0,0 +1,53 @@
+import { HtCard } from 'components/Ht';
+import React from 'react';
+import { Card, Col, Container, Row } from 'react-bootstrap';
+import { useTitle } from 'hooks';
+import underConstruction from '/under-construction.png';
+import { Link } from 'react-router-dom';
+
+/**
+ * Static page that talks about Haztrak's licensing, maybe versioning in future
+ * @constructor
+ * @example "<About/>"
+ */
+export function UnderConstruction() {
+  useTitle('Under Construction');
+  return (
+    <Container fluid className="text-lg-center py-4">
+      <Card bg={'warning'}>
+        <HtCard.Body>
+          <Card.Title>
+            <h1 className="fw-bold">Under Construction!</h1>
+          </Card.Title>
+          <Col>
+            <Row>
+              <Col className="d-flex justify-content-center">
+                <div className="rounded-circle bg-light p-5">
+                  <img
+                    src={underConstruction}
+                    alt="under construction sign"
+                    width={200}
+                    height={'auto'}
+                  />
+                </div>
+              </Col>
+            </Row>
+            <Row>
+              <h5 className="d-flex justify-content-center">
+                Looks like you've found something we haven't completed yet.
+              </h5>
+              <h5 className="d-flex justify-content-center">Don't worry, we're working on it.</h5>
+              <p>
+                If you'd like to show your interest for this feature,{' '}
+                <Link to={'https://github.com/USEPA/haztrak/issues'} target="_blank">
+                  let us know on our issue tracker
+                </Link>{' '}
+                by commenting on an existing issue or opening a new one.
+              </p>
+            </Row>
+          </Col>
+        </HtCard.Body>
+      </Card>
+    </Container>
+  );
+}

client/src/features/comingSoon/index.ts

@@ -0,0 +1,3 @@
+import { UnderConstruction } from 'features/comingSoon/UnderConstruction';
+
+export { UnderConstruction };

client/src/features/home/Home.spec.tsx

@@ -29,20 +29,6 @@ describe('Home', () => {
         },
       },
     });
-    expect(screen.getByText(/Hello/i)).toBeInTheDocument();
-  });
-  test('User information is retrieved', async () => {
-    // This is mostly just a placeholder. As the Home component expands we ce build on this
-    renderWithProviders(<Home />, {
-      preloadedState: {
-        user: {
-          user: username,
-          token: 'fake_token',
-          loading: false,
-          error: undefined,
-        },
-      },
-    });
-    expect(await screen.findByText('Hello testuser1!')).toBeInTheDocument();
+    expect(screen.getByText(/Welcome/i)).toBeInTheDocument();
   });
 });

client/src/features/home/Home.tsx

@@ -1,10 +1,15 @@
+import { faRecycle, faSignature, faTruck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NewManifestBtn } from 'components/buttons/NewManifestBtn';
 import { useTitle } from 'hooks';
 import React, { ReactElement, useEffect } from 'react';
+import { Accordion, Button, Col, Container, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 import { RootState, useAppDispatch, useAppSelector } from 'store';
 import { getExampleTask } from 'store/notificationSlice/notification.slice';
 import { getProfile } from 'store/rcraProfileSlice';
 import { UserState } from 'store/userSlice/user.slice';
-import { HtButton } from 'components/Ht';
+import { HtButton, HtCard } from 'components/Ht';
 
 /**
  * Home page for logged-in user, currently does not really include anything
@@ -21,8 +26,77 @@ export function Home(): ReactElement {
   }, [user]);
 
   return (
-    <div>
-      <h1>{`Hello ${user}!`}</h1>
+    <Container className="py-2">
+      <HtCard>
+        <Accordion>
+          <Accordion.Item eventKey={'0'}>
+            <Accordion.Header title="Getting Started">Welcome, let's get started</Accordion.Header>
+            <Accordion.Body>
+              <Row>
+                <Col className="text-center">
+                  <NewManifestBtn />
+                  <p>
+                    Create your first electronic manifest to track hazardous waste without ever
+                    logging into EPA's RCRAInfo system
+                  </p>
+                </Col>
+                <Col className="text-center">
+                  <Link to={'/profile'}>
+                    <Button variant="info text-light">Profile</Button>
+                  </Link>
+                  <p>
+                    Update your Profile with your RCRAInfo API ID & key so you can electronically
+                    manifest your waste through e-Manifest.
+                  </p>
+                </Col>
+                <Col className="text-center">
+                  <Link to={'/site'}>
+                    <Button variant="dark">My Sites</Button>
+                  </Link>
+                  <p>View your site's information, check that EPA has the right information.</p>
+                </Col>
+              </Row>
+            </Accordion.Body>
+          </Accordion.Item>
+        </Accordion>
+      </HtCard>
+      <HtCard>
+        <HtCard.Header title="Manifests" />
+        <HtCard.Body>
+          <Row>
+            <Col>
+              <h3 className="fw-bold d-flex justify-content-center">
+                <Link to={'/coming-soon'}>
+                  <Button variant={'info'} size={'lg'} className="rounded-circle p-3">
+                    <FontAwesomeIcon icon={faTruck} size={'2xl'} className="link-light" />
+                  </Button>
+                </Link>
+              </h3>
+              <p className="d-flex justify-content-center">Manifests in transit</p>
+            </Col>
+            <Col>
+              <h3 className="fw-bold d-flex justify-content-center">
+                <Link to={'/coming-soon'}>
+                  <Button variant={'info'} size={'lg'} className="rounded-circle p-3">
+                    <FontAwesomeIcon icon={faSignature} size={'2xl'} className="link-light" />
+                  </Button>
+                </Link>
+              </h3>
+              <p className="d-flex justify-content-center">Ready for Signature</p>
+            </Col>
+            <Col>
+              <h3 className="fw-bold d-flex justify-content-center">
+                <Link to={'/coming-soon'}>
+                  <Button variant={'info'} size={'lg'} className="rounded-circle p-3">
+                    <FontAwesomeIcon icon={faRecycle} size={'2xl'} className="link-light" />
+                  </Button>
+                </Link>
+              </h3>
+              <p className="d-flex justify-content-center">Received</p>
+            </Col>
+          </Row>
+        </HtCard.Body>
+      </HtCard>
       <HtButton
         align="start"
         onClick={() => {
@@ -31,6 +105,6 @@ export function Home(): ReactElement {
       >
         Click me
       </HtButton>
-    </div>
+    </Container>
   );
 }

client/src/features/manifest/MtnList.tsx

@@ -1,6 +1,7 @@
+import { NewManifestBtn } from 'components/buttons/NewManifestBtn';
 import { HtCard } from 'components/Ht';
 import React, { ReactElement, useState } from 'react';
-import { Button, Col, Container, Dropdown, Row } from 'react-bootstrap';
+import { Col, Container, Dropdown, Row } from 'react-bootstrap';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTitle, useHtAPI } from 'hooks';
 import { SyncManifestBtn } from 'components/buttons';
@@ -37,9 +38,7 @@ export function MtnList(): ReactElement {
           </Col>
           <Col className="d-flex justify-content-end">
             <SyncManifestBtn siteId={siteId} disabled={!siteId} />
-            <Button variant="success" onClick={() => navigate('./new')}>
-              New
-            </Button>
+            <NewManifestBtn siteId={siteId} />
           </Col>
         </Row>
       </Container>

client/src/store/rcraProfileSlice/rcraProfileSlice.spec.tsx

@@ -2,10 +2,7 @@
  *  RcraProfile tests
  */
 import { screen } from '@testing-library/react';
-import { ManifestForm } from 'components/Manifest';
-import { useTitle } from 'hooks';
 import React from 'react';
-import { multiValueAsValue } from 'react-select/dist/declarations/src/utils';
 import { useAppSelector } from 'store/hooks';
 import { renderWithProviders } from 'test-utils';
 import { createMockSite } from 'test-utils/fixtures';

client/src/store/wasteCode.slice.ts

@@ -4,7 +4,7 @@ import { Code } from 'components/Manifest/WasteLine/wasteLineSchema';
 
 /**
  * A RTK Query Api for fetching codes.
- * the createApi function takes autmatically generates react hooks,
+ * the createApi function takes automatically generates react hooks,
  */
 export const wasteCodeApi = createApi({
   reducerPath: 'wasteCodeApi',

server/requirements.txt

@@ -1,18 +1,17 @@
 asgiref==3.6.0
-Django==4.2
+Django==4.2.1
 django-celery-results==2.5.0
 django-cors-headers==3.14.0
 django-extensions==3.2.1
 django-celery-beat==2.5.0
 djangorestframework==3.14.0
 gunicorn==20.1.0
 emanifest==3.0.3
-psycopg[binary]==3.1.8
+psycopg[binary]==3.1.9
 pytz==2023.3
-requests-toolbelt==0.10.1
-sqlparse==0.4.3
+sqlparse==0.4.4
 tzdata==2023.3
 whitenoise==6.4.0
 celery==5.2.7
 redis==4.5.4
-drf-spectacular==0.26.1
+drf-spectacular==0.26.2

server/requirements_dev.txt

@@ -1,8 +1,8 @@
 pytest-mock==3.10.0
-pre-commit==3.2.0
-pytest==7.2.2
+pre-commit==3.3.1
+pytest==7.3.1
 pytest-django==4.5.2
 responses==0.23.1
-ruff==0.0.259
-black==23.1.0
+ruff==0.0.265
+black==23.3.0
 -r requirements.txt