fix: migrate tier list to mui components

src/actions/sponsorship-actions.js

@@ -21,15 +21,12 @@ import {
   createAction,
   stopLoading,
   startLoading,
-  showMessage,
-  showSuccessMessage,
-  authErrorHandler,
   escapeFilterValue,
   fetchResponseHandler,
   fetchErrorHandler
 } from "openstack-uicore-foundation/lib/utils/actions";
 import URI from "urijs";
-import history from "../history";
+import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
 import { getAccessTokenSafely } from "../utils/methods";
 import {
   DEBOUNCE_WAIT,
@@ -48,12 +45,19 @@ export const SPONSORSHIP_UPDATED = "SPONSORSHIP_UPDATED";
 export const SPONSORSHIP_ADDED = "SPONSORSHIP_ADDED";
 export const SPONSORSHIP_DELETED = "SPONSORSHIP_DELETED";
 
-/** ****************  SPONSORS *************************************** */
+/* *****************  SPONSORS *************************************** */
 
 export const getSponsorships =
-  (page = 1, perPage = DEFAULT_PER_PAGE, order = "name", orderDir = 1) =>
+  (
+    term = "",
+    page = 1,
+    perPage = DEFAULT_PER_PAGE,
+    order = "name",
+    orderDir = 1
+  ) =>
   async (dispatch) => {
     const accessToken = await getAccessTokenSafely();
+    const filter = [];
 
     dispatch(startLoading());
 
@@ -63,6 +67,17 @@ export const getSponsorships =
       access_token: accessToken
     };
 
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filter.push(
+        `name=@${escapedTerm},label=@${escapedTerm},size=@${escapedTerm}`
+      );
+    }
+
+    if (filter.length > 0) {
+      params["filter[]"] = filter;
+    }
+
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === 1 ? "+" : "-";
@@ -73,9 +88,9 @@ export const getSponsorships =
       createAction(REQUEST_SPONSORSHIPS),
       createAction(RECEIVE_SPONSORSHIPS),
       `${window.API_BASE_URL}/api/v1/sponsorship-types`,
-      authErrorHandler,
-      { order, orderDir, page }
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler,
+      { term, order, orderDir, page, perPage }
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -93,8 +108,8 @@ export const getSponsorship = (sponsorshipId) => async (dispatch) => {
     null,
     createAction(RECEIVE_SPONSORSHIP),
     `${window.API_BASE_URL}/api/v1/sponsorship-types/${sponsorshipId}`,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
+    snackbarErrorHandler
+  )(params)(dispatch).finally(() => {
     dispatch(stopLoading());
   });
 };
@@ -115,40 +130,42 @@ export const saveSponsorship = (entity) => async (dispatch) => {
   const normalizedEntity = normalizeSponsorship(entity);
 
   if (entity.id) {
-    putRequest(
+    return putRequest(
       createAction(UPDATE_SPONSORSHIP),
       createAction(SPONSORSHIP_UPDATED),
       `${window.API_BASE_URL}/api/v1/sponsorship-types/${entity.id}`,
       normalizedEntity,
-      authErrorHandler,
+      snackbarErrorHandler,
       entity
-    )(params)(dispatch).then(() => {
-      dispatch(
-        showSuccessMessage(T.translate("edit_sponsorship.sponsorship_saved"))
-      );
-    });
-  } else {
-    const success_message = {
-      title: T.translate("general.done"),
-      html: T.translate("edit_sponsorship.sponsorship_created"),
-      type: "success"
-    };
+    )(params)(dispatch)
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("edit_sponsorship.sponsorship_saved")
+          })
+        );
+      })
+      .finally(() => dispatch(stopLoading()));
+  }
 
