Fix documentHref to use object arg + use component ID (#40819)

GitOrigin-RevId: 9c5c1b5197b2ee29a1774aefae87e7c2e6f9a11e

Author: Nicolapps

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

@@ -17,6 +17,7 @@ import {
 } from "@common/lib/utils";
 import { useNents } from "@common/lib/useNents";
 import { LiteralNode } from "@common/elements/ObjectEditor/ast/types";
+import url from "url";
 
 const MAX_IDS_TO_DECORATE = 100;
 
@@ -302,10 +303,13 @@ export function registerIdCommands(
         componentId: string | null;
       },
     ) => {
-      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 url = `${deploymentsURI}/data?${query}`;
-      window.open(`${window.location.origin}${url}`, "_blank");
+      const href = documentHref({
+        deploymentsURI,
+        tableName: args.tableName,
+        id: args.id,
+        componentId: args.componentId,
+      });
+      window.open(url.format(href), "_blank");
     },
   );
 

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

@@ -10,8 +10,9 @@ import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 export function useIdReferenceLink(value: Value, columnName: string) {
   const stringValue = typeof value === "string" ? value : stringifyValue(value);
 
+  const componentId = useNents().selectedNent?.id ?? null;
   const tableMapping = useQuery(udfs.getTableMapping.default, {
-    componentId: useNents().selectedNent?.id ?? null,
+    componentId,
   });
   const referencedTableName = getReferencedTableName(tableMapping, value);
   const isReference = referencedTableName !== null;
@@ -24,7 +25,12 @@ export function useIdReferenceLink(value: Value, columnName: string) {
 
   const link =
     isReference && referencedTableName
-      ? documentHref(deploymentsURI, referencedTableName, stringValue)
+      ? documentHref({
+          deploymentsURI,
+          tableName: referencedTableName,
+          id: stringValue,
+          componentId,
+        })
       : undefined;
 
   return link;

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

@@ -80,12 +80,17 @@ export function getReferencedTableName(
   return tableMapping[tableNumber] ?? null;
 }
 
-export function documentHref(
-  deploymentsURI: string,
-  tableName: string,
-  id: string,
-  componentId?: string,
-): {
+export function documentHref({
+  deploymentsURI,
+  tableName,
+  id,
+  componentId,
+}: {
+  deploymentsURI: string;
+  tableName: string;
+  id: string;
+  componentId: string | null;
+}): {
   pathname: string;
   query: { [key: string]: string };
 } {

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

@@ -548,12 +548,12 @@ function EventOccDocumentId({
     <div className="flex w-[16rem]">
       {event.occDocumentId && insight.details.occTableName ? (
         <Link
-          href={documentHref(
+          href={documentHref({
             deploymentsURI,
-            insight.details.occTableName,
-            event.occDocumentId,
-            componentId || undefined,
-          )}
+            tableName: insight.details.occTableName,
+            id: event.occDocumentId,
+            componentId: componentId ?? null,
+          })}
           target="_blank"
           className="flex items-center gap-1 text-content-link hover:underline"
         >