Org ID query param

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React, { useState } from 'react';
 import { cleanup, renderWithProviders } from 'app/mocks';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { cleanup, renderWithProviders } from 'app/mocks';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { cleanup, renderWithProviders } from 'app/mocks';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { Sidebar } from '~/components/Layout/Sidebar/Sidebar';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { TopNav } from '~/components/Layout/TopNav/TopNav';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

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

@@ -3,10 +3,11 @@ import { faArrowRightFromBracket, faBars, faGear, faUser } from '@fortawesome/fr
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavContext, NavContextProps } from '~/components/Layout/Root';
 import React, { useContext } from 'react';
-import { Button, Dropdown } from 'react-bootstrap';
+import { Button, Col, Dropdown, Row } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
 import { removeCredentials, selectAuthenticated, useLogoutMutation } from '~/store';
+import { OrgSelect } from '~/components/Org/OrgSelect';
 
 export function TopNav() {
   const { showSidebar, setShowSidebar } = useContext<NavContextProps>(NavContext);
@@ -31,25 +32,32 @@ export function TopNav() {
   return (
     <nav className="sb-topnav navbar navbar-expand navbar-dark bg-dark d-flex">
       <div className="flex-grow-1">
-        <Button
-          aria-label="toggleSidebarNavigation"
-          aria-hidden={false}
-          id="sidebarToggle"
-          onClick={toggleSidebar}
-          variant="dark"
-          className="mx-3 rounded-circle btn-hover-dark"
-        >
-          <FontAwesomeIcon icon={faBars} />
-        </Button>
-        <Link to="/" className="navbar-brand ps-3 pe-5">
-          <img
-            src={logo}
-            alt="haztrak logo, hazardous waste tracking made easy."
-            width={125}
-            height={'auto'}
-            className="my-3"
-          />
-        </Link>
+        <Row className="align-items-center">
+          <Col xs={12} md={5}>
+            <Button
+              aria-label="toggleSidebarNavigation"
+              aria-hidden={false}
+              id="sidebarToggle"
+              onClick={toggleSidebar}
+              variant="dark"
+              className="mx-3 rounded-circle btn-hover-dark"
+            >
+              <FontAwesomeIcon icon={faBars} />
+            </Button>
+            <Link to="/" className="p-3 ">
+              <img
+                src={logo}
+                alt="haztrak logo, hazardous waste tracking made easy."
+                width={125}
+                height={'auto'}
+                className="my-3"
+              />
+            </Link>
+          </Col>
+          <Col md={5} className="me-5 d-none d-md-block">
+            <OrgSelect />
+          </Col>
+        </Row>
       </div>
       <ul className="navbar-nav ms-auto ms-md-0 me-3 me-lg-4 btn-hover-dark rounded-circle">
         <li className="nav-item dropdown">

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { ManifestFABs } from '~/components/Manifest/Actions/ManifestFABs';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { ManifestStatus } from '~/components/Manifest/manifestSchema';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
 import { AdditionalInfoForm } from '~/components/Manifest/AdditionalInfo';
 import React from 'react';

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

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { AddressForm } from './AddressForm';

client/app/components/Manifest/Contact/ContactForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { ContactForm } from './ContactForm';

client/app/components/Manifest/Contact/PhoneForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { PhoneForm } from '~/components/Manifest/Contact';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

client/app/components/Manifest/GeneralInfo/GeneralInfoForm.spec.tsx

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

client/app/components/Manifest/GeneralInfo/ManifestStatusSelect.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { ManifestStatusSelect } from '~/components/Manifest/GeneralInfo/ManifestStatusSelect';
 import { http, HttpResponse } from 'msw';

client/app/components/Manifest/GeneralInfo/ManifestTypeField.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { ManifestTypeSelect } from '~/components/Manifest/GeneralInfo/ManifestTypeSelect';
 import { setupServer } from 'msw/node';

client/app/components/Manifest/Generator/GeneratorForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
 import { siteType } from '~/components/Manifest/manifestSchema';
 import React from 'react';

client/app/components/Manifest/Generator/GeneratorSection.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { createMockHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';

client/app/components/Manifest/Handler/Search/HandlerSearchForm.spec.tsx

@@ -4,7 +4,7 @@ import { mockUserEndpoints } from 'app/mocks/handlers';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
-import '@testing-library/jest-dom';
+
 import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { createMockRcrainfoSite } from '~/mocks/fixtures';
 import { API_BASE_URL } from '~/mocks/handlers/mockSiteEndpoints';

client/app/components/Manifest/ManifestForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ManifestForm } from '~/components/Manifest';

client/app/components/Manifest/QuickerSign/QuickerSignForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { QuickerSignForm } from '~/components/Manifest/QuickerSign';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

client/app/components/Manifest/QuickerSign/SignBtn/QuickSignBtn.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { ManifestContext } from '~/components/Manifest/ManifestForm';
 import { Handler, RcraSiteType } from '~/components/Manifest/manifestSchema';
 import { QuickSignBtn } from '~/components/Manifest/QuickerSign/index';

client/app/components/Manifest/Transporter/TransporterTable.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { Transporter } from '~/components/Manifest';
 import { setupServer } from 'msw/node';

client/app/components/Manifest/Tsdf/TsdfSection.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';
 import { createMockHandler } from '~/mocks/fixtures';
 import { afterEach, describe, expect, test } from 'vitest';

client/app/components/Manifest/WasteLine/QuantityForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { QuantityForm } from '~/components/Manifest/WasteLine/QuantityForm';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

client/app/components/Manifest/WasteLine/WasteLineForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { setupServer } from 'msw/node';
 import React from 'react';
@@ -17,7 +16,7 @@
 describe('WasteLineForm', () => {
   test('renders', () => {
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     expect(screen.getByText(/General/i)).toBeInTheDocument();
@@ -25,7 +24,7 @@
   test('New waste lines set DOT haz material and EPA haz waste to true by default', () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     const epaWasteSwitch = screen.getByRole('checkbox', { name: /EPA Hazardous Waste?/i });
@@ -36,7 +35,7 @@
   test('Setting DOT hazardous to false automatically set EPA waste to false', async () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     const epaWasteSwitch = await screen.findByRole('checkbox', { name: /EPA Hazardous Waste?/i });
@@ -50,7 +49,7 @@
   test('Setting EPA waste to true automatically set DOT Hazardous to true', async () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     const epaWasteSwitch = await screen.findByRole('checkbox', { name: /EPA Hazardous Waste?/i });
@@ -70,7 +69,7 @@
   test('If epaWaste is false, federal waste code select is disabled', async () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     const epaWasteSwitch = await screen.findByRole('checkbox', { name: /EPA Hazardous Waste?/i });
@@ -84,7 +83,7 @@
   test('If epaWaste is false, federal waste codes are cleared', async () => {
     // Arrange
     renderWithProviders(
       <WasteLineForm wasteForm={{} as any} lineNumber={0} handleClose={() => undefined} />,
       {}
     );
     const epaWasteSwitch = await screen.findByRole('checkbox', { name: /EPA Hazardous Waste?/i });

client/app/components/Mtn/MtnTable.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
 import { MtnDetails, MtnTable } from '~/components/Mtn';
 import React from 'react';

client/app/components/Org/OrgSelect.spec.tsx

@@ -0,0 +1,22 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { OrgSelect } from '~/components/Org/OrgSelect';
+import { cleanup, renderWithProviders } from '~/mocks';
+import { screen } from '@testing-library/react';
+import { setupServer } from 'msw/node';
+import { mockSiteEndpoints } from '~/mocks/handlers';
+
+const server = setupServer(...mockSiteEndpoints);
+afterEach(() => cleanup());
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+
+describe('OrgSelect Component', () => {
+  it('renders', () => {
+    renderWithProviders(<OrgSelect />);
+    expect(screen.getByTestId('org-select')).toBeInTheDocument();
+  });
+  it('displays a select component', () => {
+    renderWithProviders(<OrgSelect />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+});

client/app/components/Org/OrgSelect.tsx

@@ -0,0 +1,47 @@
+import Select, { SingleValue } from 'react-select';
+import React, { useEffect, useState } from 'react';
+import { useGetOrgsQuery } from '~/store';
+import { useOrg } from '~/hooks/useOrg/useOrg';
+
+export const OrgSelect = () => {
+  const { isLoading, data: orgs } = useGetOrgsQuery();
+  const { orgId, setOrgId } = useOrg();
+  const [currentOrg, setCurrentOrg] = useState<
+    SingleValue<{
+      label: string;
+      value: string;
+    }>
+  >({
+    value: orgId ?? '',
+    label: orgs?.find((org) => org.slug === orgId)?.name ?? '',
+  });
+
+  useEffect(() => {
+    if (orgId && orgs) {
+      setCurrentOrg({
+        value: orgId,
+        label: orgs.find((org) => org.slug === orgId)?.name ?? '',
+      });
+    }
+  }, [orgId, orgs, setCurrentOrg]);
+
+  const onChange = (option: SingleValue<{ label: string; value: string }>) => {
+    if (!option) return;
+    setOrgId(option.value);
+    setCurrentOrg(option);
+  };
+
+  return (
+    <div data-testid="org-select">
+      <Select
+        value={currentOrg}
+        isLoading={isLoading}
+        options={orgs?.map((org) => ({ label: org.name, value: org.slug }))}
+        onChange={onChange}
+        classNames={{
+          control: () => 'form-control p-0',
+        }}
+      />
+    </div>
+  );
+};

client/app/components/Org/UserOrg.spec.tsx

@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { UserOrg } from '~/components/Org/UserOrg';
+import { ProfileSlice } from '~/store';
+import { v4 as uuidv4 } from 'uuid';
+import { describe, expect, it } from 'vitest';
+import { renderWithProviders } from '~/mocks';
+
+const mockProfileWithOrg: ProfileSlice = {
+  org: {
+    name: 'Test Organization',
+    rcrainfoIntegrated: true,
+    slug: 'test-organization',
+    id: uuidv4(),
+  },
+  sites: {},
+  user: 'testuser1',
+};
+
+const mockProfileWithoutOrg: ProfileSlice = {
+  org: null,
+  sites: {},
+  user: 'testuser1',
+};
+
+const mockProfileWithNonIntegratedOrg: ProfileSlice = {
+  org: {
+    name: 'Test Organization',
+    rcrainfoIntegrated: false,
+    slug: 'test-organization',
+    id: uuidv4(),
+  },
+  sites: {},
+  user: 'testuser1',
+};
+
+describe('UserOrg Component', () => {
+  it('renders nothing when profile has no org', () => {
+    renderWithProviders(<UserOrg profile={mockProfileWithoutOrg} />);
+    expect(screen.queryByText('Name')).toBeNull();
+  });
+
+  it('renders organization name when profile has org', () => {
+    renderWithProviders(<UserOrg profile={mockProfileWithOrg} />);
+    expect(screen.getByText('Test Organization')).toBeInTheDocument();
+  });
+
+  it('renders default organization name when org name is null', () => {
+    const profileWithNullOrgName = {
+      ...mockProfileWithOrg,
+      org: { ...mockProfileWithOrg.org, name: null },
+    };
+    // @ts-expect-error - intentionally passing invalid data to test default behavior
+    renderWithProviders(<UserOrg profile={profileWithNullOrgName} />);
+    expect(screen.getByText('My Organization')).toBeInTheDocument();
+  });
+
+  it('shows integrated status with check icon when rcrainfoIntegrated is true', () => {
+    renderWithProviders(<UserOrg profile={mockProfileWithOrg} />);
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+  });
+
+  it('shows non-integrated status with cross icon when rcrainfoIntegrated is false', () => {
+    renderWithProviders(<UserOrg profile={mockProfileWithNonIntegratedOrg} />);
+    expect(screen.getByText('No')).toBeInTheDocument();
+  });
+
+  it('renders tabs for My Sites and Other Sites in My Organization', () => {
+    renderWithProviders(<UserOrg profile={mockProfileWithOrg} />);
+    expect(screen.getByText('My Sites')).toBeInTheDocument();
+    expect(screen.getByText('Other Sites in My Organization')).toBeInTheDocument();
+  });
+});

client/app/components/RcraSite/RcraSiteDetails.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { RcraSiteDetails } from '~/components/RcraSite';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

client/app/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { RcraApiUserBtn } from '~/components/Rcrainfo/buttons/RcraApiUserBtn/RcraApiUserBtn';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'app/mocks';

client/app/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { SyncManifestBtn } from '~/components/Rcrainfo/buttons/SyncManifestBtn/SyncManifestBtn';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';

client/app/components/UI/HtCard/HtCard.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { HtCard } from '~/components/UI';
 import React from 'react';
 import { cleanup, render, screen } from 'app/mocks';

client/app/components/UI/HtModal/HtModal.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { HtModal } from '~/components/UI';
 import React from 'react';
 import { cleanup, render, screen } from 'app/mocks';

client/app/components/UI/HtPaginate/HtPaginate.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { HtPaginate } from '~/components/UI';
 import React from 'react';
 import { cleanup, render, screen } from 'app/mocks';

client/app/components/UI/HtTooltip/HtTooltip.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { HtTooltip } from '~/components/UI';
 import React from 'react';

client/app/components/User/UserInfoForm.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UserInfoForm } from '~/components/User/UserInfoForm';

client/app/hooks/manifest/useManifestStatus/useManifestStatus.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { afterEach, describe, expect, it } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import React from 'react';

client/app/hooks/manifest/useOpenHandlerSearch/useOpenHandlerSearch.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SiteType } from '~/components/Manifest/manifestSchema';

client/app/hooks/manifest/useReadOnly/useReadOnly.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';

client/app/hooks/manifest/useSaveManifest/useSaveManifest.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { cleanup, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Manifest } from '~/components/Manifest';

client/app/hooks/useDebounce/useDebounce.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { renderHook, act } from '@testing-library/react';
 import { useDebounce } from './useDebounce';
 import { beforeAll, afterAll, afterEach, describe, expect, it, vi } from 'vitest';