dashboard: show an overlay when self-hosted dashboard is offline (#34284)

GitOrigin-RevId: 9586835a45a273e65afe9a5c6743975bd5f09a62

Author: atrakh

npm-packages/dashboard-common/src/lib/deploymentContext.tsx

@@ -102,7 +102,7 @@ type MaybeConnectedDeployment = {
   deployment?: ConnectedDeployment;
   deploymentName?: string;
   loading: boolean;
-  errorKind: "None" | "DoesNotExist";
+  errorKind: "None" | "DoesNotExist" | "NotConnected";
 };
 
 export const ConnectedDeploymentContext = createContext<{
@@ -345,6 +345,7 @@ function DeploymentWithConnectionState({
   deployment: ConnectedDeployment;
   children: ReactNode;
 }) {
+  const { isSelfHosted } = useContext(DeploymentInfoContext);
   const { client, deploymentUrl, deploymentName } = deployment;
   const [connectionState, setConnectionState] = useState<
     "Connected" | "Disconnected" | "LocalDeploymentMismatch" | null
@@ -403,9 +404,12 @@ function DeploymentWithConnectionState({
   );
   return (
     <>
-      {isDisconnected && deploymentName.startsWith("local-") ? (
-        <LocalDeploymentDisconnectOverlay />
-      ) : null}
+      {isDisconnected &&
+        (deploymentName.startsWith("local-") ? (
+          <LocalDeploymentDisconnectOverlay />
+        ) : isSelfHosted ? (
+          <SelfHostedDisconnectOverlay deploymentUrl={deploymentUrl} />
+        ) : null)}
       <ConnectedDeploymentContext.Provider value={value}>
         {children}
       </ConnectedDeploymentContext.Provider>
@@ -421,8 +425,8 @@ function LocalDeploymentDisconnectOverlay() {
         backdropFilter: "blur(0.5rem)",
       }}
     >
-      <div className="mt-[-3.5rem]  max-w-[40rem]">
-        <h3>You are disconnected from your local deployment!</h3>
+      <div className="max-w-prose">
+        <h3 className="mb-4">This local deployment is not online.</h3>
         <p className="mb-2">
           Check that <code className="text-sm">npx convex dev</code> is running
           successfully.
@@ -436,3 +440,29 @@ function LocalDeploymentDisconnectOverlay() {
     </div>
   );
 }
+
+function SelfHostedDisconnectOverlay({
+  deploymentUrl,
+}: {
+  deploymentUrl: string;
+}) {
+  return (
+    <div
+      className="absolute z-50 flex h-full w-full items-center justify-center"
+      style={{
+        backdropFilter: "blur(0.5rem)",
+      }}
+    >
+      <div className="max-w-prose">
+        <h3 className="mb-4">This deployment is not online.</h3>
+        <p className="mb-2">
+          Check that your Convex server is running and accessible at{" "}
+          <code className="text-sm">{deploymentUrl}</code>.
+        </p>
+        <p>
+          If you continue to have issues, try restarting your Convex server.
+        </p>
+      </div>
+    </div>
+  );
+}

npm-packages/dashboard-self-hosted/src/pages/_app.tsx

@@ -45,7 +45,7 @@ function App({
       <ThemeProvider attribute="class" disableTransitionOnChange>
         <ThemeConsumer />
         <ToastContainer />
-        <div className="flex h-screen flex-col">
+        <div className="flex h-screen flex-col overflow-y-hidden">
           <DeploymentInfoProvider deploymentUrl={deploymentUrl}>
             <DeploymentApiProvider deploymentOverride="local">
               <WaitForDeploymentApi>
@@ -222,12 +222,12 @@ function DeploymentInfoProvider({
     );
   }
   return (
-    <DeploymentInfoContext.Provider value={finalValue}>
-      <ErrorBoundary>
-        <Header onLogout={() => setAdminKey("")} />
-        {children}
-      </ErrorBoundary>
-    </DeploymentInfoContext.Provider>
+    <div className="relative h-full max-h-full">
+      <Header onLogout={() => setAdminKey("")} />
+      <DeploymentInfoContext.Provider value={finalValue}>
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </DeploymentInfoContext.Provider>
+    </div>
   );
 }