From f7062e2296f84ccb7f5d05468d4d7da2bc8eb9fe Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 13 Mar 2024 16:21:40 +0100
Subject: [PATCH] feat: making banner more composable (#6540)

---
 frontend/src/component/App.tsx                |  2 ++
 .../admin/banners/BannerModal/BannerModal.tsx |  2 +-
 .../Banner/BannerDialog/BannerDialog.tsx      |  9 ++++++--
 .../OutdatedSdksBanner/OutdatedSdksBanner.tsx | 23 +++++++++++++++++++
 frontend/src/interfaces/banner.ts             |  4 +++-
 5 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx

diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index 946f3728d1..bb75586392 100644
--- a/frontend/src/component/App.tsx
+++ b/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>
diff --git a/frontend/src/component/admin/banners/BannerModal/BannerModal.tsx b/frontend/src/component/admin/banners/BannerModal/BannerModal.tsx
index 8eb1f6dc82..5218b7c7a9 100644
--- a/frontend/src/component/admin/banners/BannerModal/BannerModal.tsx
+++ b/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;
diff --git a/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx b/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
index f2f515d684..6703a930d8 100644
--- a/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
+++ b/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>
     );
 };
diff --git a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx
new file mode 100644
index 0000000000..b3f45a2a1d
--- /dev/null
+++ b/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} />}
+            />
+        </>
+    );
+};
diff --git a/frontend/src/interfaces/banner.ts b/frontend/src/interfaces/banner.ts
index 90206cac12..993cab72e3 100644
--- a/frontend/src/interfaces/banner.ts
+++ b/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'> {