Make the history link go to the real dashboard for cloud deployments (#36346)

GitOrigin-RevId: 487a5af5e90a5c52e2d5c8ecfd8c8f1d99b85b9d

Author: Nicolapps

npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx

@@ -20,6 +20,7 @@ import { Sidebar } from "@common/elements/Sidebar";
 import { FunctionRunnerWrapper } from "@common/features/functionRunner/components/FunctionRunnerWrapper";
 import { FunctionsProvider } from "@common/lib/functions/FunctionsProvider";
 import { useIsGlobalRunnerShown } from "@common/features/functionRunner/lib/functionRunner";
+import { useIsCloudDeploymentInSelfHostedDashboard } from "@common/lib/useIsCloudDeploymentInSelfHostedDashboard";
 
 type LayoutProps = {
   children: JSX.Element;
@@ -36,6 +37,8 @@ export function DeploymentDashboardLayout({
   const [isRunnerExpanded, setIsRunnerExpanded] = useState(false);
   const isGlobalRunnerShown = useIsGlobalRunnerShown();
   const { deploymentsURI: uriPrefix } = useContext(DeploymentInfoContext);
+  const { isCloudDeploymentInSelfHostedDashboard, deploymentName } =
+    useIsCloudDeploymentInSelfHostedDashboard();
 
   const exploreDeploymentPages = [
     {
@@ -90,7 +93,10 @@ export function DeploymentDashboardLayout({
           key: "history",
           label: "History",
           Icon: CounterClockwiseClockIcon,
-          href: `${uriPrefix}/history`,
+          href: isCloudDeploymentInSelfHostedDashboard
+            ? `https://dashboard.convex.dev/d/${deploymentName}/history`
+            : `${uriPrefix}/history`,
+          target: isCloudDeploymentInSelfHostedDashboard ? "_blank" : undefined,
           disabled: !auditLogsEnabled,
           tooltip: auditLogsEnabled
             ? undefined

npm-packages/dashboard-common/src/layouts/SettingsSidebar.tsx

@@ -5,6 +5,7 @@ import { DeploymentPageTitle } from "@common/elements/DeploymentPageTitle";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { SidebarLink } from "@common/elements/Sidebar";
 import { useNents } from "@common/lib/useNents";
+import { useIsCloudDeploymentInSelfHostedDashboard } from "@common/lib/useIsCloudDeploymentInSelfHostedDashboard";
 
 export const DEPLOYMENT_SETTINGS_PAGES_AND_NAMES = {
   "url-and-deploy-key": "URL & Deploy Key",
@@ -182,47 +183,3 @@ function useAllowedPages() {
 
   return pages;
 }
-
-/**
- * Determines if the deployment URL is a default cloud deployment URL.
- *
- * This gives a false negative if the deployment is a cloud deployment with a custom domain.
- */
-function useIsCloudDeploymentInSelfHostedDashboard():
-  | {
-      isCloudDeploymentInSelfHostedDashboard: false;
-      deploymentName: undefined;
-    }
-  | {
-      isCloudDeploymentInSelfHostedDashboard: true;
-      deploymentName: string;
-    } {
-  const context = useContext(DeploymentInfoContext);
-
-  if (
-    !context.isSelfHosted ||
-    !("deploymentUrl" in context) ||
-    !context.deploymentUrl
-  ) {
-    return {
-      isCloudDeploymentInSelfHostedDashboard: false,
-      deploymentName: undefined,
-    };
-  }
-
-  const match = context.deploymentUrl.match(
-    /^https:\/\/([a-z]+-[a-z]+-[0-9]{3})\.convex\.cloud$/,
-  );
-
-  if (!match) {
-    return {
-      isCloudDeploymentInSelfHostedDashboard: false,
-      deploymentName: undefined,
-    };
-  }
-
-  return {
-    isCloudDeploymentInSelfHostedDashboard: true,
-    deploymentName: match[1],
-  };
-}

npm-packages/dashboard-common/src/lib/useIsCloudDeploymentInSelfHostedDashboard.ts

@@ -0,0 +1,46 @@
+import { useContext } from "react";
+import { DeploymentInfoContext } from "./deploymentContext";
+
+/**
+ * Determines if the deployment URL is a default cloud deployment URL.
+ *
+ * This gives a false negative if the deployment is a cloud deployment with a custom domain.
+ */
+export function useIsCloudDeploymentInSelfHostedDashboard():
+  | {
+      isCloudDeploymentInSelfHostedDashboard: false;
+      deploymentName: undefined;
+    }
+  | {
+      isCloudDeploymentInSelfHostedDashboard: true;
+      deploymentName: string;
+    } {
+  const context = useContext(DeploymentInfoContext);
+
+  if (
+    !context.isSelfHosted ||
+    !("deploymentUrl" in context) ||
+    !context.deploymentUrl
+  ) {
+    return {
+      isCloudDeploymentInSelfHostedDashboard: false,
+      deploymentName: undefined,
+    };
+  }
+
+  const match = context.deploymentUrl.match(
+    /^https:\/\/([a-z]+-[a-z]+-[0-9]{3})\.convex\.cloud$/,
+  );
+
+  if (!match) {
+    return {
+      isCloudDeploymentInSelfHostedDashboard: false,
+      deploymentName: undefined,
+    };
+  }
+
+  return {
+    isCloudDeploymentInSelfHostedDashboard: true,
+    deploymentName: match[1],
+  };
+}