Feature: new filter component

package.json

@@ -114,7 +114,7 @@
     "react-dropzone": "^4.2.13",
     "react-final-form": "^6.5.9",
     "react-google-maps": "^9.4.5",
-    "react-redux": "^5.0.7",
+    "react-redux": "^7.1.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-rte": "^0.16.3",

src/actions/speaker-actions.js

@@ -889,19 +889,18 @@ export const getSpeakersBySummit =
     perPage = DEFAULT_PER_PAGE,
     order = "full_name",
     orderDir = DEFAULT_ORDER_DIR,
-    filters = {}
+    filters = []
   ) =>
   async (dispatch, getState) => {
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
-    const filter = parseFilters(filters);
+    const filter = [...filters];
 
     dispatch(startLoading());
 
     if (term) {
       const filterTerm = buildTermFilter(term);
-
       filter.push(filterTerm.join(","));
     }
 

src/components/GridFilter/actions/filter-actions.js

@@ -0,0 +1,9 @@
+import { createAction } from "openstack-uicore-foundation/lib/utils/actions";
+
+export const SAVE_FILTERS = "SAVE_FILTERS";
+
+export const saveFilters =
+  (id, filters = [], joinOperator = "all") =>
+  (dispatch) => {
+    dispatch(createAction(SAVE_FILTERS)({ id, filters, joinOperator }));
+  };

src/components/GridFilter/components/Dropdown.jsx

@@ -0,0 +1,83 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import T from "i18n-react/dist/i18n-react";
+import { Select, FormControl, MenuItem, InputLabel } from "@mui/material";
+import PropTypes from "prop-types";
+
+const Dropdown = ({
+  id,
+  value,
+  options,
+  placeholder,
+  label,
+  onChange,
+  ...rest
+}) => {
+  const finalPlaceholder =
+    placeholder || T.translate("general.select_an_option");
+
+  return (
+    <FormControl fullWidth>
+      {label && <InputLabel id={`${id}-label`}>{label}</InputLabel>}
+      <Select
+        value={value}
+        label={label}
+        onChange={onChange}
+        labelId={`${id}-label`}
+        displayEmpty
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+        renderValue={(selected) => {
+          if (selected == null || selected === "") {
+            return <em>{finalPlaceholder}</em>;
+          }
+          const selectedOption = options.find(
+            ({ value }) => value === selected
+          );
+          return selectedOption ? selectedOption.label : "";
+        }}
+      >
+        {options?.map((op) => (
+          <MenuItem key={`selectop-${op.value}`} value={op.value}>
+            {op.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+Dropdown.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+
+Dropdown.defaultProps = {
+  value: null,
+  label: "",
+  placeholder: ""
+};
+
+export default Dropdown;

src/components/GridFilter/components/Filter.jsx

@@ -0,0 +1,145 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import T from "i18n-react/dist/i18n-react";
+import { Box, Grid2, IconButton } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import PropTypes from "prop-types";
+import Dropdown from "./Dropdown";
+import ValueInput from "./ValueInput";
+import RoundButton from "./RoundButton";
+
+const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
+  const criteriaOptions = criterias.map(({ key, label }) => ({
+    value: key,
+    label
+  }));
+  const criteriaObj = criterias.find(({ key }) => key === value?.criteria);
+  const operatorOptions = criteriaObj?.operators || [];
+  const valueSettings = criteriaObj?.values || {};
+
+  const handleChange = (prop, val) => {
+    onChange({ ...value, [prop]: val });
+  };
+
+  const handleChangeCriteria = (ev) => {
+    const val = ev.target.value;
+    handleChange("criteria", val);
+  };
+
+  const handleChangeOperator = (ev) => {
+    const val = ev.target.value;
+    handleChange("operator", val);
+  };
+
+  const handleChangeValue = (ev) => {
+    const val = ev.target.value;
+    handleChange("value", val);
+  };
+
+  return (
+    <Grid2 container spacing={2} sx={{ alignItems: "center", mb: 2 }}>
+      <Grid2 size={11}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "14px" }}>
+          <Dropdown
+            id={`${id}-column`}
+            value={value?.criteria || ""}
+            placeholder={T.translate("grid_filter.select_criteria")}
+            options={criteriaOptions}
+            onChange={handleChangeCriteria}
+          />
+          <Dropdown
+            id={`${id}-operator`}
+            value={value?.operator || ""}
+            placeholder={T.translate("grid_filter.select_operator")}
+            options={operatorOptions}
+            disabled={!value?.criteria}
+            onChange={handleChangeOperator}
+          />
+          <ValueInput
+            id={`${id}-value`}
+            value={value?.value || ""}
+            type={valueSettings.type}
+            placeholder={T.translate("grid_filter.select_values")}
+            disabled={!value?.criteria}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...valueSettings.props}
+            onChange={handleChangeValue}
+          />
+        </Box>
+      </Grid2>
+      <Grid2 size={1}>
+        {value?.id !== "new" ? (
+          <IconButton
+            aria-label="delete-filter"
+            onClick={() => onDelete(value)}
+            size="large"
+          >
+            <DeleteIcon fontSize="large" />
+          </IconButton>
+        ) : (
+          <RoundButton
+            variant="contained"
+            aria-label="add-filter"
+            onClick={() => onAdd()}
+            disabled={!value?.criteria || !value?.operator || !value?.value}
+            sx={{ ml: "4px" }}
+          >
+            <AddIcon fontSize="large" />
+          </RoundButton>
+        )}
+      </Grid2>
+    </Grid2>
+  );
+};
+
+Filter.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.shape({
+    criteria: PropTypes.string,
+    operator: PropTypes.string,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
+      PropTypes.array
+    ])
+  }),
+  criterias: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      operators: PropTypes.arrayOf(
+        PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired
+        })
+      ),
+      values: PropTypes.shape({
+        type: PropTypes.string.isRequired,
+        props: PropTypes.object.isRequired
+      })
+    })
+  ).isRequired,
+  onChange: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+};
+
+Filter.defaultProps = {
+  value: null
+};
+
+export default Filter;

