Feature/grid filter continued

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.34",
+    "version": "5.0.36-beta.1",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {

src/components/mui/Dropdown/index.jsx

@@ -86,7 +86,7 @@ Dropdown.propTypes = {
       label: PropTypes.string.isRequired,
       disabled: PropTypes.bool
     })
-  ).isRequired,
+  ),
   label: PropTypes.string,
   placeholder: PropTypes.string,
   onChange: PropTypes.func.isRequired
@@ -95,7 +95,8 @@ Dropdown.propTypes = {
 Dropdown.defaultProps = {
   value: null,
   label: "",
-  placeholder: ""
+  placeholder: "",
+  options: null
 };
 
 export default Dropdown;

src/components/mui/GridFilter/GridFilter.jsx

@@ -29,7 +29,7 @@ import Filter from "./components/Filter";
 import FilterButton from "./components/FilterButton";
 import { saveFilters } from "./actions/filter-actions";
 import useGridFilter from "./hooks/useGridFilter";
-import { JOIN_OPERATORS, OPERATORS, EMPTY_FILTER } from "./utils";
+import { JOIN_OPERATORS, OPERATORS, EMPTY_FILTER, ASYNC_VALUE_TYPES } from "./utils";
 
 const OPERATOR_VALUES = Object.values(OPERATORS).map((op) => op.value);
 
@@ -55,14 +55,21 @@ const GridFilter = ({ id, criterias, hideJoinOperators = false, onApply, saveFil
   }, [valuesString, joinOperator, openModal]);
 
   const parseFilter = (filter) => {
-    const parser = criterias.find(
-      ({ key }) => key === filter.criteria
-    )?.customParser;
+    const criteria = criterias.find(({ key }) => key === filter.criteria);
+    const parser = criteria?.customParser;
+
+    if (!parser && ASYNC_VALUE_TYPES.includes(criteria?.values?.type)) {
+      console.error(
+        `GridFilter: criteria "${filter.criteria}" uses async value type "${criteria.values.type}" but defines no customParser — its value will not serialize into the API filter string correctly.`
+      );
+    }
 
     if (parser) {
       return parser(filter);
     }
 
+    // TODO: use escapeFilterValue
+
     const value = Array.isArray(filter.value)
       ? filter.value.join("||")
       : filter.value;

src/components/mui/GridFilter/components/Filter.jsx

@@ -83,32 +83,37 @@ const Filter = ({ id, value, criterias, onChange, onAdd, onDelete }) => {
     <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 ?? defaultValue}
-            type={valueSettings.type}
-            placeholder={T.translate("grid_filter.select_values")}
-            disabled={!value?.criteria}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...valueSettings.props}
-            options={valueOptions}
-            onChange={handleChangeValue}
-          />
+          <Box sx={{ flex: "0 0 220px" }}>
+            <Dropdown
+              id={`${id}-column`}
+              value={value?.criteria || ""}
+              placeholder={T.translate("grid_filter.select_criteria")}
+              options={criteriaOptions}
+              onChange={handleChangeCriteria}
+            />
+          </Box>
+          <Box sx={{ flex: "0 0 220px" }}>
+            <Dropdown
+              id={`${id}-operator`}
+              value={value?.operator || ""}
+              placeholder={T.translate("grid_filter.select_operator")}
+              options={operatorOptions}
+              disabled={!value?.criteria}
+              onChange={handleChangeOperator}
+            />
+          </Box>
+          <Box sx={{ flex: "1 1 auto", minWidth: 0 }}>
+            <ValueInput
+              id={`${id}-value`}
+              value={value?.value ?? defaultValue}
+              type={valueSettings.type}
+              disabled={!value?.criteria}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...valueSettings.props}
+              options={valueOptions}
+              onChange={handleChangeValue}
+            />
+          </Box>
         </Box>
       </Grid2>
       <Grid2 size={1}>

src/components/mui/GridFilter/components/ValueInput/AsyncSelectInput.jsx

