fix: split up the executions and execution for pipe pages

Author: pregnantboy

packages/backend/src/helpers/generate-error-email.ts

@@ -21,10 +21,9 @@ export function createBodyErrorMessage(
   const currDateTime = DateTime.now().toFormat('MMM dd yyyy, hh:mm a')
   const searchParams = new URLSearchParams()
   searchParams.set('status', 'failure')
-  searchParams.set('pipeId', pipeId)
 
   const appPrefixUrl = appConfig.isDev ? appConfig.webAppUrl : appConfig.baseUrl
-  const redirectUrl = `/executions?${searchParams.toString()}`
+  const redirectUrl = `/execution-pipe/${pipeId}?${searchParams.toString()}`
   const formattedUrl = `${appPrefixUrl}${redirectUrl}`
 
   const bodyMessage = `

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

@@ -58,7 +58,9 @@ export default function FlowRow(props: FlowRowProps): ReactElement {
           sx={{ cursor: 'pointer' }}
           p={0}
           as={Link}
-          to={isExecution ? URLS.EXECUTION_FLOW(flow.id) : URLS.FLOW(flow.id)}
+          to={
+            isExecution ? URLS.EXECUTIONS_FOR_FLOW(flow.id) : URLS.FLOW(flow.id)
+          }
           display="flex"
           alignItems="center"
           justifyContent="stretch"

packages/frontend/src/components/Layout/NavigationSidebar.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { Link, useMatch } from 'react-router-dom'
+import { Link, matchPath, useLocation } from 'react-router-dom'
 import { Box, Text } from '@chakra-ui/react'
 import {
   Badge,
@@ -20,8 +20,12 @@ function NavigationSidebarItem({
   link,
   closeDrawer,
 }: NavigationSidebarItemProps): JSX.Element {
-  const { to, Icon: icon, text } = link
-  const selected = useMatch({ path: to, end: true })
+  const { pathname } = useLocation()
+
+  const { to, Icon: icon, text, otherLinks } = link
+  const selected = [to, ...(otherLinks || [])].some((link) =>
+    matchPath(link, pathname),
+  )
 
   return (
     <SidebarItem

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

@@ -23,6 +23,7 @@ export type DrawerLink = {
   Icon: React.ElementType
   text: string
   to: string
+  otherLinks?: string[]
   isBottom?: boolean
   badge?: string
 }
@@ -47,6 +48,7 @@ const drawerLinks = [
     Icon: BiHistory,
     text: 'Executions',
     to: URLS.EXECUTIONS,
+    otherLinks: [URLS.EXECUTIONS_FOR_FLOW_PATTERN, URLS.EXECUTION_PATTERN],
   },
   {
     Icon: BiBookOpen,

packages/frontend/src/config/urls.ts

@@ -1,10 +1,12 @@
 export const CONNECTIONS = '/connections'
 export const EXECUTIONS = '/executions'
 export const EXECUTION_PATTERN = '/executions/:executionId'
-export const EXECUTION_FLOW = (pipeId: string): string =>
-  `/executions?pipeId=${pipeId}`
+export const EXECUTIONS_FOR_FLOW_PATTERN = '/execution-pipe/:flowId'
+export const EXECUTIONS_FOR_FLOW = (flowId: string): string =>
+  `/execution-pipe/${flowId}`
 export const EXECUTION = (executionId: string): string =>
   `/executions/${executionId}`
+
 export const ROOT = '/'
 
 export const FOUR_O_FOUR = '/404'

…cutions/components/ExecutionListPage.tsx …ges/Executions/ExecutionsForFlowPage.tsxpackages/frontend/src/pages/Executions/components/ExecutionListPage.tsx renamed to packages/frontend/src/pages/Executions/ExecutionsForFlowPage.tsx packages/frontend/src/pages/Executions/components/ExecutionListPage.tsx renamed to packages/frontend/src/pages/Executions/ExecutionsForFlowPage.tsx

@@ -1,5 +1,7 @@
-import type { IExecution, IFlow } from '@plumber/types'
+import type { IExecution } from '@plumber/types'
 
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/client'
 import { Center, Flex } from '@chakra-ui/react'
 import { Pagination } from '@opengovsg/design-system-react'
@@ -10,9 +12,10 @@ import NoResultFound from '@/components/NoResultFound'
 import PageTitle from '@/components/PageTitle'
 import PrimarySpinner from '@/components/PrimarySpinner'
 import { GET_EXECUTIONS } from '@/graphql/queries/get-executions'
+import { GET_FLOW } from '@/graphql/queries/get-flow'
 import { usePaginationAndFilter } from '@/hooks/usePaginationAndFilter'
 
-import StatusInput from './StatusInput'
+import StatusInput from './components/StatusInput'
 
 const RESULTS_PER_PAGE = 10
 
@@ -27,6 +30,10 @@ const getLimitAndOffset = (page: number) => ({
   offset: (page - 1) * RESULTS_PER_PAGE,
 })
 
+type ExecutionsForFlowParams = {
+  flowId: string
+}
+
 function ExecutionsList({
   executions,
   isLoading,
@@ -66,30 +73,65 @@ function ExecutionsList({
   )
 }
 
-export default function ExecutionList({ flow }: { flow: IFlow }) {
+export default function ExecutionsForFlowPage() {
+  const { flowId } = useParams() as ExecutionsForFlowParams
+
   const { page, setSearchParams, status, isSearching } =
     usePaginationAndFilter()
-  const { id: flowId, name: flowName } = flow
-  const { data: executionsData, loading } = useQuery(GET_EXECUTIONS, {
-    variables: {
-      ...getLimitAndOffset(page),
-      status,
-      flowId,
-    },
-    fetchPolicy: 'cache-and-network',
+
+  const { data: flowData, loading: isFlowLoading } = useQuery(GET_FLOW, {
+    variables: { id: flowId },
     skip: !flowId,
   })
 
+  const { data: executionsData, loading: isExecutionsLoading } = useQuery(
+    GET_EXECUTIONS,
+    {
+      variables: {
+        ...getLimitAndOffset(page),
+        status,
+        flowId,
+      },
+      skip: !flowId,
+    },
+  )
+
   const { pageInfo, edges } = executionsData?.getExecutions || {}
   const executions: IExecution[] =
     edges?.map(({ node }: { node: IExecution }) => {
       return {
         ...node,
-        flow,
+        flow: flowData?.getFlow,
       }
     }) ?? []
   const totalCount: number = pageInfo?.totalCount ?? 0
-  const hasPagination = !loading && totalCount > RESULTS_PER_PAGE
+  const isLoading = isExecutionsLoading || isFlowLoading
+  const hasPagination = !isLoading && totalCount > RESULTS_PER_PAGE
+
+  // ensure invalid pages won't be accessed even after deleting flows
+  const lastPage = Math.ceil(totalCount / RESULTS_PER_PAGE)
+
+  useEffect(() => {
+    // Defer the search params update till after the initial render
+    if (lastPage !== 0 && page > lastPage) {
+      setSearchParams({ page: lastPage })
+    }
+  }, [lastPage, page, setSearchParams])
+
+  if (isLoading) {
+    return (
+      <Center mt={8}>
+        <PrimarySpinner fontSize="4xl" />
+      </Center>
+    )
+  }
+
+  if (!flowData?.getFlow) {
+    return <NoResultFound description="Flow not found" />
+  }
+
+  const { name: flowName } = flowData.getFlow
+
   return (
     <Container py={9}>
       <PageTitle
@@ -105,7 +147,7 @@ export default function ExecutionList({ flow }: { flow: IFlow }) {
       />
       <ExecutionsList
         executions={executions}
-        isLoading={loading}
+        isLoading={isLoading}
         isSearching={isSearching}
       />
       {hasPagination && (