fix: migrate email log list page into MUI/uicore components

src/components/mui/async-select-input.js

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Autocomplete, CircularProgress, TextField } from "@mui/material";
+
+const AsyncSelectInput = ({
+  id,
+  label,
+  value,
+  onChange,
+  queryFunction,
+  formatOption = (item) => ({ value: item.id, label: item.name })
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchOptions = (input) => {
+    setLoading(true);
+    queryFunction(input, (results) => {
+      setOptions(results.map(formatOption));
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    fetchOptions("");
+  }, []);
+
+  return (
+    <Autocomplete
+      options={options}
+      value={value ? { value, label: value } : null}
+      loading={loading}
+      fullWidth
+      getOptionLabel={(option) => option.label || ""}
+      isOptionEqualToValue={(option, val) => option.value === val.value}
+      onInputChange={(ev, newInput) => fetchOptions(newInput)}
+      onChange={(ev, selected) =>
+        onChange({ target: { id, value: selected?.value ?? "" } })
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          size="small"
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={16} />}
+                  {params.InputProps?.endAdornment}
+                </>
+              )
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+
+export default AsyncSelectInput;

src/components/mui/chip-multi-select.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  Box,
+  Chip,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select
+} from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+
+const ChipMultiSelect = ({ id, label, value, onChange, options, sx }) => {
+  const handleDelete = (val) =>
+    onChange({ target: { value: value.filter((v) => v !== val) } });
+
+  return (
+    <FormControl fullWidth size="small" sx={sx}>
+      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <Select
+        labelId={`${id}-label`}
+        id={id}
+        multiple
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput label={label} />}
+        renderValue={(selected) => (
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+            {selected.map((val) => {
+              const option = options.find((o) => o.value === val);
+              return option ? (
+                <Chip
+                  key={val}
+                  label={option.label}
+                  size="small"
+                  onDelete={() => handleDelete(val)}
+                  deleteIcon={
+                    <CancelIcon onMouseDown={(ev) => ev.stopPropagation()} />
+                  }
+                />
+              ) : null;
+            })}
+          </Box>
+        )}
+      >
+        {options.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default ChipMultiSelect;

src/i18n/en.json

@@ -3265,6 +3265,7 @@
     }
   },
   "emails": {
+    "emails": "Emails",
     "email_templates": "Email Templates",
     "sent": "Sent",
     "templates": "Templates",
@@ -3319,6 +3320,9 @@
     "email_logs": "Email Logs",
     "email_list": "Email List",
     "apply_filters": "Apply Filters",
+    "enabled_filters": "Enabled Filters",
+    "all": "All",
+    "not_sent": "Not Sent",
     "email_templates": "Email Templates",
     "subject": "Subject",
     "from_email": "From Email",
@@ -3328,7 +3332,6 @@
     "payload": "Payload",
     "select_fields": "Show Columns",
     "placeholders": {
-      "select_fields": "Select data to display",
       "template": "Filter by Template",
       "sent_date_from": "Filter Sent Date from",
       "sent_date_to": "Filter Sent Date to"