Run Route root_execution_id -> run_id (#1084)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Changes the default routing on the run route to use `run_id` instead of `root_execution_id`.

The order of checking ids when fetching the run data has been reversed so it now checks `run_id` first.

## Related Issue and Pull requests

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

Closes [#128](#128 )

## Type of Change

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

- [x] New feature
- [x] Improvement
- [x] Cleanup/Refactor
- [x] Breaking change

## 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 -->
Validate that all methods of accessing the run route work as intended and use the `run_id`.

## Additional Comments

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

Author: camielvs

src/components/Home/RunSection/RunRow.tsx

@@ -27,7 +27,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
   const navigate = useNavigate();
   const notify = useToastNotification();
 
-  const executionId = `${run.root_execution_id}`;
+  const runId = `${run.id}`;
 
   const name = run.pipeline_name ?? "Unknown pipeline";
 
@@ -48,7 +48,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
     run.execution_status_stats,
   );
 
-  const clickThroughUrl = `${APP_ROUTES.RUNS}/${executionId}`;
+  const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;
 
   const LinkProps = {
     to: clickThroughUrl,
@@ -89,7 +89,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
       <TableCell className="text-sm flex items-center gap-2">
         <StatusIcon status={getRunStatus(statusCounts)} />
         <Link {...LinkProps}>{name}</Link>
-        <span>{`#${executionId}`}</span>
+        <span>{`#${runId}`}</span>
       </TableCell>
       <TableCell>
         <HoverCard openDelay={100}>

src/components/PipelineRun/components/RerunPipelineButton.test.tsx

@@ -131,7 +131,7 @@ describe("<RerunPipelineButton/>", () => {
 
   test("calls submitPipelineRun on click", async () => {
     mockSubmitPipelineRun.mockImplementation(async (_, __, { onSuccess }) => {
-      onSuccess({ root_execution_id: 123 });
+      onSuccess({ id: 123 });
     });
 
     await act(async () => {
@@ -161,7 +161,7 @@ describe("<RerunPipelineButton/>", () => {
 
   test("handles successful rerun", async () => {
     mockSubmitPipelineRun.mockImplementation(async (_, __, { onSuccess }) => {
-      onSuccess({ root_execution_id: 123 });
+      onSuccess({ id: 123 });
     });
 
     await act(async () => {
@@ -235,7 +235,7 @@ describe("<RerunPipelineButton/>", () => {
     });
 
     await act(async () => {
-      resolveSubmit!({ root_execution_id: 123 });
+      resolveSubmit!({ id: 123 });
     });
   });
 
@@ -244,7 +244,7 @@ describe("<RerunPipelineButton/>", () => {
     mockIsAuthorized.mockReturnValue(false);
     mockAwaitAuthorization.mockResolvedValue("new-token");
     mockSubmitPipelineRun.mockImplementation(async (_, __, { onSuccess }) => {
-      onSuccess({ root_execution_id: 123 });
+      onSuccess({ id: 123 });
     });
 
     await act(async () => {
@@ -279,7 +279,7 @@ describe("<RerunPipelineButton/>", () => {
     mockIsAuthorized.mockReturnValue(false);
     mockAwaitAuthorization.mockResolvedValue(null);
     mockSubmitPipelineRun.mockImplementation(async (_, __, { onSuccess }) => {
-      onSuccess({ root_execution_id: 123 });
+      onSuccess({ id: 123 });
     });
 
     await act(async () => {

src/components/PipelineRun/components/RerunPipelineButton.tsx

@@ -29,7 +29,7 @@ export const RerunPipelineButton = ({
   const { getToken } = useAuthLocalStorage();
 
   const onSuccess = useCallback((response: PipelineRun) => {
-    navigate({ to: `${APP_ROUTES.RUNS}/${response.root_execution_id}` });
+    navigate({ to: `${APP_ROUTES.RUNS}/${response.id}` });
   }, []);
 
   const onError = useCallback(

src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx

@@ -15,7 +15,7 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
   const runOverviews = useMemo(
     () =>
       recentRuns.map((run) => (
-        <a key={run.id} href={`/runs/${run.root_execution_id}`} tabIndex={0}>
+        <a key={run.id} href={`/runs/${run.id}`} tabIndex={0}>
           <RunOverview
             run={run}
             config={{

src/components/shared/RunOverview.tsx

@@ -42,7 +42,7 @@ const RunOverview = ({ run, config, className = "" }: RunOverviewProps) => {
     <div
       onClick={(e) => {
         e.stopPropagation();
-        navigate({ to: `${APP_ROUTES.RUNS}/${run.root_execution_id}` });
+        navigate({ to: `${APP_ROUTES.RUNS}/${run.id}` });
       }}
       className={cn(
         "flex flex-col p-2 text-sm hover:bg-gray-50 cursor-pointer",
@@ -55,7 +55,7 @@ const RunOverview = ({ run, config, className = "" }: RunOverviewProps) => {
           <div className="flex items-center gap-3">
             {combinedConfig?.showStatus && <StatusIcon status={run.status} />}
             {combinedConfig?.showExecutionId && (
-              <div className="text-xs">{`#${run.root_execution_id}`}</div>
+              <div className="text-xs">{`#${run.id}`}</div>
             )}
           </div>
           {combinedConfig?.showCreatedAt && run.created_at && (

src/components/shared/Submitters/Oasis/OasisSubmitter.tsx

@@ -76,10 +76,10 @@ const OasisSubmitter = ({
       setSubmitSuccess(true);
       setCooldownTime(3);
       onSubmitComplete?.();
-      showSuccessNotification(response.root_execution_id);
+      showSuccessNotification(response.id);
 
       if (isAutoRedirect) {
-        handleViewRun(response.root_execution_id, true);
+        handleViewRun(response.id, true);
       }
     },
     [

src/hooks/usePipelineRunData.ts

@@ -38,16 +38,6 @@ export const usePipelineRunData = (id: string) => {
   } = 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,
@@ -62,6 +52,16 @@ export const usePipelineRunData = (id: string) => {
         return executionDetailsDerivedFromRun;
       }
 
+      // id is root_execution_id
+      const executionDetailsDerivedFromExecution =
+        await fetchPipelineExecutionInfo(id, backendUrl).catch(
+          (_) => undefined,
+        );
+
+      if (executionDetailsDerivedFromExecution?.rootExecutionId) {
+        return executionDetailsDerivedFromExecution;
+      }
+
       throw new Error("No pipeline run or execution details found");
     },
   });