feat(executions): add execution filters

packages/web/src/components/DatePickerInput/index.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function DatePickerInput({
+  onChange,
+  defaultValue = '',
+  label,
+  disableFuture = false,
+  minDate,
+  maxDate,
+}) {
+  const intl = useIntl();
+  const formatMessage = useFormatMessage();
+
+  const props = {
+    label,
+    views: ['year', 'month', 'day'],
+    onChange,
+    disableFuture,
+    disableHighlightToday: true,
+    minDate,
+    maxDate,
+  };
+
+  if (defaultValue) {
+    props.defaultValue = defaultValue;
+  }
+
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterLuxon}
+      adapterLocale={intl.locale}
+    >
+      <DatePicker {...props} />
+    </LocalizationProvider>
+  );
+}

packages/web/src/components/ExecutionFilters/index.jsx

@@ -0,0 +1,112 @@
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import {
+  Box,
+  Button,
+  Collapse,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { DateTime } from 'luxon';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import Can from 'components/Can';
+import DatePickerInput from 'components/DatePickerInput';
+import useExecutionFilters from 'hooks/useExecutionFilters';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function ExecutionFilters({ onFilterChange }) {
+  const theme = useTheme();
+  const formatMessage = useFormatMessage();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const {
+    filters,
+    filterByStartDateTime,
+    filterByEndDateTime,
+    filterByStatus,
+  } = useExecutionFilters();
+
+  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+
+  return (
+    <Box>
+      {/* Mobile: Toggle Button for Filters */}
+      {isMobile && (
+        <Button
+          variant="contained"
+          startIcon={<FilterAltIcon />}
+          onClick={() => setMobileFiltersOpen((prev) => !prev)}
+          fullWidth
+          sx={{ mb: 2 }}
+        >
+          {mobileFiltersOpen
+            ? formatMessage('executionFilters.hideFilters')
+            : formatMessage('executionFilters.showFilters')}
+        </Button>
+      )}
+
+      {/* Filters Box (Always Visible on Large Screens) */}
+      <Collapse in={!isMobile || mobileFiltersOpen}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
+            gap: 2,
+            mb: 2,
+            alignItems: { md: 'center' },
+          }}
+        >
+          {/* Status Filter */}
+          <FormControl fullWidth sx={{ maxWidth: { md: 300 } }}>
+            <InputLabel shrink>
+              {formatMessage('executionFilters.statusFilterLabel')}
+            </InputLabel>
+
+            <Select
+              label={formatMessage('executionFilters.statusFilterLabel')}
+              value={filters.status}
+              displayEmpty
+              onChange={(e) => filterByStatus(e.target.value)}
+              key={filters.status}
+            >
+              <MenuItem value={undefined}>
+                {formatMessage('executionFilters.statusFilterAnyOption')}
+              </MenuItem>
+              <MenuItem value="success">
+                {formatMessage('executionFilters.statusFilterSuccessfulOption')}
+              </MenuItem>
+              <MenuItem value="failure">
+                {formatMessage('executionFilters.statusFilterFailedOption')}
+              </MenuItem>
+            </Select>
+          </FormControl>
+
+          {/* Date Filters */}
+          <DatePickerInput
+            label={formatMessage('executionFilters.startDateLabel')}
+            key={`start-${filters.startDateTime}`}
+            defaultValue={filters.startDateTime}
+            disableFuture={true}
+            onChange={filterByStartDateTime}
+            maxDate={filters.endDateTime}
+          />
+
+          <DatePickerInput
+            label={formatMessage('executionFilters.endDateLabel')}
+            key={`end-${filters.endDateTime}`}
+            defaultValue={filters.endDateTime}
+            disableFuture={true}
+            onChange={filterByEndDateTime}
+            minDate={filters.startDateTime}
+          />
+        </Box>
+      </Collapse>
+    </Box>
+  );
+}

packages/web/src/components/IntlProvider/index.jsx

