feat: Major refactor to the Authorizations List and Details pages

frontend/e2e/pages/auth.details.ts

@@ -8,25 +8,51 @@ export const authorization_details_page = async (page: Page) => {
   await page.getByLabel('Search Authorizations').click()
   await page.getByLabel('Search Authorizations').fill('12398')
   await page.getByText('View Facility Details').click()
+
   await expect(page.getByText('Authorization Status')).toBeVisible()
   await expect(page.getByText('Active')).toBeVisible()
   await expect(page.getByText('Authorization Number')).toBeVisible()
   await expect(page.getByText('12398')).toBeVisible()
   await expect(page.getByText('Effective/Issue Date')).toBeVisible()
-
   await expect(page.getByText('1994-08-02')).toBeVisible()
   await expect(page.getByText('Last Amendment Date')).toBeVisible()
   await expect(page.getByText('2020-08-18')).toBeVisible()
 
-  await expect(
-    page.getByRole('button', { name: 'Back To Search' }),
-  ).toBeVisible()
   await expect(page.getByText('CONSOLIDATED ENVIROWASTE')).toBeVisible()
   await expect(page.getByText('Huntingdon Road Abbotsford, BC')).toBeVisible()
   await expect(page.getByText('49.017')).toBeVisible()
   await expect(page.getByText('-122.4547')).toBeVisible()
-  await expect(page.getByText('Permit', { exact: true })).toBeVisible()
+
+  await expect(page.getByText('Authorization Details')).toBeVisible()
+  await expect(page.getByText('Authorization Type')).toBeVisible()
+  await expect(page.getByText('Regulation', { exact: true })).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'Waste Discharge Regulation' }),
+  ).toBeVisible()
   await expect(
     page.getByText('Schedule 2 - Composting Operations'),
   ).toBeVisible()
+
+  await expect(page.getByText('Documents', { exact: true })).toBeVisible()
+
+  const backBtn = page.getByRole('button', { name: 'Back to Text Search' })
+  await expect(backBtn).toBeVisible()
+  await backBtn.click()
+
+  // Go to a Notification compost facility
+  await page.getByLabel('Search Authorizations').fill('16109')
+  await page.getByText('View Facility Details').click()
+  await expect(page.getByText('FISHER ROAD HOLDINGS LTD.')).toBeVisible()
+  await expect(page.getByText('Operation Type')).toBeVisible()
+  await expect(page.getByText('Compost Production Facility')).toBeVisible()
+  await expect(page.getByText('Regulation', { exact: true })).toBeVisible()
+  await expect(
+    page.getByRole('link', { name: 'Organic Matter Recycling Regulation' }),
+  ).toBeVisible()
+  await expect(page.getByText('Type of Compost Produced')).toBeVisible()
+  await expect(page.getByText('Facility Design Capacity')).toBeVisible()
+  await expect(
+    page.getByText('Organic Matter Used for Composting'),
+  ).toBeVisible()
+  await expect(page.getByText('Yard Waste')).toBeVisible()
 }

frontend/e2e/pages/auth.list.ts

@@ -6,11 +6,14 @@ export const authorization_list_page = async (page: Page) => {
   await page.goto(baseURL)
   await page.getByRole('button', { name: 'List all authorizations' }).click()
   await expect(
-    page.getByRole('heading', { name: 'Authorizations' }),
+    page.getByRole('heading', { name: 'Search Authorizations' }),
   ).toBeVisible()
   await expect(
-    page.getByRole('heading', { name: 'Authorized compost and' }),
+    page.getByRole('heading', {
+      name: 'Authorized compost and biosolid facilities in B.C.',
+    }),
   ).toBeVisible()
+
   await page.getByRole('button', { name: 'Filter by Facility Type' }).click()
   await expect(page.getByLabel('Notification')).toBeVisible()
   await expect(page.getByLabel('Permit')).toBeVisible()
@@ -23,9 +26,18 @@ export const authorization_list_page = async (page: Page) => {
   await expect(
     page.getByRole('button', { name: 'Reset Filters' }),
   ).toBeVisible()
-  await page.getByLabel('Search Authorizations').click()
-  await page.getByLabel('Search Authorizations').fill('victoria')
-  await expect(page.getByText('Authorization #:17268')).toBeVisible()
-  await expect(page.getByText('CITY OF VICTORIA')).toBeVisible()
-  await expect(page.locator('#root')).toContainText('Notification')
+
+  await expect(page.getByPlaceholder('Type keyword to search')).toBeVisible()
+  const searchInput = page.getByLabel('Search Authorizations')
+  await searchInput.click()
+  await searchInput.fill('victoria')
+
+  // There are 3 search results - find the City of Victoria one
+  const listItem = page
+    .getByRole('listitem')
+    .filter({ hasText: 'CITY OF VICTORIA' })
+  await expect(listItem.getByText('Authorization #:')).toBeVisible()
+  await expect(listItem.getByText('17268')).toBeVisible()
+  await expect(listItem.getByText('Active')).toBeVisible()
+  await expect(listItem.getByText('Notification')).toBeVisible()
 }

frontend/package.json

@@ -12,6 +12,7 @@
     "dev": "vite --host",
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "npm run lint -- --fix",
+    "tsc": "npx tsc --noEmit",
     "preview": "vite preview",
     "test:unit": "vitest --mode test",
     "test:cov": "vitest run --mode test --coverage",

frontend/src/App.tsx

@@ -5,9 +5,11 @@ import { Box, CircularProgress, Stack } from '@mui/material'
 
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-import AppRoutes from '@/routes'
 import AppError from '@/components/AppError'
+import AppRoutes from '@/routes'
+import { LoadingStatusType } from '@/interfaces/loading-status'
 import { fetchOMRRData, selectStatus } from '@/features/omrr/omrr-slice'
+import { fetchOmrrApplicationStatus } from '@/features/omrr/application-status-slice'
 
 import 'leaflet/dist/leaflet.css'
 
@@ -18,13 +20,21 @@ const loadingStyle = {
 
 export default function App() {
   const dispatch = useDispatch()
-  const status: string = useSelector(selectStatus)
+  const status: LoadingStatusType = useSelector(selectStatus)
 
   useEffect(() => {
     //@ts-expect-error
     dispatch(fetchOMRRData())
   }, [dispatch])
 
+  // Load application status after OMRR data has been loaded
+  useEffect(() => {
+    if (status === 'succeeded') {
+      //@ts-expect-error
+      dispatch(fetchOmrrApplicationStatus())
+    }
+  }, [dispatch, status])
+
   const isLoading = status === 'loading'
   const isError = status === 'failed'
   const isReady = !isLoading && !isError

frontend/src/app/store.ts

@@ -1,9 +1,11 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
 import { omrrSlice } from '@/features/omrr/omrr-slice'
 import { mapSlice } from '@/features/map/map-slice'
+import { applicationStatusSlice } from '@/features/omrr/application-status-slice'
 
 const rootReducer = combineReducers({
   omrr: omrrSlice.reducer,
+  applicationStatus: applicationStatusSlice.reducer,
   map: mapSlice.reducer,
 })