feat: clickable banner modal links (#6552)

frontend/src/component/application/ApplicationOverview.tsx

@@ -79,7 +79,7 @@ const ApplicationOverview = () => {
                 <ApplicationContainer>
                     <ApplicationHeader>
                         <ProjectContainer>
-                            Projects using this application
+                            Application is connected to these projects:
                             {data.projects.map((project) => (
                                 <Badge
                                     sx={{ cursor: 'pointer' }}

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

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import { ReactNode } from 'react';
@@ -22,20 +22,31 @@ export const BannerDialog = ({
     title,
     children,
 }: IBannerDialogProps) => {
+    const handleClose = () => {
+        setOpen(false);
+    };
+
     return (
         <Dialogue
             title={title}
             open={open}
             secondaryButtonText='Close'
-            onClose={() => {
-                setOpen(false);
-            }}
+            onClose={handleClose}
         >
-            {typeof children === 'string' ? (
-                <StyledMarkdown>{children}</StyledMarkdown>
-            ) : (
-                children
-            )}
+            <Box
+                onClick={(e) => {
+                    const target = e.target as HTMLElement;
+                    if (target.nodeName === 'A') {
+                        handleClose();
+                    }
+                }}
+            >
+                {typeof children === 'string' ? (
+                    <StyledMarkdown>{children}</StyledMarkdown>
+                ) : (
+                    children
+                )}
+            </Box>
         </Dialogue>
     );
 };

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

@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import { OutdatedSdksSchema } from 'openapi';
@@ -30,7 +30,14 @@ test('Show outdated SDKs and apps using them', async () => {
 
     link.click();
 
+    await screen.findByText('Outdated SDKs');
     await screen.findByText('unleash-node-client:3.2.1');
-    await screen.findByText('application1');
+    const application = await screen.findByText('application1');
     await screen.findByText('application2');
+
+    application.click(); // clicking on an application link should close the modal
+
+    await waitFor(() => {
+        expect(screen.queryByText('Outdated SDKs')).not.toBeInTheDocument();
+    });
 });

src/server-dev.ts

@@ -50,6 +50,7 @@ process.nextTick(async () => {
                         executiveDashboard: true,
                         userAccessUIEnabled: true,
                         sdkReporting: true,
+                        outdatedSdksBanner: true,
                         globalFrontendApiCache: true,
                         returnGlobalFrontendApiCache: true,
                     },