diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index a180312165..946f3728d1 100644 --- a/frontend/src/component/App.tsx +++ b/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 ( }> @@ -71,10 +67,6 @@ export const App = () => { - } - /> diff --git a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.test.tsx b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.test.tsx index ff329a3c88..5e7b63adc0 100644 --- a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.test.tsx +++ b/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(); + render(); const link = await screen.findByText('Please update those versions'); diff --git a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx b/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx index ebb54ccc37..c0be9cc315 100644 --- a/frontend/src/component/banners/OutdatedSdksBanner/OutdatedSdksBanner.tsx +++ b/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 = () => { <> 0} - show={} + show={} /> ); diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx index 0240555948..3a163ec086 100644 --- a/frontend/src/component/project/Project/ProjectOverview.tsx +++ b/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 = () => { + } + /> { +export const useOutdatedSdks = (project: string) => { + const PATH = `api/admin/projects/${project}/sdks/outdated`; const { data, refetch, loading, error } = useApiGetter( formatApiPath(PATH), () => fetcher(formatApiPath(PATH), 'Outdated SDKs'),