25579582640

Committed 08 May 2026 09:07PM UTC coverage: 91.754% (+0.03%) from 91.726%

Build # 25579582640

Build Type

Pull #7938

github

Committed by

web-flow

Commit Message

Merge 00a015a02 into cb5a389d1

Pull Request Pull Request #7938: TICKET-614: Add case sensitivy to group search

Coverage Stats

995 of 1895 branches covered (52.51%)

Branch coverage included in aggregate %.

73 of 93 new or added lines in 5 files covered. (78.49%)

129 existing lines in 4 files now uncovered.

45462 of 48737 relevant lines covered (93.28%)

131.4 hits per line

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

51.02

/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 {
  caseSensitiveStringFilterMethod,
  caseSensitiveTextFilter,
  durationSort,
  getTimeExtension,
  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";
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: [],
      caseSensitive: true,
      columns: this.getColumns(true),
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.caseSensitive !== this.state.caseSensitive) {
      this.setState({columns: this.getColumns(this.state.caseSensitive)});
    }
  }

  toggleCaseSensitive = () => {
    this.setState(state => ({caseSensitive: !state.caseSensitive}));
  };

  groupNameFilter = caseSensitiveTextFilter({
    getCaseSensitive: () => this.state.caseSensitive,
    onToggle: this.toggleCaseSensitive,
  });

  getColumns = caseSensitive => {
    return [
      {
        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",
        Filter: this.groupNameFilter,
        filterMethod: caseSensitiveStringFilterMethod(caseSensitive),
        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 true;
          return row._original.members.some(member => member[0].includes(filter.value));
        },
        sortable: false,
      },
      {
        Header: I18n.t("groups.valid"),
        Cell: row => {
          const 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>
            );
          }
          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;
          const expected = filter.value === "true";
          const isValid =
            row._original.instructor_approved ||
            row._original.members.length >= this.props.groupMin;
          return isValid === expected;
        },
        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);
          if (!timeExtension) {
            return (
              <a
                href="#"
                onClick={() => this.props.onExtensionModal(row.original.extension, false)}
                title={I18n.t("add")}
              >
                <FontAwesomeIcon icon="fa-solid fa-add" />
              </a>
            );
          }
          const lateSubmissionText = row.original.extension.apply_penalty
            ? `(${I18n.t("groups.late_submissions_accepted")})`
            : "";
          return (
            <div>
              <a href="#" onClick={() => this.props.onExtensionModal(row.original.extension, true)}>
                {`${timeExtension} ${lateSubmissionText}`}
              </a>
            </div>
          );
        },
        sortMethod: durationSort,
        Filter: selectFilter,
        filterMethod: (filter, row) => {
          if (filter.value === "all") return true;
          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;
          const applyPenalty = row._original.extension.apply_penalty;
          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 / 25579582640

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