feat: add perma path for task runs

Author: mrkaye97

frontend/app/src/pages/main/task-runs-v2/$run/index.tsx

@@ -0,0 +1,16 @@
+import { useParams } from 'react-router-dom';
+import StepRunDetail, {
+  TabOption,
+} from '../../workflow-runs-v2/$run/v2components/step-run-detail/step-run-detail';
+import invariant from 'tiny-invariant';
+
+export default function TaskRun() {
+  const params = useParams();
+  invariant(params.run);
+
+  return (
+    <div className="px-8">
+      <StepRunDetail taskRunId={params.run} defaultOpenTab={TabOption.Output} />
+    </div>
+  );
+}

frontend/app/src/pages/main/workflow-runs-v2/$run/index.tsx

@@ -159,6 +159,7 @@ export default function ExpandedWorkflowRun() {
             <StepRunDetail
               taskRunId={selectedTaskRunId}
               defaultOpenTab={TabOption.Output}
+              showViewTaskRunButton
             />
           )}
         </SheetContent>

frontend/app/src/pages/main/workflow-runs-v2/$run/v2components/step-run-detail/step-run-detail.tsx

@@ -10,11 +10,15 @@ import { useQuery } from '@tanstack/react-query';
 import invariant from 'tiny-invariant';
 import { Button } from '@/components/ui/button';
 import { Loading } from '@/components/ui/loading';
-import { ArrowPathIcon, XCircleIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowPathIcon,
+  LinkIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/outline';
 import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { StepRunEvents } from '../step-run-events-for-workflow-run';
-import { useOutletContext } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router-dom';
 import { TenantContextType } from '@/lib/outlet';
 import { TaskRunsTable as WorkflowRunsTable } from '../../../components/workflow-runs-table';
 import { useTenant } from '@/lib/atoms';
@@ -34,6 +38,7 @@ export enum TabOption {
 interface StepRunDetailProps {
   taskRunId: string;
   defaultOpenTab?: TabOption;
+  showViewTaskRunButton?: boolean;
 }
 
 export const STEP_RUN_TERMINAL_STATUSES = [
@@ -46,6 +51,7 @@ export const STEP_RUN_TERMINAL_STATUSES = [
 const StepRunDetail: React.FC<StepRunDetailProps> = ({
   taskRunId,
   defaultOpenTab = TabOption.Output,
+  showViewTaskRunButton,
 }) => {
   const { tenant } = useTenant();
 
@@ -134,6 +140,14 @@ const StepRunDetail: React.FC<StepRunDetailProps> = ({
           <XCircleIcon className="w-4 h-4" />
           Cancel
         </Button>
+        {showViewTaskRunButton && (
+          <Link to={`/task-runs/${taskRunId}`}>
+            <Button size={'sm'} className="px-2 py-2 gap-2" variant={'outline'}>
+              <LinkIcon className="w-4 h-4" />
+              View Task Run
+            </Button>
+          </Link>
+        )}
       </div>
       {errors && errors.length > 0 && (
         <div className="mt-4">

frontend/app/src/pages/main/workflow-runs-v2/components/workflow-runs-table.tsx

@@ -698,6 +698,7 @@ export function TaskRunsTable({
             <StepRunDetail
               taskRunId={stepDetailSheetState.taskRunId}
               defaultOpenTab={TabOption.Output}
+              showViewTaskRunButton
             />
           </SheetContent>
         </Sheet>

frontend/app/src/router.tsx

@@ -188,6 +188,15 @@ const routes: RouteObject[] = [
                     };
                   }),
               },
+              {
+                path: '/task-runs/:run',
+                lazy: async () =>
+                  import('./pages/main/task-runs-v2/$run').then((res) => {
+                    return {
+                      Component: res.default,
+                    };
+                  }),
+              },
               {
                 path: '/workers',
                 lazy: async () => {