dashboard: Fix common deployment links (#34112)

Fix some common deployment links that were still pointing to the cloud dashboard path instead of using the info from context. Also standardizes the pathing GitOrigin-RevId: f85fe4bcf146494b497ab83c45b8aed4fea4aa6d
get-convex · Feb 6, 2025 · 62e6087 · 62e6087
1 parent fede130
commit 62e6087
Show file tree

Hide file tree

Showing 18 changed files with 198 additions and 151 deletions.
diff --git a/npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.test.tsx b/npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.test.tsx
@@ -9,6 +9,8 @@ import {
   ObjectEditor,
   ObjectEditorProps,
 } from "@common/elements/ObjectEditor/ObjectEditor";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 jest.mock("next/router", () => jest.requireActual("next-router-mock"));
 
@@ -73,16 +75,18 @@ describe("ObjectEditor", () => {
     convexClient: ConvexReactClient = mockClient,
   ) => {
     render(
-      <ConvexProvider client={convexClient}>
-        <ObjectEditor
-          defaultValue={null}
-          onChange={onChange}
-          onError={onError}
-          path="doc"
-          mode="editField"
-          {...props}
-        />
-      </ConvexProvider>,
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <ConvexProvider client={convexClient}>
+          <ObjectEditor
+            defaultValue={null}
+            onChange={onChange}
+            onError={onError}
+            path="doc"
+            mode="editField"
+            {...props}
+          />
+        </ConvexProvider>
+      </DeploymentInfoContext.Provider>,
     );
 
     editor = screen.getByRole("textbox");

diff --git a/npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.tsx b/npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.tsx
@@ -6,15 +6,21 @@ import Editor, {
 import { ValidatorJSON, Value } from "convex/values";
 import { useTheme } from "next-themes";
 import isEqual from "lodash/isEqual";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import isArray from "lodash/isArray";
 import isPlainObject from "lodash/isPlainObject";
 import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/patchDocumentsFields";
 import { useMount } from "react-use";
-import { useRouter } from "next/router";
 import { stringifyValue } from "@common/lib/stringifyValue";
 import { cn } from "@common/lib/cn";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import {
   ConvexSchemaValidationError,
   ConvexValidationError,
@@ -80,8 +86,6 @@ export function ObjectEditor(props: ObjectEditorProps) {
     showTableNames = false,
   } = props;
 
-  const router = useRouter();
-
   const indentTopLevel = mode === "addDocuments" || mode === "editDocument";
   const [monaco, setMonaco] = useState<Parameters<BeforeMount>[0]>();
 
@@ -183,6 +187,8 @@ export function ObjectEditor(props: ObjectEditorProps) {
     ],
   );
 
+  const { deploymentsURI } = useContext(DeploymentInfoContext);
+
   const { resolvedTheme: currentTheme } = useTheme();
   const prefersDark = currentTheme === "dark";
   return (
@@ -234,7 +240,7 @@ export function ObjectEditor(props: ObjectEditorProps) {
           setMonaco(m);
         }}
         onMount={(editor, m) => {
-          registerIdCommands(m, router);
+          registerIdCommands(m, deploymentsURI);
 
           if (disableFind) {
             editor.addAction({

diff --git a/npm-packages/dashboard-common/src/elements/ObjectEditor/useIdDecorations.tsx b/npm-packages/dashboard-common/src/elements/ObjectEditor/useIdDecorations.tsx
@@ -288,7 +288,7 @@ const COPY_DOCUMENT_COMMAND = "copyDocument";
 
 export function registerIdCommands(
   monaco: Parameters<BeforeMount>[0],
-  router: ReturnType<typeof useRouter>,
+  deploymentsURI: string,
 ) {
   monaco.editor.registerCommand(
     GO_TO_DOCUMENT_COMMAND,
@@ -300,10 +300,10 @@ export function registerIdCommands(
         componentId: string | null;
       },
     ) => {
-      const href = documentHref(router, args.tableName, args.id);
+      const href = documentHref(deploymentsURI, args.tableName, args.id);
       const query = `${href.query.component ? `component=${href.query.component}&` : ""}table=${href.query.table}&filters=${href.query.filters}`;
-      const newPage = `${window.location.pathname.split("/").slice(0, 5).join("/")}/data?${query}`;
-      window.open(`${window.location.origin + newPage}`, "_blank");
+      const url = `${deploymentsURI}/data?${query}`;
+      window.open(`${window.location.origin}${url}`, "_blank");
     },
   );
 

diff --git a/...packages/dashboard-common/src/features/data/components/FilterEditor/FilterEditor.test.tsx b/...packages/dashboard-common/src/features/data/components/FilterEditor/FilterEditor.test.tsx
@@ -8,6 +8,8 @@ import {
   FilterEditor,
   FilterEditorProps,
 } from "@common/features/data/components/FilterEditor/FilterEditor";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 const mockClient = mockConvexReactClient()
   .registerQueryFake(udfs.listById.default, ({ ids }) => ids.map(() => null))
@@ -25,28 +27,30 @@ describe("FilterEditor", () => {
 
   const setup = (props?: Partial<FilterEditorProps>) =>
     render(
-      <ConvexProvider client={mockClient}>
-        <FilterEditor
-          fields={[
-            "_id",
-            "_creationTime",
-            "myColumn",
-            "anotherColumn",
-            "myColumn2",
-          ]}
-          defaultDocument={{
-            myColumn: 0,
-            anotherColumn: "stringy",
-            myColumn2: 0,
-          }}
-          onChange={onChange}
-          onDelete={jest.fn()}
-          onError={jest.fn()}
-          onApplyFilters={jest.fn()}
-          onAdd={jest.fn()}
-          {...props}
-        />
-      </ConvexProvider>,
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <ConvexProvider client={mockClient}>
+          <FilterEditor
+            fields={[
+              "_id",
+              "_creationTime",
+              "myColumn",
+              "anotherColumn",
+              "myColumn2",
+            ]}
+            defaultDocument={{
+              myColumn: 0,
+              anotherColumn: "stringy",
+              myColumn2: 0,
+            }}
+            onChange={onChange}
+            onDelete={jest.fn()}
+            onError={jest.fn()}
+            onApplyFilters={jest.fn()}
+            onAdd={jest.fn()}
+            {...props}
+          />
+        </ConvexProvider>
+      </DeploymentInfoContext.Provider>,
     );
 
   it("should save valid filter", async () => {

diff --git a/npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCell.test.tsx b/npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCell.test.tsx
@@ -12,6 +12,8 @@ import {
   DataCellProps,
 } from "@common/features/data/components/Table/DataCell/DataCell";
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 jest.mock("next/router", () => jest.requireActual("next-router-mock"));
 jest.mock("@monaco-editor/react", () => (p: any) => MockMonaco(p));
@@ -90,9 +92,11 @@ describe("DataCell", () => {
 
   const renderWithProvider = (props: Partial<DataCellProps> = {}) =>
     render(
-      <ConvexProvider client={mockClient}>
-        <DataCell {...defaultProps} {...props} />
-      </ConvexProvider>,
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <ConvexProvider client={mockClient}>
+          <DataCell {...defaultProps} {...props} />
+        </ConvexProvider>
+      </DeploymentInfoContext.Provider>,
     );
 
   it("renders without crashing", () => {
@@ -335,7 +339,7 @@ describe("DataCell", () => {
       await user.keyboard("{Control>}g");
       expect(window.open).toHaveBeenCalledTimes(1);
       expect(window.open).toHaveBeenCalledWith(
-        "http://localhost/t/myTeam/myProject/myDeployment/data?filters=eyJjbGF1c2VzIjpbeyJpZCI6IjAiLCJmaWVsZCI6Il9pZCIsIm9wIjoiZXEiLCJ2YWx1ZSI6Imo1N2J5bnBxaGdqZGpjZm0yZHhwajNqN3Z4Nzc0czFoIn1dfQ&team=myTeam&project=myProject&deploymentName=myDeployment&table=testTable",
+        "http://localhost/data?table=testTable&filters=eyJjbGF1c2VzIjpbeyJpZCI6IjAiLCJmaWVsZCI6Il9pZCIsIm9wIjoiZXEiLCJ2YWx1ZSI6Imo1N2J5bnBxaGdqZGpjZm0yZHhwajNqN3Z4Nzc0czFoIn1dfQ",
         "_blank",
       );
     });
@@ -350,7 +354,7 @@ describe("DataCell", () => {
       await user.keyboard("{Meta>}g");
       expect(window.open).toHaveBeenCalledTimes(1);
       expect(window.open).toHaveBeenCalledWith(
-        "http://localhost/t/myTeam/myProject/myDeployment/data?filters=eyJjbGF1c2VzIjpbeyJpZCI6IjAiLCJmaWVsZCI6Il9pZCIsIm9wIjoiZXEiLCJ2YWx1ZSI6Imo1N2J5bnBxaGdqZGpjZm0yZHhwajNqN3Z4Nzc0czFoIn1dfQ&team=myTeam&project=myProject&deploymentName=myDeployment&table=testTable",
+        "http://localhost/data?table=testTable&filters=eyJjbGF1c2VzIjpbeyJpZCI6IjAiLCJmaWVsZCI6Il9pZCIsIm9wIjoiZXEiLCJ2YWx1ZSI6Imo1N2J5bnBxaGdqZGpjZm0yZHhwajNqN3Z4Nzc0czFoIn1dfQ",
         "_blank",
       );
     });
@@ -374,9 +378,15 @@ describe("DataCell", () => {
       expect(cell).not.toHaveClass("animate-highlight");
 
       rerender(
-        <ConvexProvider client={mockClient}>
-          <DataCell {...defaultProps} didRowChange={false} value="new value" />
-        </ConvexProvider>,
+        <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+          <ConvexProvider client={mockClient}>
+            <DataCell
+              {...defaultProps}
+              didRowChange={false}
+              value="new value"
+            />
+          </ConvexProvider>
+        </DeploymentInfoContext.Provider>,
       );
 
       const cellAfter = getByTestId("cell-editor-button");
@@ -393,9 +403,15 @@ describe("DataCell", () => {
       expect(cell).not.toHaveClass("animate-highlight");
 
       rerender(
-        <ConvexProvider client={mockClient}>
-          <DataCell {...defaultProps} didRowChange={false} value="test value" />
-        </ConvexProvider>,
+        <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+          <ConvexProvider client={mockClient}>
+            <DataCell
+              {...defaultProps}
+              didRowChange={false}
+              value="test value"
+            />
+          </ConvexProvider>
+        </DeploymentInfoContext.Provider>,
       );
 
       const cellAfter = getByTestId("cell-editor-button");

diff --git a/.../dashboard-common/src/features/data/components/Table/DataCell/utils/useIdReferenceLink.ts b/.../dashboard-common/src/features/data/components/Table/DataCell/utils/useIdReferenceLink.ts
@@ -1,10 +1,11 @@
 import { useQuery } from "convex/react";
 import { Value } from "convex/values";
-import { useRouter } from "next/router";
 import udfs from "udfs";
 import { stringifyValue } from "@common/lib/stringifyValue";
 import { useNents } from "@common/lib/useNents";
 import { documentHref, getReferencedTableName } from "@common/lib/utils";
+import { useContext } from "react";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function useIdReferenceLink(value: Value, columnName: string) {
   const stringValue = typeof value === "string" ? value : stringifyValue(value);
@@ -15,15 +16,15 @@ export function useIdReferenceLink(value: Value, columnName: string) {
   const referencedTableName = getReferencedTableName(tableMapping, value);
   const isReference = referencedTableName !== null;
 
-  const router = useRouter();
+  const { deploymentsURI } = useContext(DeploymentInfoContext);
 
   if (columnName === "_id") {
     return undefined;
   }
 
   const link =
     isReference && referencedTableName
-      ? documentHref(router, referencedTableName, stringValue)
+      ? documentHref(deploymentsURI, referencedTableName, stringValue)
       : undefined;
 
   return link;

diff --git a/npm-packages/dashboard-common/src/features/data/components/Table/DataRow.test.tsx b/npm-packages/dashboard-common/src/features/data/components/Table/DataRow.test.tsx
@@ -9,8 +9,12 @@ import udfs from "udfs";
 import { useMemo } from "react";
 import { useDataColumns } from "@common/features/data/components/Table/utils/useDataColumns";
 import { DataRow } from "@common/features/data/components/Table/DataRow";
-import { ConnectedDeploymentContext } from "@common/lib/deploymentContext";
+import {
+  ConnectedDeploymentContext,
+  DeploymentInfoContext,
+} from "@common/lib/deploymentContext";
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 const mockRouter = jest
   .fn()
@@ -27,9 +31,11 @@ const deployment: ConnectedDeployment = {};
 
 function TestContainer({ initialState }: { initialState: boolean[] }) {
   return (
-    <ConvexProvider client={mockClient}>
-      <InnerContainer initialState={initialState} />
-    </ConvexProvider>
+    <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+      <ConvexProvider client={mockClient}>
+        <InnerContainer initialState={initialState} />
+      </ConvexProvider>
+    </DeploymentInfoContext.Provider>
   );
 }