From 742abab41e6e2a2212584b2f71bd8b5f4792b76c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 11 Oct 2023 13:42:05 +0100
Subject: [PATCH] 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;
---
 .../MessageBanner/MessageBanner.tsx           | 18 ++++--------
 .../MessageBannerDialog.tsx                   |  0
 .../ExternalMessageBanners.tsx                | 29 +++++++++++++++++--
 .../InternalMessageBanners.tsx                |  7 +++--
 4 files changed, 37 insertions(+), 17 deletions(-)
 rename frontend/src/component/{common => messageBanners}/MessageBanner/MessageBanner.tsx (92%)
 rename frontend/src/component/{common => messageBanners}/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx (100%)

diff --git a/frontend/src/component/common/MessageBanner/MessageBanner.tsx b/frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx
similarity index 92%
rename from frontend/src/component/common/MessageBanner/MessageBanner.tsx
rename to frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx
index 0931700da9..62dc412dca 100644
--- a/frontend/src/component/common/MessageBanner/MessageBanner.tsx
+++ b/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',
diff --git a/frontend/src/component/common/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx b/frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx
similarity index 100%
rename from frontend/src/component/common/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx
rename to frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx
diff --git a/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx b/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx
index 5e40335a65..49eb0a8d0c 100644
--- a/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx
+++ b/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}
+                />
+            ))}
+        </>
+    );
 };
diff --git a/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx b/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx
index ed487743a8..4418ce0c07 100644
--- a/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx
+++ b/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}
+                />
             ))}
         </>
     );