fix: allow execution back navigation with status (#875)

## Problem
Status filter was not preserved when navigating back from a specific
execution view. As a result, users are unable to see the same filtered
view they had before clicking into an individual execution.

## Solution
- Added support for preserving status filter when navigating between
executions page and specific execution.
- Refactor URL parameter validation for page and status

## Before & After Screenshots

**BEFORE**:



https://github.com/user-attachments/assets/8f4b85ca-7c6a-47ad-ae22-c6f7a2e57ced


**AFTER**:



https://github.com/user-attachments/assets/a035ea01-52bf-452d-842b-9ef745f33110


## How to test
- [x] Apply status filter on executions page
- [x] Navigate to specific execution
- [x] Use the back button and verify that the previous page and status
filter are automatically applied
- [x] Modify the `backToPage` and `backToStatus` to invalid parameters,
verify that back navigation returns to the default first page with no
status filter applied

## Deploy Notes
Verify that behaviour works on Admin Dashboard

Author: kevinkim-ogp

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

@@ -9,24 +9,59 @@ import { DateTime } from 'luxon'
 
 import * as URLS from '@/config/urls'
 
+import { StatusType } from '../ExecutionStatusMenu'
+
 type ExecutionHeaderProps = {
   execution: IExecution
 }
 
+const isValidPage = (value: string | null): boolean => /^\d+$/.test(value || '')
+const isValidStatus = (value: string | null): boolean =>
+  Object.values(StatusType).includes(value as StatusType) &&
+  value !== StatusType.Empty
+
+const buildBackUrl = (
+  baseUrl: string,
+  params: Record<string, string | null>,
+) => {
+  const validParams = Object.entries(params)
+    .filter(([key, value]) => {
+      if (!value) {
+        return false
+      }
+
+      switch (key) {
+        case 'page':
+          return isValidPage(value)
+        case 'status':
+          return isValidStatus(value)
+        default:
+          return false
+      }
+    })
+    .reduce((acc, [key, value]) => {
+      acc.append(key, value || '')
+      return acc
+    }, new URLSearchParams())
+
+  return validParams.toString() ? `${baseUrl}?${validParams}` : baseUrl
+}
+
 function ExecutionName(props: Pick<IExecution['flow'], 'name' | 'id'>) {
   const { id, name } = props
   const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const backToPage = searchParams.get('backToPage')
+  const backToStatus = searchParams.get('backToStatus')
 
   const handleBack = useCallback(() => {
-    let backUrl = URLS.EXECUTIONS_FOR_FLOW(id)
-
-    if (backToPage && /^\d+$/.test(backToPage)) {
-      backUrl += `?page=${backToPage}`
-    }
+    const baseUrl = URLS.EXECUTIONS_FOR_FLOW(id)
+    const backUrl = buildBackUrl(baseUrl, {
+      page: backToPage,
+      status: backToStatus,
+    })
     navigate(backUrl)
-  }, [navigate, id, backToPage])
+  }, [navigate, id, backToPage, backToStatus])
 
   return (
     <Flex gap={2} alignItems="center">

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

@@ -24,18 +24,21 @@ import * as URLS from '@/config/urls'
 type ExecutionRowProps = {
   execution: IExecution
   page: number
+  status: string
 }
 
 export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
-  const { execution, page } = props
+  const { execution, page, status } = props
   const { flow, executionSteps } = execution
 
   const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10))
   const relativeCreatedAt = createdAt.toRelative()
 
   return (
     <Link
-      to={`${URLS.EXECUTION(execution.id)}?backToPage=${page}`}
+      to={`${URLS.EXECUTION(
+        execution.id,
+      )}?backToPage=${page}&backToStatus=${status}`}
       data-test="execution-row"
     >
       <Card

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

@@ -24,6 +24,7 @@ interface ExecutionsListProps {
   isSearching: boolean
   isLoading: boolean
   page: number
+  status: string
 }
 
 const getLimitAndOffset = (page: number) => ({
@@ -40,6 +41,7 @@ function ExecutionsList({
   isLoading,
   isSearching,
   page,
+  status,
 }: ExecutionsListProps) {
   const hasExecutions = executions.length > 0
 
@@ -69,7 +71,12 @@ function ExecutionsList({
   return (
     <>
       {executions.map((execution) => (
-        <ExecutionRow key={execution.id} execution={execution} page={page} />
+        <ExecutionRow
+          key={execution.id}
+          execution={execution}
+          page={page}
+          status={status}
+        />
       ))}
     </>
   )
@@ -152,6 +159,7 @@ export default function ExecutionsForFlowPage() {
         isLoading={isLoading}
         isSearching={isSearching}
         page={page}
+        status={status}
       />
       {hasPagination && (
         <Flex justifyContent="center" mt={6}>