Migrate select primary keys to UUID and Haztrak Organization's Site L…

…ist API View (#645) * remove CoreBaseModel absract model used for inheritence (learning the hard way that inheritence is a double edged sword) * Temporaryily remove all migrations (including data migrations) and use UUID as primary key for RcrainfoProfile * use UUID for haztrak profile and haztrak user as I do not want there to be a ordering relationship between these models and a UUID will make it more difficult for people to guess other users IDs we also are makign a minor update to our fixture factory for waste code to work with both state and federal waste codes * indicate whether a site is integrated with RCRAInfo * add endpoint for retrieving a Haztrak Organization's sites * show other sites in the user's haztrak organization in the user's profile * add data migrations back in (static information like DOT information and waste codes but still useful to be in a db)
USEPA · Nov 20, 2023 · 90f81de · 90f81de
1 parent 6218596
commit 90f81de
Show file tree

Hide file tree

Showing 37 changed files with 585 additions and 1,584 deletions.
diff --git a/client/src/components/Ht/HtTooltip/HtTooltip.tsx b/client/src/components/Ht/HtTooltip/HtTooltip.tsx
@@ -1,8 +1,7 @@
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { TooltipProps } from 'react-bootstrap';
 import { ReactElement } from 'react';
+import { OverlayTrigger, Tooltip, TooltipProps } from 'react-bootstrap';
 
 // see react-bootstrap OverlayTrigger for additional props that could be added
 // https://react-bootstrap.github.io/components/overlays/#overlay-trigger-props
@@ -40,7 +39,7 @@ interface InfoTooltipProps {
 export function InfoIconTooltip({ message }: InfoTooltipProps) {
   return (
     <HtTooltip text={message}>
-      <FontAwesomeIcon icon={faInfoCircle} size={'1x'} className={'pb-1 text-muted'} />
+      <FontAwesomeIcon icon={faInfoCircle} size={'2xs'} className={'pb-1 text-muted'} />
     </HtTooltip>
   );
 }
diff --git a/client/src/components/UserProfile/MyOrgSites.tsx b/client/src/components/UserProfile/MyOrgSites.tsx
@@ -0,0 +1,35 @@
+import { HaztrakSite } from 'components/HaztrakSite';
+import React from 'react';
+import { Row, Table } from 'react-bootstrap';
+import { useGetOrgSitesQuery } from 'store';
+import { HaztrakProfileOrg } from 'store/profileSlice/profile.slice';
+
+interface MyOrgSitesProps {
+  org: HaztrakProfileOrg;
+}
+
+export function MyOrgSites({ org }: MyOrgSitesProps) {
+  const { data, isLoading, error } = useGetOrgSitesQuery(org.id);
+  return (
+    <Row className="my-2">
+      <Table hover responsive>
+        <thead>
+          <tr>
+            <th>EPA ID</th>
+            <th>Site Type</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data &&
+            Object.values(data as HaztrakSite[]).map((site) => (
+              <tr key={`${site.handler.epaSiteId}`}>
+                <td>{site.handler.epaSiteId}</td>
+                <td>{site.handler.siteType}</td>
+              </tr>
+            ))}
+        </tbody>
+      </Table>
+      <i>Contact your Haztrak admin obtain access to additional sites within your organization</i>
+    </Row>
+  );
+}
diff --git a/...omponents/UserProfile/SitePermissions.tsx → ...ponents/UserProfile/MySitePermissions.tsx b/...omponents/UserProfile/SitePermissions.tsx → ...ponents/UserProfile/MySitePermissions.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import { Table } from 'react-bootstrap';
+import { Row, Table } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { HaztrakProfileSite } from 'store';
 
 interface SitePermissionsProps {
   sites?: Record<string, HaztrakProfileSite>;
 }
 
-export function SitePermissions({ sites }: SitePermissionsProps) {
+export function MySitePermissions({ sites }: SitePermissionsProps) {
   return (
-    <div>
-      <h4>Site Permissions</h4>
-      <Table striped bordered hover responsive>
+    <Row className="my-2">
+      <Table hover responsive>
         <thead>
           <tr>
             <th>EPA ID</th>
@@ -34,6 +33,6 @@ export function SitePermissions({ sites }: SitePermissionsProps) {
             ))}
         </tbody>
       </Table>
-    </div>
+    </Row>
   );
 }
