From 7fd63b2440ca6ebb6b63d0f5b1e0fd260e2fa656 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Fri, 14 Aug 2026 21:46:13 -0300
Subject: [PATCH 1/4] fix: migrate email log list page into MUI/uicore
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/components/mui/async-select-input.js |  61 ++++
 src/components/mui/chip-multi-select.js  |  56 ++++
 src/i18n/en.json                         |   5 +-
 src/pages/emails/email-log-list-page.js  | 355 +++++++++++------------
 src/styles/email-logs-page.less          |   7 -
 5 files changed, 298 insertions(+), 186 deletions(-)
 create mode 100644 src/components/mui/async-select-input.js
 create mode 100644 src/components/mui/chip-multi-select.js
 delete mode 100644 src/styles/email-logs-page.less

diff --git a/src/components/mui/async-select-input.js b/src/components/mui/async-select-input.js
new file mode 100644
index 000000000..eb6ce8b03
--- /dev/null
+++ b/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;
diff --git a/src/components/mui/chip-multi-select.js b/src/components/mui/chip-multi-select.js
new file mode 100644
index 000000000..2a0e59efa
--- /dev/null
+++ b/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;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 58eb3a2c0..9406755e9 100644
--- a/src/i18n/en.json
+++ b/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"
diff --git a/src/pages/emails/email-log-list-page.js b/src/pages/emails/email-log-list-page.js
index 417c16571..1796a482c 100644
--- a/src/pages/emails/email-log-list-page.js
+++ b/src/pages/emails/email-log-list-page.js
@@ -14,37 +14,47 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
-import { Pagination } from "react-bootstrap";
-import FreeTextSearch from "openstack-uicore-foundation/lib/components/free-text-search"
-import Table from "openstack-uicore-foundation/lib/components/table"
-import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"
-import DateTimePicker from "openstack-uicore-foundation/lib/components/inputs/datetimepicker";
+import {
+  Box,
+  Button,
+  Grid2,
+  ToggleButton,
+  ToggleButtonGroup
+} from "@mui/material";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
+import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
-import { SegmentedControl } from "segmented-control";
-import { getSentEmails } from "../../actions/email-actions";
-import "../../styles/email-logs-page.less";
-import EmailTemplateInput from "../../components/inputs/email-template-input";
+import { getSentEmails, queryTemplates } from "../../actions/email-actions";
+import ChipMultiSelect from "../../components/mui/chip-multi-select";
+import AsyncSelectInput from "../../components/mui/async-select-input";
 import {
   DATE_FILTER_ARRAY_SIZE,
   DEFAULT_CURRENT_PAGE
 } from "../../utils/constants";
 
