Converted "Rename Group" modal to React component (#7673)

Author: freyazjiner

Changelog.md

@@ -20,6 +20,7 @@
 - Added tests to improve coverage for `AnnotationCategory`'s `self.to_json` method
 - Added tests to the Criteria Controller class to achieve full test coverage
 - Refactored Criterion subclasses to remove redundant code
+- Converted "Rename Group" functionality to React modal (#7673)
 - Fixed Rack deprecation warnings by updating HTTP status code symbols (#7675)
 
 ## [v2.8.1]

app/assets/javascripts/Groups/index.js

@@ -4,7 +4,6 @@ var modalCreate,
 
 (function () {
   const domContentLoadedCB = function () {
-    window.modal_rename = new ModalMarkus("#rename_group_dialog");
     modalNotesGroup = new ModalMarkus("#notes_dialog");
     modalAssignmentGroupReUse = new ModalMarkus("#assignment_group_use_dialog");
   };

app/javascript/Components/Modals/rename_group_modal.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import Modal from "react-modal";
+
+export default class RenameGroupModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      groupName: props.initialGroupName || "",
+    };
+  }
+
+  componentDidMount() {
+    Modal.setAppElement("body");
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isOpen && !prevProps.isOpen && this.props.initialGroupName) {
+      this.setState({groupName: this.props.initialGroupName});
+    }
+  }
+
+  handleChange = event => {
+    this.setState({groupName: event.target.value});
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    if (!this.state.groupName) {
+      return;
+    }
+    this.props.onSubmit(this.state.groupName);
+    this.setState({groupName: ""});
+  };
+
+  render() {
+    return (
+      <Modal
+        className="react-modal markus-dialog"
+        isOpen={this.props.isOpen}
+        onRequestClose={this.props.onRequestClose}
+        id="rename_group_dialog"
+      >
+        <h2>{I18n.t("groups.rename_group")}</h2>
+        <form onSubmit={this.handleSubmit}>
+          <label htmlFor="groupName">{I18n.t("activerecord.attributes.group.group_name")}</label>
+          <input
+            id="groupName"
+            type="text"
+            value={this.state.groupName}
+            onChange={event => this.handleChange(event)}
+            autoFocus
+          />
+          <div className={"dialog-actions"}>
+            <button
+              className="button"
+              type="submit"
+              disabled={!this.state.groupName}
+              data-testid="rename-submit-button"
+            >
+              {I18n.t("groups.rename_group")}
+            </button>
+            <button className="button" type="reset" onClick={this.props.onRequestClose}>
+              {I18n.t("cancel")}
+            </button>
+          </div>
+        </form>
+      </Modal>
+    );
+  }
+}

app/javascript/Components/__tests__/rename_group_modal.test.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import {render, screen, fireEvent, waitFor} from "@testing-library/react";
+import RenameGroupModal from "../Modals/rename_group_modal";
+import Modal from "react-modal";
+import {expect} from "@jest/globals";
+
+describe("RenameGroupModal", () => {
+  let props;
+
+  beforeEach(() => {
+    props = {
+      isOpen: true,
+      onRequestClose: jest.fn(),
+      onSubmit: jest.fn(),
+    };
+
+    Modal.setAppElement("body");
+    render(<RenameGroupModal {...props} />);
+  });
+
+  it("should rename the group on successful submit", async () => {
+    const groupName = "new_group";
+    fireEvent.change(screen.getByLabelText(I18n.t("activerecord.attributes.group.group_name")), {
+      target: {value: groupName},
+    });
+
+    const renameGroupButton = screen.getByTestId("rename-submit-button");
+    fireEvent.click(renameGroupButton);
+
+    await waitFor(() => {
+      expect(props.onSubmit).toHaveBeenCalledTimes(1);
+      expect(props.onSubmit).toHaveBeenCalledWith(groupName);
+    });
+  });
+
+  it("should call onRequestClose on successful call", async () => {
+    fireEvent.click(screen.getByText(I18n.t("cancel")));
+    await waitFor(() => {
+      expect(props.onRequestClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("should not add the new group when the inputted group name is empty", async () => {
+    const renameGroupButton = screen.getByTestId("rename-submit-button");
+    fireEvent.click(renameGroupButton);
+
+    await waitFor(() => {
+      expect(props.onSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  it("should populate input with initialGroupName when modal opens", async () => {
+    const propsWithInitialName = {
+      isOpen: true,
+      onRequestClose: jest.fn(),
+      onSubmit: jest.fn(),
+      initialGroupName: "Original Group Name",
+    };
+
+    const {rerender} = render(<RenameGroupModal {...propsWithInitialName} isOpen={false} />);
+    rerender(<RenameGroupModal {...propsWithInitialName} isOpen={true} />);
+
+    expect(screen.getByDisplayValue("Original Group Name")).toBeInTheDocument();
+  });
+
+  it("should not submit when group name is empty", async () => {
+    fireEvent.change(screen.getByLabelText(I18n.t("activerecord.attributes.group.group_name")), {
+      target: {value: ""},
+    });
+
+    const form = document.querySelector("form");
+    fireEvent.submit(form);
+
+    expect(props.onSubmit).not.toHaveBeenCalled();
+  });
+});

app/javascript/Components/groups_manager.jsx

@@ -7,6 +7,7 @@ import ExtensionModal from "./Modals/extension_modal";
 import {durationSort, selectFilter} from "./Helpers/table_helpers";
 import AutoMatchModal from "./Modals/auto_match_modal";
 import CreateGroupModal from "./Modals/create_group_modal";
+import RenameGroupModal from "./Modals/rename_group_modal";
 
 class GroupsManager extends React.Component {
   constructor(props) {
@@ -17,33 +18,23 @@ class GroupsManager extends React.Component {
       show_hidden: false,
       hidden_students_count: 0,
       inactive_groups_count: 0,
+      renameGroupingId: null,
+      renameGroupName: "",
       show_modal: false,
       selected_extension_data: {},
       updating_extension: false,
       isAutoMatchModalOpen: false,
       isCreateGroupModalOpen: false,
+      isRenameGroupDialogOpen: false,
       examTemplates: [],
       loading: true,
     };
   }
 
   componentDidMount() {
     this.fetchData();
-    // TODO: Remove reliance on global modal
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", this.componentDidMountCB);
-    } else {
-      this.componentDidMountCB();
-    }
   }
 
-  componentDidMountCB = () => {
-    $("#rename_group_dialog form").on("ajax:success", () => {
-      modal_rename.close();
-      this.fetchData();
-    });
-  };
-
   fetchData = () => {
     fetch(Routes.course_assignment_groups_path(this.props.course_id, this.props.assignment_id), {
       headers: {
@@ -131,13 +122,32 @@ class GroupsManager extends React.Component {
     ).then(this.fetchData);
   };
 
-  renameGroup = grouping_id => {
-    $("#new_groupname").val("");
-    $("#rename_group_dialog form").attr(
-      "action",
-      Routes.rename_group_course_group_path(this.props.course_id, grouping_id)
-    );
-    modal_rename.open();
+  renameGroup = (grouping_id, group_name) => {
+    this.setState({
+      isRenameGroupDialogOpen: true,
+      renameGroupingId: grouping_id,
+      renameGroupName: group_name,
+    });
+  };
+
+  handleRenameGroupDialog = newGroupName => {
+    $.post({
+      url: Routes.rename_group_course_group_path(this.props.course_id, this.state.renameGroupingId),
+      data: {
+        new_groupname: newGroupName,
+      },
+    }).then(() => {
+      this.setState({isRenameGroupDialogOpen: false});
+      this.fetchData();
+    });
+  };
+
+  handleCloseRenameGroupDialog = () => {
+    this.setState({
+      isRenameGroupDialogOpen: false,
+      renameGroupingId: null,
+      renameGroupName: "",
+    });
   };
 
   unassign = (grouping_id, student_user_name) => {
@@ -359,6 +369,12 @@ class GroupsManager extends React.Component {
           onRequestClose={this.handleCloseCreateGroupModal}
           onSubmit={this.handleSubmitCreateGroup}
         />
+        <RenameGroupModal
+          isOpen={this.state.isRenameGroupDialogOpen}
+          onRequestClose={this.handleCloseRenameGroupDialog}
+          onSubmit={this.handleRenameGroupDialog}
+          initialGroupName={this.state.renameGroupName}
+        />
       </div>
     );
   }
@@ -396,7 +412,7 @@ class RawGroupsTable extends React.Component {
             <span>{row.value}</span>
             <a
               href="#"
-              onClick={() => this.props.renameGroup(row.original._id)}
+              onClick={() => this.props.renameGroup(row.original._id, row.value)}
               title={I18n.t("groups.rename_group")}
             >
               <FontAwesomeIcon icon="fa-solid fa-pen" className="icon-right" />

app/views/groups/_rename_group_modal.html.erb

@@ -64,5 +64,4 @@
 <%= render partial: 'download_modal', layout: 'layouts/modal_dialog' %>
 <%= render partial: 'upload_modal', layout: 'layouts/modal_dialog' %>
 <%= render partial: 'assignment_group_use_modal', layout: 'layouts/modal_dialog' %>
-<%= render partial: 'rename_group_modal', layout: 'layouts/modal_dialog' %>
 <aside class='markus-dialog' id='notes_dialog'></aside>