Org feature (#781)

* add epa_id property to site model to show the site's epa ID number without having to go through the rcra_site object

* remove use of settings to point to various models instead of just using strings for foriegn keys

the benefits from decoupling did not outweight the loss from code inspection

* OrgDetails initial component

* show organization slug with copy button

* implement CopyButton adding button to copy text

* add alert/toast when the user copies (using the CopyButton) something to the clipboard

* refactor OrgDetails into a feature specific component, use 'Org' as feature and leave 'OrgDetails' as a dumb component in charge of rendering

* add model={false} to our DropdownMenu component and remove unnecessary stuff in layout

* OrgDetails renders organization details and leave state management to Org feature component

* add organization feature to sidebar routes

* redo lazy import in routes to follow documentation of react router, seems to workk

* remove org details from profile page

* remove SASS dependency

* consolidate react context providers into a single component called AppProvider

client/app/App.tsx

@@ -1,38 +1,15 @@
-import { ReactElement, Suspense } from 'react';
-import { Container } from 'react-bootstrap';
+import { ReactElement } from 'react';
 import { RouterProvider } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { ErrorBoundary } from '~/components/Error';
-import { Notifications } from '~/components/Notifications/Notifications';
+import { AppProvider } from '~/providers';
 import { router } from '~/routes';
-import './App.scss';
 import './globals.css';
-import { Spinner } from './components/ui';
-
-const GlobalSpinner = () => (
-  <Container fluid className="d-flex justify-content-center align-items-center vh-100">
-    <Spinner size="sm" className="my-auto" />
-  </Container>
-);
 
 function App(): ReactElement {
   return (
-    <ErrorBoundary>
-      <ToastContainer
-        position="bottom-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        pauseOnHover
-        limit={3}
-      />
-      <Notifications />
-      <Suspense fallback={<GlobalSpinner />}>
-        <RouterProvider router={router} />
-      </Suspense>
-    </ErrorBoundary>
+    <AppProvider>
+      <RouterProvider router={router} />
+    </AppProvider>
   );
 }
 

client/app/components/CopyButton/CopyButton.spec.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { CopyButton } from '~/components/CopyButton/CopyButton';
+import { renderWithProviders } from '~/mocks';
+import { addAlert } from '~/store';
+
+vi.mock('react-icons/lu', () => ({
+  LuCopy: () => <svg data-testid="copy-icon" />,
+}));
+
+vi.mock('~/store', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('~/store')>()),
+  addAlert: vi.fn(),
+  useAppDispatch: () => vi.fn(),
+}));
+
+describe('CopyButton', () => {
+  it('renders the button with children and icon', () => {
+    render(<CopyButton copyText="test text">Copy</CopyButton>);
+    expect(screen.getByText('Copy')).toBeInTheDocument();
+    expect(screen.getByTestId('copy-icon')).toBeInTheDocument();
+  });
+
+  it('copies text to clipboard when clicked', () => {
+    const writeTextMock = vi.fn();
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    render(<CopyButton copyText="test text">Copy</CopyButton>);
+    fireEvent.click(screen.getByText('Copy'));
+    expect(writeTextMock).toHaveBeenCalledWith('test text');
+  });
+
+  it('forwards ref to the button element', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(
+      <CopyButton ref={ref} copyText="test text">
+        Copy
+      </CopyButton>
+    );
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('applies additional props to the button', () => {
+    render(
+      <CopyButton copyText="test text" className="extra-class">
+        Copy
+      </CopyButton>
+    );
+    expect(screen.getByText('Copy')).toHaveClass('extra-class');
+  });
+  it('copies text to clipboard and dispatches success alert', () => {
+    vi.mocked(addAlert).mockReturnValue({
+      type: 'notification/addAlert',
+      payload: { id: 'copy-success-test text' },
+    });
+
+    renderWithProviders(<CopyButton copyText="test text">Copy</CopyButton>);
+    fireEvent.click(screen.getByText('Copy'));
+    expect(addAlert).toHaveBeenCalled();
+  });
+});