@@ -6,7 +6,7 @@ import englishMessages from 'locales/en.json';
 const IntlProvider = ({ children }) => {
   return (
     <BaseIntlProvider
-      locale={navigator.language}
+      locale={navigator.language.split('-')[0]}
       defaultLocale="en"
       messages={englishMessages}
     >

packages/web/src/components/SearchInput/index.jsx

@@ -7,8 +7,9 @@ import FormControl from '@mui/material/FormControl';
 import SearchIcon from '@mui/icons-material/Search';
 import useFormatMessage from 'hooks/useFormatMessage';
 
-export default function SearchInput({ onChange, defaultValue = '', value }) {
+export default function SearchInput({ onChange, value }) {
   const formatMessage = useFormatMessage();
+
   return (
     <FormControl variant="outlined" fullWidth>
       <InputLabel htmlFor="search-input">
@@ -17,7 +18,6 @@ export default function SearchInput({ onChange, defaultValue = '', value }) {
 
       <OutlinedInput
         value={value}
-        defaultValue={defaultValue}
         id="search-input"
         type="text"
         size="medium"
@@ -36,6 +36,5 @@ export default function SearchInput({ onChange, defaultValue = '', value }) {
 
 SearchInput.propTypes = {
   onChange: PropTypes.func,
-  defaultValue: PropTypes.string,
   value: PropTypes.string,
 };

packages/web/src/hooks/useExecutionFilters.js

@@ -0,0 +1,99 @@
+import { useSearchParams } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { DateTime } from 'luxon';
+
+import api from 'helpers/api';
+import objectifyUrlSearchParams from 'helpers/objectifyUrlSearchParams';
+
+export default function useExecutionFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const searchParamsObject = objectifyUrlSearchParams(searchParams);
+
+  const {
+    folderId,
+    startDateTime: startDateTimeString,
+    endDateTime: endDateTimeString,
+    status,
+  } = searchParamsObject;
+
+  const startDateTime = parseInt(startDateTimeString, 10);
+  const endDateTime = parseInt(endDateTimeString, 10);
+
+  const filterByStatus = (status) => {
+    setSearchParams((current) => {
+      const { status: currentStatus, ...rest } = searchParamsObject;
+
+      if (status) {
+        return { ...rest, status };
+      }
+
+      return rest;
+    });
+  };
+
+  const filterByStartDateTime = (startDateTime) => {
+    const startDateTimeString = startDateTime?.toMillis();
+
+    setSearchParams((current) => {
+      const { startDateTime: currentStartDateTime, ...rest } =
+        searchParamsObject;
+
+      if (startDateTimeString) {
+        return { ...rest, startDateTime: startDateTimeString };
+      }
+
+      return rest;
+    });
+  };
+
+  const filterByEndDateTime = (endDateTime) => {
+    const endDateTimeString = endDateTime?.endOf('day').toMillis();
+
+    setSearchParams((current) => {
+      const { endDateTime: currentEndDateTime, ...rest } = searchParamsObject;
+
+      if (endDateTimeString) {
+        return { ...rest, endDateTime: endDateTimeString };
+      }
+
+      return rest;
+    });
+  };
+
+  const enhanceExistingSearchParams = (key, value) => {
+    const searchParamsObject = objectifyUrlSearchParams(searchParams);
+
+    if (value === undefined) {
+      const { [key]: keyToRemove, ...remainingSearchParams } =
+        searchParamsObject;
+
+      return new URLSearchParams(remainingSearchParams).toString();
+    }
+
+    return new URLSearchParams({
+      ...searchParamsObject,
+      [key]: value,
+    }).toString();
+  };
+
+  return {
+    filters: {
+      startDateTime: startDateTime
+        ? DateTime.fromMillis(startDateTime)
+        : undefined,
+      endDateTime: endDateTime ? DateTime.fromMillis(endDateTime) : undefined,
+      status,
+    },
+    requestFriendlyFilters: {
+      ...(startDateTime && { startDateTime }),
+      ...(endDateTime && { endDateTime }),
+      ...(status && { status }),
+      ...(folderId && { folderId }),
+    },
+    filterByStartDateTime,
+    filterByEndDateTime,
+    filterByStatus,
+    enhanceExistingSearchParams,
+  };
+}

packages/web/src/hooks/useExecutions.js

@@ -2,13 +2,29 @@ import { useQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useExecutions({ page }, { refetchInterval } = {}) {
+export default function useExecutions(
+  { endDateTime, startDateTime, name, page, status },
+  { refetchInterval } = {},
+) {
   const query = useQuery({
-    queryKey: ['executions', { page }],
+    queryKey: [
+      'executions',
+      {
+        endDateTime,
+        startDateTime,
+        name,
+        page,
+        status,
+      },
+    ],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/executions`, {
+      const { data } = await api.get('/v1/executions', {
         params: {
+          endDateTime,
+          startDateTime,
+          name,
           page,
+          status,
         },
         signal,
       });

packages/web/src/locales/en.json

@@ -395,5 +395,13 @@
   "flowFilters.statusFilterLabel": "Status",
   "flowFilters.statusFilterAnyOption": "All",
   "flowFilters.statusFilterPublishedOption": "Published",
-  "flowFilters.statusFilterDraftOption": "Draft"
+  "flowFilters.statusFilterDraftOption": "Draft",
+  "executionFilters.hideFilters": "Hide filters",
+  "executionFilters.showFilters": "Show Filters",
+  "executionFilters.statusFilterLabel": "Status",
+  "executionFilters.statusFilterAnyOption": "All",
+  "executionFilters.statusFilterSuccessfulOption": "Successful",
+  "executionFilters.statusFilterFailedOption": "Failed",
+  "executionFilters.startDateLabel": "Start Date",
+  "executionFilters.endDateLabel": "End Date"
 }

packages/web/src/pages/Executions/index.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -7,26 +7,85 @@ import Divider from '@mui/material/Divider';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 
+import SearchInput from 'components/SearchInput';
+import ExecutionFilters from 'components/ExecutionFilters';
 import NoResultFound from 'components/NoResultFound';
 import ExecutionRow from 'components/ExecutionRow';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useExecutions from 'hooks/useExecutions';
+import useExecutionFilters from 'hooks/useExecutionFilters';
+import objectifyUrlSearchParams from 'helpers/objectifyUrlSearchParams';
 
 export default function Executions() {
   const formatMessage = useFormatMessage();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { requestFriendlyFilters } = useExecutionFilters();
+  const navigate = useNavigate();
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
+  const name = searchParams.get('name') || '';
+  const status = searchParams.get('status');
+  const startDateTime = searchParams.get('startDateTime');
+  const endDateTime = searchParams.get('endDateTime');
+  const [searchValue, setSearchValue] = React.useState(name);
 
-  const { data, isLoading: isExecutionsLoading } = useExecutions(
-    { page: page },
+  const {
+    data,
+    isSuccess,
+    isLoading: isExecutionsLoading,
+  } = useExecutions(
+    { page, name, ...requestFriendlyFilters },
     { refetchInterval: 5000 },
   );
 
-  const { data: executions, meta: pageInfo } = data || {};
-
+  const executions = data?.data || [];
+  const pageInfo = data?.meta;
   const hasExecutions = executions?.length;
+  const navigateToLastPage = isSuccess && !hasExecutions && page > 1;
+
+  const onSearchChange = React.useCallback(
+    (event) => {
+      const value = event.target.value;
+
+      setSearchValue(value);
+
+      setSearchParams({
+        name: value,
+        ...requestFriendlyFilters,
+      });
+    },
+    [requestFriendlyFilters, setSearchParams],
+  );
+
+  const getPathWithSearchParams = (page) => {
+    const searchParamsObject = objectifyUrlSearchParams(searchParams);
+
+    const newSearchParams = new URLSearchParams({
+      ...searchParamsObject,
+      page,
+    });
+
+    return { search: newSearchParams.toString() };
+  };
+
+  React.useEffect(
+    function resetSearchValue() {
+      if (!searchParams.has('name')) {
+        setSearchValue('');
+      }
+    },
+    [searchParams],
+  );
+
+  React.useEffect(
+    function redirectToLastPage() {
+      if (navigateToLastPage) {
+        navigate(getPathWithSearchParams(pageInfo.totalPages));
+      }
+    },
+    [navigateToLastPage],
+  );
 
   return (
     <Box sx={{ py: 3 }}>
@@ -42,10 +101,18 @@ export default function Executions() {
           >
             <PageTitle>{formatMessage('executions.title')}</PageTitle>
           </Grid>
+
+          <Grid item xs={12} md="auto" order={{ xs: 2, md: 1 }}>
+            <SearchInput onChange={onSearchChange} value={searchValue} />
+          </Grid>
         </Grid>
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
 
+        <Grid item xs={12}>
+          <ExecutionFilters />
+        </Grid>
+
         {isExecutionsLoading && (
           <CircularProgress
             data-test="executions-loader"
@@ -73,7 +140,7 @@ export default function Executions() {
             renderItem={(item) => (
               <PaginationItem
                 component={Link}
-                to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
+                to={getPathWithSearchParams(item.page)}
                 {...item}
               />
             )}