Load Pipeline Run by run_id or root_execution_id (#1051)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Supersedes #859, #1045 and remedies the issues that caused the rollback in #1052

Allows users to navigate to a pipeline run using the `run_id` instead of the `root_execution_id` if they choose to. This logic is handled through a new hook that will attempt to fetch data from an input `id` first assuming it is a `root_execution_id` and, if not, a `run_id`.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->
Partially addresses #128

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix
- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

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

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
Verify you can navigate to and from pipeline runs via the run id, and also still use the clone & inspect & rerun buttons as expected.

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/hooks/usePipelineRunData.ts

@@ -0,0 +1,75 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useBackend } from "@/providers/BackendProvider";
+import {
+  fetchExecutionDetails,
+  fetchExecutionState,
+  fetchPipelineRun,
+} from "@/services/executionService";
+
+async function fetchPipelineExecutionInfo(
+  rootExecutionId: string,
+  backendUrl: string,
+) {
+  const data = await Promise.all([
+    fetchExecutionDetails(rootExecutionId, backendUrl),
+    fetchExecutionState(rootExecutionId, backendUrl),
+  ]).catch((_) => undefined);
+
+  if (data) {
+    return {
+      rootExecutionId,
+      details: data[0],
+      state: data[1],
+    };
+  }
+
+  return undefined;
+}
+
+/* Accepts root_execution_id or run_id and returns execution details and state */
+export const usePipelineRunData = (id: string) => {
+  const { backendUrl } = useBackend();
+
+  const {
+    data: executionData,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["pipeline-run", id],
+    queryFn: async () => {
+      // id is root_execution_id
+      const executionDetails = await fetchPipelineExecutionInfo(
+        id,
+        backendUrl,
+      ).catch((_) => undefined);
+
+      if (executionDetails?.rootExecutionId) {
+        return executionDetails;
+      }
+
+      // id is run_id
+      const executionDetailsDerivedFromRun = await fetchPipelineRun(
+        id,
+        backendUrl,
+      )
+        .then((res) =>
+          fetchPipelineExecutionInfo(res.root_execution_id, backendUrl),
+        )
+        .catch((_) => undefined);
+
+      if (executionDetailsDerivedFromRun?.rootExecutionId) {
+        return executionDetailsDerivedFromRun;
+      }
+
+      throw new Error("No pipeline run or execution details found");
+    },
+  });
+
+  return {
+    executionData,
+    rootExecutionId: executionData?.rootExecutionId ?? "",
+    isLoading,
+    error,
+  };
+};

src/routes/PipelineRun/PipelineRun.test.tsx

@@ -8,7 +8,6 @@ import type {
   GetGraphExecutionStateResponse,
 } from "@/api/types.gen";
 import { ComponentSpecProvider } from "@/providers/ComponentSpecProvider";
-import * as executionService from "@/services/executionService";
 
 import PipelineRun from "./PipelineRun";
 
