fix: Hide APIs and Status on older Harper versions

https://harperdb.atlassian.net/browse/STUDIO-567
https://harperdb.atlassian.net/browse/STUDIO-568

Author: dawsontoth

src/config/useInstanceClient.tsx

@@ -20,7 +20,23 @@ export function useInstanceClientParams(operationsUrl?: string | null, port?: nu
 }
 
 export function useInstanceClientIdParams(operationsUrl?: string | null, port?: number, secure?: boolean): InstanceClientIdConfig & InstanceTypeConfig {
-	const { instanceId, clusterId }: { instanceId?: string; clusterId?: string; } = useParams({ strict: false });
+	const params: { instanceId?: string; clusterId?: string; } = useParams({ strict: false });
+	return getInstanceClientIdFromParams({ ...params, operationsUrl, port, secure });
+}
+
+export function getInstanceClientIdFromParams({
+	instanceId,
+	clusterId,
+	operationsUrl,
+	port,
+	secure,
+}: {
+	instanceId?: string,
+	clusterId?: string,
+	operationsUrl?: string | null,
+	port?: number,
+	secure?: boolean,
+}): InstanceClientIdConfig & InstanceTypeConfig {
 	const id = isLocalStudio ? OverallAppSignIn : instanceId ?? clusterId;
 	if (!id) {
 		throw new Error('id could not be automatically calculated in useInstanceClientIdParams');

src/features/instance/InstanceLayout.tsx

@@ -1,15 +1,7 @@
-import { getInstanceInfoQueryOptions } from '@/features/cluster/queries/getInstanceInfoQuery';
 import { InstanceNavBar } from '@/features/instance/InstanceNavBar';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { Outlet, useParams } from '@tanstack/react-router';
+import { Outlet } from '@tanstack/react-router';
 
 export function InstanceLayout() {
-	const params: { instanceId?: string; clusterId?: string; } = useParams({ strict: false });
-	const { isSuccess } = useSuspenseQuery(getInstanceInfoQueryOptions(params));
-
-	if (!isSuccess) {
-		throw new Error('Instance info not found');
-	}
 	return (
 		<>
 			<nav className="fixed top-20 w-full z-39 md:px-12 md:py-1 bg-grey-700">

src/features/instance/InstanceNavBar.tsx

@@ -8,10 +8,12 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdownMenu';
+import { RegistrationInfoResponse } from '@/features/instance/operations/queries/getRegistrationInfo';
 import { useInstanceManagePermission } from '@/hooks/usePermissions';
 import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
+import { wasAReleasedBeforeB } from '@/lib/string/wasAReleasedBeforeB';
 import { buildAbsoluteLinkToPage } from '@/lib/urls/buildAbsoluteLinkToPage';
-import { Link, useParams } from '@tanstack/react-router';
+import { Link, useLoaderData, useParams } from '@tanstack/react-router';
 import { DatabaseIcon, GaugeIcon, Menu, NotepadTextIcon, PackageIcon, ServerIcon, SettingsIcon } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
 
@@ -27,6 +29,11 @@ const activeLinkProps = { className: 'text-white' };
 export function InstanceNavBar() {
 	const canManage = useInstanceManagePermission();
 	const params = useParams({ strict: false });
+
+	const { version }: RegistrationInfoResponse = useLoaderData({ strict: false });
+	const apisAvailable = wasAReleasedBeforeB('4.7.0-beta.7', version);
+	const statusAvailable = wasAReleasedBeforeB('4.6.0', version);
+
 	const links = useMemo(() => [
 		{
 			to: buildAbsoluteLinkToPage(params),
@@ -40,12 +47,12 @@ export function InstanceNavBar() {
 			icon: <DatabaseIcon className="inline-block" />,
 			name: 'Databases',
 		},
-		canManage && {
+		canManage && apisAvailable && {
 			to: buildAbsoluteLinkToPage(params, 'apis'),
 			name: 'APIs',
 			icon: <ServerIcon className="inline-block" />,
 		},
-		canManage && {
+		canManage && statusAvailable && {
 			to: buildAbsoluteLinkToPage(params, 'status'),
 			icon: <GaugeIcon className="inline-block" />,
 			name: 'Status',
@@ -60,7 +67,7 @@ export function InstanceNavBar() {
 			icon: <SettingsIcon className="inline-block" />,
 			name: 'Config',
 		},
-	].filter(excludeFalsy) satisfies Link[], [canManage, params]);
+	].filter(excludeFalsy) satisfies Link[], [canManage, params, apisAvailable, statusAvailable]);
 	return (
 		<>
 			<DesktopInstanceNavBar links={links} />

src/features/instance/instanceLayoutRoute.ts

@@ -1,6 +1,7 @@
+import { getInstanceClientIdFromParams } from '@/config/useInstanceClient';
 import { clusterLayoutRoute } from '@/features/cluster/clusterLayoutRoute';
-import { getInstanceInfoQueryOptions } from '@/features/cluster/queries/getInstanceInfoQuery';
 import { InstanceLayout } from '@/features/instance/InstanceLayout';
+import { getRegistrationInfoQueryOptions } from '@/features/instance/operations/queries/getRegistrationInfo';
 import { buildRedirectInSearch } from '@/lib/urls/buildRedirectInSearch';
 import { dashboardLayout } from '@/router/dashboardRoute';
 import { createRoute, redirect } from '@tanstack/react-router';
@@ -11,6 +12,10 @@ export function createInstanceLayoutRoute(mode: 'local' | 'cluster' | 'instance'
 			getParentRoute: () => dashboardLayout,
 			id: '_instanceLayout',
 			component: InstanceLayout,
+			loader: async ({ context, params }) => {
+				const operationsParams = getInstanceClientIdFromParams(params);
+				return context.queryClient.ensureQueryData(getRegistrationInfoQueryOptions(operationsParams));
+			},
 		});
 	}
 	if (mode === 'cluster') {
@@ -24,7 +29,10 @@ export function createInstanceLayoutRoute(mode: 'local' | 'cluster' | 'instance'
 					const to = `/${params.organizationId}/${params.clusterId}/sign-in`;
 					throw redirect({ to, search: buildRedirectInSearch() });
 				}
-				return await context.queryClient.ensureQueryData(getInstanceInfoQueryOptions(params));
+			},
+			loader: async ({ context, params }) => {
+				const operationsParams = getInstanceClientIdFromParams(params);
+				return context.queryClient.ensureQueryData(getRegistrationInfoQueryOptions(operationsParams));
 			},
 		});
 	}
@@ -38,7 +46,10 @@ export function createInstanceLayoutRoute(mode: 'local' | 'cluster' | 'instance'
 				const to = `/${params.organizationId}/${params.clusterId}/instance/${params.instanceId}/sign-in`;
 				throw redirect({ to, search: buildRedirectInSearch() });
 			}
-			return await context.queryClient.ensureQueryData(getInstanceInfoQueryOptions(params));
+		},
+		loader: async ({ context, params }) => {
+			const operationsParams = getInstanceClientIdFromParams(params);
+			return context.queryClient.ensureQueryData(getRegistrationInfoQueryOptions(operationsParams));
 		},
 	});
 }

src/features/instance/operations/queries/getRegistrationInfo.ts

@@ -11,6 +11,7 @@ export interface RegistrationInfoResponse {
 export function getRegistrationInfoQueryOptions({ entityId, instanceClient }: InstanceClientIdConfig) {
 	return queryOptions({
 		queryKey: [entityId, 'registration_info'] as const,
+		staleTime: 60_000,
 		queryFn: async () => {
 			const { data } = await instanceClient.post('/', {
 				operation: 'registration_info',