dash: Link to specific files from the Data page (#40826)

GitOrigin-RevId: 88c8b04d17d4ccbf2f0fcae51871e2c8b64ea5d5

Author: Nicolapps

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

@@ -371,7 +371,7 @@ describe("DataCell", () => {
       await user.keyboard("{Meta>}g");
       expect(window.open).toHaveBeenCalledTimes(1);
       expect(window.open).toHaveBeenCalledWith(
-        "http://localhost/files",
+        "http://localhost/files?id=kg267e113cftx1jpeepypezsa57q9wvp",
         "_blank",
       );
     });

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

@@ -222,7 +222,7 @@ describe("TableContextMenu", () => {
     expect(link).toHaveAttribute("target", "_blank");
   });
 
-  it("should link to the files page", async () => {
+  it("should link to the a specific file on the Files page", async () => {
     const { getByTestId } = renderWithProvider({
       state: {
         target: { x: 0, y: 0 },
@@ -238,15 +238,21 @@ describe("TableContextMenu", () => {
             editDoc: jest.fn(),
             view: jest.fn(),
             viewDoc: jest.fn(),
-            docRefLink: { pathname: "/files" },
+            docRefLink: {
+              pathname: "/files",
+              query: { id: "kg267e113cftx1jpeepypezsa57q9wvp" },
+            },
           },
         },
       },
     });
 
     const link = getByTestId("table-context-menu").children[0];
-    expect(link).toHaveTextContent("Go to Files");
-    expect(link).toHaveAttribute("href", "/files");
+    expect(link).toHaveTextContent("Go to File");
+    expect(link).toHaveAttribute(
+      "href",
+      "/files?id=kg267e113cftx1jpeepypezsa57q9wvp",
+    );
     expect(link).toHaveAttribute("target", "_blank");
   });
 

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

@@ -326,7 +326,7 @@ function CellActions({
                   <ExternalLinkIcon aria-hidden="true" />
                 ),
                 label: isFileRef
-                  ? "Go to Files"
+                  ? "Go to File"
                   : isScheduledFunctionRef
                     ? "Go to Scheduled Functions"
                     : "Go to Reference",

npm-packages/dashboard-common/src/features/files/components/FileStorageView.tsx

@@ -1,6 +1,7 @@
 import { UploadIcon } from "@radix-ui/react-icons";
 import { useQuery } from "convex/react";
-import React, { useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
+import { useRouter } from "next/router";
 import udfs from "@common/udfs";
 import { Id } from "system-udfs/convex/_generated/dataModel";
 import { toast } from "@common/lib/utils";
@@ -38,7 +39,28 @@ export function FileStorageView() {
     setFilters,
   } = usePaginatedFileMetadata();
 
-  const [fileId, setFileId] = useState("");
+  const router = useRouter();
+  const fileId =
+    !router.isReady || !router.query.id
+      ? ""
+      : Array.isArray(router.query.id)
+        ? router.query.id[0]
+        : router.query.id;
+  const setFileId = useCallback(
+    (newFileId: string) => {
+      const query = { ...router.query };
+      if (newFileId) {
+        query.id = newFileId;
+      } else {
+        delete query.id;
+      }
+
+      void router.replace({ pathname: router.pathname, query }, undefined, {
+        shallow: true,
+      });
+    },
+    [router],
+  );
 
   const totalNumFiles = useQuery(udfs.fileStorageV2.numFiles, {
     componentId: useNents().selectedNent?.id ?? null,

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

@@ -124,9 +124,7 @@ export function documentHref({
   if (tableName === "_file_storage") {
     return {
       pathname: `${deploymentsURI}/files`,
-      query: {
-        // FIXME: This could include query parameters one day to link to a specific file
-      },
+      query: { id },
     };
   }