-const SentEmailListPage = function ({
+const SentEmailListPage = ({
   emails,
-  lastPage,
   currentPage,
   term,
   order,
   orderDir,
   totalEmails,
-  match,
   perPage,
   filters,
-  getSentEmails,
-  ...props
-}) {
+  getSentEmails
+}) => {
   useEffect(() => {
-    getSentEmails(term, currentPage, perPage, order, orderDir, filters);
+    getSentEmails(
+      term,
+      DEFAULT_CURRENT_PAGE,
+      perPage,
+      order,
+      orderDir,
+      filters
+    );
   }, []);
 
   const defaultFilters = {
@@ -70,10 +80,21 @@ const SentEmailListPage = function ({
     getSentEmails(term, newPage, perPage, order, orderDir, emailFilters);
   };
 
-  const handleSort = (index, key, dir, func) => {
+  const handleSort = (index, key, dir) => {
     getSentEmails(term, currentPage, perPage, key, dir, emailFilters);
   };
 
+  const handlePerPageChange = (newPerPage) => {
+    getSentEmails(
+      term,
+      DEFAULT_CURRENT_PAGE,
+      newPerPage,
+      order,
+      orderDir,
+      emailFilters
+    );
+  };
+
   const handleSearch = (newTerm) => {
     getSentEmails(
       newTerm,
@@ -113,37 +134,19 @@ const SentEmailListPage = function ({
     }
   };
 
-  const handleChangeDateFilter = (ev, lastDate) => {
-    const { value, id } = ev.target;
-    const newDateFilter = emailFilters[id];
+  const handleChangeDateFilter = (value, lastDate) => {
+    const newDateFilter = emailFilters.sent_date_filter;
 
     setEmailFilters({
       ...emailFilters,
-      [id]: lastDate
-        ? [newDateFilter[0], value.unix()]
-        : [value.unix(), newDateFilter[1]]
+      sent_date_filter: lastDate
+        ? [newDateFilter[0], value ? value.unix() : null]
+        : [value ? value.unix() : null, newDateFilter[1]]
     });
   };
 
   const handleEmailFilterChange = (ev) => {
-    const { type, id } = ev.target;
-    let { value } = ev.target;
-    if (type === "operatorinput") {
-      value = Array.isArray(value)
-        ? value
-        : `${ev.target.operator}${ev.target.value}`;
-      if (id === "duration_filter") {
-        value = Array.isArray(value)
-          ? value
-          : `${ev.target.operator}${ev.target.value}`;
-      }
-    }
-    if (type === "mediatypeinput") {
-      value = {
-        operator: ev.target.operator,
-        value: ev.target.value
-      };
-    }
+    const { id, value } = ev.target;
     setEmailFilters({ ...emailFilters, [id]: value });
   };
 
@@ -170,11 +173,11 @@ const SentEmailListPage = function ({
   };
 
   const fieldNames = [
-    { columnKey: "last_error", value: "last_error" },
+    { columnKey: "last_error", header: "last_error" },
     {
       columnKey: "payload",
-      value: "payload",
-      render: (row, data) => <div className="email-table-payload">{data}</div>
+      header: "payload",
+      render: (row, data) => <Box sx={{ maxWidth: 300 }}>{data}</Box>
     }
   ];
 
@@ -183,7 +186,7 @@ const SentEmailListPage = function ({
     .map((f2) => {
       let c = {
         columnKey: f2.columnKey,
-        value: T.translate(`email_logs.${f2.value}`),
+        header: T.translate(`email_logs.${f2.header}`),
         sortable: f2.sortable
       };
       // optional fields
@@ -198,20 +201,20 @@ const SentEmailListPage = function ({
     { columnKey: "id", value: T.translate("general.id"), sortable: true },
     {
       columnKey: "template",
-      value: T.translate("email_logs.email_templates"),
+      header: T.translate("email_logs.email_templates"),
       styles: { wordBreak: "break-all" },
       sortable: true
     },
-    { columnKey: "subject", value: T.translate("email_logs.subject") },
-    { columnKey: "from_email", value: T.translate("email_logs.from_email") },
+    { columnKey: "subject", header: T.translate("email_logs.subject") },
+    { columnKey: "from_email", header: T.translate("email_logs.from_email") },
     {
       columnKey: "to_email",
-      value: T.translate("email_logs.to_email"),
+      header: T.translate("email_logs.to_email"),
       styles: { wordBreak: "break-word" }
     },
     {
       columnKey: "sent_date",
-      value: T.translate("email_logs.sent_date"),
+      header: T.translate("email_logs.sent_date"),
       sortable: true
     }
   ];
@@ -236,172 +239,168 @@ const SentEmailListPage = function ({
 
   return (
     <div className="container">
-      <h3>
-        {" "}
-        {T.translate("email_logs.email_list")} ({totalEmails})
-      </h3>
-      <div className="row">
-        <div className="col-md-6">
-          <FreeTextSearch
-            value={term}
-            placeholder={T.translate("emails.placeholders.search_emails")}
-            onSearch={handleSearch}
-          />
-        </div>
-      </div>
-      <hr />
-      <div className="row">
-        <div className="col-md-6">
-          <Dropdown
+      <h3> {T.translate("email_logs.email_list")}</h3>
+      <Grid2
+        container
+        spacing={2}
+        sx={{
+          justifyContent: "center",
+          alignItems: "center",
+          mb: 2
+        }}
+      >
+        <Grid2 size={2}>
+          <Box component="span">
+            {totalEmails} {T.translate("emails.emails")}
+          </Box>
+        </Grid2>
+        <Grid2
+          container
+          size={10}
+          spacing={1}
+          gap={1}
+          sx={{
+            justifyContent: "flex-end",
+            alignItems: "center"
+          }}
+        >
+          <Grid2 size={6}>
+            <SearchInput
+              term={term}
+              onSearch={handleSearch}
+              placeholder={T.translate("emails.placeholders.search_emails")}
+            />
+          </Grid2>
+        </Grid2>
+      </Grid2>
+      <Grid2 container spacing={1} sx={{ alignItems: "center", my: 2 }}>
+        <Grid2 size={{ xs: 12, sm: 6 }}>
+          <ChipMultiSelect
             id="enabled_filters"
-            placeholder="Enabled Filters"
+            label={T.translate("email_logs.enabled_filters")}
             value={enabledFilters}
             onChange={handleFiltersChange}
             options={handleDDLSortByLabel(filters_ddl)}
-            isClearable
-            isMulti
           />
-        </div>
-        <div className="col-md-6">
-          <button
-            className="btn btn-primary right-space"
+        </Grid2>
+        <Grid2>
+          <Button
+            variant="contained"
             onClick={handleApplyEmailFilters}
-            type="button"
+            sx={{ height: 36 }}
           >
             {T.translate("email_logs.apply_filters")}
-          </button>
-        </div>
-      </div>
-      <div className="filters-row">
+          </Button>
+        </Grid2>
+      </Grid2>
+      <Grid2 container spacing={2} sx={{ alignItems: "center", mb: 4 }}>
         {enabledFilters.includes("is_sent_filter") && (
-          <div className="col-md-6">
-            <SegmentedControl
-              name="is_sent_filter"
-              options={[
-                {
-                  label: "All",
-                  value: null,
-                  default: emailFilters.is_sent_filter === null
-                },
-                {
-                  label: "Sent",
-                  value: "1",
-                  default: emailFilters.is_sent_filter === "1"
-                },
-                {
-                  label: "Not Sent",
-                  value: "0",
-                  default: emailFilters.is_sent_filter === "0"
-                }
-              ]}
-              setValue={(newValue) => handleSetSentFilter(newValue)}
-              style={{
+          <Grid2 size={{ xs: 12, sm: 6 }}>
+            <ToggleButtonGroup
+              exclusive
+              value={emailFilters.is_sent_filter}
+              onChange={(ev, newValue) => handleSetSentFilter(newValue)}
+              sx={(theme) => ({
                 width: "100%",
                 height: 40,
-                color: "#337ab7",
-                fontSize: "10px"
-              }}
-            />
-          </div>
+                "& .MuiToggleButtonGroup-grouped": {
+                  flex: 1,
+                  "&.Mui-selected": {
+                    backgroundColor: theme.palette.primary.main,
+                    color: theme.palette.primary.contrastText,
+                    "&:hover": {
+                      backgroundColor: theme.palette.primary.dark
+                    }
+                  }
+                }
+              })}
+            >
+              <ToggleButton value={null}>
+                {T.translate("email_logs.all")}
+              </ToggleButton>
+              <ToggleButton value="1">
+                {T.translate("emails.sent")}
+              </ToggleButton>
+              <ToggleButton value="0">
+                {T.translate("email_logs.not_sent")}
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid2>
         )}
         {enabledFilters.includes("sent_date_filter") && (
-          <>
-            <div className="col-md-3">
+          <LocalizationProvider dateAdapter={AdapterMoment}>
+            <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
-                id="sent_date_filter"
-                format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-                inputProps={{
-                  placeholder: T.translate(
-                    "email_logs.placeholders.sent_date_from"
-                  )
-                }}
-                onChange={(ev) => handleChangeDateFilter(ev, false)}
+                label={T.translate("email_logs.placeholders.sent_date_from")}
+                format="YYYY-MM-DD HH:mm"
+                onChange={(value) => handleChangeDateFilter(value, false)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
                   emailFilters.sent_date_filter[0],
                   "UTC"
                 )}
-                className="event-list-date-picker"
+                slotProps={{
+                  textField: { fullWidth: true, size: "small" }
+                }}
               />
-            </div>
-            <div className="col-md-3">
+            </Grid2>
+            <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
-                id="sent_date_filter"
-                format={{ date: "YYYY-MM-DD", time: "HH:mm" }}
-                inputProps={{
-                  placeholder: T.translate(
-                    "email_logs.placeholders.sent_date_to"
-                  )
-                }}
-                onChange={(ev) => handleChangeDateFilter(ev, true)}
+                label={T.translate("email_logs.placeholders.sent_date_to")}
+                format="YYYY-MM-DD HH:mm"
+                onChange={(value) => handleChangeDateFilter(value, true)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
                   emailFilters.sent_date_filter[1],
                   "UTC"
                 )}
-                className="event-list-date-picker"
+                slotProps={{
+                  textField: { fullWidth: true, size: "small" }
+                }}
               />
-            </div>
-          </>
+            </Grid2>
+          </LocalizationProvider>
         )}
         {enabledFilters.includes("template_filter") && (
-          <div className="col-md-6">
-            <EmailTemplateInput
+          <Grid2 size={{ xs: 12, sm: 6 }}>
+            <AsyncSelectInput
               id="template_filter"
+              label={T.translate("email_logs.placeholders.template")}
               value={emailFilters.template_filter}
-              placeholder={T.translate("email_logs.placeholders.template")}
               onChange={handleEmailFilterChange}
-              isClearable
-              cacheOptions
-              defaultOptions
-              plainValue
+              queryFunction={queryTemplates}
+              formatOption={(t) => ({
+                value: t.identifier,
+                label: t.identifier
+              })}
             />
-          </div>
+          </Grid2>
         )}
-      </div>
-      <div className="row" style={{ marginBottom: 15 }}>
-        <div className="col-md-12">
-          <label htmlFor="select_fields">
-            {T.translate("email_logs.select_fields")}
-          </label>
-          <Dropdown
-            id="select_fields"
-            placeholder={T.translate("email_logs.placeholders.select_fields")}
-            value={selectedColumns}
-            onChange={handleColumnsChange}
-            options={handleDDLSortByLabel(ddl_columns)}
-            isClearable
-            isMulti
-          />
-        </div>
-      </div>
+      </Grid2>
+      <Grid2 sx={{ mb: 2 }}>
+        <ChipMultiSelect
+          id="select_fields"
+          label={T.translate("email_logs.select_fields")}
+          value={selectedColumns}
+          onChange={handleColumnsChange}
+          options={handleDDLSortByLabel(ddl_columns)}
+        />
+      </Grid2>
 
       {emails.length === 0 && <div>{T.translate("emails.no_emails")}</div>}
 
       {emails.length > 0 && (
-        <>
-          <div className="email-logs-table-wrapper">
-            <Table
-              options={table_options}
-              data={emails}
-              columns={columns}
-              onSort={handleSort}
-            />
-          </div>
-          <Pagination
-            bsSize="medium"
-            prev
-            next
-            first
-            last
-            ellipsis
-            boundaryLinks
-            maxButtons={10}
-            items={lastPage}
-            activePage={currentPage}
-            onSelect={handlePageChange}
-          />
-        </>
+        <MuiTable
+          options={table_options}
+          data={emails}
+          columns={columns}
+          onSort={handleSort}
+          perPage={perPage}
+          currentPage={currentPage}
+          totalRows={totalEmails}
+          onPageChange={handlePageChange}
+          onPerPageChange={handlePerPageChange}
+        />
       )}
     </div>
   );
diff --git a/src/styles/email-logs-page.less b/src/styles/email-logs-page.less
deleted file mode 100644
index 3e3ad68c4..000000000
--- a/src/styles/email-logs-page.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.email-logs-table-wrapper {
-  overflow: auto;
-}
-
-.email-table-payload {
-  max-width: 300px;
-}

From b250a432e92b7ad4c539d76c588e6aaf7f1530ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Tue, 18 Aug 2026 12:53:24 -0300
Subject: [PATCH 2/4] fix: clean localization provider, adjust async input, add
 onError for query
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/actions/email-actions.js             |  7 +-
 src/components/mui/async-select-input.js | 61 ----------------
 src/pages/emails/email-log-list-page.js  | 89 +++++++++++++++++++-----
 3 files changed, 77 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/mui/async-select-input.js

diff --git a/src/actions/email-actions.js b/src/actions/email-actions.js
index 2e0799df0..63f6ff57c 100644
--- a/src/actions/email-actions.js
+++ b/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);
 
 /** ********************************************************************************************************* */
diff --git a/src/components/mui/async-select-input.js b/src/components/mui/async-select-input.js
deleted file mode 100644
index eb6ce8b03..000000000
--- a/src/components/mui/async-select-input.js
+++ /dev/null
@@ -1,61 +0,0 @@
-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;
diff --git a/src/pages/emails/email-log-list-page.js b/src/pages/emails/email-log-list-page.js
index 1796a482c..5be5b7af9 100644
--- a/src/pages/emails/email-log-list-page.js
+++ b/src/pages/emails/email-log-list-page.js
@@ -15,21 +15,21 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import {
+  Autocomplete,
   Box,
   Button,
+  CircularProgress,
   Grid2,
+  TextField,
   ToggleButton,
   ToggleButtonGroup
 } from "@mui/material";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import { getSentEmails, queryTemplates } from "../../actions/email-actions";
 import ChipMultiSelect from "../../components/mui/chip-multi-select";
-import AsyncSelectInput from "../../components/mui/async-select-input";
 import {
   DATE_FILTER_ARRAY_SIZE,
   DEFAULT_CURRENT_PAGE
@@ -75,6 +75,26 @@ const SentEmailListPage = ({
     ...filters
   });
   const [selectedColumns, setSelectedColumns] = useState([]);
+  const [templateOptions, setTemplateOptions] = useState([]);
+  const [templateLoading, setTemplateLoading] = useState(false);
+
+  const fetchTemplateOptions = (input) => {
+    setTemplateLoading(true);
+    queryTemplates(
+      input,
+      (results) => {
+        setTemplateOptions(
+          results.map((t) => ({ value: t.identifier, label: t.identifier }))
+        );
+        setTemplateLoading(false);
+      },
+      () => setTemplateLoading(false)
+    );
+  };
+
+  useEffect(() => {
+    fetchTemplateOptions("");
+  }, []);
 
   const handlePageChange = (newPage) => {
     getSentEmails(term, newPage, perPage, order, orderDir, emailFilters);
@@ -328,11 +348,12 @@ const SentEmailListPage = ({
           </Grid2>
         )}
         {enabledFilters.includes("sent_date_filter") && (
-          <LocalizationProvider dateAdapter={AdapterMoment}>
+          <>
             <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
                 label={T.translate("email_logs.placeholders.sent_date_from")}
-                format="YYYY-MM-DD HH:mm"
+                format="YYYY-MM-DD hh:mm A"
+                ampm
                 onChange={(value) => handleChangeDateFilter(value, false)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
@@ -347,7 +368,8 @@ const SentEmailListPage = ({
             <Grid2 size={{ xs: 12, sm: 3 }}>
               <DateTimePicker
                 label={T.translate("email_logs.placeholders.sent_date_to")}
-                format="YYYY-MM-DD HH:mm"
+                format="YYYY-MM-DD hh:mm A"
+                ampm
                 onChange={(value) => handleChangeDateFilter(value, true)}
                 timezone="UTC"
                 value={epochToMomentTimeZone(
@@ -359,20 +381,53 @@ const SentEmailListPage = ({
                 }}
               />
             </Grid2>
-          </LocalizationProvider>
+          </>
         )}
         {enabledFilters.includes("template_filter") && (
           <Grid2 size={{ xs: 12, sm: 6 }}>
-            <AsyncSelectInput
-              id="template_filter"
-              label={T.translate("email_logs.placeholders.template")}
-              value={emailFilters.template_filter}
-              onChange={handleEmailFilterChange}
-              queryFunction={queryTemplates}
-              formatOption={(t) => ({
-                value: t.identifier,
-                label: t.identifier
-              })}
+            <Autocomplete
+              options={templateOptions}
+              value={
+                emailFilters.template_filter
+                  ? {
+                      value: emailFilters.template_filter,
+                      label: emailFilters.template_filter
+                    }
+                  : null
+              }
+              loading={templateLoading}
+              fullWidth
+              getOptionLabel={(option) => option.label || ""}
+              isOptionEqualToValue={(option, val) => option.value === val.value}
+              onInputChange={(ev, newInput) => fetchTemplateOptions(newInput)}
+              onChange={(ev, selected) =>
+                handleEmailFilterChange({
+                  target: {
+                    id: "template_filter",
+                    value: selected?.value ?? ""
+                  }
+                })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label={T.translate("email_logs.placeholders.template")}
+                  size="small"
+                  slotProps={{
+                    input: {
+                      ...params.InputProps,
+                      endAdornment: (
+                        <>
+                          {templateLoading && (
+                            <CircularProgress color="inherit" size={16} />
+                          )}
+                          {params.InputProps?.endAdornment}
+                        </>
+                      )
+                    }
+                  }}
+                />
+              )}
             />
           </Grid2>
         )}

From 5e42e9ba070a2b1dfa81932e2bf55fc3e0162a98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Tue, 18 Aug 2026 13:19:38 -0300
Subject: [PATCH 3/4] fix: remove chip multi select, add ref on tempalte
 request from coderabbit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/components/mui/chip-multi-select.js | 56 ----------------
 src/pages/emails/email-log-list-page.js | 86 ++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/mui/chip-multi-select.js

diff --git a/src/components/mui/chip-multi-select.js b/src/components/mui/chip-multi-select.js
deleted file mode 100644
index 2a0e59efa..000000000
--- a/src/components/mui/chip-multi-select.js
+++ /dev/null
@@ -1,56 +0,0 @@
-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;
diff --git a/src/pages/emails/email-log-list-page.js b/src/pages/emails/email-log-list-page.js
index 5be5b7af9..de904672d 100644
--- a/src/pages/emails/email-log-list-page.js
+++ b/src/pages/emails/email-log-list-page.js
@@ -11,7 +11,7 @@
  * limitations under the License.
  * */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import T from "i18n-react/dist/i18n-react";
 import {
@@ -19,7 +19,12 @@ import {
   Box,
   Button,
   CircularProgress,
+  FormControl,
   Grid2,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
   TextField,
   ToggleButton,
   ToggleButtonGroup
@@ -29,7 +34,6 @@ import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import SearchInput from "openstack-uicore-foundation/lib/components/mui/search-input";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import { getSentEmails, queryTemplates } from "../../actions/email-actions";
-import ChipMultiSelect from "../../components/mui/chip-multi-select";
 import {
   DATE_FILTER_ARRAY_SIZE,
   DEFAULT_CURRENT_PAGE
@@ -77,18 +81,24 @@ const SentEmailListPage = ({
   const [selectedColumns, setSelectedColumns] = useState([]);
   const [templateOptions, setTemplateOptions] = useState([]);
   const [templateLoading, setTemplateLoading] = useState(false);
+  const templateRequestSeqRef = useRef(0);
 
   const fetchTemplateOptions = (input) => {
+    const seq = ++templateRequestSeqRef.current;
     setTemplateLoading(true);
     queryTemplates(
       input,
       (results) => {
+        if (seq !== templateRequestSeqRef.current) return;
         setTemplateOptions(
           results.map((t) => ({ value: t.identifier, label: t.identifier }))
         );
         setTemplateLoading(false);
       },
-      () => setTemplateLoading(false)
+      () => {
+        if (seq !== templateRequestSeqRef.current) return;
+        setTemplateLoading(false);
+      }
     );
   };
 
@@ -295,13 +305,35 @@ const SentEmailListPage = ({
       </Grid2>
       <Grid2 container spacing={1} sx={{ alignItems: "center", my: 2 }}>
         <Grid2 size={{ xs: 12, sm: 6 }}>
-          <ChipMultiSelect
-            id="enabled_filters"
-            label={T.translate("email_logs.enabled_filters")}
-            value={enabledFilters}
-            onChange={handleFiltersChange}
-            options={handleDDLSortByLabel(filters_ddl)}
-          />
+          <FormControl fullWidth size="small">
+            <InputLabel id="enabled_filters-label">
+              {T.translate("email_logs.enabled_filters")}
+            </InputLabel>
+            <Select
+              labelId="enabled_filters-label"
+              id="enabled_filters"
+              multiple
+              value={enabledFilters}
+              onChange={handleFiltersChange}
+              input={
+                <OutlinedInput
+                  label={T.translate("email_logs.enabled_filters")}
+                />
+              }
+              renderValue={(selected) =>
+                handleDDLSortByLabel(filters_ddl)
+                  .filter((option) => selected.includes(option.value))
+                  .map((option) => option.label)
+                  .join(", ")
+              }
+            >
+              {handleDDLSortByLabel(filters_ddl).map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
         </Grid2>
         <Grid2>
           <Button
@@ -433,13 +465,33 @@ const SentEmailListPage = ({
         )}
       </Grid2>
       <Grid2 sx={{ mb: 2 }}>
-        <ChipMultiSelect
-          id="select_fields"
-          label={T.translate("email_logs.select_fields")}
-          value={selectedColumns}
-          onChange={handleColumnsChange}
-          options={handleDDLSortByLabel(ddl_columns)}
-        />
+        <FormControl fullWidth size="small">
+          <InputLabel id="select_fields-label">
+            {T.translate("email_logs.select_fields")}
+          </InputLabel>
+          <Select
+            labelId="select_fields-label"
+            id="select_fields"
+            multiple
+            value={selectedColumns}
+            onChange={handleColumnsChange}
+            input={
+              <OutlinedInput label={T.translate("email_logs.select_fields")} />
+            }
+            renderValue={(selected) =>
+              handleDDLSortByLabel(ddl_columns)
+                .filter((option) => selected.includes(option.value))
+                .map((option) => option.label)
+                .join(", ")
+            }
+          >
+            {handleDDLSortByLabel(ddl_columns).map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
       </Grid2>
 
       {emails.length === 0 && <div>{T.translate("emails.no_emails")}</div>}

From a23afa1629d89fb3479cc4d6719498d193a62b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Tue, 18 Aug 2026 14:04:41 -0300
Subject: [PATCH 4/4] fix: replace column header prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/pages/emails/email-log-list-page.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/emails/email-log-list-page.js b/src/pages/emails/email-log-list-page.js
index de904672d..7fe83ecdc 100644
--- a/src/pages/emails/email-log-list-page.js
+++ b/src/pages/emails/email-log-list-page.js
@@ -228,7 +228,7 @@ const SentEmailListPage = ({
     });
 
   let columns = [
-    { columnKey: "id", value: T.translate("general.id"), sortable: true },
+    { columnKey: "id", header: T.translate("general.id"), sortable: true },
     {
       columnKey: "template",
       header: T.translate("email_logs.email_templates"),