@@ -0,0 +1,155 @@
+/**
+ * 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, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import CircularProgress from "@mui/material/CircularProgress";
+import { DEBOUNCE_WAIT_250 } from "../../../../../utils/constants";
+
+const defaultFormatOption = (item) => ({
+  value: item.id,
+  label: item.name
+});
+
+const optionShape = PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string,
+  raw: PropTypes.object
+});
+
+const AsyncSelectInput = ({
+  id,
+  value,
+  label,
+  placeholder,
+  disabled,
+  multiple,
+  queryFunction,
+  formatOption,
+  debounceWait,
+  minSearchLength,
+  onChange,
+  ...rest
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+
+  // Filter.jsx passes `options` generically to every ValueInput type (meant
+  // for the sync `select` type); this type fetches its own, so it's stripped
+  // out here rather than spread onto the Autocomplete below.
+  const { options: _staleOptions, ...autocompleteProps } = rest;
+
+  const fetchOptions = (searchTerm) => {
+    if (searchTerm && searchTerm.length < minSearchLength) {
+      setOptions([]);
+      return;
+    }
+    setLoading(true);
+    queryFunction(searchTerm, (rawResults) => {
+      setOptions((rawResults || []).map((item) => ({ ...formatOption(item), raw: item })));
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    fetchOptions("");
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleInputChange = (event, newInputValue, reason) => {
+    if (reason !== "input") return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => fetchOptions(newInputValue), debounceWait);
+  };
+
+  const handleChange = (event, selected) => {
+    onChange({ target: { value: multiple ? selected || [] : selected || null } });
+  };
+
+  // Filter.jsx's single-value default is "" (not null); treat it as empty.
+  const normalizedValue = multiple ? value || [] : value || null;
+  const finalPlaceholder =
+    placeholder || T.translate("grid_filter.placeholders.async");
+
+  return (
+    <Autocomplete
+      id={id}
+      options={options}
+      value={normalizedValue}
+      onChange={handleChange}
+      onInputChange={handleInputChange}
+      loading={loading}
+      multiple={multiple}
+      disabled={disabled}
+      fullWidth
+      size="small"
+      getOptionLabel={(option) => option?.label || ""}
+      isOptionEqualToValue={(option, val) => option.value === val.value}
+      renderInput={(params) => (
+        <TextField
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...params}
+          label={label}
+          placeholder={finalPlaceholder}
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading && <CircularProgress color="inherit" size={16} />}
+                  {params.InputProps?.endAdornment}
+                </>
+              )
+            }
+          }}
+        />
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...autocompleteProps}
+    />
+  );
+};
+
+AsyncSelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([optionShape, PropTypes.arrayOf(optionShape), PropTypes.string]),
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  multiple: PropTypes.bool,
+  queryFunction: PropTypes.func.isRequired,
+  formatOption: PropTypes.func,
+  debounceWait: PropTypes.number,
+  minSearchLength: PropTypes.number,
+  onChange: PropTypes.func.isRequired
+};
+
+AsyncSelectInput.defaultProps = {
+  value: null,
+  label: "",
+  placeholder: "",
+  disabled: false,
+  multiple: false,
+  formatOption: defaultFormatOption,
+  debounceWait: DEBOUNCE_WAIT_250,
+  minSearchLength: 0
+};
+
+export default AsyncSelectInput;

src/components/mui/GridFilter/components/ValueInput/CompanySelectInput.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 PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import AsyncSelectInput from "./AsyncSelectInput";
+import { queryCompanies } from "../../../../../utils/query-actions";
+
+const defaultFormatOption = (company) => ({
+  value: company.id,
+  label: company.name
+});
+
+const CompanySelectInput = ({ queryFunction, placeholder, ...rest }) => (
+  <AsyncSelectInput
+    queryFunction={queryFunction || queryCompanies}
+    placeholder={placeholder || T.translate("grid_filter.placeholders.company")}
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...rest}
+  />
+);
+
+CompanySelectInput.propTypes = {
+  queryFunction: PropTypes.func,
+  placeholder: PropTypes.string
+};
+
+CompanySelectInput.defaultProps = {
+  queryFunction: null,
+  formatOption: defaultFormatOption
+};
+
+export default CompanySelectInput;