-    postRequest(
-      createAction(UPDATE_SPONSORSHIP),
-      createAction(SPONSORSHIP_ADDED),
-      `${window.API_BASE_URL}/api/v1/sponsorship-types`,
-      normalizedEntity,
-      authErrorHandler,
-      entity
-    )(params)(dispatch).then((payload) => {
+  return postRequest(
+    createAction(UPDATE_SPONSORSHIP),
+    createAction(SPONSORSHIP_ADDED),
+    `${window.API_BASE_URL}/api/v1/sponsorship-types`,
+    normalizedEntity,
+    snackbarErrorHandler,
+    entity
+  )(params)(dispatch)
+    .then(() => {
       dispatch(
-        showMessage(success_message, () => {
-          history.push(`/app/sponsorship-types/${payload.response.id}`);
+        snackbarSuccessHandler({
+          title: T.translate("general.success"),
+          html: T.translate("edit_sponsorship.sponsorship_created")
         })
       );
-    });
-  }
+    })
+    .finally(() => dispatch(stopLoading()));
 };
 
 export const deleteSponsorship = (sponsorshipId) => async (dispatch) => {
@@ -163,8 +180,8 @@ export const deleteSponsorship = (sponsorshipId) => async (dispatch) => {
     createAction(SPONSORSHIP_DELETED)({ sponsorshipId }),
     `${window.API_BASE_URL}/api/v1/sponsorship-types/${sponsorshipId}`,
     null,
-    authErrorHandler
-  )(params)(dispatch).then(() => {
+    snackbarErrorHandler
+  )(params)(dispatch).finally(() => {
     dispatch(stopLoading());
   });
 };

src/i18n/en.json

@@ -2946,22 +2946,25 @@
     "sponsorship_types_list": "Tier List",
     "sponsorship_type": "Tier",
     "widget_title": "Widget Title",
-    "no_sponsorships": "No sponsorships found for current search criteria.",
-    "add_sponsorship": "Add Sponsorship",
+    "no_sponsorships": "No tiers found for current search criteria.",
+    "add_sponsorship": "Add Tier",
     "name": "Name",
     "label": "Label",
     "size": "Size",
     "order": "Order",
-    "remove_warning": "Are you sure you want to delete sponsorship "
+    "remove_warning": "Are you sure you want to delete tier {name}",
+    "placeholders": {
+      "search": "Search tier"
+    }
   },
   "edit_sponsorship": {
-    "sponsorship": "Sponsorship",
+    "sponsorship": "Tier",
     "name": "Name",
     "order": "Order",
     "label": "Label",
     "size": "Size",
-    "sponsorship_saved": "Sponsorship saved successfully",
-    "sponsorship_created": "Sponsorship created successfully",
+    "sponsorship_saved": "Tier saved successfully",
+    "sponsorship_created": "Tier created successfully",
     "placeholders": {
       "select_size": "Select a Size"
     }

src/pages/sponsorship-types/__tests__/sponsorship-list-page.test.js

@@ -0,0 +1,203 @@
+import React from "react";
+import { act, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithRedux } from "../../../utils/test-utils";
+import SponsorshipListPage from "../sponsorship-list-page";
+import * as sponsorshipActions from "../../../actions/sponsorship-actions";
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  translate: jest.fn((key) => key)
+}));
+
+jest.mock("sweetalert2", () => ({
+  fire: jest.fn(() => Promise.resolve({ value: true }))
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/table",
+  () =>
+    function MockMuiTable({ data, onEdit, onDelete }) {
+      return (
+        <div data-testid="mui-table">
+          {data.map((row) => (
+            <div key={row.id} data-testid={`row-${row.id}`}>
+              <button
+                data-testid={`edit-${row.id}`}
+                onClick={() => onEdit(row)}
+              >
+                Edit
+              </button>
+              <button
+                data-testid={`delete-${row.id}`}
+                onClick={() => onDelete(row.id)}
+              >
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      );
+    }
+);
+
+jest.mock(
+  "../components/sponsorship-dialog",
+  () =>
+    function MockSponsorshipDialog({ onSave, onClose }) {
+      return (
+        <div data-testid="sponsorship-dialog">
+          <button
+            data-testid="dialog-save"
+            onClick={() => onSave({ id: 0, name: "New Tier" })}
+          >
+            Save
+          </button>
+          <button data-testid="dialog-close" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      );
+    }
+);
+
+jest.mock("../../../actions/sponsorship-actions", () => {
+  const original = jest.requireActual("../../../actions/sponsorship-actions");
+  return {
+    __esModule: true,
+    ...original,
+    getSponsorships: jest.fn(() => () => Promise.resolve()),
+    getSponsorship: jest.fn(() => () => Promise.resolve()),
+    saveSponsorship: jest.fn(() => () => Promise.resolve()),
+    deleteSponsorship: jest.fn(() => () => Promise.resolve()),
+    resetSponsorshipForm: jest.fn(() => ({ type: "RESET_SPONSORSHIP_FORM" }))
+  };
+});
+
+const SPONSORSHIPS = [
+  { id: 1, name: "Gold", label: "Gold Tier", size: "Large" },
+  { id: 2, name: "Silver", label: "Silver Tier", size: "Medium" }
+];
+
+const buildState = (listOverrides = {}) => ({
+  currentSponsorshipListState: {
+    sponsorships: SPONSORSHIPS,
+    currentPage: 1,
+    lastPage: 1,
+    perPage: 10,
+    order: "name",
+    orderDir: 1,
+    totalSponsorships: 2,
+    ...listOverrides
+  },
+  currentSponsorshipState: {
+    entity: { id: 0, name: "", label: "", size: "", order: 0 },
+    errors: {}
+  }
+});
+
+describe("SponsorshipListPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should call getSponsorships on mount", () => {
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+    expect(sponsorshipActions.getSponsorships).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render the table when sponsorships exist", () => {
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+    expect(screen.getByTestId("mui-table")).toBeInTheDocument();
+    expect(screen.getByTestId("row-1")).toBeInTheDocument();
+    expect(screen.getByTestId("row-2")).toBeInTheDocument();
+  });
+
+  it("should not render the table when the list is empty", () => {
+    renderWithRedux(<SponsorshipListPage />, {
+      initialState: buildState({ sponsorships: [], totalSponsorships: 0 })
+    });
+    expect(screen.queryByTestId("mui-table")).not.toBeInTheDocument();
+  });
+
+  it("should open the dialog when the Add button is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+
+    expect(screen.queryByTestId("sponsorship-dialog")).not.toBeInTheDocument();
+
+    await act(async () => {
+      await user.click(screen.getByText("sponsorship_list.add_sponsorship"));
+    });
+
+    expect(screen.getByTestId("sponsorship-dialog")).toBeInTheDocument();
+  });
+
+  it("should open the dialog and fetch the entity when a row edit button is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+
+    await act(async () => {
+      await user.click(screen.getByTestId("edit-1"));
+    });
+
+    expect(sponsorshipActions.getSponsorship).toHaveBeenCalledWith(1);
+    expect(screen.getByTestId("sponsorship-dialog")).toBeInTheDocument();
+  });
+
+  it("should close the dialog and reset form when dialog close is triggered", async () => {
+    const user = userEvent.setup();
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+
+    await act(async () => {
+      await user.click(screen.getByText("sponsorship_list.add_sponsorship"));
+    });
+
+    await act(async () => {
+      await user.click(screen.getByTestId("dialog-close"));
+    });
+
+    expect(sponsorshipActions.resetSponsorshipForm).toHaveBeenCalled();
+    expect(screen.queryByTestId("sponsorship-dialog")).not.toBeInTheDocument();
+  });
+
+  it("should call saveSponsorship, refresh list, and close dialog when save is triggered", async () => {
+    const user = userEvent.setup();
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+
+    await act(async () => {
+      await user.click(screen.getByText("sponsorship_list.add_sponsorship"));
+    });
+
+    await act(async () => {
+      await user.click(screen.getByTestId("dialog-save"));
+    });
+
+    expect(sponsorshipActions.saveSponsorship).toHaveBeenCalledWith({
+      id: 0,
+      name: "New Tier"
+    });
+    expect(sponsorshipActions.getSponsorships).toHaveBeenCalledTimes(2);
+    expect(screen.queryByTestId("sponsorship-dialog")).not.toBeInTheDocument();
+  });
+
+  it("should call getSponsorships with the search term when Enter is pressed", async () => {
+    const user = userEvent.setup();
+    renderWithRedux(<SponsorshipListPage />, { initialState: buildState() });
+
+    const searchInput = screen.getByPlaceholderText(
+      "sponsorship_list.placeholders.search"
+    );
+
+    await act(async () => {
+      await user.type(searchInput, "Gold{Enter}");
+    });
+
+    expect(sponsorshipActions.getSponsorships).toHaveBeenCalledWith(
+      "Gold",
+      1,
+      10,
+      "name",
+      1
+    );
+  });
+});