chore: allow custom messages in maintenance mode banner (UI) (#10961)

Updates the maintenance mode banner to accept string variants, allowing
for custom maintenance mode messages.

Because the banner is almost the same as the existing banner component
we have, we can simplify the impl and just reuse the existing banner
instead. The one difference is that the maintenance mode banner used to
be taller. However, after talking to UX, we agreed that the banner
should be the same size, anyway.

<img width="1552" height="120" alt="image"
src="https://github.com/user-attachments/assets/fc9dc8ad-26ba-411a-846e-a79e1b855f37"
/>

frontend/src/component/App.tsx

@@ -14,7 +14,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
-import MaintenanceBanner from './maintenance/MaintenanceBanner.tsx';
+import { MaintenanceBanner } from './maintenance/MaintenanceBanner.tsx';
 import { styled } from '@mui/material';
 import { InitialRedirect, useLastViewedPage } from './InitialRedirect.tsx';
 import { InternalBanners } from './banners/internalBanners/InternalBanners.tsx';

frontend/src/component/maintenance/MaintenanceBanner.tsx

@@ -1,39 +1,7 @@
-import { styled } from '@mui/material';
-import ErrorOutlineRounded from '@mui/icons-material/ErrorOutlineRounded';
-import { Sticky } from 'component/common/Sticky/Sticky';
+import { Banner } from 'component/banners/Banner/Banner';
+import { useMaintenanceBannerMessage } from './useMaintenanceBannerMessage.ts';
 
-const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
-    color: theme.palette.error.main,
-    height: '20px',
-    width: '20px',
-    marginRight: theme.spacing(1),
-}));
-
-const StyledDiv = styled(Sticky)(({ theme }) => ({
-    display: 'flex',
-    fontSize: theme.fontSizes.smallBody,
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.error.contrastText,
-    backgroundColor: theme.palette.error.light,
-    height: '65px',
-    borderBottom: `1px solid ${theme.palette.error.border}`,
-    whiteSpace: 'pre-wrap',
-    zIndex: theme.zIndex.sticky - 100,
-}));
-
-const MaintenanceBanner = () => {
-    return (
-        <StyledDiv>
-            <StyledErrorRoundedIcon />
-            <b>Maintenance Mode! </b>
-            <p>
-                During maintenance mode, any changes made will not be saved and
-                you may receive an error. We apologize for any inconvenience
-                this may cause.
-            </p>
-        </StyledDiv>
-    );
+export const MaintenanceBanner = () => {
+    const message = useMaintenanceBannerMessage();
+    return <Banner banner={{ message, variant: 'error' }} />;
 };
-
-export default MaintenanceBanner;

frontend/src/component/maintenance/useMaintenanceBannerMessage.test.ts

@@ -0,0 +1,27 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useMaintenanceBannerMessage } from './useMaintenanceBannerMessage.ts';
+import { testServerRoute, testServerSetup } from 'utils/testServer.ts';
+import { PayloadType, type Variant } from 'utils/variants.ts';
+
+const server = testServerSetup();
+const setupApi = (maintenanceMode?: boolean | Variant) => {
+    testServerRoute(server, '/api/admin/ui-config', {
+        flags: {
+            maintenanceMode,
+        },
+    });
+};
+
+test('Returns custom string if variant has string payload', async () => {
+    setupApi({
+        name: 'Variant',
+        enabled: true,
+        payload: {
+            type: PayloadType.STRING,
+            value: '**Custom** message',
+        },
+    });
+    const { result } = renderHook(() => useMaintenanceBannerMessage());
+
+    await waitFor(() => expect(result.current).toBe('**Custom** message'));
+});

frontend/src/component/maintenance/useMaintenanceBannerMessage.ts

@@ -0,0 +1,19 @@
+import { useUiFlag } from 'hooks/useUiFlag';
+import { useVariant } from 'hooks/useVariant';
+import { PayloadType, type Variant } from 'utils/variants';
+
+export const defaultMessage =
+    '**Maintenance mode!** During maintenance mode, any changes made will not be saved and you may receive an error. We apologize for any inconvenience this may cause.';
+
+export const useMaintenanceBannerMessage = (): string => {
+    const flag = useUiFlag('maintenanceMode');
+    const variantValue = useVariant(flag as Variant);
+    if (typeof flag === 'boolean') {
+        return defaultMessage;
+    }
+
+    if (flag?.payload?.type === PayloadType.STRING) {
+        return variantValue || defaultMessage;
+    }
+    return defaultMessage;
+};