feat: re-order message banners (#4995)

https://linear.app/unleash/issue/2-1494/re-order-message-banners

- Re-orders message banners to fit into this logic:

>1. Maintenance banner
>2. External message banner(s) - Most likely coming from Unleash
>3. Internal message banner(s)

- Renames the feature flag to better reflect the feature behavior;
- Lays a basic skeleton structure for this new feature;

frontend/src/component/App.tsx

@@ -20,6 +20,8 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import MaintenanceBanner from './maintenance/MaintenanceBanner';
 import { styled } from '@mui/material';
 import { InitialRedirect } from './InitialRedirect';
+import { InternalMessageBanners } from './messageBanners/internalMessageBanners/InternalMessageBanners';
+import { ExternalMessageBanners } from './messageBanners/externalMessageBanners/ExternalMessageBanners';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -63,6 +65,8 @@ export const App = () => {
                                             )}
                                             show={<MaintenanceBanner />}
                                         />
+                                        <ExternalMessageBanners />
+                                        <InternalMessageBanners />
                                         <StyledContainer>
                                             <ToastRenderer />
                                             <Routes>

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

@@ -0,0 +1,7 @@
+import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
+
+export const ExternalMessageBanners = () => {
+    // TODO: Implement. If we allow multiple internal message banners, then perhaps we should allow the same for external message banners.
+
+    return <MessageBanner />;
+};

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

@@ -0,0 +1,30 @@
+import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
+import { useUiFlag } from 'hooks/useUiFlag';
+
+export const InternalMessageBanners = () => {
+    const internalMessageBanners = useUiFlag('internalMessageBanners');
+
+    if (!internalMessageBanners) return null;
+
+    // TODO: Implement. `messageBanners` should come from a `useMessageBanners()` hook.
+
+    const mockMessageBanners = [
+        {
+            message: 'Test 1',
+        },
+        {
+            message: 'Test 2',
+        },
+        {
+            message: 'Test 3',
+        },
+    ];
+
+    return (
+        <>
+            {mockMessageBanners.map((messageBanner) => (
+                <MessageBanner key={messageBanner.message} />
+            ))}
+        </>
+    );
+};

frontend/src/index.tsx

@@ -13,7 +13,6 @@ import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/Feedb
 import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
 import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus';
 import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
-import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
 
 window.global ||= window;
 
@@ -25,7 +24,6 @@ ReactDOM.render(
                     <AnnouncerProvider>
                         <FeedbackCESProvider>
                             <InstanceStatus>
-                                <MessageBanner />
                                 <ScrollTop />
                                 <App />
                             </InstanceStatus>

frontend/src/interfaces/uiConfig.ts

@@ -66,7 +66,7 @@ export type UiFlags = {
     privateProjects?: boolean;
     accessOverview?: boolean;
     dependentFeatures?: boolean;
-    internalMessageBanner?: boolean;
+    internalMessageBanners?: boolean;
     [key: string]: boolean | Variant | undefined;
 };
 

src/lib/__snapshots__/create-config.test.ts.snap

@@ -92,7 +92,7 @@ exports[`should create default config 1`] = `
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
       "googleAuthEnabled": false,
-      "internalMessageBanner": false,
+      "internalMessageBanners": false,
       "lastSeenByEnvironment": false,
       "maintenanceMode": false,
       "messageBanner": {
@@ -134,7 +134,7 @@ exports[`should create default config 1`] = `
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
       "googleAuthEnabled": false,
-      "internalMessageBanner": false,
+      "internalMessageBanners": false,
       "lastSeenByEnvironment": false,
       "maintenanceMode": false,
       "messageBanner": {

src/lib/types/experimental.ts

@@ -34,7 +34,7 @@ export type IFlagKey =
     | 'disableMetrics'
     | 'transactionalDecorator'
     | 'useLastSeenRefactor'
-    | 'internalMessageBanner';
+    | 'internalMessageBanners';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -158,8 +158,8 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_USE_LAST_SEEN_REFACTOR,
         false,
     ),
-    internalMessageBanner: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_INTERNAL_MESSAGE_BANNER,
+    internalMessageBanners: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_INTERNAL_MESSAGE_BANNERS,
         false,
     ),
 };