Refactor/activity list filters grid

package.json

@@ -41,6 +41,7 @@
     "@fontsource/roboto": "^5.1.1",
     "@mui/icons-material": "^6.4.3",
     "@mui/material": "^6.4.3",
+    "@mui/x-data-grid": "^7.29.13",
     "@mui/x-date-pickers": "^7.26.0",
     "@react-pdf/renderer": "^4.4.1",
     "@sentry/react": "^8.32.0",

src/actions/event-actions.js

@@ -81,6 +81,7 @@ export const FLAG_CHANGED = "FLAG_CHANGED";
 export const REQUEST_EVENT_COMMENTS = "REQUEST_EVENT_COMMENTS";
 export const RECEIVE_EVENT_COMMENTS = "RECEIVE_EVENT_COMMENTS";
 export const CHANGE_SEARCH_TERM = "CHANGE_SEARCH_TERM";
+export const CHANGE_EXTRA_COLUMNS = "CHANGE_EXTRA_COLUMNS";
 export const SUBMISSION_PERIOD_REOPENED = "SUBMISSION_PERIOD_REOPENED";
 export const SUBMISSION_PERIOD_CLOSED = "SUBMISSION_PERIOD_CLOSED";
 export const SUBMISSION_REOPEN_NOTIFIED = "SUBMISSION_REOPEN_NOTIFIED";
@@ -1529,3 +1530,7 @@ export const queryAllCompanies = debounce(async (input, callback) => {
 export const changeEventListSearchTerm = (term) => (dispatch) => {
   dispatch(createAction(CHANGE_SEARCH_TERM)({ term }));
 };
+
+export const changeEventListExtraColumns = (extraColumns) => (dispatch) => {
+  dispatch(createAction(CHANGE_EXTRA_COLUMNS)({ extraColumns }));
+};

src/actions/filter-criteria-actions.js

@@ -25,7 +25,7 @@ import {
 } from "openstack-uicore-foundation/lib/utils/actions";
 import URI from "urijs";
 import Swal from "sweetalert2";
-import debounce from "lodash/debounce"
+import debounce from "lodash/debounce";
 
 import { getAccessTokenSafely } from "../utils/methods";
 import {
@@ -87,8 +87,9 @@ export const saveFilterCriteria = (filterCriteria) => async (dispatch) => {
     `${window.PERSIST_FILTER_CRITERIA_API}/api/v1/filter-criterias`,
     filterCriteria,
     customErrorHandler
-  )(params)(dispatch).then(() => {
+  )(params)(dispatch).then((payload) => {
     dispatch(stopLoading());
+    return payload;
   });
 };
 

src/components/filters/saved-views/__tests__/saved-views.test.js

@@ -0,0 +1,237 @@
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+import SavedViews from "..";
+import showConfirmDialog from "../../../mui/showConfirmDialog";
+import { queryFilterCriterias } from "../../../../actions/filter-criteria-actions";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("../../../mui/showConfirmDialog", () => jest.fn());
+
+jest.mock("../../../../actions/filter-criteria-actions", () => ({
+  queryFilterCriterias: jest.fn()
+}));
+
+const VIEWS = [
+  { id: 1, name: "Open Activities", visibility: "Everyone", criteria: [] },
+  { id: 2, name: "Recently Modified", visibility: "Me", criteria: [] }
+];
+
+const renderViews = (props = {}) =>
+  render(
+    <SavedViews
+      summitId={12}
+      context="Activities"
+      onChange={jest.fn()}
+      onSave={jest.fn(() => Promise.resolve())}
+      onDelete={jest.fn(() => Promise.resolve())}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+
+const openMenu = (label = "saved_views.title") =>
+  userEvent.click(screen.getByRole("button", { name: label }));
+
+describe("SavedViews", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    queryFilterCriterias.mockImplementation((summitId, context, input, cb) =>
+      cb(VIEWS.filter((v) => v.name.includes(input)))
+    );
+  });
+
+  test("lists the show's views for this context and applies the one picked", async () => {
+    const onChange = jest.fn();
+    renderViews({ onChange });
+
+    await openMenu();
+
+    expect(queryFilterCriterias).toHaveBeenCalledWith(
+      12,
+      "Activities",
+      "",
+      expect.any(Function)
+    );
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: /Recently Modified/ })
+    );
+
+    expect(onChange).toHaveBeenCalledWith(VIEWS[1]);
+  });
+
+  test("says there are no saved views only once they've loaded empty", async () => {
+    let resolveViews;
+    queryFilterCriterias.mockImplementation((summitId, context, input, cb) => {
+      resolveViews = cb;
+    });
+    renderViews();
+
+    await openMenu();
+    expect(
+      screen.queryByRole("menuitem", { name: "saved_views.no_views" })
+    ).not.toBeInTheDocument();
+
+    act(() => resolveViews([]));
+    expect(
+      screen.getByRole("menuitem", { name: "saved_views.no_views" })
+    ).toBeInTheDocument();
+  });
+
+  test("searches views by name", async () => {
+    renderViews();
+
+    await openMenu();
+    await userEvent.type(
+      screen.getByRole("textbox", { name: "general.search" }),
+      "Open"
+    );
+
+    expect(queryFilterCriterias).toHaveBeenLastCalledWith(
+      12,
+      "Activities",
+      "Open",
+      expect.any(Function)
+    );
+  });
+
+  test("deletes a view after confirming, without applying it", async () => {
+    const onChange = jest.fn();
+    const onDelete = jest.fn(() => Promise.resolve());
+    showConfirmDialog.mockResolvedValueOnce(true);
+    renderViews({ onChange, onDelete });
+
+    await openMenu();
+    await userEvent.click(
+      screen.getByRole("button", { name: "general.delete Open Activities" })
+    );
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalledWith(1));
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("menuitem", { name: /Open Activities/ })
+      ).not.toBeInTheDocument()
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("keeps the view when the delete is cancelled", async () => {
+    const onDelete = jest.fn();
+    showConfirmDialog.mockResolvedValueOnce(false);
+    renderViews({ onDelete });
+
+    await openMenu();
+    await userEvent.click(
+      screen.getByRole("button", { name: "general.delete Open Activities" })
+    );
+
+    await waitFor(() => expect(showConfirmDialog).toHaveBeenCalled());
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  test("offers clearing only while a view is active", async () => {
+    const onChange = jest.fn();
+    const { rerender } = renderViews({ onChange });
+
+    await openMenu();
+    expect(
+      screen.queryByRole("menuitem", { name: "saved_views.clear" })
+    ).not.toBeInTheDocument();
+    await userEvent.keyboard("{Escape}");
+
+    rerender(
+      <SavedViews
+        summitId={12}
+        context="Activities"
+        selectedView={VIEWS[0]}
+        onChange={onChange}
+        onSave={jest.fn()}
+        onDelete={jest.fn()}
+      />
+    );
+    await openMenu("Open Activities");
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: "saved_views.clear" })
+    );
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  test("requires a name and visibility before saving", async () => {
+    const onSave = jest.fn(() => Promise.resolve());
+    renderViews({ onSave });
+
+    await openMenu();
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: "saved_views.save_current" })
+    );
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    expect(await screen.findAllByText("validation.required")).toHaveLength(2);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  test("starts with an empty name and closes once the save resolves", async () => {
+    const onSave = jest.fn(() => Promise.resolve());
+    renderViews({ onSave, selectedView: VIEWS[0] });
+
+    await openMenu("Open Activities");
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: "saved_views.save_current" })
+    );
+
+    const name = screen.getByRole("textbox", { name: "general.name" });
+    expect(name).toHaveValue("");
+    await userEvent.type(name, "Open Keynotes");
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    expect(onSave).toHaveBeenCalledWith({
+      name: "Open Keynotes",
+      visibility: "Everyone"
+    });
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    );
+  });
+
+  test("closes the dialog when the save fails so the error isn't covered", async () => {
+    let rejectSave;
+    const onSave = jest.fn(
+      () =>
+        new Promise((resolve, reject) => {
+          rejectSave = reject;
+        })
+    );
+    renderViews({ onSave });
+
+    await openMenu();
+    await userEvent.click(
+      screen.getByRole("menuitem", { name: "saved_views.save_current" })
+    );
+    await userEvent.type(
+      screen.getByRole("textbox", { name: "general.name" }),
+      "Mine"
+    );
+    await userEvent.click(
+      screen.getByRole("radio", { name: "save_filter_criteria.me" })
+    );
+    await userEvent.click(screen.getByRole("button", { name: "general.save" }));
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "general.save" })
+      ).toBeDisabled()
+    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    await act(async () => rejectSave(new Error("nope")));
+
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    );
+  });
+});