@@ -50,15 +49,6 @@ vi.mock("@/providers/BackendProvider", () => ({
 }));
 
 vi.mock("@/services/executionService", () => ({
-  useFetchExecutionInfo: vi.fn(),
-  useFetchPipelineRun: () => ({
-    data: null,
-    isLoading: false,
-    error: null,
-    isFetching: false,
-    refetch: () => {},
-    enabled: false,
-  }),
   countTaskStatuses: vi.fn(),
   getRunStatus: vi.fn(),
   STATUS: {
@@ -71,6 +61,11 @@ vi.mock("@/services/executionService", () => ({
   },
 }));
 
+const mockUsePipelineRunData = vi.fn();
+vi.mock("@/hooks/usePipelineRunData", () => ({
+  usePipelineRunData: () => mockUsePipelineRunData(),
+}));
+
 const mockUseComponentSpec = vi.fn();
 vi.mock("@/providers/ComponentSpecProvider", async (importOriginal) => {
   const actual = (await importOriginal()) as object;
@@ -172,15 +167,14 @@ describe("<PipelineRun/>", () => {
   beforeEach(() => {
     vi.clearAllMocks();
 
-    vi.mocked(executionService.useFetchExecutionInfo).mockReturnValue({
-      data: {
+    mockUsePipelineRunData.mockReturnValue({
+      executionData: {
         details: mockExecutionDetails,
         state: mockExecutionState,
       },
+      rootExecutionId: "test-execution-id",
       isLoading: false,
       error: null,
-      isFetching: false,
-      refetch: () => {},
     });
   });
 
@@ -249,15 +243,14 @@ describe("<PipelineRun/>", () => {
         child_task_execution_ids: {},
       };
 
-      vi.mocked(executionService.useFetchExecutionInfo).mockReturnValue({
-        data: {
+      mockUsePipelineRunData.mockReturnValue({
+        executionData: {
           details: mockExecutionDetailsWithoutIds,
           state: mockExecutionState,
         },
+        rootExecutionId: "test-execution-id",
         isLoading: false,
         error: null,
-        isFetching: false,
-        refetch: () => {},
       });
 
       // act

src/routes/PipelineRun/PipelineRun.tsx

@@ -11,33 +11,29 @@ import { InfoBox } from "@/components/shared/InfoBox";
 import { Spinner } from "@/components/ui/spinner";
 import { faviconManager } from "@/favicon";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { usePipelineRunData } from "@/hooks/usePipelineRunData";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { type RunDetailParams, runDetailRoute } from "@/routes/router";
 import {
   countTaskStatuses,
   getRunStatus,
   STATUS,
-  useFetchExecutionInfo,
 } from "@/services/executionService";
 import { getBackendStatusString } from "@/utils/backend";
 import type { ComponentSpec } from "@/utils/componentSpec";
 
 const PipelineRun = () => {
   const { setComponentSpec, clearComponentSpec, componentSpec } =
     useComponentSpec();
-  const { backendUrl, configured, available, ready } = useBackend();
-  const { id: rootExecutionId } = runDetailRoute.useParams() as RunDetailParams;
+  const { configured, available, ready } = useBackend();
+  const { id } = runDetailRoute.useParams() as RunDetailParams;
 
-  const { data, isLoading, error, refetch } = useFetchExecutionInfo(
-    rootExecutionId,
-    backendUrl,
-    false,
-  );
+  const { executionData, rootExecutionId, isLoading, error } =
+    usePipelineRunData(id);
 
-  const { details, state } = data;
+  const { details, state } = executionData || {};
 
-  // Update favicon based on pipeline status
   useEffect(() => {
     if (!details || !state) {
       faviconManager.reset();
@@ -73,10 +69,6 @@ const PipelineRun = () => {
       `Oasis - ${componentSpec?.name || ""} - ${params.id}`,
   });
 
-  useEffect(() => {
-    refetch();
-  }, [backendUrl, refetch]);
-
   if (isLoading || !ready) {
     return (
       <div className="flex items-center justify-center h-full w-full gap-2">

src/services/executionService.ts

@@ -6,6 +6,7 @@ import type {
   GetContainerExecutionStateResponse,
   GetExecutionInfoResponse,
   GetGraphExecutionStateResponse,
+  PipelineRunResponse,
 } from "@/api/types.gen";
 import type { TaskStatusCounts } from "@/types/pipelineRun";
 import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
@@ -26,6 +27,17 @@ export const fetchExecutionDetails = async (
   return fetchWithErrorHandling(url);
 };
 
+export const fetchPipelineRun = async (
+  runId: string,
+  backendUrl: string,
+): Promise<PipelineRunResponse> => {
+  const response = await fetch(`${backendUrl}/api/pipeline_runs/${runId}`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch pipeline run: ${response.statusText}`);
+  }
+  return response.json();
+};
+
 const fetchContainerExecutionState = async (
   executionId: string,
   backendUrl: string,