diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index ab799a9467..ede602779a 100644
--- a/frontend/src/component/App.tsx
+++ b/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={}
/>
+
+
diff --git a/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx b/frontend/src/component/messageBanners/externalMessageBanners/ExternalMessageBanners.tsx
new file mode 100644
index 0000000000..5e40335a65
--- /dev/null
+++ b/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 ;
+};
diff --git a/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx b/frontend/src/component/messageBanners/internalMessageBanners/InternalMessageBanners.tsx
new file mode 100644
index 0000000000..ed487743a8
--- /dev/null
+++ b/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) => (
+
+ ))}
+ >
+ );
+};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index eb5c351d7d..886c257df1 100644
--- a/frontend/src/index.tsx
+++ b/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(
-
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 0efc5bf53d..0ae5061a3e 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/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;
};
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index d120f88cae..5361d45981 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/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": {
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 96daf2be3a..8cbac5f959 100644
--- a/src/lib/types/experimental.ts
+++ b/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,
),
};