diff --git a/client/src/components/UserProfile/UserOrg.tsx b/client/src/components/UserProfile/UserOrg.tsx
@@ -0,0 +1,59 @@
+import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MyOrgSites } from 'components/UserProfile/MyOrgSites';
+import { MySitePermissions } from 'components/UserProfile/MySitePermissions';
+import React from 'react';
+import { Col, Row, Tab, Tabs } from 'react-bootstrap';
+import { ProfileState } from 'store';
+import { HaztrakProfileOrg } from 'store/profileSlice/profile.slice';
+
+interface MandatoryOrgProfile extends ProfileState {
+  org: HaztrakProfileOrg;
+}
+
+interface UserOrgProps {
+  profile: MandatoryOrgProfile;
+}
+
+export function UserOrg({ profile }: UserOrgProps) {
+  return (
+    <>
+      <Row>
+        <hr />
+        <h3 className="text-center">Organization</h3>
+        <Col>
+          <h6>
+            <b>Name</b>
+          </h6>
+          <p>{profile.org.name ?? 'My Organization'}</p>
+        </Col>
+        <Col>
+          <h6>
+            <b>Integrated with Rcrainfo?</b>
+          </h6>
+          <p>
+            {profile.org.rcrainfoIntegrated ? (
+              <span>
+                Yes <FontAwesomeIcon icon={faCheck} className="text-success" />
+              </span>
+            ) : (
+              <span>
+                No <FontAwesomeIcon icon={faX} className="text-danger" />
+              </span>
+            )}
+          </p>
+        </Col>
+      </Row>
+      <Row>
+        <Tabs fill>
+          <Tab title="My Sites" eventKey="mySites">
+            <MySitePermissions sites={profile.sites} />
+          </Tab>
+          <Tab title="Other Sites in My Organization" eventKey="orgSites">
+            <MyOrgSites org={profile.org} />
+          </Tab>
+        </Tabs>
+      </Row>
+    </>
+  );
+}
diff --git a/client/src/components/UserProfile/UserProfile.tsx b/client/src/components/UserProfile/UserProfile.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AxiosError } from 'axios';
 import { HtForm, HtSpinner } from 'components/Ht';
-import { SitePermissions } from 'components/UserProfile/SitePermissions';
+import { UserOrg } from 'components/UserProfile/UserOrg';
 import React, { createRef, useState } from 'react';
 import { Button, Col, Container, Form, Row } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
@@ -127,19 +127,7 @@ export function UserProfile({ user, profile }: UserProfileProps) {
             </HtForm.Group>
           </Col>
         </Row>
-        {profile?.org && (
-          <>
-            <Row>
-              <Col>
-                <p>{profile.org.name ?? 'My Organization'}</p>
-              </Col>
-            </Row>
-            <Row>
-              <SitePermissions sites={profile.sites} />
-            </Row>
-          </>
-        )}
-        <Row>
+        <Row className="my-1">
           <div className="mx-1 d-flex flex-row-reverse">
             {!editable ? (
               <>
@@ -174,6 +162,8 @@ export function UserProfile({ user, profile }: UserProfileProps) {
             )}
           </div>
         </Row>
+        {/* @ts-ignore */}
+        {profile.org && <UserOrg profile={profile} />}
       </HtForm>
     </Container>
   );

diff --git a/client/src/store/haztrakApiSlice.ts b/client/src/store/haztrakApiSlice.ts
@@ -1,5 +1,6 @@
 import { BaseQueryFn, createApi } from '@reduxjs/toolkit/dist/query/react';
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { HaztrakSite } from 'components/HaztrakSite';
 import { Code } from 'components/Manifest/WasteLine/wasteLineSchema';
 import { RcraSite } from 'components/RcraSite';
 import { htApi } from 'services';
@@ -99,6 +100,9 @@ export const haztrakApi = createApi({
     getDotIdNumbers: build.query<Array<string>, string>({
       query: (id) => ({ url: 'rcra/waste/dot/id', method: 'get', params: { q: id } }),
     }),
+    getOrgSites: build.query<Array<HaztrakSite>, string>({
+      query: (id) => ({ url: `org/${id}/site`, method: 'get', params: { q: id } }),
+    }),
   }),
 });
 
@@ -109,4 +113,5 @@ export const {
   useGetFedWasteCodesQuery,
   useGetStateWasteCodesQuery,
   useGetDotIdNumbersQuery,
+  useGetOrgSitesQuery,
 } = haztrakApi;
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
@@ -17,6 +17,7 @@ export {
   useGetTaskStatusQuery,
   useSearchRcrainfoSitesQuery,
   useSearchRcraSitesQuery,
+  useGetOrgSitesQuery,
 } from 'store/haztrakApiSlice';
 
 // Authentication Slice

diff --git a/client/src/store/profileSlice/profile.slice.ts b/client/src/store/profileSlice/profile.slice.ts
@@ -17,7 +17,7 @@ export interface ProfileState {
   error?: string;
 }
 
-interface HaztrakProfileOrg {
+export interface HaztrakProfileOrg {
   id: string;
   name: string;
   rcrainfoIntegrated: boolean;