DMARC outage banner (#6043)

* add outage banner to dmarc summaries/report pages * add translations
canada-ca · Jan 10, 2025 · e909f0b · e909f0b
1 parent dbdb59f
commit e909f0b
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 135 deletions.
diff --git a/frontend/src/app/NotificationBanner.js b/frontend/src/app/NotificationBanner.js
@@ -41,7 +41,7 @@ export function NotificationBanner({
   }
 
   return (
-    <Box {...props} p="2">
+    <Box {...props} py="2">
       <Alert status={status}>
         <Flex
           maxW={{ sm: 540, md: 768, lg: 960, xl: 1200 }}

diff --git a/frontend/src/dmarc/DmarcByDomainPage.js b/frontend/src/dmarc/DmarcByDomainPage.js
@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { PAGINATED_DMARC_REPORT_SUMMARY_TABLE as FORWARD } from '../graphql/queries'
 import {
+  AlertDescription,
+  AlertTitle,
   Box,
   Divider,
   Flex,
@@ -33,6 +35,7 @@ import { AffiliationFilterSwitch } from '../components/AffiliationFilterSwitch'
 import { ExportRuaListButton } from './ExportRuaListButton'
 import { useUserVar } from '../utilities/userState'
 import { TourComponent } from '../userOnboarding/components/TourComponent'
+import { NotificationBanner } from '../app/NotificationBanner'
 
 export default function DmarcByDomainPage() {
   const { i18n } = useLingui()
@@ -276,6 +279,21 @@ export default function DmarcByDomainPage() {
           />
         </Flex>
       )}
+
+      <NotificationBanner status="warning" bannerId="dmarc-report-outage" hideable>
+        <Box>
+          <AlertTitle>
+            <Trans>Important Notice:</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            <Trans>
+              The DMARC Summaries data has not been updated since December 2024. We are working to refresh this
+              information. Please note that any displayed data may not reflect current email security status.
+            </Trans>
+          </AlertDescription>
+        </Box>
+      </NotificationBanner>
+
       <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
         {tableDisplay}
         <RelayPaginationControls

diff --git a/frontend/src/dmarc/DmarcReportPage.js b/frontend/src/dmarc/DmarcReportPage.js
@@ -663,6 +663,20 @@ export default function DmarcReportPage() {
         </Flex>
       </Box>
 
+      <NotificationBanner status="warning" bannerId="dmarc-report-outage" hideable>
+        <Box>
+          <AlertTitle>
+            <Trans>Important Notice:</Trans>
+          </AlertTitle>
+          <AlertDescription>
+            <Trans>
+              The DMARC Summaries data has not been updated since December 2024. We are working to refresh this
+              information. Please note that any displayed data may not reflect current email security status.
+            </Trans>
+          </AlertDescription>
+        </Box>
+      </NotificationBanner>
+
       {graphDisplay}
 
       <Flex align="center" mb={2}>