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";
@@ -385,8 +386,9 @@ export const bulkUpdateEvents = (events) => async (dispatch, getState) => {
         )
       );
     })
-    .catch(() => {
+    .catch((err) => {
       dispatch(stopLoading());
+      throw err;
     });
 };
 
@@ -1529,3 +1531,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()
+    );
+  });
+});