Refactor/activity grid improvements

src/components/mui/__tests__/bulk-edit-data-grid.test.js

@@ -12,6 +12,21 @@ jest.mock("i18n-react/dist/i18n-react", () => ({
 
 jest.mock("../showConfirmDialog", () => jest.fn());
 
+// tests seed the applied filters before rendering
+const mockGridFilterState = {
+  valuesWithIds: [],
+  setFilters: jest.fn(),
+  joinOperator: undefined
+};
+
+jest.mock("openstack-uicore-foundation/lib/components/mui/grid-filter", () => ({
+  ...jest.requireActual(
+    "openstack-uicore-foundation/lib/components/mui/grid-filter"
+  ),
+  GridFilter: () => null,
+  useGridFilter: () => mockGridFilterState
+}));
+
 const columns = [
   { columnKey: "id", label: "Id", sortable: true },
   { columnKey: "title", label: "Title", sortable: true, editableField: true }
@@ -228,41 +243,44 @@ describe("BulkEditDataGrid", () => {
     const onSearch = jest.fn();
     renderGrid({ searchProps: { term: "", onSearch } });
 
-    await userEvent.click(
-      screen.getByRole("button", { name: "general.search" })
-    );
-    // opening the search focuses its input
+    await userEvent.click(screen.getByRole("textbox"));
     await userEvent.keyboard("keynote");
     expect(onSearch).not.toHaveBeenCalled();
 
     await userEvent.keyboard("{Enter}");
     expect(onSearch).toHaveBeenCalledWith("keynote");
   });
 
-  test("keeps the search box open while a search term is applied, even when cleared", async () => {
-    renderGrid({ searchProps: { term: "keynote", onSearch: jest.fn() } });
-
-    const searchbox = screen.getByRole("textbox");
-    expect(searchbox).toHaveValue("keynote");
-
-    await userEvent.clear(searchbox);
-    await userEvent.tab();
-
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
-  });
-
-  test("collapses the search box when left empty with no term applied", async () => {
-    renderGrid({ searchProps: { term: "", onSearch: jest.fn() } });
-
-    await userEvent.click(
-      screen.getByRole("button", { name: "general.search" })
-    );
-    await userEvent.tab();
-
-    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "general.search" })
-    ).toBeInTheDocument();
+  test("removing a filter chip keeps the other filters and the join operator", async () => {
+    const roomA = { criteria: "location_id", operator: "==", value: [2] };
+    const roomB = { criteria: "location_id", operator: "==", value: [7] };
+    mockGridFilterState.valuesWithIds = [
+      { ...roomA, id: "location_id-0" },
+      { ...roomB, id: "location_id-1" }
+    ];
+    mockGridFilterState.joinOperator = "ANY";
+    const criterias = [
+      {
+        key: "location_id",
+        label: "Location",
+        operators: [{ value: "==", label: "is" }],
+        values: {
+          type: "select",
+          props: {
+            options: [
+              { value: 2, label: "Room A" },
+              { value: 7, label: "Room B" }
+            ]
+          }
+        }
+      }
+    ];
+    renderGrid({ filterProps: { id: "grid_filter", criterias } });
+
+    const roomAChip = screen.getByRole("button", { name: /Room A/ });
+    await userEvent.click(within(roomAChip).getByTestId("CancelIcon"));
+
+    expect(mockGridFilterState.setFilters).toHaveBeenCalledWith([roomB], "ANY");
   });
 
   test("adds from the add button and lists every import option under the import icon", async () => {

src/components/mui/bulk-edit-data-grid/components/applied-filters/index.js

@@ -0,0 +1,68 @@
+/**
+ * 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 { Box, Chip } from "@mui/material";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { useGridFilter } from "openstack-uicore-foundation/lib/components/mui/grid-filter";
+import { getFilterChipLabel } from "../../../../../pages/events/summit-event-list-page/helpers";
+
+// own component so useGridFilter only runs when the grid has a filter
+const AppliedFilters = ({ id, criterias }) => {
+  const { valuesWithIds, setFilters, joinOperator } = useGridFilter(id);
+
+  if (valuesWithIds.length === 0) return null;
+
+  const handleRemoveFilter = (filterId) =>
+    setFilters(
+      valuesWithIds
+        .filter((f) => f.id !== filterId)
+        .map(({ id: _id, ...filter }) => filter),
+      joinOperator
+    );
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 1,
+        width: "100%"
+      }}
+    >
+      {valuesWithIds.map((filter) => (
+        <Chip
+          key={filter.id}
+          size="small"
+          icon={<FilterAltIcon />}
+          label={getFilterChipLabel(filter, criterias)}
+          onDelete={() => handleRemoveFilter(filter.id)}
+        />
+      ))}
+    </Box>
+  );
+};
+
+AppliedFilters.propTypes = {
+  id: PropTypes.string.isRequired,
+  criterias: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default AppliedFilters;