src/components/GridFilter/components/FilterButton.jsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Chip, IconButton } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import T from "i18n-react/dist/i18n-react";
+
+const FilterButton = ({ filterCount, onClick, onDelete }) => {
+  if (filterCount > 0) {
+    return (
+      <Chip
+        icon={<FilterListIcon fontSize="large" />}
+        label={`${filterCount} ${T.translate("grid_filter.filters")}`}
+        onClick={onClick}
+        onDelete={onDelete}
+        sx={{
+          "& .MuiChip-label": { fontSize: "13px" },
+          backgroundColor: "grey.700",
+          color: "white",
+          "& .MuiChip-icon": { color: "white" },
+          "& .MuiChip-deleteIcon": {
+            color: "rgba(255,255,255,0.7)",
+            "&:hover": { color: "white" }
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <IconButton
+      size="large"
+      onClick={onClick}
+      sx={{ mr: 1, top: "-6px", position: "relative" }}
+    >
+      <FilterListIcon fontSize="large" />
+    </IconButton>
+  );
+};
+
+FilterButton.propTypes = {
+  filterCount: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+};
+
+export default FilterButton;

src/components/GridFilter/components/RoundButton.jsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import React from "react";
+import { Button } from "@mui/material";
+import PropTypes from "prop-types";
+
+const RoundButton = ({ children, sx = {}, ...props }) => (
+  <Button
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...props}
+    sx={{
+      width: 40,
+      height: 40,
+      minWidth: "auto",
+      borderRadius: "50%",
+      padding: 0,
+      ...sx
+    }}
+  >
+    {children}
+  </Button>
+);
+
+RoundButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.object
+};
+
+RoundButton.defaultProps = {
+  sx: {}
+};
+
+export default RoundButton;