feat: migrate track chair list and edit to mui components

src/actions/track-chair-actions.js

@@ -35,6 +35,7 @@ import {
   DEFAULT_PER_PAGE,
   DOUBLE_PER_PAGE
 } from "../utils/constants";
+import { snackbarErrorHandler } from "./base-actions";
 
 URI.escapeQuerySpace = false;
 
@@ -95,7 +96,7 @@ export const getTrackChairs =
       expand: "member,categories",
       relations: "member.none,categories.none",
       fields:
-        "id,categories.id,categories.name,member.first_name,member.last_name,member.email"
+        "id,categories.id,categories.name,member.first_name,member.last_name,member.email,member.id"
     };
 
     if (filter.length > 0) {
@@ -125,9 +126,9 @@ export const getTrackChairs =
       createAction(REQUEST_TRACK_CHAIRS),
       createAction(RECEIVE_TRACK_CHAIRS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-chairs`,
-      authErrorHandler,
-      { trackId, term, order, orderDir }
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler,
+      { trackId, term, order, orderDir, perPage }
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -150,7 +151,7 @@ export const addTrackChair =
       createAction(TRACK_CHAIR_ADDED),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-chairs`,
       { member_id: member.id, categories: trackIds },
-      authErrorHandler
+      snackbarErrorHandler
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });
@@ -175,7 +176,7 @@ export const saveTrackChair =
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-chairs/${trackChairId}`,
       { categories: trackIds },
       authErrorHandler
-    )(params)(dispatch).then(() => {
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };
@@ -195,8 +196,8 @@ export const deleteTrackChair =
       createAction(TRACK_CHAIR_DELETED)({ trackChairId }),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/track-chairs/${trackChairId}`,
       null,
-      authErrorHandler
-    )(params)(dispatch).then(() => {
+      snackbarErrorHandler
+    )(params)(dispatch).finally(() => {
       dispatch(stopLoading());
     });
   };

src/components/mui/formik-inputs/mui-formik-async-select.js

@@ -18,7 +18,8 @@ const MuiFormikAsyncAutocomplete = ({
   formatOption = (item) => ({ value: item.id.toString(), label: item.name }),
   formatSelectedValue = null,
   queryParams = [],
-  isMulti = false
+  isMulti = false,
+  ...rest
 }) => {
   const [field, meta, helpers] = useField(name);
   const [options, setOptions] = useState([]);
@@ -120,6 +121,7 @@ const MuiFormikAsyncAutocomplete = ({
           {option.label}
         </li>
       )}
+      {...rest}
     />
   );
 };

src/i18n/en.json

@@ -3459,7 +3459,7 @@
     "no_items": "No items found for this search criteria.",
     "name": "Name",
     "track": "Track",
