feat: making banner more composable (#6540)

frontend/src/component/App.tsx

@@ -22,6 +22,7 @@ import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
 import { EdgeUpgradeBanner } from './banners/EdgeUpgradeBanner/EdgeUpgradeBanner';
 import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
 import { Demo } from './demo/Demo';
+import { OutdatedSdksBanner } from './banners/OutdatedSdksBanner/OutdatedSdksBanner';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -67,6 +68,7 @@ export const App = () => {
                                 <ExternalBanners />
                                 <InternalBanners />
                                 <EdgeUpgradeBanner />
+                                <OutdatedSdksBanner />
                                 <StyledContainer>
                                     <ToastRenderer />
                                     <Routes>

frontend/src/component/admin/banners/BannerModal/BannerModal.tsx

@@ -61,7 +61,7 @@ export const BannerModal = ({ banner, open, setOpen }: IBannerModalProps) => {
         setLink(banner?.link || '');
         setLinkText(banner?.linkText || '');
         setDialogTitle(banner?.dialogTitle || '');
-        setDialog(banner?.dialog || '');
+        setDialog(typeof banner?.dialog === 'string' ? banner?.dialog : '');
     }, [open, banner]);
 
     const editing = banner !== undefined;

frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { Markdown } from 'component/common/Markdown/Markdown';
+import { ReactNode } from 'react';
 
 const StyledMarkdown = styled(Markdown)(({ theme }) => ({
     'h1, h2, h3': {
@@ -12,7 +13,7 @@ interface IBannerDialogProps {
     title: string;
     open: boolean;
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    children: string;
+    children: ReactNode;
 }
 
 export const BannerDialog = ({
@@ -30,7 +31,11 @@ export const BannerDialog = ({
                 setOpen(false);
             }}
         >
-            <StyledMarkdown>{children}</StyledMarkdown>
+            {typeof children === 'string' ? (
+                <StyledMarkdown>{children}</StyledMarkdown>
+            ) : (
+                children
+            )}
         </Dialogue>
     );
 };

frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx

@@ -0,0 +1,23 @@
+import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender';
+import { Banner } from '../Banner/Banner';
+import { IBanner } from '../../../interfaces/banner';
+
+export const OutdatedSdksBanner = () => {
+    const displayOutdatedSdksBanner = false;
+    const outdatedSdksBanner: IBanner = {
+        message: `We noticed that you're using outdated SDKs. `,
+        variant: 'warning',
+        link: 'dialog',
+        linkText: 'Please update those versions',
+        dialogTitle: 'Outdated SDKs',
+        dialog: <h1>Outdated SDKs</h1>,
+    };
+    return (
+        <>
+            <ConditionallyRender
+                condition={displayOutdatedSdksBanner}
+                show={<Banner banner={outdatedSdksBanner} />}
+            />
+        </>
+    );
+};

frontend/src/interfaces/banner.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export type BannerVariant = 'info' | 'warning' | 'error' | 'success';
 
 export interface IBanner {
@@ -9,7 +11,7 @@ export interface IBanner {
     linkText?: string;
     plausibleEvent?: string;
     dialogTitle?: string;
-    dialog?: string;
+    dialog?: ReactNode;
 }
 
 export interface IInternalBanner extends Omit<IBanner, 'plausibleEvent'> {