Repository: bcgov/wps
Pull request #4406: FireBAT/Calc About Data & Layout
Author: login: brettedw
Created: 2025-04-03T21:12:14Z | Merged: 2025-04-08T15:55:57Z

- Makes `AboutDataPopover` reusable
- Adds 'About this data' to FireBAT
- Adjusts some layout to match [design](https://www.figma.com/design/XSiiyMokFt5MtKmrj8eEPO/FireCalc?node-id=1-21&t=ZPbbH8ooHGV6VGN4-4)
- Closes #4404 
# Test Links:
[Landing Page](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/)
[MoreCast](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/morecast)
[Percentile Calculator](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/percentile-calculator)
[C-Haines](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/c-haines)
[FireBat](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/fire-behaviour-calculator)
[FireBat bookmark](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/fire-behaviour-calculator?s=266&f=c5&c=NaN&w=20,s=286&f=c7&c=NaN&w=16,s=1055&f=c7&c=NaN&w=NaN,s=305&f=c7&c=NaN&w=NaN,s=344&f=c5&c=NaN&w=NaN,s=346&f=c7&c=NaN&w=NaN,s=328&f=c7&c=NaN&w=NaN,s=1399&f=c7&c=NaN&w=NaN,s=334&f=c7&c=NaN&w=NaN,s=1082&f=c3&c=NaN&w=NaN,s=388&f=c7&c=NaN&w=NaN,s=309&f=c7&c=NaN&w=16,s=306&f=c7&c=NaN&w=NaN,s=1029&f=c7&c=NaN&w=NaN,s=298&f=c7&c=NaN&w=NaN,s=836&f=c7&c=NaN&w=NaN,s=9999&f=c7&c=NaN&w=NaN)
[Auto Spatial Advisory (ASA)](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/auto-spatial-advisory)
[HFI Calculator](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/hfi-calculator)
[SFMS Insights](https://wps-pr-4406-e1e498-dev.apps.silver.devops.gov.bc.ca/insights)


Linked issue #4404: FireBat: Move Disclaimer Information
**Describe the task**
FireBat currently shows disclaimer information in the main application window. This task is to relocate the disclaimer into an "About this data" link in the sub-header similar to ASA.

**Acceptance Criteria**
- [x] "About this data" link in sub-header opens a text panel which contains information from the current disclaimers. Clicking the link a second time hides the information.
- [x] Do not include the "Disclaimers" heading.
- [x] Remove the Disclaimers from the main FireBat window.
- [x] Add corrected link for Canadian Forest Fire Danger Rating System R Library 

**Additional context**
- Designs: https://github.com/bcgov/wps/issues/4361


Diff:
diff --git a/web/src/components/AboutDataPopover.tsx b/web/src/components/AboutDataPopover.tsx
new file mode 100644
index 0000000000..1b34c11852
--- /dev/null
+++ b/web/src/components/AboutDataPopover.tsx
@@ -0,0 +1,60 @@
+import InfoIcon from '@mui/icons-material/Info'
+import { Box } from '@mui/material'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import { INFO_PANEL_CONTENT_BACKGROUND, theme } from 'app/theme'
+import * as React from 'react'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+}
+
+const AboutDataPopover = <T,>({ content, props = {} as T }: AboutDataPopoverProps<T>) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <Box data-testid="about-data-popover">
+      <Typography
+        data-testid="about-data-trigger"
+        fontSize={'0.75rem'}
+        onClick={handlePopoverOpen}
+        sx={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+      >
+        <InfoIcon sx={{ marginRight: theme.spacing(1), color: '#5686E1' }} />
+        About this data
+      </Typography>
+      <Popover
+        id="about-data-popover"
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+        slotProps={{ paper: { sx: { maxWidth: 350, backgroundColor: INFO_PANEL_CONTENT_BACKGROUND } } }}
+      >
+        <Typography sx={{ padding: theme.spacing(1), fontWeight: 'bold', fontSize: '1rem' }}>
+          About This Data
+        </Typography>
+        <Box style={{ padding: theme.spacing(2), fontSize: '0.9rem' }} data-testid="about-data-content">
+          {content(props)}
+        </Box>
+      </Popover>
+    </Box>
+  )
+}
+
+export default AboutDataPopover
diff --git a/web/src/features/fba/components/aboutDataPopover.test.tsx b/web/src/components/aboutDataPopover.test.tsx
similarity index 55%
rename from web/src/features/fba/components/aboutDataPopover.test.tsx
rename to web/src/components/aboutDataPopover.test.tsx
index c504b2881c..77ab766b2e 100644
--- a/web/src/features/fba/components/aboutDataPopover.test.tsx
+++ b/web/src/components/aboutDataPopover.test.tsx
@@ -1,25 +1,26 @@
 import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import AboutDataPopover from 'features/fba/components/AboutDataPopover'
