feat: project level outdated sdks, project level banner (#7083)

At first, I was creating a new component, Project Banner, which was 90%
of the old banner and 10% new code, but it did not feel right. The
current banner is actually smart enough to be used in any container. So
now, I have moved the outdated SDK banner to the project level.

I like the simplicity of the change.


![image](https://github.com/Unleash/unleash/assets/964450/e57c1ace-e8f9-4866-a063-6f9ae561c6c0)

frontend/src/component/App.tsx

@@ -22,8 +22,6 @@ 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';
-import { useUiFlag } from '../hooks/useUiFlag';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -50,8 +48,6 @@ export const App = () => {
         }
     }, [authDetails, user]);
 
-    const outdatedSdksBannerEnabled = useUiFlag('outdatedSdksBanner');
-
     return (
         <SWRProvider>
             <Suspense fallback={<Loader />}>
@@ -71,10 +67,6 @@ export const App = () => {
                                 <ExternalBanners />
                                 <InternalBanners />
                                 <EdgeUpgradeBanner />
-                                <ConditionallyRender
-                                    condition={outdatedSdksBannerEnabled}
-                                    show={<OutdatedSdksBanner />}
-                                />
                                 <StyledContainer>
                                     <ToastRenderer />
                                     <Routes>

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

@@ -7,7 +7,11 @@ import { OutdatedSdksBanner } from './OutdatedSdksBanner';
 const server = testServerSetup();
 
 const setupApi = (outdatedSdks: OutdatedSdksSchema) => {
-    testServerRoute(server, '/api/admin/metrics/sdks/outdated', outdatedSdks);
+    testServerRoute(
+        server,
+        '/api/admin/projects/default/sdks/outdated',
+        outdatedSdks,
+    );
     testServerRoute(server, '/api/admin/ui-config', {
         flags: {
             outdatedSdksBanner: true,
@@ -24,7 +28,7 @@ test('Show outdated SDKs and apps using them', async () => {
             },
         ],
     });
-    render(<OutdatedSdksBanner />);
+    render(<OutdatedSdksBanner project={'default'} />);
 
     const link = await screen.findByText('Please update those versions');
 

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

@@ -8,10 +8,14 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledList = styled('ul')({ margin: 0 });
 
-export const OutdatedSdksBanner = () => {
+interface IOutdatedSdksBannerProps {
+    project: string;
+}
+
+export const OutdatedSdksBanner = ({ project }: IOutdatedSdksBannerProps) => {
     const {
         data: { sdks },
-    } = useOutdatedSdks();
+    } = useOutdatedSdks(project);
     const { trackEvent } = usePlausibleTracker();
 
     const applicationClickedWithVersion = (sdkVersion: string) => {
@@ -73,7 +77,7 @@ export const OutdatedSdksBanner = () => {
         <>
             <ConditionallyRender
                 condition={sdks.length > 0}
-                show={<Banner banner={outdatedSdksBanner} />}
+                show={<Banner banner={outdatedSdksBanner} inline />}
             />
         </>
     );

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -8,6 +8,9 @@ import useProjectOverview, {
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { ProjectOverviewChangeRequests } from './ProjectOverviewChangeRequests';
+import { OutdatedSdksBanner } from '../../banners/OutdatedSdksBanner/OutdatedSdksBanner';
+import { useUiFlag } from '../../../hooks/useUiFlag';
+import { ConditionallyRender } from '../../common/ConditionallyRender/ConditionallyRender';
 
 const refreshInterval = 15 * 1000;
 
@@ -36,6 +39,8 @@ const ProjectOverview: FC = () => {
     const projectId = useRequiredPathParam('projectId');
     const projectName = useProjectOverviewNameOrId(projectId);
 
+    const outdatedSdksBannerEnabled = useUiFlag('outdatedSdksBanner');
+
     const { project } = useProjectOverview(projectId, {
         refreshInterval,
     });
@@ -50,6 +55,10 @@ const ProjectOverview: FC = () => {
         <StyledContainer key={projectId}>
             <StyledContentContainer>
                 <ProjectOverviewChangeRequests project={projectId} />
+                <ConditionallyRender
+                    condition={outdatedSdksBannerEnabled}
+                    show={<OutdatedSdksBanner project={projectId} />}
+                />
 
                 <StyledProjectToggles>
                     <ProjectFeatureToggles

frontend/src/hooks/api/getters/useOutdatedSdks/useOutdatedSdks.ts

@@ -2,9 +2,8 @@ import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter';
 import type { OutdatedSdksSchema } from '../../../../openapi';
 import { formatApiPath } from 'utils/formatPath';
 
-const PATH = 'api/admin/metrics/sdks/outdated';
-
-export const useOutdatedSdks = () => {
+export const useOutdatedSdks = (project: string) => {
+    const PATH = `api/admin/projects/${project}/sdks/outdated`;
     const { data, refetch, loading, error } = useApiGetter<OutdatedSdksSchema>(
         formatApiPath(PATH),
         () => fetcher(formatApiPath(PATH), 'Outdated SDKs'),