refactor: rename message banners to banners

frontend/src/component/App.tsx

@@ -20,8 +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';
+import { InternalBanners } from './banners/internalBanners/InternalBanners';
+import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -65,8 +65,8 @@ export const App = () => {
                                             )}
                                             show={<MaintenanceBanner />}
                                         />
-                                        <ExternalMessageBanners />
-                                        <InternalMessageBanners />
+                                        <ExternalBanners />
+                                        <InternalBanners />
                                         <StyledContainer>
                                             <ToastRenderer />
                                             <Routes>

frontend/src/component/messageBanners/MessageBanner/MessageBanner.tsx → frontend/src/component/banners/Banner/Banner.tsx

@@ -7,10 +7,10 @@ import {
 import { styled, Icon, Link } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useNavigate } from 'react-router-dom';
-import { MessageBannerDialog } from './MessageBannerDialog/MessageBannerDialog';
+import { BannerDialog } from './BannerDialog/BannerDialog';
 import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { BannerVariant, IMessageBanner } from 'interfaces/messageBanner';
+import { BannerVariant, IBanner } from 'interfaces/banner';
 
 const StyledBar = styled('aside', {
     shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'sticky',
@@ -43,11 +43,11 @@ const StyledIcon = styled('div', {
     color: theme.palette[variant].main,
 }));
 
-interface IMessageBannerProps {
-    messageBanner: IMessageBanner;
+interface IBannerProps {
+    banner: IBanner;
 }
 
-export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
+export const Banner = ({ banner }: IBannerProps) => {
     const [open, setOpen] = useState(false);
 
     const {
@@ -60,7 +60,7 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
         plausibleEvent,
         dialogTitle,
         dialog,
-    } = messageBanner;
+    } = banner;
 
     return (
         <StyledBar variant={variant} sticky={sticky}>
@@ -75,13 +75,13 @@ export const MessageBanner = ({ messageBanner }: IMessageBannerProps) => {
             >
                 {linkText}
             </BannerButton>
-            <MessageBannerDialog
+            <BannerDialog
                 open={open}
                 setOpen={setOpen}
                 title={dialogTitle || linkText}
             >
                 {dialog!}
-            </MessageBannerDialog>
+            </BannerDialog>
         </StyledBar>
     );
 };
@@ -127,7 +127,7 @@ const BannerButton = ({
 
     const trackEvent = () => {
         if (!plausibleEvent) return;
-        tracker.trackEvent('message_banner', {
+        tracker.trackEvent('banner', {
             props: { event: plausibleEvent },
         });
     };

frontend/src/component/messageBanners/MessageBanner/MessageBannerDialog/MessageBannerDialog.tsx → frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx

@@ -8,19 +8,19 @@ const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
     },
 }));
 
-interface IMessageBannerDialogProps {
+interface IBannerDialogProps {
     title: string;
     open: boolean;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     children: string;
 }
 
-export const MessageBannerDialog = ({
+export const BannerDialog = ({
     open,
     setOpen,
     title,
     children,
-}: IMessageBannerDialogProps) => {
+}: IBannerDialogProps) => {
     return (
         <Dialogue
             title={title}

frontend/src/component/banners/externalBanners/ExternalBanners.tsx

@@ -0,0 +1,30 @@
+import { Banner } from 'component/banners/Banner/Banner';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useVariant } from 'hooks/useVariant';
+import { IBanner } from 'interfaces/banner';
+
+export const ExternalBanners = () => {
+    const { uiConfig } = useUiConfig();
+
+    const bannerVariantFromMessageBannerFlag = useVariant<IBanner | IBanner[]>(
+        uiConfig.flags.messageBanner,
+    );
+    const bannerVariantFromBannerFlag = useVariant<IBanner | IBanner[]>(
+        uiConfig.flags.banner,
+    );
+
+    const bannerVariant =
+        bannerVariantFromMessageBannerFlag || bannerVariantFromBannerFlag || [];
+
+    const banners: IBanner[] = Array.isArray(bannerVariant)
+        ? bannerVariant
+        : [bannerVariant];
+
+    return (
+        <>
+            {banners.map((banner) => (
+                <Banner key={banner.message} banner={banner} />
+            ))}
+        </>
+    );
+};

frontend/src/component/banners/internalBanners/InternalBanners.tsx

@@ -0,0 +1,14 @@
+import { Banner } from 'component/banners/Banner/Banner';
+import { useBanners } from 'hooks/api/getters/useBanners/useBanners';
+
+export const InternalBanners = () => {
+    const { banners } = useBanners();
+
+    return (
+        <>
+            {banners.map((banner) => (
+                <Banner key={banner.id} banner={banner} />
+            ))}
+        </>
+    );
+};

frontend/src/hooks/api/actions/useMessageBannersApi/useMessageBannersApi.ts

@@ -1,27 +1,22 @@
-import { IInternalMessageBanner } from 'interfaces/messageBanner';
+import { IInternalBanner } from 'interfaces/banner';
 import useAPI from '../useApi/useApi';
 
-const ENDPOINT = 'api/admin/message-banners';
+const ENDPOINT = 'api/admin/banners';
 
-type AddOrUpdateMessageBanner = Omit<
-    IInternalMessageBanner,
-    'id' | 'createdAt'
->;
+type AddOrUpdateBanner = Omit<IInternalBanner, 'id' | 'createdAt'>;
 
-export const useMessageBannersApi = () => {
+export const useBannersApi = () => {
     const { loading, makeRequest, createRequest, errors } = useAPI({
         propagateErrors: true,
     });
 
-    const addMessageBanner = async (
-        messageBanner: AddOrUpdateMessageBanner,
-    ) => {
-        const requestId = 'addMessageBanner';
+    const addBanner = async (banner: AddOrUpdateBanner) => {
+        const requestId = 'addBanner';
         const req = createRequest(
             ENDPOINT,
             {
                 method: 'POST',
-                body: JSON.stringify(messageBanner),
+                body: JSON.stringify(banner),
             },
             requestId,
         );
@@ -30,27 +25,27 @@ export const useMessageBannersApi = () => {
         return response.json();
     };
 
-    const updateMessageBanner = async (
-        messageBannerId: number,
-        messageBanner: AddOrUpdateMessageBanner,
+    const updateBanner = async (
+        bannerId: number,
+        banner: AddOrUpdateBanner,
     ) => {
-        const requestId = 'updateMessageBanner';
+        const requestId = 'updateBanner';
         const req = createRequest(
-            `${ENDPOINT}/${messageBannerId}`,
+            `${ENDPOINT}/${bannerId}`,
             {
                 method: 'PUT',
-                body: JSON.stringify(messageBanner),
+                body: JSON.stringify(banner),
             },
             requestId,
         );
 
         await makeRequest(req.caller, req.id);
     };
 
-    const removeMessageBanner = async (messageBannerId: number) => {
-        const requestId = 'removeMessageBanner';
+    const removeBanner = async (bannerId: number) => {
+        const requestId = 'removeBanner';
         const req = createRequest(
-            `${ENDPOINT}/${messageBannerId}`,
+            `${ENDPOINT}/${bannerId}`,
             { method: 'DELETE' },
             requestId,
         );
@@ -59,9 +54,9 @@ export const useMessageBannersApi = () => {
     };
 
     return {
-        addMessageBanner,
-        updateMessageBanner,
-        removeMessageBanner,
+        addBanner,
+        updateBanner,
+        removeBanner,
         errors,
         loading,
     };

frontend/src/hooks/api/getters/useMessageBanners/useMessageBanners.ts → frontend/src/hooks/api/getters/useBanners/useBanners.ts

@@ -4,25 +4,24 @@ import handleErrorResponses from '../httpErrorResponseHandler';
 import { useConditionalSWR } from '../useConditionalSWR/useConditionalSWR';
 import useUiConfig from '../useUiConfig/useUiConfig';
 import { useUiFlag } from 'hooks/useUiFlag';
-import { IInternalMessageBanner } from 'interfaces/messageBanner';
+import { IInternalBanner } from 'interfaces/banner';
 
-const ENDPOINT = 'api/admin/message-banners';
+const ENDPOINT = 'api/admin/banners';
 
-export const useMessageBanners = () => {
+export const useBanners = () => {
     const { isEnterprise } = useUiConfig();
-    const internalMessageBanners = useUiFlag('internalMessageBanners');
+    const bannersEnabled = useUiFlag('banners');
 
     const { data, error, mutate } = useConditionalSWR(
-        isEnterprise() && internalMessageBanners,
-        { messageBanners: [] },
+        isEnterprise() && bannersEnabled,
+        { banners: [] },
         formatApiPath(ENDPOINT),
         fetcher,
     );
 
     return useMemo(
         () => ({
-            messageBanners: (data?.messageBanners ??
-                []) as IInternalMessageBanner[],
+            banners: (data?.banners ?? []) as IInternalBanner[],
             loading: !error && !data,
             refetch: () => mutate(),
             error,
@@ -33,6 +32,6 @@ export const useMessageBanners = () => {
 
 const fetcher = (path: string) => {
     return fetch(path)
-        .then(handleErrorResponses('Message Banners'))
+        .then(handleErrorResponses('Banners'))
         .then((res) => res.json());
 };

frontend/src/hooks/usePlausibleTracker.ts

@@ -15,7 +15,7 @@ export type CustomEvents =
     | 'change_request'
     | 'favorite'
     | 'maintenance'
-    | 'message_banner'
+    | 'banner'
     | 'hidden_environment'
     | 'project_overview'
     | 'suggest_tags'

frontend/src/interfaces/messageBanner.ts → frontend/src/interfaces/banner.ts

@@ -1,6 +1,6 @@
 export type BannerVariant = 'warning' | 'info' | 'error' | 'success';
 
-export interface IMessageBanner {
+export interface IBanner {
     message: string;
     variant?: BannerVariant;
     sticky?: boolean;
@@ -12,7 +12,7 @@ export interface IMessageBanner {
     dialog?: string;
 }
 
-export interface IInternalMessageBanner extends IMessageBanner {
+export interface IInternalBanner extends IBanner {
     id: number;
     enabled: boolean;
     createdAt: string;

frontend/src/interfaces/uiConfig.ts

@@ -47,6 +47,7 @@ export type UiFlags = {
     embedProxyFrontend?: boolean;
     maintenanceMode?: boolean;
     messageBanner?: Variant;
+    banner?: Variant;
     featuresExportImport?: boolean;
     caseInsensitiveInOperators?: boolean;
     proPlanAutoCharge?: boolean;
@@ -69,7 +70,7 @@ export type UiFlags = {
     accessOverview?: boolean;
     datadogJsonTemplate?: boolean;
     dependentFeatures?: boolean;
-    internalMessageBanners?: boolean;
+    banners?: boolean;
     disableEnvsOnRevive?: boolean;
     playgroundImprovements?: boolean;
 };