Misc Repo Chores (#758)

* rename 'src' directory to 'app' directory to work with common framework requirements

* move 'features' directory to 'routes' to work with remix project structure

we're not planning on migrating to Remix (give the news that remix is essentually being merged into react router v7) however, given this news, incrementally adopting more of the react reouter v6 features may help us take advantage of some of the useful features of remix when react router v7 comes out

* update tsconfig to use a remix vite spa template config

* modify imports to use alias for root

* rename 'test-utils' to mocks

* modify mock service work import and conditional worker start up to follow current docks

* remove prettier configs from repo root

* move setupTest.ts to the mocks directory

* rename org and site object permission columns names to clarify that the content_object_id is the object ID of a site\/org object

* modify pre-commit prettier files arg

* add health checks to our trak (RESTful API) service in our docker compse file

.pre-commit-config.yaml

@@ -3,15 +3,15 @@
 ci:
   autofix_commit_msg: |
     [pre-commit.ci] auto fixes from pre-commit.com hooks
-  autoupdate_branch: 'pre-commit'
-  autoupdate_commit_msg: '[pre-commit.ci] pre-commit autoupdate'
+  autoupdate_branch: "pre-commit"
+  autoupdate_commit_msg: "[pre-commit.ci] pre-commit autoupdate"
   autoupdate_schedule: quarterly
   skip: []
   submodules: false
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: 'v4.5.0'
+    rev: "v4.5.0"
     hooks:
       - id: trailing-whitespace
       - id: check-json
@@ -24,7 +24,7 @@ repos:
             \.vscode\/.*|
           )$
   - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: 'v0.1.11'
+    rev: "v0.1.11"
     hooks:
       - id: ruff
         args: [--fix, --exit-non-zero-on-fix]
@@ -38,17 +38,18 @@ repos:
           - python
         pass_filenames: false
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: 'v9.8.0'
+    rev: "v9.8.0"
     hooks:
       - id: eslint
         files: ^client/.*\.[jt]sx?$
         args: [-c=client/eslint.config.js]
         types: [file]
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: 'v3.1.0'
+    rev: "v3.1.0"
     hooks:
       - id: prettier
         exclude: infra/haztrak/
+        files: ^(client/.*\.[jt]sx?|.*\.md|.*\.yaml)$
   - repo: https://github.com/asottile/pyupgrade
     rev: v3.15.0
     hooks:

client/Dockerfile

@@ -1,6 +1,6 @@
 # Mutlistage dockerize dpgraham.com react.js front end
 # Build stage
-FROM node:20-alpine as builder
+FROM node:20-alpine AS builder
 LABEL maintainer="[email protected]"
 WORKDIR /app
 COPY . .
@@ -9,20 +9,20 @@ RUN npm run build
 
 
 # test
-FROM builder as test
+FROM builder AS test
 WORKDIR /app
 CMD ["npm", "run", "test"]
 
 # local development
-FROM builder as dev
+FROM builder AS dev
 WORKDIR /app
 EXPOSE 3000
 CMD ["npm", "start"]
 
 # Production
-FROM nginx:1.24.0-alpine as production
+FROM nginx:1.24.0-alpine AS production
 WORKDIR /app
-ENV NODE_ENV production
+ENV NODE_ENV=production
 # copy build from builder stage
 COPY --from=builder /app/build /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf

client/src/App.tsx → client/app/App.tsx

@@ -1,12 +1,12 @@
-import { ErrorBoundary } from 'components/Error';
-import { Notifications } from 'components/Notifications/Notifications';
-import { HtSpinner } from 'components/UI';
+import { ErrorBoundary } from '~/components/Error';
+import { Notifications } from '~/components/Notifications/Notifications';
+import { HtSpinner } from '~/components/UI';
 import React, { ReactElement, Suspense } from 'react';
 import { Container } from 'react-bootstrap';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { router } from 'routes';
