feat: multiple external message banners (#4998)

https://linear.app/unleash/issue/2-1495/adapt-existing-message-banner-component-to-be-more-reusablegeneric

https://linear.app/unleash/issue/2-1496/add-support-for-multiple-external-message-banners

This PR does 2 things:
- Refactors the `MessageBanner` component to be more generic and
reusable, by accepting the message info through props;
 - Adds support for multiple external message banners;

frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx

@@ -2,11 +2,9 @@ import { Check, Close, InfoOutlined, WarningAmber } from '@mui/icons-material';
 import { styled, Icon, Link } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useNavigate } from 'react-router-dom';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { MessageBannerDialog } from './MessageBannerDialog/MessageBannerDialog';
 import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { useVariant } from 'hooks/useVariant';
 
 const StyledBar = styled('aside', {
     shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'sticky',
@@ -47,8 +45,7 @@ type BannerVariant =
     | 'neutral'
     | 'secondary';
 
-interface IMessageFlag {
-    enabled: boolean;
+export interface IMessageBanner {
     message: string;
     variant?: BannerVariant;
     sticky?: boolean;
@@ -60,16 +57,13 @@ interface IMessageFlag {
     dialog?: string;
 }
 
-export const MessageBanner = () => {
-    const { uiConfig } = useUiConfig();
+interface IMessageBannerProps {
+    messageBanner: IMessageBanner;
+}
+
+export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
     const [open, setOpen] = useState(false);
 
-    const messageBanner = useVariant<IMessageFlag>(
-        uiConfig.flags.messageBanner,
-    );
-
-    if (!messageBanner) return null;
-
     const {
         message,
         variant = 'neutral',

frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx

@@ -1,7 +1,30 @@
-import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
+import {
+    IMessageBanner,
+    MessageBanner,
+} from 'component/messageBanners/MessageBanner/MessageBanner';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useVariant } from 'hooks/useVariant';
 
 export const ExternalMessageBanners = () => {
-    // TODO: Implement. If we allow multiple internal message banners, then perhaps we should allow the same for external message banners.
+    const { uiConfig } = useUiConfig();
 
-    return <MessageBanner />;
+    const messageBannerVariant =
+        useVariant<IMessageBanner | IMessageBanner[]>(
+            uiConfig.flags.messageBanner,
+        ) || [];
+
+    const messageBanners: IMessageBanner[] = Array.isArray(messageBannerVariant)
+        ? messageBannerVariant
+        : [messageBannerVariant];
+
+    return (
+        <>
+            {messageBanners.map((messageBanner) => (
+                <MessageBanner
+                    key={messageBanner.message}
+                    messageBanner={messageBanner}
+                />
+            ))}
+        </>
+    );
 };

frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx

@@ -1,4 +1,4 @@
-import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
+import { MessageBanner } from 'component/messageBanners/MessageBanner/MessageBanner';
 import { useUiFlag } from 'hooks/useUiFlag';
 
 export const InternalMessageBanners = () => {
@@ -23,7 +23,10 @@ export const InternalMessageBanners = () => {
     return (
         <>
             {mockMessageBanners.map((messageBanner) => (
-                <MessageBanner key={messageBanner.message} />
+                <MessageBanner
+                    key={messageBanner.message}
+                    messageBanner={messageBanner}
+                />
             ))}
         </>
     );