PLU-407: execution back button (#851)

## Problem
User need to use browser back button to return to 'Executions for Pipe'
page when viewing a specific Execution.

## Solution
**Improvements**:
- Add a back button next to the Pipe name

## Before & After Screenshots
**BEFORE**:
<img width="1512" alt="Screenshot 2025-02-07 at 11 51 31 AM"
src="https://github.com/user-attachments/assets/cda35b6e-1381-45ee-9b38-18fca0d693ce"
/>

**AFTER**:
<img width="1512" alt="Screenshot 2025-02-07 at 11 52 10 AM"
src="https://github.com/user-attachments/assets/5b3c01fc-28d5-4d56-99e8-9bae3529f426"
/>


## Tests
- [x] Back button navigates back to the executions list of the correct
Pipe

Author: kevinkim-ogp

packages/frontend/src/components/ExecutionHeader/index.tsx

@@ -1,19 +1,44 @@
 import type { IExecution } from '@plumber/types'
 
-import { Fragment, ReactElement } from 'react'
-import { Flex, Stack, Text } from '@chakra-ui/react'
-import { Tooltip } from '@opengovsg/design-system-react'
+import { Fragment, ReactElement, useCallback } from 'react'
+import { BiChevronLeft } from 'react-icons/bi'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Flex, Icon, Link, Stack, Text } from '@chakra-ui/react'
+import { Button, Tooltip } from '@opengovsg/design-system-react'
 import { DateTime } from 'luxon'
 
+import * as URLS from '@/config/urls'
+
 type ExecutionHeaderProps = {
   execution: IExecution
 }
 
-function ExecutionName(props: Pick<IExecution['flow'], 'name'>) {
+function ExecutionName(props: Pick<IExecution['flow'], 'name' | 'id'>) {
+  const { id, name } = props
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const backToPage = searchParams.get('backToPage')
+
+  const handleBack = useCallback(() => {
+    let backUrl = URLS.EXECUTIONS_FOR_FLOW(id)
+
+    if (backToPage && /^\d+$/.test(backToPage)) {
+      backUrl += `?page=${backToPage}`
+    }
+    navigate(backUrl)
+  }, [navigate, id, backToPage])
+
   return (
-    <Text textStyle="h4" mb={4}>
-      {props.name}
-    </Text>
+    <Flex gap={2} alignItems="center">
+      <Button as={Link} variant="link" onClick={handleBack}>
+        <Icon
+          boxSize={6}
+          color="interaction.support.disabled-content"
+          as={BiChevronLeft}
+        />
+      </Button>
+      <Text textStyle="h4">{name}</Text>
+    </Flex>
   )
 }
 
@@ -48,6 +73,7 @@ export default function ExecutionHeader(
   props: ExecutionHeaderProps,
 ): ReactElement {
   const { execution } = props
+  const { flow } = execution
 
   if (!execution) {
     return <Fragment />
@@ -58,13 +84,14 @@ export default function ExecutionHeader(
       <Stack
         direction={{ base: 'column', sm: 'row' }}
         justifyContent="space-between"
+        alignItems="center"
       >
-        <ExecutionDate createdAt={execution.createdAt} />
+        <ExecutionName name={flow.name} id={flow.id} />
         <ExecutionId id={execution.id} />
       </Stack>
 
-      <Stack direction="row">
-        <ExecutionName name={execution.flow.name} />
+      <Stack direction="row" justifyContent="flex-end">
+        <ExecutionDate createdAt={execution.createdAt} />
       </Stack>
     </Stack>
   )

packages/frontend/src/components/ExecutionRow/index.tsx

@@ -23,17 +23,21 @@ import * as URLS from '@/config/urls'
 
 type ExecutionRowProps = {
   execution: IExecution
+  page: number
 }
 
 export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
-  const { execution } = props
+  const { execution, page } = props
   const { flow, executionSteps } = execution
 
   const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10))
   const relativeCreatedAt = createdAt.toRelative()
 
   return (
-    <Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
+    <Link
+      to={`${URLS.EXECUTION(execution.id)}?backToPage=${page}`}
+      data-test="execution-row"
+    >
       <Card
         boxShadow="none"
         _hover={{ bg: 'interaction.muted.neutral.hover' }}

packages/frontend/src/pages/ExecutionsForFlow/index.tsx

@@ -23,6 +23,7 @@ interface ExecutionsListProps {
   executions: IExecution[]
   isSearching: boolean
   isLoading: boolean
+  page: number
 }
 
 const getLimitAndOffset = (page: number) => ({
@@ -38,6 +39,7 @@ function ExecutionsList({
   executions,
   isLoading,
   isSearching,
+  page,
 }: ExecutionsListProps) {
   const hasExecutions = executions.length > 0
 
@@ -67,7 +69,7 @@ function ExecutionsList({
   return (
     <>
       {executions.map((execution) => (
-        <ExecutionRow key={execution.id} execution={execution} />
+        <ExecutionRow key={execution.id} execution={execution} page={page} />
       ))}
     </>
   )
@@ -149,6 +151,7 @@ export default function ExecutionsForFlowPage() {
         executions={executions}
         isLoading={isLoading}
         isSearching={isSearching}
+        page={page}
       />
       {hasPagination && (
         <Flex justifyContent="center" mt={6}>