20143075828

Committed 11 Dec 2025 06:18PM UTC coverage: 91.513%. Remained the same

Build # 20143075828

Build Type

Pull #7763

github

Committed by

web-flow

Commit Message

Merge 9f55e660a into 3421ef3b2

Pull Request Pull Request #7763: Release 2.9.0

Run Details

914 of 1805 branches covered (50.64%)

Branch coverage included in aggregate %.

1584 of 1666 new or added lines in 108 files covered. (95.08%)

573 existing lines in 35 files now uncovered.

43650 of 46892 relevant lines covered (93.09%)

121.63 hits per line

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

50.17

/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: [],
    };
  }

  getColumns = () => [
    {
      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: this.props.extensionColumnHeader,
      accessor: "extension",
      show: !this.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.getColumns()}
        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: [],
    };
  }

  getColumns = () => {
    return [
      {
        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.getColumns()}
        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 / 20143075828

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