src/components/filters/saved-views/components/save-view-dialog/index.js

@@ -0,0 +1,114 @@
+/**
+ * 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 { FormikProvider, useFormik } from "formik";
+import * as yup from "yup";
+import { Box } from "@mui/material";
+import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiFormikRadioGroup from "openstack-uicore-foundation/lib/components/mui/formik-inputs/radio-group";
+import CustomDialog from "openstack-uicore-foundation/lib/components/mui/custom-dialog";
+import { requiredStringValidation } from "../../../../../utils/yup";
+import {
+  VISIBILITY_OPTION_EVERYONE,
+  VISIBILITY_OPTION_ME
+} from "../../../../../utils/filter-criteria-constants";
+
+const SaveViewDialog = ({ selectedView, onSave, onClose }) => {
+  const formik = useFormik({
+    initialValues: {
+      name: "",
+      visibility: selectedView?.visibility ?? ""
+    },
+    validationSchema: yup.object({
+      name: requiredStringValidation().trim(),
+      visibility: requiredStringValidation()
+    }),
+    onSubmit: (values) =>
+      onSave(values)
+        .finally(() => onClose())
+        .catch(() => {})
+  });
+
+  const handleClose = () => {
+    if (formik.isSubmitting) return;
+    onClose();
+  };
+
+  return (
+    <CustomDialog
+      title={T.translate("saved_views.save_current")}
+      open
+      onClose={handleClose}
+      maxWidth="xs"
+      primaryAction={{
+        label: T.translate("general.save"),
+        onClick: formik.submitForm
+      }}
+      secondaryAction={{
+        label: T.translate("general.cancel"),
+        onClick: handleClose
+      }}
+    >
+      <FormikProvider value={formik}>
+        {/* keeps Enter in the name field submitting */}
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          noValidate
+          autoComplete="off"
+        >
+          <MuiFormikTextField
+            name="name"
+            label={T.translate("general.name")}
+            fullWidth
+            autoFocus
+          />
+          <MuiFormikRadioGroup
+            name="visibility"
+            label={T.translate("save_filter_criteria.visible_to")}
+            row
+            options={[
+              {
+                value: VISIBILITY_OPTION_ME,
+                label: T.translate("save_filter_criteria.me")
+              },
+              {
+                value: VISIBILITY_OPTION_EVERYONE,
+                label: T.translate("save_filter_criteria.everyone")
+              }
+            ]}
+          />
+        </Box>
+      </FormikProvider>
+    </CustomDialog>
+  );
+};
+
+SaveViewDialog.propTypes = {
+  selectedView: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    visibility: PropTypes.string
+  }),
+  onSave: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+SaveViewDialog.defaultProps = {
+  selectedView: null
+};
+
+export default SaveViewDialog;