+import AboutDataPopover from '@/components/AboutDataPopover'
+import { FBAAboutDataContent } from '@/features/fbaCalculator/components/FbaAboutDataContent'
+import { ASAAboutDataContent } from '@/features/fba/components/ASAAboutDataContent'
 
 const ADVISORY_THRESHOLD = 20
 
 describe('AboutDataPopover', () => {
-  it('should render the About Data Popover', () => {
-    const { getByTestId } = render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+  it('should render the About Data Popover with static content', () => {
+    const { getByTestId } = render(<AboutDataPopover content={FBAAboutDataContent}></AboutDataPopover>)
     const aboutData = getByTestId('about-data-popover')
     expect(aboutData).toBeInTheDocument()
   })
   it('should open the popover when clicked', () => {
-    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+    render(<AboutDataPopover content={FBAAboutDataContent}></AboutDataPopover>)
 
     fireEvent.click(screen.getByTestId('about-data-trigger'))
 
     expect(screen.getByTestId('about-data-content')).toBeVisible()
-    expect(screen.getByTestId('about-data-content')).toHaveTextContent(`${ADVISORY_THRESHOLD}%`)
   })
   it('should close the popover when clicking outside of it', async () => {
-    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+    render(<AboutDataPopover content={FBAAboutDataContent}></AboutDataPopover>)
     fireEvent.click(screen.getByTestId('about-data-trigger'))
     expect(screen.getByTestId('about-data-content')).toBeVisible()
 
@@ -28,8 +29,13 @@ describe('AboutDataPopover', () => {
       expect(screen.queryByTestId('popover-title')).not.toBeInTheDocument()
     })
   })
-  it('should contain the advisory threshold as a percent', () => {
-    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+  it('should contain the advisory threshold as a percent if passed as a prop', () => {
+    render(
+      <AboutDataPopover
+        content={ASAAboutDataContent}
+        props={{ advisoryThreshold: ADVISORY_THRESHOLD }}
+      ></AboutDataPopover>
+    )
 
     fireEvent.click(screen.getByTestId('about-data-trigger'))
 
diff --git a/web/src/features/fba/components/ASAAboutDataContent.tsx b/web/src/features/fba/components/ASAAboutDataContent.tsx
new file mode 100644
index 0000000000..2b14922ffb
--- /dev/null
+++ b/web/src/features/fba/components/ASAAboutDataContent.tsx
@@ -0,0 +1,22 @@
+interface ASAAboutDataProps {
+  advisoryThreshold: number
+}
+
+export const ASAAboutDataContent = ({ advisoryThreshold }: ASAAboutDataProps) => (
+  <ul style={{ margin: 0 }}>
+    <li>
+      A Fire Zone is under a Fire Behaviour Advisory if greater than {advisoryThreshold}% of the combustible land
+      (trees, grass, slash) is forecast to have a Head Fire Intensity between 4,000 and 10,000 kW/m.
+    </li>
+    <br />
+    <li>
+      A Fire Zone is under a Fire Behaviour Warning if greater than {advisoryThreshold}% of the combustible land is
+      forecast to have a Head Fire Intensity greater than 10,000 kW/m.
+    </li>
+    <br />
+    <li>
+      The fuel types chosen for the text bulletin are the three most common fuel types in a zone that meet or exceed the
+      Fire Behaviour Advisory threshold of 4,000 kW/m.
+    </li>
+  </ul>
+)
diff --git a/web/src/features/fba/components/AboutDataPopover.tsx b/web/src/features/fba/components/AboutDataPopover.tsx
deleted file mode 100644
index 7f4861c8a2..0000000000
--- a/web/src/features/fba/components/AboutDataPopover.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react'
-import Popover from '@mui/material/Popover'
-import Typography from '@mui/material/Typography'
-import InfoIcon from '@mui/icons-material/Info'
-import { INFO_PANEL_CONTENT_BACKGROUND, theme } from 'app/theme'
-
-interface AboutDataProps {
-  advisoryThreshold: number
-}
-
-const AboutDataPopover = ({ advisoryThreshold }: AboutDataProps) => {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
-
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null)
-  }
-
-  const open = Boolean(anchorEl)
-
-  return (
-    <div data-testid="about-data-popover">
-      <Typography
-        data-testid="about-data-trigger"
-        fontSize={'0.75rem'}
-        onClick={handlePopoverOpen}
-        sx={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
-      >
-        <InfoIcon sx={{ marginRight: theme.spacing(1), color: '#5686E1' }}></InfoIcon>
-        About this data
-      </Typography>
-      <Popover
-        id="about-data-popover"
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left'
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-        slotProps={{ paper: { sx: { maxWidth: 350, backgroundColor: INFO_PANEL_CONTENT_BACKGROUND } } }}
-      >
-        <Typography
-          sx={{
-            padding: theme.spacing(1),
-            fontWeight: 'bold',
-            fontSize: '1rem'
-          }}
-        >
-          About This Data
-        </Typography>
-        <div
-          style={{ paddingBottom: theme.spacing(3), paddingRight: theme.spacing(2), fontSize: '0.9rem' }}
-          data-testid="about-data-content"
-        >
-          <ul style={{ margin: 0 }}>
-            <li>
-              A Fire Zone is under a Fire Behaviour Advisory if greater than {advisoryThreshold}% of the combustible
-              land (trees, grass, slash) is forecast to have a Head Fire Intensity between 4,000 and 10,000 kW/m.
-            </li>
-            <br />
-            <li>
-              A Fire Zone is under a Fire Behaviour Warning if greater than {advisoryThreshold}% of the combustible land
-              is forecast to have a Head Fire Intensity greater than 10,000 kW/m.
-            </li>
-            <br />
-            <li>
-              The fuel types chosen for the text bulletin are the three most common fuel types in a zone that meet or
-              exceed the Fire Behaviour Advisory threshold of 4,000 kW/m.
-            </li>
-          </ul>
-        </div>
-      </Popover>
-    </div>
-  )
-}
-
-export default AboutDataPopover
diff --git a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
index e81dcf5068..36ed37e6b5 100644
--- a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
+++ b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
@@ -24,8 +24,9 @@ import { fetchProvincialSummary } from 'features/fba/slices/provincialSummarySli
 import AdvisoryReport from 'features/fba/components/infoPanel/AdvisoryReport'
 import FireZoneUnitTabs from 'features/fba/components/infoPanel/FireZoneUnitTabs'
 import { fetchFireCentreTPIStats } from 'features/fba/slices/fireCentreTPIStatsSlice'
-import AboutDataPopover from 'features/fba/components/AboutDataPopover'
 import { fetchFireCentreHFIFuelStats } from 'features/fba/slices/fireCentreHFIFuelStatsSlice'
+import AboutDataPopover from '@/components/AboutDataPopover'
+import { ASAAboutDataContent } from '@/features/fba/components/ASAAboutDataContent'
 
 const ADVISORY_THRESHOLD = 20
 
@@ -161,7 +162,7 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
             </FireCentreFormControl>
           </Grid>
           <Grid item sx={{ marginLeft: 'auto', paddingRight: theme.spacing(2) }}>
-            <AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD} />
+            <AboutDataPopover content={ASAAboutDataContent} props={{ advisoryThreshold: ADVISORY_THRESHOLD }} />
           </Grid>
         </Grid>
       </Box>
diff --git a/web/src/features/fbaCalculator/components/FBATable.tsx b/web/src/features/fbaCalculator/components/FBATable.tsx
index 01b5c9b34f..af15ccf618 100644
--- a/web/src/features/fbaCalculator/components/FBATable.tsx
+++ b/web/src/features/fbaCalculator/components/FBATable.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { difference, filter, findIndex, isEmpty, isEqual, isUndefined } from 'lodash'
-import { TableBody, TableCell, TableRow } from '@mui/material'
+import { Grid, TableBody, TableCell, TableRow } from '@mui/material'
 import GetAppIcon from '@mui/icons-material/GetApp'
 import ViewColumnOutlinedIcon from '@mui/icons-material/ViewColumnOutlined'
 import { CsvBuilder } from 'filefy'
@@ -38,8 +38,10 @@ import FBATableInstructions from 'features/fbaCalculator/components/FBATableInst
 import FilterColumnsModal from 'components/FilterColumnsModal'
 import WPSDatePicker from 'components/WPSDatePicker'
 import { AppDispatch } from 'app/store'
-import { StyledFormControl } from 'components/StyledFormControl'
 import { DataTableCell } from 'features/hfiCalculator/components/StyledPlanningAreaComponents'
+import { theme } from '@/app/theme'
+import AboutDataPopover from '@/components/AboutDataPopover'
+import { FBAAboutDataContent } from '@/features/fbaCalculator/components/FbaAboutDataContent'
 export interface FBATableProps {
   maxWidth?: number
   maxHeight?: number
@@ -542,42 +544,72 @@ const FBATable = (props: FBATableProps) => {
       {stationsError ||
         (fbaResultsError && <ErrorAlert stationsError={stationsError} fbaResultsError={fbaResultsError} />)}
       <ErrorBoundary>
-        <StyledFormControl>
-          <WPSDatePicker date={dateOfInterest} updateDate={updateDate} />
-        </StyledFormControl>
-        <StyledFormControl>
-          <Button data-testid="add-row" variant="contained" color="primary" spinnercolor="white" onClick={addStation}>
-            Add Row
-          </Button>
-        </StyledFormControl>
-        <StyledFormControl>
-          <Button
-            data-testid="remove-rows"
-            disabled={rows.length === 0}
-            variant="contained"
-            color="primary"
-            spinnercolor="white"
-            onClick={deleteSelectedStations}
-          >
-            Remove Row(s)
-          </Button>
-        </StyledFormControl>
-        <StyledFormControl>
-          <Button data-testid="export" disabled={selected.length === 0} onClick={exportSelectedRows}>
-            <GetAppIcon />
-            Export Selection
-          </Button>
-        </StyledFormControl>
-        <StyledFormControl>
-          <Button
-            data-testid="filter-columns-btn"
-            disabled={fireBehaviourResultStations.length === 0}
-            onClick={openColumnsModal}
-          >
-            <ViewColumnOutlinedIcon />
-            Columns
-          </Button>
-        </StyledFormControl>
+        <Grid
+          container
+          spacing={2}
+          alignItems="top"
+          justifyContent="center"
+          paddingTop={theme.spacing(1)}
+          paddingBottom={theme.spacing(1)}
+        >
+          <Grid item xs={4} container spacing={2} justifyContent="flex-start">
+            <Grid item>
+              <WPSDatePicker date={dateOfInterest} updateDate={updateDate} />
+            </Grid>
+            <Grid item>
+              <Button
+                data-testid="add-row"
+                variant="contained"
+                color="primary"
+                spinnercolor="white"
+                onClick={addStation}
+              >
+                Add Row
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                data-testid="remove-rows"
+                disabled={rows.length === 0}
+                variant="outlined"
+                color="primary"
+                spinnercolor="white"
+                onClick={deleteSelectedStations}
+              >
+                Remove Row(s)
+              </Button>
+            </Grid>
+          </Grid>
+
+          <Grid item xs={4} container spacing={2} justifyContent="center">
+            <Grid item>
+              <Button
+                data-testid="export"
+                variant="outlined"
+                disabled={selected.length === 0}
+                onClick={exportSelectedRows}
+                sx={{ height: 'auto' }}
+              >
+                <GetAppIcon />
+                Export Selection
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                data-testid="filter-columns-btn"
+                disabled={fireBehaviourResultStations.length === 0}
+                onClick={openColumnsModal}
+              >
+                <ViewColumnOutlinedIcon />
+                Columns
+              </Button>
+            </Grid>
+          </Grid>
+
+          <Grid item xs={4} container justifyContent="flex-end">
+            <AboutDataPopover content={FBAAboutDataContent} />
+          </Grid>
+        </Grid>
 
         <FilterColumnsModal
           modalOpen={modalOpen}
diff --git a/web/src/features/fbaCalculator/components/FbaAboutDataContent.tsx b/web/src/features/fbaCalculator/components/FbaAboutDataContent.tsx
new file mode 100644
index 0000000000..291b0b89ed
--- /dev/null
+++ b/web/src/features/fbaCalculator/components/FbaAboutDataContent.tsx
@@ -0,0 +1,26 @@
+export const FBAAboutDataContent = () => (
+  <>
+    <p>
+      Forecasted weather outputs are for 13:00 and FWI Indices are for 17:00 PDT. These fire behaviour calculations
+      assume flat terrain.
+    </p>
+    <p>Weather and fire behaviour indices are sourced from the Wildfire One API.</p>
+    <p>
+      Values are calculated using the{' '}
+      <a target="_blank" rel="noopener noreferrer" href="https://github.com/cffdrs/cffdrs_r">
+        Canadian Forest Fire Danger Rating System R Library
+      </a>{' '}
+      and are intended to provide general guidance for Fire Behaviour Advisories.
+    </p>
+    <p>
+      Constants for crown fuel load are taken from &quot;Development and Structure of the Canadian Forest Fire Behaviour
+      Prediction System&quot; from Forestry Canada Fire Danger Group, Information Report ST-X-3, 1992.
+    </p>
+    <p>
+      If you have any questions about how values are calculated, please{' '}
+      <a href="mailto: bcws.predictiveservices@gov.bc.ca?subject=Predictive Services Unit - Fire Behaviour Advisory Calculator">
+        contact us.
+      </a>
+    </p>
+  </>
+)
diff --git a/web/src/features/fbaCalculator/pages/FireBehaviourCalculatorPage.tsx b/web/src/features/fbaCalculator/pages/FireBehaviourCalculatorPage.tsx
index 28a485d0bf..4f5a121a3c 100644
--- a/web/src/features/fbaCalculator/pages/FireBehaviourCalculatorPage.tsx
+++ b/web/src/features/fbaCalculator/pages/FireBehaviourCalculatorPage.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import { styled } from '@mui/material/styles'
-import { Paper } from '@mui/material'
 import { Container, GeneralHeader } from 'components'
 import FBATable from 'features/fbaCalculator/components/FBATable'
 import { FIREBAT_DOC_TITLE } from 'utils/constants'
@@ -41,33 +40,6 @@ const FireBehaviourCalculator: React.FunctionComponent = () => {
       />
       <Container sx={{ paddingTop: '0.5em' }} maxWidth={'xl'}>
         <FBATable />
-        <Paper className={classes.disclaimer}>
-          <div>
-            <h4>Disclaimers:</h4>
-            <p>
-              Forecasted weather outputs are for 13:00 and FWI Indices are for 17:00 PDT. These fire behaviour
-              calculations assume flat terrain.
-            </p>
-            <p>Weather and fire behaviour indices are sourced from the Wildfire One API.</p>
-            <p>
-              Values are calculated using the{' '}
-              <a target="_blank" rel="noopener noreferrer" href="https://r-forge.r-project.org/projects/cffdrs/">
-                Canadian Forest Fire Danger Rating System R Library
-              </a>{' '}
-              and are intended to provide general guidance for Fire Behaviour Advisories.
-            </p>
-            <p>
-              Constants for crown fuel load are taken from &quot;Development and Structure of the Canadian Forest Fire
-              Behaviour Prediction System&quot; from Forestry Canada Fire Danger Group, Information Report ST-X-3, 1992.
-            </p>
-            <p>
-              If you have any questions about how values are calculated, please{' '}
-              <a href="mailto: bcws.predictiveservices@gov.bc.ca?subject=Predictive Services Unit - Fire Behaviour Advisory Calculator">
-                contact us.
-              </a>
-            </p>
-          </div>
-        </Paper>
       </Container>
     </Root>
   )


Reviews:
user: login: conbrad
body: Nice work!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-03T23:21:21Z
user: login: dgboss
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-04T00:22:51Z
user: login: dgboss
body: Looks great!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-04T00:23:51Z
user: login: brettedw
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-07T15:26:09Z
user: login: brettedw
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-07T18:06:37Z
user: login: brettedw
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-07T18:23:13Z

Review comments:
diff_hunk: @@ -0,0 +1,60 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+  backgroundColor?: string
+}
+
+const AboutDataPopover = <T,>({ content, props = {} as T, backgroundColor }: AboutDataPopoverProps<T>) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div data-testid="about-data-popover">
path: web/src/components/AboutDataPopover.tsx
user: login: conbrad
body: Any reason we use `div` over `Box` here?
created_at: 2025-04-03T23:13:56Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+  backgroundColor?: string
path: web/src/components/AboutDataPopover.tsx
user: login: dgboss
body: I think it would be nice for the about data popovers to have a similar appearance across products. It might be worth checking in with Raj and standardizing on a background.
created_at: 2025-04-04T00:22:51Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+  backgroundColor?: string
path: web/src/components/AboutDataPopover.tsx
user: login: brettedw
body: Good thought, agreed
created_at: 2025-04-07T15:26:09Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+  backgroundColor?: string
+}
+
+const AboutDataPopover = <T,>({ content, props = {} as T, backgroundColor }: AboutDataPopoverProps<T>) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div data-testid="about-data-popover">
path: web/src/components/AboutDataPopover.tsx
user: login: brettedw
body: No reason, left over from previous implementation. Changed div's to Box's
created_at: 2025-04-07T18:06:37Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataPopoverProps<T = {}> {
+  content: (props: T) => React.ReactNode
+  props?: T
+  backgroundColor?: string
path: web/src/components/AboutDataPopover.tsx
user: login: brettedw
body: Done, sticking with the same grey as ASA fyi
created_at: 2025-04-07T18:23:13Z
author_association: COLLABORATOR

PR comments:
user: login: codecov[bot]
created_at: 2025-04-03T21:27:38Z
body: ## [Codecov](https://app.codecov.io/gh/bcgov/wps/pull/4406?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov) Report
Attention: Patch coverage is `81.81818%` with `2 lines` in your changes missing coverage. Please review.
> Project coverage is 70.84%. Comparing base [(`7a12501`)](https://app.codecov.io/gh/bcgov/wps/commit/7a125018de1f087e06f1d1f122bedb256703bf0d?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov) to head [(`297cdb5`)](https://app.codecov.io/gh/bcgov/wps/commit/297cdb57219fc67bbb5d16afb2e2616b31a28a44?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov).
> Report is 1 commits behind head on main.

| [Files with missing lines](https://app.codecov.io/gh/bcgov/wps/pull/4406?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov) | Patch % | Lines |
|---|---|---|
| [web/src/components/AboutDataPopover.tsx](https://app.codecov.io/gh/bcgov/wps/pull/4406?src=pr&el=tree&filepath=web%2Fsrc%2Fcomponents%2FAboutDataPopover.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov#diff-d2ViL3NyYy9jb21wb25lbnRzL0Fib3V0RGF0YVBvcG92ZXIudHN4) | 81.81% | [1 Missing and 1 partial :warning: ](https://app.codecov.io/gh/bcgov/wps/pull/4406?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov) |

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #4406      +/-   ##
==========================================
+ Coverage   70.83%   70.84%   +0.01%     
==========================================
  Files         291      292       +1     
  Lines       11159    11170      +11     
  Branches      539      539              
==========================================
+ Hits         7904     7913       +9     
- Misses       3064     3065       +1     
- Partials      191      192       +1     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/bcgov/wps/pull/4406?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=bcgov).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-04-07T20:59:31Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=bcgov_wps&pullRequest=4406) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=bcgov_wps&pullRequest=4406&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=bcgov_wps&pullRequest=4406&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=bcgov_wps&pullRequest=4406&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=bcgov_wps&pullRequest=4406&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=bcgov_wps&pullRequest=4406&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov_wps&pullRequest=4406)


author_association: NONE