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, ), };