Fix run metadata loading when deep linking executions (#1402)

## Fix run metadata loading when deep linking executions

- give `useFetchPipelineRunMetadata` its own query key so metadata no longer
shares cache entries with execution-state queries, preventing the two
requests from clobbering each other
- have `ExecutionDataProvider` derive the correct run id before requesting
metadata so the query refires after navigating straight to an execution
or toggling between subgraphs

This stops the race that was dropping run details and the cancel button when
opening runs by execution id or jumping back to the root graph.

## Type of Change

- [x] Improvement
- [x] Cleanup/Refactor

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [x] I have tested the changes on staging

## Test Instructions

1. Navigate to pipeline run details pages
2. Verify that pipeline metadata is correctly loaded
3. Check that nested executions properly fetch metadata only when needed

Author: Mbeaulne

src/components/PipelineRun/RunDetails.test.tsx

@@ -136,7 +136,7 @@ describe("<RunDetails/>", () => {
       error: null,
     });
 
-    queryClient.setQueryData(["pipeline-run", "123"], mockPipelineRun);
+    queryClient.setQueryData(["pipeline-run-metadata", "123"], mockPipelineRun);
 
     vi.mocked(executionService.countTaskStatuses).mockReturnValue({
       total: 2,
@@ -278,7 +278,7 @@ describe("<RunDetails/>", () => {
       };
 
       queryClient.setQueryData(
-        ["pipeline-run", "123"],
+        ["pipeline-run-metadata", "123"],
         pipelineRunWithDifferentCreator,
       );
 

src/providers/ExecutionDataProvider.tsx

@@ -152,14 +152,20 @@ export function ExecutionDataProvider({
     error: pipelineRunError,
   } = usePipelineRunData(pipelineRunId);
 
+  const { details: rootDetails, state: rootState } = executionData ?? {};
+  const runId = rootDetails?.pipeline_run_id;
+
+  const metadataQueryId =
+    runId ??
+    (rootExecutionId && pipelineRunId === rootExecutionId
+      ? undefined
+      : pipelineRunId);
+
   const {
     data: metadata,
     isLoading: isLoadingPipelineMetadata,
     error: pipelineMetadataError,
-  } = useFetchPipelineRunMetadata(pipelineRunId);
-
-  const { details: rootDetails, state: rootState } = executionData ?? {};
-  const runId = rootDetails?.pipeline_run_id;
+  } = useFetchPipelineRunMetadata(metadataQueryId);
 
   const {
     path: urlDerivedPath,
@@ -239,8 +245,8 @@ export function ExecutionDataProvider({
   // before rendering to avoid flashing the root level
   const isLoading = isAtRoot
     ? isLoadingPipelineRunData ||
-      (!!subgraphExecutionId && isLoadingBreadcrumbs) ||
-      isLoadingPipelineMetadata
+    (!!subgraphExecutionId && isLoadingBreadcrumbs) ||
+    isLoadingPipelineMetadata
     : isNestedLoading || isLoadingBreadcrumbs;
   const error = isAtRoot
     ? pipelineRunError || pipelineMetadataError

src/services/executionService.ts

@@ -43,7 +43,7 @@ export const useFetchPipelineRunMetadata = (runId: string | undefined) => {
   const { backendUrl } = useBackend();
 
   return useQuery<PipelineRunResponse>({
-    queryKey: ["pipeline-run", runId],
+    queryKey: ["pipeline-run-metadata", runId],
     queryFn: () => fetchPipelineRun(runId!, backendUrl),
     enabled: !!runId,
     refetchOnWindowFocus: false,