24593804825

Committed 18 Apr 2026 01:29AM UTC coverage: 91.723%. Remained the same

Build # 24593804825

Build Type

Pull #7910

github

Committed by

web-flow

Commit Message

Merge f948f7160 into 51d085c06

Pull Request Pull Request #7910: Refactored tables to cache column definitions

Coverage Stats

955 of 1849 branches covered (51.65%)

Branch coverage included in aggregate %.

43 of 82 new or added lines in 4 files covered. (52.44%)

99 existing lines in 4 files now uncovered.

45267 of 48544 relevant lines covered (93.25%)

130.53 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

49.66

/app/javascript/Components/groups_manager.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

import {withSelection, CheckboxTable} from "./markus_with_selection_hoc";
import ExtensionModal from "./Modals/extension_modal";
import {durationSort, selectFilter, getTimeExtension} 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";
import AssignmentGroupUseModal from "./Modals/assignment_group_use_modal";

class GroupsManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groups: [],
      students: [],
      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,
      isAssignmentGroupUseModalOpen: false,
      isCreateGroupModalOpen: false,
      isRenameGroupDialogOpen: false,
      examTemplates: [],
      loading: true,
      cloneAssignments: [],
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    fetch(Routes.course_assignment_groups_path(this.props.course_id, this.props.assignment_id), {
      headers: {
        Accept: "application/json",
      },
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
      })
      .then(res => {
        this.studentsTable.resetSelection();
        this.groupsTable.resetSelection();
        var inactive_groups_count = 0;
        res.groups.forEach(group => {
          if (group.members.length && group.members.every(member => member[2])) {
            group.inactive = true;
            inactive_groups_count += 1;
          } else {
            group.inactive = false;
          }
          group.members.forEach(member => {
            member.display_label = `(${member[1]}${
              member[2] ? `, ${I18n.t("activerecord.attributes.user.hidden")}` : ""
            })`;
          });
        });
        this.setState({
          groups: res.groups,
          students: res.students || [],
          loading: false,
          hidden_students_count: res.students.filter(student => student.hidden).length,
          inactive_groups_count: inactive_groups_count,
          examTemplates: res.exam_templates,
          cloneAssignments: res.clone_assignments || [],
        });
      });
  };

  updateShowHidden = event => {
    let show_hidden = event.target.checked;
    this.setState({show_hidden});
  };

  createGroup = () => {
    if (this.props.group_name_autogenerated) {
      fetch(
        Routes.new_course_assignment_group_path(this.props.course_id, this.props.assignment_id)
      ).then(this.fetchData);
    } else {
      this.setState({isCreateGroupModalOpen: true});
    }
  };

  createAllGroups = () => {
    $.get({
      url: Routes.create_groups_when_students_work_alone_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
    }).then(this.fetchData);
  };

  deleteGroups = () => {
    let groupings = this.groupsTable.state.selection;
    if (groupings.length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    } else if (!confirm(I18n.t("groups.delete_confirm"))) {
      return;
    }

    $.ajax(
      Routes.remove_group_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      {
        method: "DELETE",
        data: {
          // TODO: change param to grouping_ids
          grouping_id: groupings,
        },
      }
    ).then(this.fetchData);
  };

  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) => {
    $.post({
      url: Routes.global_actions_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        global_actions: "unassign",
        groupings: [grouping_id],
        students: [], // Not necessary for 'unassign'
        students_to_remove: [student_user_name],
      },
    }).then(this.fetchData);
  };

  assign = () => {
    if (this.studentsTable.state.selection.length === 0) {
      alert(I18n.t("groups.select_a_student"));
      return;
    } else if (this.groupsTable.state.selection.length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    } else if (this.groupsTable.state.selection.length > 1) {
      alert(I18n.t("groups.select_only_one_group"));
      return;
    }

    let students = this.studentsTable.state.selection;
    let grouping_id = this.groupsTable.state.selection[0];

    $.post({
      url: Routes.global_actions_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        global_actions: "assign",
        groupings: [grouping_id],
        students: students,
      },
    }).then(this.fetchData);
  };

  handleCloseCreateGroupModal = () => {
    this.setState({
      isCreateGroupModalOpen: false,
    });
  };

  handleSubmitCreateGroup = groupName => {
    $.get({
      url: Routes.new_course_assignment_group_path(this.props.course_id, this.props.assignment_id),
      data: {new_group_name: groupName},
    }).then(() => {
      this.setState({isCreateGroupModalOpen: false});
      this.fetchData();
    });
  };

  handleShowAssignmentGroupUseModal = () => {
    this.setState({
      isAssignmentGroupUseModalOpen: true,
    });
  };

  handleCloseAssignmentGroupUseModal = () => {
    this.setState({
      isAssignmentGroupUseModalOpen: false,
    });
  };

  handleSubmitAssignmentGroupUseModal = selectedAssignmentId => {
    $.post({
      url: Routes.use_another_assignment_groups_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        clone_assignment_id: selectedAssignmentId,
      },
    }).then(() => {
      this.setState({isAssignmentGroupUseModalOpen: false});
      this.fetchData();
    });
  };

  handleShowAutoMatchModal = () => {
    if (this.groupsTable.state.selection.length === 0) {
      alert(I18n.t("groups.select_a_group"));
      return;
    }

    this.setState({
      isAutoMatchModalOpen: true,
    });
  };

  handleCloseAutoMatchModal = () => {
    this.setState({
      isAutoMatchModalOpen: false,
    });
  };

  autoMatch = examTemplate => {
    $.post({
      url: Routes.auto_match_course_assignment_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: {
        groupings: this.groupsTable.state.selection,
        exam_template_id: examTemplate,
      },
    });
  };

  validate = grouping_id => {
    if (!confirm(I18n.t("groups.validate_confirm"))) {
      return;
    }

    const url = Routes.valid_grouping_course_assignment_groups_path(
      this.props.course_id,
      this.props.assignment_id,
      {grouping_id: grouping_id}
    );

    fetch(url).then(this.fetchData);
  };

  invalidate = grouping_id => {
    if (!confirm(I18n.t("groups.invalidate_confirm"))) {
      return;
    }

    const url = Routes.invalid_grouping_course_assignment_groups_path(
      this.props.course_id,
      this.props.assignment_id,
      {grouping_id: grouping_id}
    );
    fetch(url).then(this.fetchData);
  };

  handleShowModal = (extension_data, updating) => {
    this.setState({
      show_modal: true,
      selected_extension_data: extension_data,
      updating_extension: updating,
    });
  };

  handleCloseModal = updated => {
    this.setState({show_modal: false}, () => {
      if (updated) {
        this.fetchData();
      }
    });
  };

  extraModalInfo = () => {
    // Render extra modal info for timed assignments only
    if (this.props.timed) {
      return I18n.t("assignments.timed.modal_current_duration", {
        duration: this.props.current_duration,
      });
    }
  };

  render() {
    const times = !!this.props.timed ? ["hours", "minutes"] : ["weeks", "days", "hours", "minutes"];
    const title = !!this.props.timed
      ? I18n.t("groups.duration_extension")
      : I18n.t("groups.due_date_extension");
    return (
      <div>
        <GroupsActionBox
          assign={this.assign}
          can_create_all_groups={this.props.can_create_all_groups}
          createAllGroups={this.createAllGroups}
          createGroup={this.createGroup}
          deleteGroups={this.deleteGroups}
          handleShowAutoMatchModal={this.handleShowAutoMatchModal}
          handleShowAssignmentGroupUseModal={this.handleShowAssignmentGroupUseModal}
          hiddenStudentsCount={this.state.loading ? null : this.state.hidden_students_count}
          hiddenGroupsCount={this.state.loading ? null : this.state.inactive_groups_count}
          scanned_exam={this.props.scanned_exam}
          showHidden={this.state.show_hidden}
          updateShowHidden={this.updateShowHidden}
          vcs_submit={this.props.vcs_submit}
        />
        <div className="mapping-tables">
          <div className="mapping-table">
            <StudentsTable
              ref={r => (this.studentsTable = r)}
              students={this.state.students}
              loading={this.state.loading}
              showHidden={this.state.show_hidden}
            />
          </div>
          <div className="mapping-table">
            <GroupsTable
              ref={r => (this.groupsTable = r)}
              course_id={this.props.course_id}
              groups={this.state.groups}
              loading={this.state.loading}
              unassign={this.unassign}
              renameGroup={this.renameGroup}
              groupMin={this.props.groupMin}
              validate={this.validate}
              invalidate={this.invalidate}
              scanned_exam={this.props.scanned_exam}
              assignment_id={this.props.assignment_id}
              onExtensionModal={this.handleShowModal}
              extensionColumnHeader={title}
              times={times}
              showInactive={this.state.show_hidden}
            />
          </div>
        </div>
        <ExtensionModal
          course_id={this.props.course_id}
          isOpen={this.state.show_modal}
          onRequestClose={this.handleCloseModal}
          weeks={this.state.selected_extension_data.weeks}
          days={this.state.selected_extension_data.days}
          hours={this.state.selected_extension_data.hours}
          minutes={this.state.selected_extension_data.minutes}
          note={this.state.selected_extension_data.note}
          penalty={this.state.selected_extension_data.apply_penalty}
          grouping_id={this.state.selected_extension_data.grouping_id}
          extension_id={this.state.selected_extension_data.id}
          updating={this.state.updating_extension}
          times={times}
          title={title}
          extra_info={this.extraModalInfo()}
          key={this.state.selected_extension_data.id} // this causes the ExtensionModal to be recreated if this value changes
        />
        <AutoMatchModal
          isOpen={this.state.isAutoMatchModalOpen}
          onRequestClose={this.handleCloseAutoMatchModal}
          examTemplates={this.state.examTemplates}
          onSubmit={this.autoMatch}
        />
        <CreateGroupModal
          isOpen={this.state.isCreateGroupModalOpen}
          onRequestClose={this.handleCloseCreateGroupModal}
          onSubmit={this.handleSubmitCreateGroup}
        />
        <RenameGroupModal
          isOpen={this.state.isRenameGroupDialogOpen}
          onRequestClose={this.handleCloseRenameGroupDialog}
          onSubmit={this.handleRenameGroupDialog}
          initialGroupName={this.state.renameGroupName}
        />
        <AssignmentGroupUseModal
          isOpen={this.state.isAssignmentGroupUseModalOpen}
          onRequestClose={this.handleCloseAssignmentGroupUseModal}
          onSubmit={this.handleSubmitAssignmentGroupUseModal}
          cloneAssignments={this.state.cloneAssignments}
        />
      </div>
    );
  }
}

class RawGroupsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
      columns: [
        {
          accessor: "inactive",
          id: "inactive",
          width: 0,
          className: "rt-hidden",
          headerClassName: "rt-hidden",
          resizable: false,
        },
        {
          show: false,
          accessor: "id",
          id: "_id",
        },
        {
          Header: I18n.t("activerecord.models.group.one"),
          accessor: "group_name",
          id: "group_name",
          Cell: row => {
            return (
              <span>
                <span>{row.value}</span>
                <a
                  href="#"
                  onClick={() => this.props.renameGroup(row.original._id, row.value)}
                  title={I18n.t("groups.rename_group")}
                >
                  <FontAwesomeIcon icon="fa-solid fa-pen" className="icon-right" />
                </a>
              </span>
            );
          },
        },
        {
          Header: I18n.t("activerecord.attributes.group.student_memberships"),
          accessor: "members",
          Cell: row => {
            if (row.value.length > 0 || !this.props.scanned_exam) {
              return row.value.map(member => {
                let status;
                if (member[1] === "pending") {
                  status = <strong>({member[1]})</strong>;
                } else {
                  status = member.display_label;
                }
                return (
                  <div key={`${row.original._id}-${member[0]}`}>
                    {member[0]} {status}
                    <a
                      href="#"
                      onClick={() => this.props.unassign(row.original._id, member[0])}
                      title={I18n.t("delete")}
                    >
                      <FontAwesomeIcon icon="fa-solid fa-trash" className="icon-right" />
                    </a>
                  </div>
                );
              });
            } else {
              // Link to assigning a student to this scanned exam
              const assign_url = Routes.assign_scans_course_assignment_groups_path(
                this.props.course_id,
                this.props.assignment_id,
                {grouping_id: row.original._id}
              );
              return <a href={assign_url}>{I18n.t("exam_templates.assign_scans.title")}</a>;
            }
          },
          filterMethod: (filter, row) => {
            if (filter.value) {
              return row._original.members.some(member => member[0].includes(filter.value));
            } else {
              return true;
            }
          },
          sortable: false,
        },
        {
          Header: I18n.t("groups.valid"),
          Cell: row => {
            let isValid =
              row.original.instructor_approved ||
              row.original.members.length >= this.props.groupMin;
            if (isValid) {
              return (
                <a
                  href="#"
                  title={I18n.t("groups.is_valid")}
                  onClick={() => this.props.invalidate(row.original._id)}
                >
                  ✔
                </a>
              );
            } else {
              return (
                <a
                  href="#"
                  title={I18n.t("groups.is_not_valid")}
                  onClick={() => this.props.validate(row.original._id)}
                >
                  <FontAwesomeIcon icon="fa-solid fa-close" />
                </a>
              );
            }
          },
          filterMethod: (filter, row) => {
            if (filter.value === "all") {
              return true;
            } else {
              // Either 'true' or 'false'
              const val = filter.value === "true";
              let isValid =
                row._original.instructor_approved ||
                row._original.members.length >= this.props.groupMin;
              return isValid === val;
            }
          },
          Filter: selectFilter,
          filterOptions: [
            {value: "true", text: I18n.t("groups.is_valid")},
            {value: "false", text: I18n.t("groups.is_not_valid")},
          ],
          minWidth: 30,
          sortable: false,
        },
        {
          Header: props.extensionColumnHeader,
          accessor: "extension",
          show: !props.scanned_exam,
          Cell: row => {
            const timeExtension = getTimeExtension(row.original.extension, this.props.times);
            const lateSubmissionText = row.original.extension.apply_penalty
              ? `(${I18n.t("groups.late_submissions_accepted")})`
              : "";
            const extension = `${timeExtension} ${lateSubmissionText}`;

            if (!!timeExtension) {
              return (
                <div>
                  <a
                    href={"#"}
                    onClick={() => this.props.onExtensionModal(row.original.extension, true)}
                  >
                    {extension}
                  </a>
                </div>
              );
            } else {
              return (
                <a
                  href="#"
                  onClick={() => this.props.onExtensionModal(row.original.extension, false)}
                  title={I18n.t("add")}
                >
                  <FontAwesomeIcon icon="fa-solid fa-add" />
                </a>
              );
            }
          },
          sortMethod: durationSort,
          Filter: selectFilter,
          filterMethod: (filter, row) => {
            if (filter.value === "all") {
              return true;
            }
            const applyPenalty = row._original.extension.apply_penalty;
            const {withExtension, withLateSubmission} = JSON.parse(filter.value);
            // If there is an extension applied, the extension object will contain a property called hours
            const hasExtension = Object.hasOwn(row._original.extension, "hours");

            if (!withExtension) {
              return !hasExtension;
            }
            if (withLateSubmission) {
              return hasExtension && applyPenalty;
            }
            return hasExtension && !applyPenalty;
          },
          filterOptions: [
            {
              value: JSON.stringify({withExtension: false}),
              text: I18n.t("groups.groups_without_extension"),
            },
            {
              value: JSON.stringify({withExtension: true, withLateSubmission: true}),
              text: I18n.t("groups.groups_with_extension.with_late_submission"),
            },
            {
              value: JSON.stringify({withExtension: true, withLateSubmission: false}),
              text: I18n.t("groups.groups_with_extension.without_late_submission"),
            },
          ],
        },
      ],
    };
  }

  static getDerivedStateFromProps(props, state) {
    let filtered = state.filtered.filter(group => group.id !== "inactive");

    if (!props.showInactive) {
      filtered.push({id: "inactive", value: false});
    }
    return {filtered};
  }

  onFilteredChange = filtered => {
    this.setState({filtered});
  };

  render() {
    return (
      <CheckboxTable
        ref={r => (this.checkboxTable = r)}
        data={this.props.groups}
        columns={this.state.columns}
        defaultSorted={[
          {
            id: "group_name",
          },
        ]}
        loading={this.props.loading}
        filterable
        filtered={this.state.filtered}
        onFilteredChange={this.onFilteredChange}
        {...this.props.getCheckboxProps()}
      />
    );
  }
}

class RawStudentsTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filtered: [],
      columns: [
        {
          accessor: "hidden",
          id: "hidden",
          width: 0,
          className: "rt-hidden",
          headerClassName: "rt-hidden",
          resizable: false,
        },
        {
          show: false,
          accessor: "_id",
          id: "_id",
        },
        {
          Header: I18n.t("activerecord.attributes.user.user_name"),
          accessor: "user_name",
          id: "user_name",
          Cell: props =>
            props.original.hidden
              ? `${props.value} (${I18n.t("activerecord.attributes.user.hidden")})`
              : props.value,
          filterMethod: (filter, row) => {
            if (filter.value) {
              return `${row._original.user_name}${
                row._original.hidden ? `, ${I18n.t("activerecord.attributes.user.hidden")}` : ""
              }`.includes(filter.value);
            } else {
              return true;
            }
          },
          sortable: true,
          minWidth: 90,
        },
        {
          Header: I18n.t("activerecord.attributes.user.last_name"),
          accessor: "last_name",
          id: "last_name",
        },
        {
          Header: I18n.t("activerecord.attributes.user.first_name"),
          accessor: "first_name",
          id: "first_name",
        },
        {
          Header: I18n.t("groups.assigned_students") + "?",
          accessor: "assigned",
          Cell: ({value}) => (value ? "✔" : ""),
          sortable: false,
          minWidth: 60,
          filterMethod: (filter, row) => {
            if (filter.value === "all") {
              return true;
            } else {
              // Either 'true' or 'false'
              const assigned = filter.value === "true";
              return row._original.assigned === assigned;
            }
          },
          Filter: selectFilter,
          filterOptions: [
            {value: "true", text: I18n.t("groups.assigned_students")},
            {value: "false", text: I18n.t("groups.unassigned_students")},
          ],
        },
      ],
    };
  }

  static getDerivedStateFromProps(props, state) {
    let filtered = [];
    for (let i = 0; i < state.filtered.length; i++) {
      if (state.filtered[i].id !== "hidden") {
        filtered.push(state.filtered[i]);
      }
    }
    if (!props.showHidden) {
      filtered.push({id: "hidden", value: false});
    }
    return {filtered};
  }

  onFilteredChange = filtered => {
    this.setState({filtered});
  };

  render() {
    return (
      <CheckboxTable
        ref={r => (this.checkboxTable = r)}
        data={this.props.students}
        columns={this.state.columns}
        defaultSorted={[
          {
            id: "user_name",
          },
        ]}
        loading={this.props.loading}
        filterable
        filtered={this.state.filtered}
        onFilteredChange={this.onFilteredChange}
        {...this.props.getCheckboxProps()}
      />
    );
  }
}

