feat: Major refactor to the Authorizations List and Details pages (#188)

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.test.tsx

@@ -1,29 +1,68 @@
 import { screen } from '@testing-library/react'
 
 import App from '@/App'
-import { errorHandlers, mswServer } from '@/test-setup'
 import { render } from '@/test-utils'
+import { initialState } from '@/features/omrr/omrr-slice'
 
 describe('App suite', () => {
-  test('renders the App with successful data load', async () => {
-    render(<App />, { withStateProvider: true })
+  test('renders the App with idle state', () => {
+    render(<App />, {
+      withStateProvider: true,
+    })
 
     screen.getByAltText('Logo')
     screen.getByText('Organics Info')
-    // Wait for dashboard to load
-    await screen.findByText(
+    screen.getByTitle('Loading...')
+  })
+
+  test('renders the App with loading state', () => {
+    render(<App />, {
+      withStateProvider: true,
+      initialState: {
+        omrr: {
+          ...initialState,
+          status: 'loading',
+        },
+      },
+    })
+
+    screen.getByAltText('Logo')
+    screen.getByText('Organics Info')
+    screen.getByTitle('Loading...')
+  })
+
+  test('renders the App with successful data load', () => {
+    render(<App />, {
+      withStateProvider: true,
+      initialState: {
+        omrr: {
+          ...initialState,
+          status: 'succeeded',
+        },
+      },
+    })
+
+    screen.getByAltText('Logo')
+    screen.getByText('Organics Info')
+    screen.getByText(
       'Find an authorized compost and biosolid facility in British Columbia',
     )
   })
 
-  test('renders the App with error loading data', async () => {
-    mswServer.use(...errorHandlers)
-
-    render(<App />, { withStateProvider: true })
+  test('renders the App with error loading data', () => {
+    render(<App />, {
+      withStateProvider: true,
+      initialState: {
+        omrr: {
+          ...initialState,
+          status: 'failed',
+          error: 'Error message',
+        },
+      },
+    })
 
     screen.getByAltText('Logo')
     screen.getByText('Organics Info')
-    // Wait for error message to display
-    await screen.findByText('Loading failed, please try again later')
+    screen.getByText('Loading failed, please try again later')
   })
 })

frontend/src/App.tsx

@@ -5,40 +5,36 @@ 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 { fetchOMRRData, selectStatus } from '@/features/omrr/omrr-slice'
+import AppRoutes from '@/routes'
+import { LoadingStatusType } from '@/interfaces/loading-status'
+import { selectStatus } from '@/features/omrr/omrr-slice'
 
 import 'leaflet/dist/leaflet.css'
 
 const loadingStyle = {
   display: 'flex',
+  alignItems: 'center',
   justifyContent: 'center',
 }
 
 export default function App() {
-  const dispatch = useDispatch()
-  const status: string = useSelector(selectStatus)
-
-  useEffect(() => {
-    //@ts-expect-error
-    dispatch(fetchOMRRData())
-  }, [dispatch])
+  const status: LoadingStatusType = useSelector(selectStatus)
 
-  const isLoading = status === 'loading'
+  const isLoading = status === 'loading' || status === 'idle'
   const isError = status === 'failed'
-  const isReady = !isLoading && !isError
+  const isReady = status === 'succeeded'
 
   return (
     <BrowserRouter>
-      <Stack direction="column" sx={{ flexGrow: 1, minHeight: '100vh' }}>
+      <Stack direction="column" sx={{ minHeight: '100vh' }}>
         <Header />
         <Box
           component="div"
           flex={1}
           style={isLoading ? loadingStyle : undefined}
         >
-          {isLoading && <CircularProgress />}
+          {isLoading && <CircularProgress title="Loading..." />}
           {isError && <AppError />}
           {isReady && <AppRoutes />}
         </Box>

frontend/src/app/store.ts

@@ -1,9 +1,14 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
-import { omrrSlice } from '@/features/omrr/omrr-slice'
+import { fetchOMRRData, omrrSlice } from '@/features/omrr/omrr-slice'
 import { mapSlice } from '@/features/map/map-slice'
+import {
+  applicationStatusSlice,
+  fetchOmrrApplicationStatus,
+} from '@/features/omrr/application-status-slice'
 
 const rootReducer = combineReducers({
   omrr: omrrSlice.reducer,
+  applicationStatus: applicationStatusSlice.reducer,
   map: mapSlice.reducer,
 })
 
@@ -16,6 +21,12 @@ export function setupStore(preloadedState?: Partial<RootState>) {
 
 export const store = setupStore()
 
+// Load initial data from the API
+export function loadApiData() {
+  store.dispatch(fetchOMRRData())
+  store.dispatch(fetchOmrrApplicationStatus())
+}
+
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof rootReducer>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}