feat: Compliance and Enforcement Section (#373)

.github/workflows/merge.yml

@@ -4,11 +4,11 @@ on:
   push:
     branches: [main]
     paths-ignore:
-      - '*.md'
-      - '.github/**'
-      - '.graphics/**'
-      - '!.github/workflows/.deploy.yml'
-      - '!.github/workflows/merge.yml'
+      - "*.md"
+      - ".github/**"
+      - ".graphics/**"
+      - "!.github/workflows/.deploy.yml"
+      - "!.github/workflows/merge.yml"
   workflow_dispatch:
     inputs:
       pr_no:
@@ -48,14 +48,14 @@ jobs:
         --set-string backend.env.omrrAuthzDocsFlag=true\
   tests:
     name: Tests
-    needs: [ deploy-test ]
+    needs: [deploy-test]
     uses: ./.github/workflows/.tests.yml
     with:
       target: test
 
   deploy-prod:
     name: Deploy (prod)
-    needs: [ vars,tests ]
+    needs: [vars, tests]
     uses: ./.github/workflows/.deploy.yml
     secrets: inherit
     with:
@@ -70,6 +70,8 @@ jobs:
         --set global.amsURL=https://j200.gov.bc.ca/pub/ams/ \
         --set-string backend.env.omrrAppStatusFlag=true \
         --set-string backend.env.omrrAuthzDocsFlag=true\
+        --set global.nrptiAPIURL=https://nrpti-api-f00029-prod.apps.silver.devops.gov.bc.ca \
+        --set global.nrcedURL=https://nrced.gov.bc.ca \
 
   promote:
     name: Promote Images
@@ -79,7 +81,7 @@ jobs:
       packages: write
     strategy:
       matrix:
-        package: [ backend, frontend ]
+        package: [backend, frontend]
     timeout-minutes: 1
     steps:
       - uses: shrink/actions-docker-registry-tag@v4

.github/workflows/pr-open.yml

@@ -17,7 +17,7 @@ jobs:
       packages: write
     strategy:
       matrix:
-        package: [ backend, frontend ]
+        package: [backend, frontend]
     timeout-minutes: 10
     steps:
       - uses: bcgov/[email protected]
@@ -42,11 +42,14 @@ jobs:
         --set backend.pdb.enabled=false \
         --set frontend.pdb.enabled=false \
         --set global.amsURL=https://test.j200.gov.bc.ca/pub/ams/ \
+        --set global.nrptiAPIURL=https://nrpti-api-f00029-prod.apps.silver.devops.gov.bc.ca \
+        --set global.nrcedURL=https://nrced.gov.bc.ca \
         --set-string backend.env.omrrAuthzDocsFlag=true \
+
   tests:
     name: Tests
     if: needs.deploys.outputs.triggered == 'true'
-    needs: [ deploys ]
+    needs: [deploys]
     uses: ./.github/workflows/.tests.yml
     with:
       target: ${{ github.event.number }}

charts/nr-epd-organics-info/templates/frontend/templates/deployment.yaml

@@ -47,6 +47,10 @@ spec:
               value: {{ .Values.frontend.env.osmGrayscaleFlag | quote }}
             - name: VITE_ZOOM_TO_RESULTS_CONTROL_FLAG
               value: {{ .Values.frontend.env.zoomToResultsControlFlag | quote }}
+            - name: VITE_NRPTI_API_URL
+              value: {{ .Values.global.nrptiAPIURL | quote }}
+            - name: VITE_NRCED_URL
+              value: {{ .Values.global.nrcedURL | quote }}
           ports:
             - name: http
               containerPort: 3000

charts/nr-epd-organics-info/values.yaml

@@ -90,4 +90,5 @@ frontend:
   env:
     osmGrayscaleFlag: "false"
     zoomToResultsControlFlag: "true"
-
+    nrptiAPIURL: "https://nrpti-api-f00029-prod.apps.silver.devops.gov.bc.ca"
+    nrcedURL: "https://nrced.gov.bc.ca"

frontend/.env.sample

@@ -3,3 +3,6 @@ VITE_AMS_URL=https://test.j200.gov.bc.ca/pub/ams/
 VITE_API_URL=https://nr-epd-organics-info-test-frontend.apps.silver.devops.gov.bc.ca
 VITE_OSM_GRAYSCALE_FLAG=true
 VITE_ZOOM_TO_RESULTS_CONTROL_FLAG=true
+VITE_AMS_DOCS_FLAG=true
+VITE_NRPTI_API_URL=https://nrpti-api-f00029-prod.apps.silver.devops.gov.bc.ca
+VITE_NRCED_URL=https://nrced.gov.bc.ca

frontend/Caddyfile

@@ -18,7 +18,7 @@
         header {
           Content-Type text/javascript
         }
-        respond `window.config={"VITE_AMS_URL":"{$VITE_AMS_URL}", "VITE_AMS_DOCS_FLAG":"{$VITE_AMS_DOCS_FLAG}", "VITE_OSM_GRAYSCALE_FLAG":"{$VITE_OSM_GRAYSCALE_FLAG}", "VITE_ZOOM_TO_RESULTS_CONTROL_FLAG":"{$VITE_ZOOM_TO_RESULTS_CONTROL_FLAG}"};`
+        respond `window.config={"VITE_AMS_URL":"{$VITE_AMS_URL}", "VITE_AMS_DOCS_FLAG":"{$VITE_AMS_DOCS_FLAG}", "VITE_OSM_GRAYSCALE_FLAG":"{$VITE_OSM_GRAYSCALE_FLAG}", "VITE_ZOOM_TO_RESULTS_CONTROL_FLAG":"{$VITE_ZOOM_TO_RESULTS_CONTROL_FLAG}", "VITE_NRPTI_API_URL":"{$VITE_NRPTI_API_URL}", "VITE_NRCED_URL":"{$VITE_NRCED_URL}"};`
     }
 	root * /srv
 	encode zstd gzip