const GroupsTable = withSelection(RawGroupsTable);
const StudentsTable = withSelection(RawStudentsTable);

class GroupsActionBox extends React.Component {
  render = () => {
    var showHiddenTooltip = null;
    if (this.props.hiddenStudentsCount !== null && this.props.hiddenGroupsCount !== null) {
      showHiddenTooltip = `${I18n.t("activerecord.attributes.grouping.inactive_students", {
        count: this.props.hiddenStudentsCount,
      })}, ${I18n.t("activerecord.attributes.grouping.inactive_groups", {
        count: this.props.hiddenGroupsCount,
      })}`;
    }

    return (
      <div className="rt-action-box">
        <span>
          <input
            id="show_hidden"
            name="show_hidden"
            type="checkbox"
            checked={this.props.showHidden}
            onChange={this.props.updateShowHidden}
            style={{marginLeft: "5px", marginRight: "5px"}}
          />
          <label title={showHiddenTooltip} htmlFor="show_hidden">
            {I18n.t("students.display_inactive")}
          </label>
        </span>
        {this.props.vcs_submit && (
          <button onClick={this.props.handleShowAssignmentGroupUseModal}>
            <FontAwesomeIcon icon="fa-solid fa-recycle" />
            {I18n.t("groups.reuse_groups")}
          </button>
        )}
        <button className="" onClick={this.props.assign}>
          <FontAwesomeIcon icon="fa-solid fa-user-plus" />
          {I18n.t("groups.add_to_group")}
        </button>
        {this.props.scanned_exam && (
          <button onClick={this.props.handleShowAutoMatchModal}>
            <FontAwesomeIcon icon="fa-solid fa-file-import" />
            {I18n.t("groups.auto_match")}
          </button>
        )}
        {this.props.can_create_all_groups ? (
          <button className="" onClick={this.props.createAllGroups}>
            <FontAwesomeIcon icon="fa-solid fa-people-group" />
            {I18n.t("groups.add_all_groups")}
          </button>
        ) : undefined}
        <button className="" onClick={this.props.createGroup}>
          <FontAwesomeIcon icon="fa-solid fa-circle-plus" />
          {I18n.t("helpers.submit.create", {
            model: I18n.t("activerecord.models.group.one"),
          })}
        </button>
        <button className="" onClick={this.props.deleteGroups}>
          <FontAwesomeIcon icon="fa-solid fa-trash" />
          {I18n.t("groups.delete")}
        </button>
      </div>
    );
  };
}

export function makeGroupsManager(elem, props) {
  const root = createRoot(elem);
  const component = React.createRef();
  root.render(<GroupsManager {...props} ref={component} />);
  return component;
}

export {GroupsManager};

MarkUsProject / Markus / 24593804825

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous