feat: Show restart button in the top bar

This reverts the revert commit 91b6534.

https://harperdb.atlassian.net/browse/STUDIO-358

Author: dawsontoth

src/components/Breadcrumbs.tsx

@@ -1,12 +1,21 @@
+import { RestartButton } from '@/components/RestartButton';
+import { isLocalStudio } from '@/config/constants';
+import { useInstanceClientIdParams } from '@/config/useInstanceClient';
 import { Cluster, Instance, Organization } from '@/lib/api.patch';
 import { capitalizeWords } from '@/lib/string/capitalizeWords';
-import { Link, useLocation, useRouteContext } from '@tanstack/react-router';
+import { Link, useLocation, useParams, useRouteContext } from '@tanstack/react-router';
 import { HomeIcon } from 'lucide-react';
 import { useMemo } from 'react';
 
-export function Breadcrumbs() {
+export function Breadcrumbs({ restartRequired }: { restartRequired?: boolean }) {
 	const location = useLocation();
-	const { organization, instance, cluster }: { organization?: Organization; instance?: Instance; cluster?: Cluster } = useRouteContext({ strict: false });
+
+	const { organization, instance, cluster }: {
+		organization?: Organization;
+		instance?: Instance;
+		cluster?: Cluster
+	} = useRouteContext({ strict: false });
+
 	const breadcrumbs = useMemo(() => {
 		const routeHistory = location.pathname.split('/')
 			.filter((x) => x && x.length > 0);
@@ -65,8 +74,24 @@ export function Breadcrumbs() {
 	}, [location.pathname, cluster?.name, instance?.name, organization?.name]);
 
 	return (
-		<div role="list" className="flex items-center space-x-0 lg:space-x-2 xl:space-x-4 sm:max-w-9/10 max-w-[calc(100%-56px)]">
+		<div role="list" className="flex items-center space-x-2 xl:space-x-4 sm:max-w-9/10 max-w-[calc(100%-56px)]">
 			{...breadcrumbs}
+			{restartRequired && <BreadcrumbsRestartButton />}
 		</div>
 	);
 }
+
+function BreadcrumbsRestartButton() {
+	const { instanceId }: { instanceId?: string; clusterId: string; } = useParams({ strict: false });
+	const targetNoun = (instanceId || isLocalStudio) ? 'Instance' : 'Cluster';
+	const instanceParams = useInstanceClientIdParams();
+
+	return <RestartButton
+		className="animate-glow-pulse"
+		targetNoun={targetNoun}
+		instanceClient={instanceParams.instanceClient}
+		operation="restart"
+		hideText={true}
+		tooltip={`This ${targetNoun} is requesting a restart, when convenient, to apply your latest changes.`}
+	/>;
+}

src/components/RestartButton.tsx

@@ -8,19 +8,23 @@ import { cx, VariantProps } from 'class-variance-authority';
 import { RotateCcwIcon } from 'lucide-react';
 
 interface RestartButtonParams extends InstanceClientConfig, VariantProps<typeof buttonVariants> {
-	targetNoun: 'Instance' | 'Cluster';
-	operation: 'restart_service' | 'restart';
 	className?: string;
 	disabled?: boolean;
+	hideText?: boolean;
+	operation: 'restart_service' | 'restart';
+	targetNoun: 'Instance' | 'Cluster';
+	tooltip?: string;
 }
 
 export function RestartButton({
-	targetNoun,
+	className,
+	disabled,
+	hideText,
 	instanceClient,
 	operation,
+	targetNoun,
+	tooltip,
 	variant,
-	className,
-	disabled,
 }: RestartButtonParams) {
 	const {
 		onRestartClick: onRestartClusterClick,
@@ -36,13 +40,15 @@ export function RestartButton({
 				disabled={disabled || isRestartPending || isRestartClusterPending}
 			>
 				<RotateCcwIcon />
-				<span className="hidden md:inline-block">Restart {targetNoun}</span>
+				{hideText !== true && <span className="hidden md:inline-block">Restart {targetNoun}</span>}
 			</Button>
 		</TooltipTrigger>
 		<TooltipContent>
-			{operation === 'restart_service'
-				? 'Restarts all service threads to apply changes. No downtime expected. Performance may be briefly slower during restart.'
-				: 'This fully restarts the Harper service and causes downtime.'}
+			{tooltip
+				? tooltip
+				: operation === 'restart_service'
+					? 'Restarts all service threads to apply changes. No downtime expected. Performance may be briefly slower during restart.'
+					: 'This fully restarts the Harper service and causes downtime.'}
 		</TooltipContent>
 	</Tooltip>);
 }

src/features/instance/InstanceNavBar.tsx

@@ -8,11 +8,14 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdownMenu';
+import { useInstanceClientIdParams } from '@/config/useInstanceClient';
 import { RegistrationInfoResponse } from '@/features/instance/operations/queries/getRegistrationInfo';
+import { getStatusQueryOptions } from '@/features/instance/operations/queries/getStatus';
 import { useInstanceManagePermission } from '@/hooks/usePermissions';
 import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { wasAReleasedBeforeB } from '@/lib/string/wasAReleasedBeforeB';
 import { buildAbsoluteLinkToPage } from '@/lib/urls/buildAbsoluteLinkToPage';
+import { useQuery } from '@tanstack/react-query';
 import { Link, useLoaderData, useParams } from '@tanstack/react-router';
 import { DatabaseIcon, GaugeIcon, Menu, NotepadTextIcon, PackageIcon, ServerIcon, SettingsIcon } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
@@ -30,6 +33,11 @@ export function InstanceNavBar() {
 	const canManage = useInstanceManagePermission();
 	const params = useParams({ strict: false });
 
+
+	const instanceParams = useInstanceClientIdParams();
+	const { data: statusData } = useQuery(getStatusQueryOptions(instanceParams));
+	const restartRequired = statusData?.restartRequired ?? false;
+
 	const { version }: RegistrationInfoResponse = useLoaderData({ strict: false });
 	const apisAvailable = wasAReleasedBeforeB('4.7.0-beta.7', version);
 	const statusAvailable = wasAReleasedBeforeB('4.6.0', version);
@@ -70,16 +78,16 @@ export function InstanceNavBar() {
 	].filter(excludeFalsy) satisfies Link[], [canManage, params, apisAvailable, statusAvailable]);
 	return (
 		<>
-			<DesktopInstanceNavBar links={links} />
-			<MobileInstanceNavBar links={links} />
+			<DesktopInstanceNavBar links={links} restartRequired={restartRequired} />
+			<MobileInstanceNavBar links={links} restartRequired={restartRequired} />
 		</>
 	);
 }
 
-function DesktopInstanceNavBar({ links }: { links: Link[] }) {
+function DesktopInstanceNavBar({ links, restartRequired }: { links: Link[], restartRequired: boolean }) {
 	return (
 		<div className="hidden md:flex items-center justify-between h-full text-sm text-white">
-			<Breadcrumbs />
+			<Breadcrumbs restartRequired={restartRequired} />
 			<div className="flex space-x-2">
 				{links.map(({ shortName, ...link }) => (
 					<Link
@@ -100,11 +108,11 @@ function DesktopInstanceNavBar({ links }: { links: Link[] }) {
 	);
 }
 
-function MobileInstanceNavBar({ links }: { links: Link[] }) {
+function MobileInstanceNavBar({ links, restartRequired }: { links: Link[], restartRequired: boolean }) {
 	return (
 		<>
 			<div className="flex md:hidden items-center justify-between p-2 text-white">
-				<Breadcrumbs />
+				<Breadcrumbs restartRequired={restartRequired} />
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button variant="ghost" className="p-0">

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

@@ -40,6 +40,10 @@ interface StatusResponse {
 export function getStatusQueryOptions({ entityId, instanceClient }: InstanceClientIdConfig) {
 	return queryOptions({
 		queryKey: [entityId, 'get_status'] as const,
+		staleTime: 9_000,
+		refetchInterval: 10_000,
+		retryDelay: 10_000,
+		throwOnError: false,
 		queryFn: async () => {
 			const { data } = await instanceClient.post<StatusResponse>('/', {
 				operation: 'get_status',