Fix system table references in the dashboard Data page (#40807)

This fixes the system table references in the data view to:
- Show the user-facing table names `_file_storage` and `_scheduled_jobs`, instead of the internal names `_storage` and `_scheduled_functions`
- Modify the _Go to Reference_ link to go to the Files / Scheduled Functions pages instead of the Data page. These links don’t link to a particular row, but it’s still more helpful than the current behavior.

Closes ENG-9739

GitOrigin-RevId: 07a8929c02d5ba26bfca0476d8995124c2f50e99

Author: Nicolapps

npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.tsx

@@ -192,7 +192,7 @@ export function ObjectEditor(props: ObjectEditorProps) {
     ],
   );
 
-  const { deploymentsURI } = useContext(DeploymentInfoContext);
+  const { deploymentsURI, captureMessage } = useContext(DeploymentInfoContext);
 
   const { resolvedTheme: currentTheme } = useTheme();
   const prefersDark = currentTheme === "dark";
@@ -265,7 +265,7 @@ export function ObjectEditor(props: ObjectEditorProps) {
           setMonaco(m);
         }}
         onMount={(editor, m) => {
-          registerIdCommands(m, deploymentsURI);
+          registerIdCommands({ monaco: m, deploymentsURI, captureMessage });
 
           editor.onKeyDown((e) => {
             if (e.keyCode === m.KeyCode.Tab) {

npm-packages/dashboard-common/src/elements/ObjectEditor/useIdDecorations.tsx

@@ -13,6 +13,7 @@ import {
   copyTextToClipboard,
   documentHref,
   getReferencedTableName,
+  getVisibleTableName,
   toast,
 } from "@common/lib/utils";
 import { useNents } from "@common/lib/useNents";
@@ -125,26 +126,28 @@ function hoverMessageForDoc(
 ) {
   return [
     {
-      value: `Document in ${colorizeHelperText(tableName, prefersDark)}, created ${colorizeHelperText(new Date(doc._creationTime as number).toLocaleString(), prefersDark)}`,
+      value: `Document in ${colorizeHelperText(getVisibleTableName(tableName), prefersDark)}, created ${colorizeHelperText(new Date(doc._creationTime as number).toLocaleString(), prefersDark)}`,
       supportHtml: true,
       isTrusted: true,
     },
     {
-      value: `${createMarkdownLink(
-        "Open in new tab",
-        GO_TO_DOCUMENT_COMMAND,
-        "codicon-link-external",
-        { id, tableName, componentId },
-      )}
-          
-      ${createMarkdownLink(
-        "Copy Document",
-        COPY_DOCUMENT_COMMAND,
-        "codicon-copy",
-        {
-          docString: stringifyValue(doc, true),
-        },
-      )}`,
+      value:
+        (!tableName.startsWith("_")
+          ? `${createMarkdownLink(
+              "Open in new tab",
+              GO_TO_DOCUMENT_COMMAND,
+              "codicon-link-external",
+              { id, tableName, componentId },
+            )}    `
+          : "") +
+        createMarkdownLink(
+          "Copy Document",
+          COPY_DOCUMENT_COMMAND,
+          "codicon-copy",
+          {
+            docString: stringifyValue(doc, true),
+          },
+        ),
       supportHtml: true,
       isTrusted: {
         enabledCommands: [GO_TO_DOCUMENT_COMMAND, COPY_DOCUMENT_COMMAND],
@@ -257,7 +260,9 @@ async function provideDecoration({
         doc ? "codicon-link mtk23" : "codicon-warning mtk11",
       ),
       after: {
-        content: showTableNames ? `Id<"${tableName}">` : "Id",
+        content: showTableNames
+          ? `Id<"${getVisibleTableName(tableName)}">`
+          : "Id",
         inlineClassName: cn(doc ? "mtk23" : "mtk11", "mtki"),
         cursorStops: monaco.editor.InjectedTextCursorStops.None,
       },
@@ -289,10 +294,15 @@ function colorizeHelperText(text: string, prefersDark: boolean) {
 const GO_TO_DOCUMENT_COMMAND = "goToDocument";
 const COPY_DOCUMENT_COMMAND = "copyDocument";
 
-export function registerIdCommands(
-  monaco: Parameters<BeforeMount>[0],
-  deploymentsURI: string,
-) {
+export function registerIdCommands({
+  monaco,
+  deploymentsURI,
+  captureMessage,
+}: {
+  monaco: Parameters<BeforeMount>[0];
+  deploymentsURI: string;
+  captureMessage: (message: string) => void;
+}) {
   monaco.editor.registerCommand(
     GO_TO_DOCUMENT_COMMAND,
     (
@@ -308,6 +318,7 @@ export function registerIdCommands(
         tableName: args.tableName,
         id: args.id,
         componentId: args.componentId,
+        captureMessage,
       });
       window.open(url.format(href), "_blank");
     },

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCell.test.tsx

@@ -68,6 +68,8 @@ const mockClient = mockConvexReactClient()
   ])
   .registerQueryFake(udfs.getTableMapping.default, () => ({
     10001: "testTable",
+    539: "_scheduled_jobs",
+    540: "_file_storage",
   }));
 
 describe("DataCell", () => {
@@ -359,6 +361,36 @@ describe("DataCell", () => {
       );
     });
 
+    it("navigates to the files page when pressing meta+g on a file id", async () => {
+      const { getByTestId } = renderWithProvider({
+        value: "kg267e113cftx1jpeepypezsa57q9wvp",
+      });
+      const button = getByTestId("cell-editor-button");
+      await user.click(button);
+      jest.spyOn(window, "open").mockImplementation(() => null);
+      await user.keyboard("{Meta>}g");
+      expect(window.open).toHaveBeenCalledTimes(1);
+      expect(window.open).toHaveBeenCalledWith(
+        "http://localhost/files",
+        "_blank",
+      );
+    });
+
+    it("navigates to the scheduled functions page when pressing meta+g on a scheduled function id", async () => {
+      const { getByTestId } = renderWithProvider({
+        value: "kc2f44mqfb0kgr6dbnqwpeb2bs7q8bds",
+      });
+      const button = getByTestId("cell-editor-button");
+      await user.click(button);
+      jest.spyOn(window, "open").mockImplementation(() => null);
+      await user.keyboard("{Meta>}g");
+      expect(window.open).toHaveBeenCalledTimes(1);
+      expect(window.open).toHaveBeenCalledWith(
+        "http://localhost/schedules/functions",
+        "_blank",
+      );
+    });
+
     it("does not navigate to the document when pressing ctrl+g for a non-id value", async () => {
       const { getByTestId } = renderWithProvider();
       const button = getByTestId("cell-editor-button");

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/utils/useIdReferenceLink.ts

@@ -17,7 +17,7 @@ export function useIdReferenceLink(value: Value, columnName: string) {
   const referencedTableName = getReferencedTableName(tableMapping, value);
   const isReference = referencedTableName !== null;
 
-  const { deploymentsURI } = useContext(DeploymentInfoContext);
+  const { deploymentsURI, captureMessage } = useContext(DeploymentInfoContext);
 
   if (columnName === "_id") {
     return undefined;
@@ -30,6 +30,7 @@ export function useIdReferenceLink(value: Value, columnName: string) {
           tableName: referencedTableName,
           id: stringValue,
           componentId,
+          captureMessage,
         })
       : undefined;
 

npm-packages/dashboard-common/src/features/data/components/Table/TableContextMenu.test.tsx

@@ -166,7 +166,7 @@ describe("TableContextMenu", () => {
     expect(defaultProps.close).toHaveBeenCalledTimes(1);
   });
 
-  it("should redirect to the document", async () => {
+  it("should link to the document reference", async () => {
     const { getByTestId } = renderWithProvider({
       state: {
         target: { x: 0, y: 0 },
@@ -189,10 +189,67 @@ describe("TableContextMenu", () => {
     });
 
     const link = getByTestId("table-context-menu").children[0];
+    expect(link).toHaveTextContent("Go to Reference");
     expect(link).toHaveAttribute("href", "/document/1");
     expect(link).toHaveAttribute("target", "_blank");
   });
 
+  it("should link to the scheduled functions page", async () => {
+    const { getByTestId } = renderWithProvider({
+      state: {
+        target: { x: 0, y: 0 },
+        selectedCell: {
+          rowId: "1",
+          column: "name",
+          value: "Document 1",
+          callbacks: {
+            copy: jest.fn(),
+            copyDoc: jest.fn(),
+            goToRef: jest.fn(),
+            edit: jest.fn(),
+            editDoc: jest.fn(),
+            view: jest.fn(),
+            viewDoc: jest.fn(),
+            docRefLink: { pathname: "/schedules/functions" },
+          },
+        },
+      },
+    });
+
+    const link = getByTestId("table-context-menu").children[0];
+    expect(link).toHaveTextContent("Go to Scheduled Functions");
+    expect(link).toHaveAttribute("href", "/schedules/functions");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it("should link to the files page", async () => {
+    const { getByTestId } = renderWithProvider({
+      state: {
+        target: { x: 0, y: 0 },
+        selectedCell: {
+          rowId: "1",
+          column: "name",
+          value: "Document 1",
+          callbacks: {
+            copy: jest.fn(),
+            copyDoc: jest.fn(),
+            goToRef: jest.fn(),
+            edit: jest.fn(),
+            editDoc: jest.fn(),
+            view: jest.fn(),
+            viewDoc: jest.fn(),
+            docRefLink: { pathname: "/files" },
+          },
+        },
+      },
+    });
+
+    const link = getByTestId("table-context-menu").children[0];
+    expect(link).toHaveTextContent("Go to Files");
+    expect(link).toHaveAttribute("href", "/files");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
   it.each`
     callbackName | buttonIndex
     ${"view"}    | ${0}

npm-packages/dashboard-common/src/features/data/components/Table/TableContextMenu.tsx

@@ -2,9 +2,11 @@ import {
   ClipboardCopyIcon,
   EnterFullScreenIcon,
   ExternalLinkIcon,
+  FileIcon,
   MixerHorizontalIcon,
   Pencil1Icon,
   ResetIcon,
+  StopwatchIcon,
   TrashIcon,
 } from "@radix-ui/react-icons";
 import React, { useCallback, useContext, useState } from "react";
@@ -301,15 +303,33 @@ function CellActions({
     )
   );
 
+  const isFileRef =
+    state.selectedCell?.callbacks?.docRefLink?.pathname?.endsWith("/files");
+  const isScheduledFunctionRef =
+    state.selectedCell?.callbacks?.docRefLink?.pathname?.endsWith(
+      "/schedules/functions",
+    );
+
   const cellActions =
     state.selectedCell?.rowId && state.selectedCell.callbacks
       ? [
           state.selectedCell.callbacks.docRefLink !== undefined
             ? {
-                action: state.selectedCell.callbacks.docRefLink as UrlObject,
+                action: state.selectedCell.callbacks
+                  .docRefLink satisfies UrlObject,
                 shortcut: ["CtrlOrCmd", "G"] satisfies Key[],
-                icon: <ExternalLinkIcon aria-hidden="true" />,
-                label: "Go to reference",
+                icon: isFileRef ? (
+                  <FileIcon aria-hidden="true" />
+                ) : isScheduledFunctionRef ? (
+                  <StopwatchIcon aria-hidden="true" />
+                ) : (
+                  <ExternalLinkIcon aria-hidden="true" />
+                ),
+                label: isFileRef
+                  ? "Go to Files"
+                  : isScheduledFunctionRef
+                    ? "Go to Scheduled Functions"
+                    : "Go to Reference",
                 disabled: false,
                 tip: null,
               }

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

@@ -80,20 +80,60 @@ export function getReferencedTableName(
   return tableMapping[tableNumber] ?? null;
 }
 
+/**
+ * System tables _file_storage and _scheduled_jobs have a different name
+ * in user-facing contexts.
+ */
+export function getVisibleTableName(tableName: string) {
+  if (tableName === "_file_storage") {
+    return "_storage";
+  }
+
+  if (tableName === "_scheduled_jobs") {
+    return "_scheduled_functions";
+  }
+
+  return tableName;
+}
+
 export function documentHref({
   deploymentsURI,
   tableName,
   id,
   componentId,
+  captureMessage,
 }: {
   deploymentsURI: string;
   tableName: string;
   id: string;
   componentId: string | null;
+  captureMessage: (message: string) => void;
 }): {
   pathname: string;
   query: { [key: string]: string };
 } {
+  if (tableName === "_scheduled_jobs") {
+    return {
+      pathname: `${deploymentsURI}/schedules/functions`,
+      query: {
+        // FIXME: This could include query parameters one day to link to a specific job
+      },
+    };
+  }
+
+  if (tableName === "_file_storage") {
+    return {
+      pathname: `${deploymentsURI}/files`,
+      query: {
+        // FIXME: This could include query parameters one day to link to a specific file
+      },
+    };
+  }
+
+  if (tableName.startsWith("_")) {
+    captureMessage(`Linking to an unsupported system table: ${tableName}`);
+  }
+
   const filter: DatabaseFilterExpression = {
     clauses: [
       {
@@ -104,7 +144,6 @@ export function documentHref({
       },
     ],
   };
-
   return {
     pathname: `${deploymentsURI}/data`,
     query: {

npm-packages/dashboard/src/components/health/EventsForInsight.tsx

@@ -543,7 +543,7 @@ function EventOccDocumentId({
   event: FormattedOccEvent;
   componentId: ComponentId | undefined;
 }) {
-  const { deploymentsURI } = useContext(DeploymentInfoContext);
+  const { deploymentsURI, captureMessage } = useContext(DeploymentInfoContext);
   return (
     <div className="flex w-[16rem]">
       {event.occDocumentId && insight.details.occTableName ? (
@@ -553,6 +553,7 @@ function EventOccDocumentId({
             tableName: insight.details.occTableName,
             id: event.occDocumentId,
             componentId: componentId ?? null,
+            captureMessage,
           })}
           target="_blank"
           className="flex items-center gap-1 text-content-link hover:underline"