feat: Implement draft design for execution filters

packages/web/package.json

@@ -12,6 +12,7 @@
     "@mui/icons-material": "^5.11.9",
     "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.10",
+    "@mui/x-date-pickers": "^6.5.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

packages/web/src/components/ExecutionsFilter/index.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import SearchIcon from '@mui/icons-material/Search';
+
+export default function ExecutionFilters() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker label="From" />
+        <DatePicker label="Until" />
+        <TextField
+          label="By data in/out"
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon />
+              </InputAdornment>
+            ),
+          }}
+          variant="outlined"
+        />
+
+        <Grid
+          container
+          item
+          xs="auto"
+          sm="auto"
+          alignItems="center"
+          order={{ xs: 1, sm: 2 }}
+        >
+          <ConditionalIconButton
+            type="submit"
+            variant="contained"
+            color="primary"
+            size="large"
+            icon={<SearchIcon />}
+            data-test="create-flow-button"
+          >
+            Search
+          </ConditionalIconButton>
+        </Grid>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

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

@@ -10,6 +10,7 @@ import PaginationItem from '@mui/material/PaginationItem';
 import type { IExecution } from '@automatisch/types';
 
 import NoResultFound from 'components/NoResultFound';
+import ExecutionsFilter from 'components/ExecutionsFilter';
 import ExecutionRow from 'components/ExecutionRow';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
@@ -60,25 +61,22 @@ export default function Executions(): React.ReactElement {
             <PageTitle>{formatMessage('executions.title')}</PageTitle>
           </Grid>
         </Grid>
-
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
-
+        <ExecutionsFilter />
+        <Divider sx={{ mt: 2, mb: 2 }} />
         {loading && (
           <CircularProgress
             data-test="executions-loader"
             sx={{ display: 'block', margin: '20px auto' }}
           />
         )}
-
         {!loading && !hasExecutions && (
           <NoResultFound text={formatMessage('executions.noExecutions')} />
         )}
-
         {!loading &&
           executions?.map((execution) => (
             <ExecutionRow key={execution.id} execution={execution} />
           ))}
-
         {pageInfo && pageInfo.totalPages > 1 && (
           <Pagination
             sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}