+import { router } from '~/routes';
 import './App.scss';
 
 const GlobalSpinner = () => (

client/src/components/Auth/LoginForm.tsx → client/app/components/Auth/LoginForm.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm, HtSpinner } from 'components/UI';
+import { HtForm, HtSpinner } from '~/components/UI';
 import React, { useEffect, useState } from 'react';
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
@@ -10,7 +10,7 @@ import {
   useAppDispatch,
   useAppSelector,
   useLoginMutation,
-} from 'store';
+} from '~/store';
 import { z } from 'zod';
 
 const loginSchema = z.object({

client/src/components/HaztrakSite/SiteFilter/SiteFilterForm.spec.tsx → client/app/components/HaztrakSite/SiteFilter/SiteFilterForm.spec.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React, { useState } from 'react';
-import { cleanup, renderWithProviders } from 'test-utils';
+import { cleanup, renderWithProviders } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
-import { createMockHandler, createMockSite } from 'test-utils/fixtures/mockHandler';
-import { SiteFilterForm } from 'components/HaztrakSite/SiteFilter/SiteFilterForm';
+import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
+import { SiteFilterForm } from '~/components/HaztrakSite/SiteFilter/SiteFilterForm';
 import { useSearchParams } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 

client/src/components/HaztrakSite/SiteFilter/SiteFilterForm.tsx → client/app/components/HaztrakSite/SiteFilter/SiteFilterForm.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HaztrakSite } from 'components/HaztrakSite/haztrakSiteSchema';
+import { HaztrakSite } from '~/components/HaztrakSite/haztrakSiteSchema';
 import { useSearchParams } from 'react-router-dom';
 
 interface SiteFilterFormProps {

client/src/components/HaztrakSite/SiteListGroup/SiteListGroup.spec.tsx → client/app/components/HaztrakSite/SiteListGroup/SiteListGroup.spec.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React from 'react';
-import { cleanup, renderWithProviders } from 'test-utils';
+import { cleanup, renderWithProviders } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
-import { SiteListGroup } from 'components/HaztrakSite/SiteListGroup/SiteListGroup';
-import { createMockHandler, createMockSite } from 'test-utils/fixtures/mockHandler';
+import { SiteListGroup } from '~/components/HaztrakSite/SiteListGroup/SiteListGroup';
+import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
 
 afterEach(() => {
   cleanup();

client/src/components/HaztrakSite/SiteListGroup/SiteListGroup.tsx → client/app/components/HaztrakSite/SiteListGroup/SiteListGroup.tsx

@@ -1,7 +1,7 @@
-import { HaztrakSite } from 'components/HaztrakSite/haztrakSiteSchema';
+import { HaztrakSite } from '~/components/HaztrakSite/haztrakSiteSchema';
 import { Col, Container, ListGroup, Row } from 'react-bootstrap';
-import { SiteListItem } from 'components/HaztrakSite/SiteListItem/SiteListItem';
-import { SiteFilterForm } from 'components/HaztrakSite/SiteFilter/SiteFilterForm';
+import { SiteListItem } from '~/components/HaztrakSite/SiteListItem/SiteListItem';
+import { SiteFilterForm } from '~/components/HaztrakSite/SiteFilter/SiteFilterForm';
 import React, { useState } from 'react';
 import winkingRobot from '/assets/img/robot/robot-wink.jpg';
 import { useAutoAnimate } from '@formkit/auto-animate/react';

client/src/components/HaztrakSite/SiteListItem/SiteListItem.spec.tsx → client/app/components/HaztrakSite/SiteListItem/SiteListItem.spec.tsx

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React from 'react';
-import { cleanup, renderWithProviders } from 'test-utils';
+import { cleanup, renderWithProviders } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
-import { createMockSite } from 'test-utils/fixtures/mockHandler';
+import { createMockSite } from '~/mocks/fixtures/mockHandler';
 import { SiteListItem } from './SiteListItem';
 
 afterEach(() => {

client/src/components/HaztrakSite/SiteListItem/SiteListItem.tsx → client/app/components/HaztrakSite/SiteListItem/SiteListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { HaztrakSite } from 'components/HaztrakSite/haztrakSiteSchema';
+import { HaztrakSite } from '~/components/HaztrakSite/haztrakSiteSchema';
 import { ListGroup } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import { SiteListItemActions } from 'components/HaztrakSite/SiteListItem/SiteListItemActions';
+import { SiteListItemActions } from '~/components/HaztrakSite/SiteListItem/SiteListItemActions';
 
 interface SiteListItemProps {
   site: HaztrakSite;

client/src/components/HaztrakSite/haztrakSiteSchema.ts → client/app/components/HaztrakSite/haztrakSiteSchema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { rcraSite } from 'components/RcraSite';
+import { rcraSite } from '~/components/RcraSite';
 
 const haztrakSiteSchema = z.object({
   name: z.string(),

client/src/components/Help/HaztrakLicense.tsx → client/app/components/Help/HaztrakLicense.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HtCard } from 'components/UI';
+import { HtCard } from '~/components/UI';
 
 export function HaztrakLicense() {
   return (

client/app/components/Help/index.ts

@@ -0,0 +1,2 @@
+export { HaztrakLicense } from '~/components/Help/HaztrakLicense';
+export { SectionTitle } from '~/components/Help/SectionTitle';

client/src/components/Layout/Nav/NavItem.tsx → client/app/components/Layout/Nav/NavItem.tsx

@@ -1,7 +1,7 @@
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { NavContext, NavContextProps } from 'components/Layout/Root';
-import { Route } from 'components/Layout/Sidebar/SidebarRoutes';
+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';

client/src/components/Layout/Nav/NavSection.tsx → client/app/components/Layout/Nav/NavSection.tsx

@@ -1,5 +1,5 @@
-import { NavItem } from 'components/Layout/Nav/NavItem';
-import { RoutesSection } from 'components/Layout/Sidebar/SidebarRoutes';
+import { NavItem } from '~/components/Layout/Nav/NavItem';
+import { RoutesSection } from '~/components/Layout/Sidebar/SidebarRoutes';
 import React from 'react';
 
 interface SidebarSectionProps {

client/src/components/Layout/PrivateRoute.tsx → client/app/components/Layout/PrivateRoute.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Navigate } from 'react-router-dom';
-import { selectAuthenticated, useAppSelector } from 'store';
+import { selectAuthenticated, useAppSelector } from '~/store';
 
 interface Props {
   children: ReactElement;

client/src/components/Layout/Root.tsx → client/app/components/Layout/Root.tsx

@@ -1,5 +1,5 @@
-import { ErrorBoundary } from 'components/Error';
-import { HtSpinner } from 'components/UI';
+import { ErrorBoundary } from '~/components/Error';
+import { HtSpinner } from '~/components/UI';
 import React, { createContext, Dispatch, SetStateAction, Suspense, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';

client/src/components/Layout/Sidebar/Sidebar.spec.tsx → client/app/components/Layout/Sidebar/Sidebar.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
-import { Sidebar } from 'components/Layout/Sidebar/Sidebar';
+import { Sidebar } from '~/components/Layout/Sidebar/Sidebar';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {

client/src/components/Layout/Sidebar/Sidebar.tsx → client/app/components/Layout/Sidebar/Sidebar.tsx

@@ -1,12 +1,12 @@
 import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/png/logo-black-crop.png';
-import { NavSection } from 'components/Layout/Nav/NavSection';
-import { NavItem } from 'components/Layout/Nav/NavItem';
-import { NavContext, NavContextProps } from 'components/Layout/Root';
+import { NavSection } from '~/components/Layout/Nav/NavSection';
+import { NavItem } from '~/components/Layout/Nav/NavItem';
+import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import React, { ReactElement, useContext } from 'react';
 import { Nav, Offcanvas } from 'react-bootstrap';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { RootState } from 'store';
+import { RootState } from '~/store';
 import { routes } from './SidebarRoutes';
 
 /** Vertical sidebar for navigation that disappears when the viewport is small*/

client/src/components/Layout/TopNav/TopNav.spec.tsx → client/app/components/Layout/TopNav/TopNav.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
-import { TopNav } from 'components/Layout/TopNav/TopNav';
+import { TopNav } from '~/components/Layout/TopNav/TopNav';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {

client/src/components/Layout/TopNav/TopNav.tsx → client/app/components/Layout/TopNav/TopNav.tsx

@@ -1,12 +1,12 @@
 import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/svg/logo-no-background.svg';
 import { faArrowRightFromBracket, faBars, faGear, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { NavContext, NavContextProps } from 'components/Layout/Root';
+import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import React, { useContext } from 'react';
 import { Button, Dropdown } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
-import { removeCredentials, selectAuthenticated, useLogoutMutation } from 'store';
+import { removeCredentials, selectAuthenticated, useLogoutMutation } from '~/store';
 
 export function TopNav() {
   const { showSidebar, setShowSidebar } = useContext<NavContextProps>(NavContext);

client/src/components/Manifest/Actions/ManifestCancelBtn.tsx → client/app/components/Manifest/Actions/ManifestCancelBtn.tsx

@@ -1,9 +1,9 @@
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ManifestContext } from 'components/Manifest/ManifestForm';
-import { Manifest } from 'components/Manifest/manifestSchema';
-import { HtButton } from 'components/UI';
-import { useReadOnly } from 'hooks/manifest';
+import { ManifestContext } from '~/components/Manifest/ManifestForm';
+import { Manifest } from '~/components/Manifest/manifestSchema';
+import { HtButton } from '~/components/UI';
+import { useReadOnly } from '~/hooks/manifest';
 import React, { useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';

client/src/components/Manifest/Actions/ManifestEditBtn.tsx → client/app/components/Manifest/Actions/ManifestEditBtn.tsx

@@ -1,8 +1,8 @@
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ManifestContext } from 'components/Manifest/ManifestForm';
-import { HtButton } from 'components/UI';
-import { useReadOnly } from 'hooks/manifest';
+import { ManifestContext } from '~/components/Manifest/ManifestForm';
+import { HtButton } from '~/components/UI';
+import { useReadOnly } from '~/hooks/manifest';
 import React, { useContext } from 'react';
 import { ButtonProps } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';

client/src/components/Manifest/Actions/ManifestFABs.spec.tsx → client/app/components/Manifest/Actions/ManifestFABs.spec.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
-import { ManifestFABs } from 'components/Manifest/Actions/ManifestFABs';
-import { ManifestContext } from 'components/Manifest/ManifestForm';
-import { ManifestStatus } from 'components/Manifest/manifestSchema';
-import { useReadOnly } from 'hooks/manifest';
+import { ManifestFABs } from '~/components/Manifest/Actions/ManifestFABs';
+import { ManifestContext } from '~/components/Manifest/ManifestForm';
+import { ManifestStatus } from '~/components/Manifest/manifestSchema';
+import { useReadOnly } from '~/hooks/manifest';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 const TestComponent = ({

client/src/components/Manifest/Actions/ManifestFABs.tsx → client/app/components/Manifest/Actions/ManifestFABs.tsx

@@ -1,9 +1,9 @@
-import { ManifestEditBtn } from 'components/Manifest/Actions/ManifestEditBtn';
-import { ManifestSaveBtn } from 'components/Manifest/Actions/ManifestSaveBtn';
-import { ManifestContext } from 'components/Manifest/ManifestForm';
-import { QuickSignBtn } from 'components/Manifest/QuickerSign';
-import { FloatingActionBtn } from 'components/UI';
-import { useReadOnly } from 'hooks/manifest';
+import { ManifestEditBtn } from '~/components/Manifest/Actions/ManifestEditBtn';
+import { ManifestSaveBtn } from '~/components/Manifest/Actions/ManifestSaveBtn';
+import { ManifestContext } from '~/components/Manifest/ManifestForm';
+import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
+import { FloatingActionBtn } from '~/components/UI';
+import { useReadOnly } from '~/hooks/manifest';
 import React, { ReactElement, useContext } from 'react';
 
 interface ManifestActionBtnsProps {

client/src/components/Manifest/Actions/ManifestSaveBtn.tsx → client/app/components/Manifest/Actions/ManifestSaveBtn.tsx

@@ -1,7 +1,7 @@
 import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HtButton } from 'components/UI';
-import { useReadOnly } from 'hooks/manifest';
+import { HtButton } from '~/components/UI';
+import { useReadOnly } from '~/hooks/manifest';
 import React from 'react';
 import { ButtonProps } from 'react-bootstrap';
 

client/src/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx → client/app/components/Manifest/AdditionalInfo/AdditionalInfoForm.tsx

@@ -1,9 +1,9 @@
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Manifest } from 'components/Manifest';
-import { WasteLine } from 'components/Manifest/WasteLine';
-import { HtForm } from 'components/UI';
-import { useReadOnly } from 'hooks/manifest';
+import { Manifest } from '~/components/Manifest';
+import { WasteLine } from '~/components/Manifest/WasteLine';
+import { HtForm } from '~/components/UI';
+import { useReadOnly } from '~/hooks/manifest';
 import React from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';

client/src/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx → client/app/components/Manifest/AdditionalInfo/AdditionalinfoForm.spec.tsx

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
-import { AdditionalInfoForm } from 'components/Manifest/AdditionalInfo';
+import { AdditionalInfoForm } from '~/components/Manifest/AdditionalInfo';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { afterEach, describe, expect, test } from 'vitest';
 
 afterEach(() => {

client/src/components/Manifest/Address/AddressForm.spec.tsx → client/app/components/Manifest/Address/AddressForm.spec.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { AddressForm } from './AddressForm';
 import { afterEach, describe, test, expect } from 'vitest';
 

client/src/components/Manifest/Address/AddressForm.tsx → client/app/components/Manifest/Address/AddressForm.tsx

@@ -1,4 +1,4 @@
-import { GeneratorAddress } from 'components/Manifest/Address/GeneratorAddress';
+import { GeneratorAddress } from '~/components/Manifest/Address/GeneratorAddress';
 import React from 'react';
 
 interface Props {