@@ -38,11 +38,12 @@
 		X-Content-Type-Options "nosniff"
 		Strict-Transport-Security "max-age=31536000"
 		Content-Security-Policy "
-		    default-src 'self'  https://spt.apps.gov.bc.ca data: https://*.openstreetmap.org ;
-		    script-src 'self'  https://www2.gov.bc.ca https://*.openstreetmap.org;
+		    default-src 'self'  https://spt.apps.gov.bc.ca https://*.apps.silver.devops.gov.bc.ca data: https://*.openstreetmap.org ;
+		    script-src 'self'  https://www2.gov.bc.ca https://*.openstreetmap.org https://*.apps.silver.devops.gov.bc.ca;
 		    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://use.fontawesome.com https://*.openstreetmap.org;
 		    font-src 'self' https://fonts.gstatic.com https://*.openstreetmap.org;
-		    img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca https://*.google.com https://*.openstreetmap.org https://*.stadiamaps.com https://server.arcgisonline.com https://api.maptiler.com;
+		    img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca https://*.google.com https://*.openstreetmap.org https://*.stadiamaps.com https://server.arcgisonline.com https://api.maptiler.com https://*.apps.silver.devops.gov.bc.ca;
+			connect-src 'self' https://*.apps.silver.devops.gov.bc.ca;
 			frame-ancestors 'none';
 			form-action 'self' {$BACKEND_URL};
 			frame-src 'none';

frontend/e2e/pages/auth.details.ts

@@ -33,6 +33,18 @@ export const authorization_details_page = async (page: Page) => {
     page.getByText('Schedule 2 - Composting Operations'),
   ).toBeVisible()
 
+  // Compliance and Enforcement
+  await expect(
+    page.getByText('Compliance and Enforcement', { exact: true }),
+  ).toBeVisible()
+  const headerRow = page.locator('.compliance-table-header')
+  await expect(
+    headerRow.getByText('Date Issued', { exact: true }),
+  ).toBeVisible()
+  await expect(headerRow.getByText('Type', { exact: true })).toBeVisible()
+  await expect(headerRow.getByText('Summary', { exact: true })).toBeVisible()
+  await expect(headerRow.getByText('Action', { exact: true })).toBeVisible()
+
   const backBtn = page.getByRole('button', { name: 'Back to Text Search' })
   await expect(backBtn).toBeVisible()
   await backBtn.click()

frontend/src/mocks/mock-compliance-data.ts

@@ -0,0 +1,14 @@
+export const mockComplianceData = [
+  {
+    dateIssued: '2024-01-01',
+    recordType: 'Inspection',
+    summary: 'Test Compliance Record',
+    _id: 'test123',
+  },
+  {
+    dateIssued: '2024-02-01',
+    recordType: 'Order',
+    summary: 'Another Test Record',
+    _id: 'test456',
+  },
+]

frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx

@@ -8,6 +8,7 @@ import { mockOmrrData } from '@/mocks/mock-omrr-data'
 import { mockOmrrApplicationStatusResponse } from '@/mocks/mock-omrr-application-status'
 import { mockOmrrDocuments } from '@/mocks/mock-omrr-documents'
 import AuthorizationDetails from './AuthorizationDetails'
+import { mockComplianceData } from '@/mocks/mock-compliance-data'
 
 describe('Test suite for AuthorizationDetails', () => {
   function renderComponent(
@@ -144,4 +145,64 @@ describe('Test suite for AuthorizationDetails', () => {
     screen.getByText('Documents')
     screen.getByText('File Description')
   })
+
+  it('should render compliance section with no results', async () => {
+    const number = 12398
+    renderComponent(number)
+
+    screen.getByText('Compliance and Enforcement')
+    screen.getByText('Date Issued')
+    screen.getByText('Type')
+    screen.getByText('Summary')
+    screen.getByText('Action')
+    await screen.findByText('No results found')
+  })
+
+  it('should render compliance section with data', async () => {
+    const number = 12398
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve([{ searchResults: mockComplianceData }]),
+      }),
+    ) as ReturnType<typeof vi.fn>
+
+    renderComponent(number)
+
+    screen.getByText('Compliance and Enforcement')
+    const headerRow = screen
+      .getByText('Date Issued')
+      .closest('.compliance-table-header')
+    expect(headerRow).toBeInTheDocument()
+
+    // Wait for data to load
+    await screen.findByText(mockComplianceData[0].summary)
+    const viewLinks = screen.getAllByText('View')
+    expect(viewLinks).toHaveLength(2) // Verify we have two "View" links
+  })
+
+  it('should handle compliance section sorting', async () => {
+    const number = 12398
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve([{ searchResults: mockComplianceData }]),
+      }),
+    ) as ReturnType<typeof vi.fn>
+
+    const { user } = renderComponent(number)
+
+    // Wait for data to load
+    await screen.findByText(mockComplianceData[0].summary)
+
+    const sortButton = screen.getByText('Date Issued').closest('button')
+    expect(sortButton).toBeInTheDocument()
+
+    await user.click(sortButton!)
+    expect(screen.getByTestId('ArrowDownwardIcon')).toBeInTheDocument()
+
+    await user.click(sortButton!)
+    expect(screen.getByTestId('ArrowUpwardIcon')).toBeInTheDocument()
+
+    await user.click(sortButton!)
+    expect(screen.getByTestId('ImportExportIcon')).toBeInTheDocument()
+  })
 })

frontend/src/pages/authorizationDetails/AuthorizationDetails.tsx

@@ -12,6 +12,7 @@ import { LocationSection } from './LocationSection'
 import { DetailsSection } from './DetailsSection'
 import { DocumentsSection } from './DocumentsSection'
 import { ContactSection } from './ContactSection'
+import { ComplianceSection } from './ComplianceSection'
 
 import './AuthorizationDetails.css'
 
@@ -77,6 +78,7 @@ export default function AuthorizationDetails() {
       <ApplicationStatusSection item={item} />
       <LocationSection item={item} />
       <DetailsSection item={item} />
+      <ComplianceSection item={item} />
       <DocumentsSection item={item} />
       <ContactSection authNumber={number.toString()} />
     </Stack>

frontend/src/pages/authorizationDetails/ComplianceSection.css

@@ -0,0 +1,83 @@
+.compliance-table {
+  border-radius: 4px 4px 0 0;
+  border: 1px solid var(--surface-color-border-light);
+}
+
+.compliance-table-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 4fr 100px;
+}
+
+.compliance-table-cell {
+  background-color: var(--surface-color-background-white);
+  border-bottom: 1px solid #d8d8d8;
+  color: var(--typography-color-secondary);
+  padding: 8px;
+  font-size: 12px;
+}
+
+.compliance-table-cell--no-data {
+  color: var(--typography-color-secondary);
+  text-align: center;
+  padding: 24px;
+  background-color: var(--surface-color-brand-gray-10);
+  grid-column: 1 / -1; /* This makes it span all columns */
+}
+
+.compliance-table-header .compliance-table-cell {
+  background-color: var(--surface-color-brand-gray-20);
+  border-bottom-color: var(--surface-color-border-medium);
+  border-right: 1px solid var(--surface-color-border-light);
+  color: var(--typography-color-secondary);
+  font-weight: 700;
+}
+
+.compliance-table-header .compliance-table-cell:last-child {
+  border-right: none;
+}
+
+.compliance-table-header:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.compliance-table-cell a {
+  color: var(--typography-color-link);
+  text-decoration-line: none;
+  font-size: 12px;
+}
+
+.compliance-table-cell--sortable {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.compliance-table-cell--sortable:hover {
+  background-color: var(--surface-color-brand-gray-30);
+}
+
+.compliance-table-cell--sortable svg {
+  width: 16px;
+  height: 16px;
+}
+
+.view-link {
+  color: var(--typography-color-primary);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.view-link svg {
+  font-size: 14px;
+}
+
+.view-link:hover {
+  text-decoration: underline;
+}
+
+.compliance-table-row:not(.compliance-table-header) > div:last-child {
+  padding-left: 10px;
+}