-    "delete_warning": "Are you sure you want to remove track chair ",
+    "delete_warning": "Are you sure you want to remove track chair for",
     "saved": "Track chair assigned successfully.",
     "placeholders": {
       "search": "Search track chairs by name",

src/pages/track_chairs/__tests__/track-chair-list-page.test.js

@@ -0,0 +1,207 @@
+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 {
+  saveTrackChair,
+  addTrackChair,
+  deleteTrackChair
+} from "../../../actions/track-chair-actions";
+import TrackChairListPage from "../track-chair-list-page";
+
+jest.mock("../../../actions/track-chair-actions", () => ({
+  getTrackChairs: jest.fn(() => () => Promise.resolve()),
+  deleteTrackChair: jest.fn(() => () => Promise.resolve()),
+  saveTrackChair: jest.fn(() => () => Promise.resolve()),
+  addTrackChair: jest.fn(() => () => Promise.resolve()),
+  exportTrackChairs: jest.fn(() => () => Promise.resolve())
+}));
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/table",
+  () =>
+    function MockMuiTable({ data, onEdit, onDelete }) {
+      return (
+        <div>
+          {data.map((item) => (
+            <div key={item.id}>
+              <button
+                data-testid={`edit-${item.id}`}
+                onClick={() => onEdit(item)}
+              >
+                edit-{item.id}
+              </button>
+              <button
+                data-testid={`delete-${item.id}`}
+                onClick={() => onDelete(item.id)}
+              >
+                delete-{item.id}
+              </button>
+            </div>
+          ))}
+        </div>
+      );
+    }
+);
+
+jest.mock(
+  "openstack-uicore-foundation/lib/components/mui/search-input",
+  () => () => null
+);
+
+// Capture the dialog's props so tests can call onSave/onClose with specific values
+let capturedDialogProps = null;
+jest.mock("../components/track-chair-dialog", () => ({
+  __esModule: true,
+  default: (props) => {
+    capturedDialogProps = props;
+    return <div data-testid="track-chair-dialog" />;
+  }
+}));
+
+const mockTracks = [
+  { id: 1, name: "Track A", chair_visible: true },
+  { id: 2, name: "Track B", chair_visible: true }
+];
+
+const mockTrackChair = {
+  id: 10,
+  name: "Jane Doe (jane@example.com)",
+  member: {
+    id: 42,
+    first_name: "Jane",
+    last_name: "Doe",
+    email: "jane@example.com"
+  },
+  categories: [{ id: 1, name: "Track A" }],
+  trackIds: [1],
+  trackNames: "Track A"
+};
+
+const initialState = {
+  currentSummitState: {
+    currentSummit: { id: 1, name: "Test Summit", tracks: mockTracks }
+  },
+  trackChairListState: {
+    trackChairs: [],
+    trackId: null,
+    term: "",
+    order: "id",
+    orderDir: 1,
+    currentPage: 1,
+    lastPage: 1,
+    perPage: 10,
+    totalTrackChairs: 0
+  }
+};
+
+describe("TrackChairListPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    capturedDialogProps = null;
+  });
+
+  const renderPage = (stateOverrides = {}) =>
+    renderWithRedux(<TrackChairListPage history={{ push: jest.fn() }} />, {
+      initialState: {
+        ...initialState,
+        trackChairListState: {
+          ...initialState.trackChairListState,
+          ...stateOverrides
+        }
+      }
+    });
+
+  describe("dialog visibility", () => {
+    it("shows after clicking Add and closes when onClose is called", async () => {
+      renderPage();
+      expect(
+        screen.queryByTestId("track-chair-dialog")
+      ).not.toBeInTheDocument();
+
+      await act(async () => {
+        await userEvent.click(screen.getByRole("button", { name: /add/i }));
+      });
+      expect(screen.getByTestId("track-chair-dialog")).toBeInTheDocument();
+
+      await act(async () => {
+        capturedDialogProps.onClose();
+      });
+      expect(
+        screen.queryByTestId("track-chair-dialog")
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("handleEdit", () => {
+    it("passes the correct entity shape to the dialog", async () => {
+      renderPage({ trackChairs: [mockTrackChair] });
+
+      await act(async () => {
+        await userEvent.click(screen.getByTestId(`edit-${mockTrackChair.id}`));
+      });
+
+      expect(capturedDialogProps.entity).toEqual({
+        id: mockTrackChair.id,
+        member: mockTrackChair.member,
+        originalMemberId: mockTrackChair.member.id,
+        trackIds: [1] // mapped from categories
+      });
+    });
+  });
+
+  describe("handleDelete", () => {
+    it("calls deleteTrackChair with the row id", async () => {
+      renderPage({ trackChairs: [mockTrackChair] });
+
+      await act(async () => {
+        await userEvent.click(
+          screen.getByTestId(`delete-${mockTrackChair.id}`)
+        );
+      });
+
+      expect(deleteTrackChair).toHaveBeenCalledWith(mockTrackChair.id);
+    });
+  });
+
+  describe("handleSave", () => {
+    it("calls addTrackChair when saving a new chair (no id)", async () => {
+      renderPage();
+
+      await act(async () => {
+        await userEvent.click(screen.getByRole("button", { name: /add/i }));
+      });
+
+      await act(async () => {
+        await capturedDialogProps.onSave({
+          id: 0,
+          member: { value: 99, label: "New Member" },
+          trackIds: [1]
+        });
+      });
+
+      expect(addTrackChair).toHaveBeenCalledWith({ id: 99 }, [1]);
+      expect(saveTrackChair).not.toHaveBeenCalled();
+    });
+
+    it("calls saveTrackChair when only tracks change on an existing chair", async () => {
+      renderPage({ trackChairs: [mockTrackChair] });
+
+      await act(async () => {
+        await userEvent.click(screen.getByTestId(`edit-${mockTrackChair.id}`));
+      });
+
+      // Same member (value: 42 === originalMemberId: 42), different tracks
+      await act(async () => {
+        await capturedDialogProps.onSave({
+          id: mockTrackChair.id,
+          member: { value: 42 },
+          trackIds: [1, 2]
+        });
+      });
+
+      expect(saveTrackChair).toHaveBeenCalledWith(mockTrackChair.id, [1, 2]);
+      expect(addTrackChair).not.toHaveBeenCalled();
+    });
+  });
+});