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

src/actions/email-actions.js

@@ -251,7 +251,7 @@ const normalizeEntity = (entity) => {
   return normalizedEntity;
 };
 
-export const queryTemplates = debounce(async (input, callback) => {
+export const queryTemplates = debounce(async (input, callback, onError) => {
   const accessToken = await getAccessTokenSafely();
 
   const endpoint = URI(`${window.EMAIL_API_BASE_URL}/api/v1/mail-templates`);
@@ -274,7 +274,10 @@ export const queryTemplates = debounce(async (input, callback) => {
 
       callback(options);
     })
-    .catch(fetchErrorHandler);
+    .catch((err) => {
+      fetchErrorHandler(err);
+      if (onError) onError(err);
+    });
 }, DEBOUNCE_WAIT);
 
 /** ********************************************************************************************************* */

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"