26658959313

Committed 29 May 2026 07:53PM UTC coverage: 90.143% (-0.1%) from 90.277%

Build # 26658959313

Build Type

Pull #7968

github

Committed by

web-flow

Commit Message

Merge 65c48bbd4 into 5b70aab6e

Pull Request Pull Request #7968: Fix navigation warning on autotest manager page, closes 7641

Coverage Stats

996 of 2200 branches covered (45.27%)

Branch coverage included in aggregate %.

10 of 11 new or added lines in 2 files covered. (90.91%)

64 existing lines in 1 file now uncovered.

46067 of 50009 relevant lines covered (92.12%)

122.17 hits per line

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

41.8

/app/javascript/Components/starter_file_manager.jsx

import React, {Fragment} from "react";
import {createRoot} from "react-dom/client";
import FileManager from "./markus_file_manager";
import FileUploadModal from "./Modals/file_upload_modal";
import ReactTable from "react-table";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {flashMessage} from "../common/flash";

function blurOnEnter(event) {
  if (event.key === "Enter") {
    document.activeElement.blur();
  }
}

class StarterFileManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dirUploadTarget: undefined,
      groupUploadTarget: undefined,
      showFileUploadModal: false,
      starterfileType: "simple",
      defaultStarterFileGroup: "",
      files: {},
      sections: {},
      form_changed: false,
      available_after_due: true,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  toggleFormChanged = value => {
    this.setState({form_changed: value});
  };

  fetchData = () => {
    fetch(
      Routes.populate_starter_file_manager_course_assignment_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      {headers: {Accept: "application/json"}}
    )
      .then(reponse => {
        if (reponse.ok) {
          return reponse.json();
        }
      })
      .then(res => this.setState({loading: false, ...res}));
  };

  createStarterFileGroup = () => {
    $.post({
      url: Routes.course_assignment_starter_file_groups_path(
        this.props.course_id,
        this.props.assignment_id
      ),
    }).then(this.fetchData);
  };

  deleteStarterFileGroup = starter_file_group_id => {
    $.ajax({
      url: Routes.course_starter_file_group_path(this.props.course_id, starter_file_group_id),
      method: "DELETE",
    }).then(this.fetchData);
  };

  handleDeleteFile = (groupUploadTarget, fileKeys) => {
    $.post({
      url: Routes.update_files_course_starter_file_group_path(
        this.props.course_id,
        groupUploadTarget
      ),
      data: {delete_files: fileKeys},
    })
      .then(() => this.setState({groupUploadTarget: undefined}))
      .then(this.fetchData);
  };

  handleCreateFiles = (groupUploadTarget, files, path, unzip) => {
    const prefix = path || this.state.dirUploadTarget || "";
    let data = new FormData();
    Array.from(files).forEach(f => data.append("new_files[]", f, f.name));
    data.append("path", prefix);
    data.append("unzip", unzip);
    $.post({
      url: Routes.update_files_course_starter_file_group_path(
        this.props.course_id,
        groupUploadTarget
      ),
      data: data,
      processData: false, // tell jQuery not to process the data
      contentType: false, // tell jQuery not to set contentType
    })
      .then(this.fetchData)
      .fail(jqXHR => {
        if (jqXHR.getResponseHeader("x-message-error") == null) {
          flashMessage(I18n.t("upload_errors.generic"), "error");
        }
      })
      .always(() =>
        this.setState({
          showFileUploadModal: false,
          dirUploadTarget: undefined,
          groupUploadTarget: undefined,
        })
      );
  };

  handleCreateFolder = (groupUploadTarget, folderKey) => {
    $.post({
      url: Routes.update_files_course_starter_file_group_path(
        this.props.course_id,
        groupUploadTarget
      ),
      data: {new_folders: [folderKey]},
    }).then(this.fetchData);
  };

  handleDeleteFolder = (groupUploadTarget, folderKeys) => {
    $.post({
      url: Routes.update_files_course_starter_file_group_path(
        this.props.course_id,
        groupUploadTarget
      ),
      data: {delete_folders: folderKeys},
    }).then(this.fetchData);
  };

  openUploadModal = (groupUploadTarget, uploadTarget) => {
    this.setState({
      showFileUploadModal: true,
      dirUploadTarget: uploadTarget,
      groupUploadTarget: groupUploadTarget,
    });
  };

  changeGroupName = (groupUploadTarget, original_name, event) => {
    const new_name = event.target.value;
    if (!!new_name && original_name !== new_name) {
      $.ajax({
        type: "PUT",
        url: Routes.course_starter_file_group_path(this.props.course_id, groupUploadTarget),
        data: {name: new_name},
      }).then(this.fetchData);
    }
  };

  saveStateChanges = () => {
    const data = {
      assignment: {
        starter_file_type: this.state.starterfileType,
        default_starter_file_group_id: this.state.defaultStarterFileGroup,
        starter_files_after_due: this.state.available_after_due,
      },
      sections: this.state.sections,
      starter_file_groups: this.state.files.map(data => {
        let {files, ...rest} = data;
        return rest;
      }),
    };
    $.ajax({
      type: "PUT",
      url: Routes.update_starter_file_course_assignment_path(
        this.props.course_id,
        this.props.assignment_id
      ),
      data: JSON.stringify(data),
      processData: false,
      contentType: "application/json",
    })
      .then(this.fetchData)
      .then(() => this.toggleFormChanged(false));
  };

  changeGroupRename = (groupUploadTarget, new_name) => {
    this.setState(
      prevState => {
        let new_files = prevState.files.map(files => {
          if (files.id === groupUploadTarget) {
            files.entry_rename = new_name;
          }
          return files;
        });
        return {files: new_files};
      },
      () => this.toggleFormChanged(true)
    );
  };

  changeGroupUseRename = (groupUploadTarget, checked) => {
    this.setState(
      prevState => {
        let new_files = prevState.files.map(files => {
          if (files.id === groupUploadTarget) {
            files.use_rename = checked;
          }
          return files;
        });
        return {files: new_files};
      },
      () => this.toggleFormChanged(true)
    );
  };

  renderFileManagers = () => {
    return (
      <React.Fragment>
        {Object.entries(this.state.files).map(data => {
          const {id, name, files} = data[1];
          return (
            <fieldset key={id}>
              <legend>
                <StarterFileGroupName
                  name={name}
                  groupUploadTarget={id}
                  changeGroupName={this.changeGroupName}
                />
              </legend>
              <StarterFileFileManager
                groupUploadTarget={id}
                files={files}
                noFilesMessage={I18n.t("submissions.no_files_available")}
                readOnly={this.props.read_only}
                onCreateFiles={this.handleCreateFiles}
                onDeleteFile={this.handleDeleteFile}
                onCreateFolder={this.handleCreateFolder}
                onRenameFolder={
                  typeof this.handleCreateFolder === "function" ? () => {} : undefined
                }
                onDeleteFolder={this.handleDeleteFolder}
                onActionBarAddFileClick={this.openUploadModal}
                downloadAllURL={Routes.download_files_course_starter_file_group_path(
                  this.props.course_id,
                  id
                )}
                disableActions={{rename: true}}
                canFilter={false}
              />
              <button
                aria-label={I18n.t("assignments.starter_file.aria_labels.action_button")}
                key={"delete_starter_file_group_button"}
                className={"button"}
                onClick={() => this.deleteStarterFileGroup(id)}
                disabled={this.props.read_only}
              >
                <FontAwesomeIcon icon="fa-solid fa-trash" />
              </button>
            </fieldset>
          );
        })}
      </React.Fragment>
    );
  };

  updateSectionStarterFile = event => {
    let [section_id, group_id] = event.target.value.split("_").map(val => {
      return parseInt(val) || null;
    });
    this.setState(
      prevState => {
        let new_sections = prevState.sections.map(section => {
          if (section.section_id === section_id) {
            section.group_id = group_id;
          }
          return section;
        });
        return {sections: new_sections};
      },
      () => this.toggleFormChanged(true)
    );
  };

  renderStarterFileTypes = () => {
    return (
      <div>
        <p>
          <label>
            <input
              type={"radio"}
              name={"starter_file_type"}
              value={"simple"}
              checked={this.state.starterfileType === "simple"}
              disabled={!this.state.files.length || this.props.read_only}
              onChange={() => {
                this.setState({starterfileType: "simple"}, () => this.toggleFormChanged(true));
              }}
            />
            {I18n.t("assignments.starter_file.starter_file_rule_types.simple")}
          </label>
        </p>
        <p>
          <label>
            <input
              type={"radio"}
              name={"starter_file_type"}
              value={"sections"}
              checked={this.state.starterfileType === "sections"}
              disabled={!this.state.files.length || this.props.read_only}
              onChange={() => {
                this.setState({starterfileType: "sections"}, () => this.toggleFormChanged(true));
              }}
            />
            {I18n.t("assignments.starter_file.starter_file_rule_types.sections")}
          </label>
        </p>
        <p>
          <label>
            <input
              type={"radio"}
              name={"starter_file_type"}
              value={"group"}
              checked={this.state.starterfileType === "group"}
              disabled={!this.state.files.length || this.props.read_only}
              onChange={() => {
                this.setState({starterfileType: "group"}, () => this.toggleFormChanged(true));
              }}
            />
            {I18n.t("assignments.starter_file.starter_file_rule_types.group")}
          </label>
        </p>
        <p>
          <label>
            <input
              type={"radio"}
              name={"starter_file_type"}
              value={"shuffle"}
              checked={this.state.starterfileType === "shuffle"}
              disabled={!this.state.files.length || this.props.read_only}
              onChange={() => {
                this.setState({starterfileType: "shuffle"}, () => this.toggleFormChanged(true));
              }}
            />
            {I18n.t("assignments.starter_file.starter_file_rule_types.shuffle")}
          </label>
        </p>
      </div>
    );
  };

  renderStarterFileAssigner = () => {
    if (["simple", "sections"].includes(this.state.starterfileType)) {
      let default_selector = (
        <label>
          {I18n.t("assignments.starter_file.default_starter_file_group")}
          <select
            onChange={e =>
              this.setState({defaultStarterFileGroup: parseInt(e.target.value)}, () =>
                this.toggleFormChanged(true)
              )
            }
            aria-label={I18n.t("assignments.starter_file.aria_labels.dropdown")}
            value={this.state.defaultStarterFileGroup}
            disabled={!this.state.files.length || this.props.read_only}
          >
            {Object.entries(this.state.files).map(data => {
              const {id, name} = data[1];
              return (
                <option value={id} key={id}>
                  {name}
                </option>
              );
            })}
          </select>
        </label>
      );

      let section_table = "";
      if (this.state.starterfileType === "sections") {
        section_table = (
          <ReactTable
            columns={[
              {
                Header: I18n.t("activerecord.models.section.one"),
                accessor: "section_name",
              },
              {
                Header: I18n.t("activerecord.models.starter_file_group.one"),
                Cell: row => {
                  let selected = `${row.original.section_id}_${row.original.group_id || ""}`;
                  return (
                    <select
                      onChange={this.updateSectionStarterFile}
                      value={selected}
                      disabled={!this.state.files.length || this.props.read_only}
                      aria-label={I18n.t("assignments.starter_file.aria_labels.dropdown")}
                    >
                      <option value={`${row.original.section_id}_`} />
                      {Object.entries(this.state.files).map(data => {
                        const {id, name} = data[1];
                        const value = `${row.original.section_id}_${id}`;
                        return (
                          <option value={value} key={id}>
                            {name}
                          </option>
                        );
                      })}
                    </select>
                  );
                },
              },
            ]}
            data={this.state.sections}
          />
        );
      }
      return (
        <div>
          <p>{default_selector}</p>
          {section_table}
        </div>
      );
    }
    return "";
  };

  renderStarterFileRenamer = () => {
    if (this.state.starterfileType === "shuffle") {
      return (
        <ReactTable
          columns={[
            {
              Header: I18n.t("activerecord.models.starter_file_group.one"),
              Cell: row => row.original.name,
            },
            {
              Header: I18n.t("assignments.starter_file.rename"),
              Cell: row => {
                return (
                  <StarterFileEntryRenameInput
                    entry_rename={row.original.entry_rename}
                    use_rename={row.original.use_rename}
                    groupUploadTarget={row.original.id}
                    changeGroupRename={this.changeGroupRename}
                    changeGroupUseRename={this.changeGroupUseRename}
                  />
                );
              },
            },
          ]}
          data={this.state.files}
        />
      );
    }
    return "";
  };

  renderVisibilityOptions = () => {
    return (
      <Fragment>
        <label>
          <input
            type={"checkbox"}
            checked={this.state.available_after_due}
            data-testid="available_after_due_checkbox"
            onChange={() => {
              this.setState(
                prev => ({available_after_due: !prev.available_after_due}),
                () => this.toggleFormChanged(true)
              );
            }}
            disabled={this.props.read_only}
          />
          {I18n.t("assignments.starter_file.available_after_due")}
        </label>
        <div className="inline-help">
          <p>{I18n.t("assignments.starter_file.available_after_due_help")}</p>
        </div>
      </Fragment>
    );
  };

  render() {
    return (
      <div>
        <fieldset>
          <legend>
            <span>{I18n.t("activerecord.models.starter_file_group.other")}</span>
          </legend>
          {this.renderFileManagers()}
          <button
            aria-label={I18n.t("assignments.starter_file.aria_labels.action_button")}
            key={"create_starter_file_group_button"}
            className={"button"}
            onClick={this.createStarterFileGroup}
            disabled={this.props.read_only}
          >
            <FontAwesomeIcon icon="fa-solid fa-add" />
          </button>
          <StarterFileFileUploadModal
            groupUploadTarget={this.state.groupUploadTarget}
            isOpen={this.state.showFileUploadModal}
            onRequestClose={() =>
              this.setState({
                showFileUploadModal: false,
                groupUploadTarget: undefined,
                dirUploadTarget: undefined,
              })
            }
            onSubmit={this.handleCreateFiles}
          />
        </fieldset>
        <fieldset className={"starter-file-rule-types"}>
          <legend>
            <span>{I18n.t("assignments.starter_file.starter_file_rule")}</span>
          </legend>
          <div className={"title_bar"}>
            <div className={"float-right"}>
              <a
                href={Routes.download_starter_file_mappings_course_assignment_path(
                  this.props.course_id,
                  this.props.assignment_id
                )}
              >
                {I18n.t("assignments.starter_file.download_mappings_csv")}
              </a>
              <span className={"menu_bar"} />
              <a
                href={Routes.download_sample_starter_files_course_assignment_path(
                  this.props.course_id,
                  this.props.assignment_id
                )}
              >
                {I18n.t("assignments.starter_file.download_sample_starter_files")}
              </a>
            </div>
          </div>
          {this.renderStarterFileTypes()}
          {this.renderStarterFileAssigner()}
          {this.renderStarterFileRenamer()}
          {this.renderVisibilityOptions()}
          <p>
            <input
              type={"submit"}
              value={I18n.t("save")}
              data-testid={"save_button"}
              onClick={this.saveStateChanges}
              disabled={!this.state.form_changed || this.props.read_only}
            ></input>
          </p>
        </fieldset>
      </div>
    );
  }
}

class StarterFileGroupName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false,
    };
  }

  handleBlur = event => {
    this.setState(
      {editing: false},
      this.props.changeGroupName(this.props.groupUploadTarget, this.props.name, event)
    );
  };

  render() {
    if (this.state.editing) {
      return (
        <input
          autoFocus
          type={"text"}
          placeholder={this.props.name}
          onKeyPress={blurOnEnter}
          onBlur={this.handleBlur}
        />
      );
    } else {
      return (
        <h3>
          <a
            href={"#"}
            onClick={() => {
              this.setState({editing: true});
            }}
          >
            {this.props.name}
          </a>
        </h3>
      );
    }
  }
}

class StarterFileEntryRenameInput extends React.Component {
  handleBlur = event => {
    this.props.changeGroupRename(this.props.groupUploadTarget, event.target.value);
  };

  handleClick = event => {
    this.props.changeGroupUseRename(this.props.groupUploadTarget, !event.target.checked);
  };

  render() {
    return (
      <span className={"starter-file-rename-cell-content"}>
        <input
          type={"text"}
          placeholder={this.props.entry_rename}
          onKeyPress={blurOnEnter}
          onBlur={this.handleBlur}
          disabled={!this.props.use_rename || this.props.disabled}
        />
        <label className={"float-right"}>
          <input
            type={"checkbox"}
            onChange={this.handleClick}
            checked={!this.props.use_rename || this.props.disabled}
          />
          {I18n.t("assignments.starter_file.use_original_filename")}
        </label>
      </span>
    );
  }
}

class StarterFileFileUploadModal extends React.Component {
  onSubmit = (...args) => {
    return this.props.onSubmit(this.props.groupUploadTarget, ...args);
  };

  render() {
    return <FileUploadModal {...this.props} onSubmit={this.onSubmit} />;
  }
}

class StarterFileFileManager extends React.Component {
  overridenProps = () => {
    return {
      onDeleteFile: (...args) => this.props.onDeleteFile(this.props.groupUploadTarget, ...args),
      onCreateFolder: (...args) => this.props.onCreateFolder(this.props.groupUploadTarget, ...args),
      onDeleteFolder: (...args) => this.props.onDeleteFolder(this.props.groupUploadTarget, ...args),
      onCreateFiles: (...args) => this.props.onCreateFiles(this.props.groupUploadTarget, ...args),
      onActionBarAddFileClick: (...args) =>
        this.props.onActionBarAddFileClick(this.props.groupUploadTarget, ...args),
    };
  };

  render() {
    return <FileManager {...{...this.props, ...this.overridenProps()}} />;
  }
}

export function makeStarterFileManager(elem, props) {
  const root = createRoot(elem);
  root.render(<StarterFileManager {...props} />);
}

export {StarterFileManager};

1	import React, {Fragment} from "react";
2	import {createRoot} from "react-dom/client";
3	import FileManager from "./markus_file_manager";
4	import FileUploadModal from "./Modals/file_upload_modal";
5	import ReactTable from "react-table";
6	import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
7	import {flashMessage} from "../common/flash";
8
9	function blurOnEnter(event) {
10	if (event.key === "Enter") {	×
11	document.activeElement.blur();	×
12	}
13	}
14
15	class StarterFileManager extends React.Component {
16	constructor(props) {
17	super(props);	10✔
18	this.state = {	10✔
19	loading: true,
20	dirUploadTarget: undefined,
21	groupUploadTarget: undefined,
22	showFileUploadModal: false,
23	starterfileType: "simple",
24	defaultStarterFileGroup: "",
25	files: {},
26	sections: {},
27	form_changed: false,
28	available_after_due: true,
29	};
30	}
31
32	componentDidMount() {
33	this.fetchData();	10✔
34	}
35
36	toggleFormChanged = value => {	10✔
NEW 37	this.setState({form_changed: value});	×
38	};
39
40	fetchData = () => {	10✔
41	fetch(	10✔
42	Routes.populate_starter_file_manager_course_assignment_path(
43	this.props.course_id,
44	this.props.assignment_id
45	),
46	{headers: {Accept: "application/json"}}
47	)
48	.then(reponse => {
49	if (reponse.ok) {	10!
50	return reponse.json();	10✔
51	}
52	})
53	.then(res => this.setState({loading: false, ...res}));	10✔
54	};
55
56	createStarterFileGroup = () => {	10✔
UNCOV 57	$.post({	×
58	url: Routes.course_assignment_starter_file_groups_path(
59	this.props.course_id,
60	this.props.assignment_id
61	),
62	}).then(this.fetchData);
63	};
64
65	deleteStarterFileGroup = starter_file_group_id => {	10✔
UNCOV 66	$.ajax({	×
67	url: Routes.course_starter_file_group_path(this.props.course_id, starter_file_group_id),
68	method: "DELETE",
69	}).then(this.fetchData);
70	};
71
72	handleDeleteFile = (groupUploadTarget, fileKeys) => {	10✔
UNCOV 73	$.post({	×
74	url: Routes.update_files_course_starter_file_group_path(
75	this.props.course_id,
76	groupUploadTarget
77	),
78	data: {delete_files: fileKeys},
79	})
UNCOV 80	.then(() => this.setState({groupUploadTarget: undefined}))	×
81	.then(this.fetchData);
82	};
83
84	handleCreateFiles = (groupUploadTarget, files, path, unzip) => {	10✔
UNCOV 85	const prefix = path \|\| this.state.dirUploadTarget \|\| "";	×
UNCOV 86	let data = new FormData();	×
UNCOV 87	Array.from(files).forEach(f => data.append("new_files[]", f, f.name));	×
UNCOV 88	data.append("path", prefix);	×
UNCOV 89	data.append("unzip", unzip);	×
90	$.post({	×
91	url: Routes.update_files_course_starter_file_group_path(
92	this.props.course_id,
93	groupUploadTarget
94	),
95	data: data,
96	processData: false, // tell jQuery not to process the data
97	contentType: false, // tell jQuery not to set contentType
98	})
99	.then(this.fetchData)
100	.fail(jqXHR => {
UNCOV 101	if (jqXHR.getResponseHeader("x-message-error") == null) {	×
UNCOV 102	flashMessage(I18n.t("upload_errors.generic"), "error");	×
103	}
104	})
105	.always(() =>
UNCOV 106	this.setState({	×
107	showFileUploadModal: false,
108	dirUploadTarget: undefined,
109	groupUploadTarget: undefined,
110	})
111	);
112	};
113
114	handleCreateFolder = (groupUploadTarget, folderKey) => {	10✔
UNCOV 115	$.post({	×
116	url: Routes.update_files_course_starter_file_group_path(
117	this.props.course_id,
118	groupUploadTarget
119	),
120	data: {new_folders: [folderKey]},
121	}).then(this.fetchData);
122	};
123
124	handleDeleteFolder = (groupUploadTarget, folderKeys) => {	10✔
125	$.post({	×
126	url: Routes.update_files_course_starter_file_group_path(
127	this.props.course_id,
128	groupUploadTarget
129	),
130	data: {delete_folders: folderKeys},
131	}).then(this.fetchData);
132	};
133
134	openUploadModal = (groupUploadTarget, uploadTarget) => {	10✔
135	this.setState({	×
136	showFileUploadModal: true,
137	dirUploadTarget: uploadTarget,
138	groupUploadTarget: groupUploadTarget,
139	});
140	};
141
142	changeGroupName = (groupUploadTarget, original_name, event) => {	10✔
UNCOV 143	const new_name = event.target.value;	×
UNCOV 144	if (!!new_name && original_name !== new_name) {	×
145	$.ajax({	×
146	type: "PUT",
147	url: Routes.course_starter_file_group_path(this.props.course_id, groupUploadTarget),
148	data: {name: new_name},
149	}).then(this.fetchData);
150	}
151	};
152
153	saveStateChanges = () => {	10✔
154	const data = {	×
155	assignment: {
156	starter_file_type: this.state.starterfileType,
157	default_starter_file_group_id: this.state.defaultStarterFileGroup,
158	starter_files_after_due: this.state.available_after_due,
159	},
160	sections: this.state.sections,
161	starter_file_groups: this.state.files.map(data => {
UNCOV 162	let {files, ...rest} = data;	×
UNCOV 163	return rest;	×
164	}),
165	};
UNCOV 166	$.ajax({	×
167	type: "PUT",
168	url: Routes.update_starter_file_course_assignment_path(
169	this.props.course_id,
170	this.props.assignment_id
171	),
172	data: JSON.stringify(data),
173	processData: false,
174	contentType: "application/json",
175	})
176	.then(this.fetchData)
UNCOV 177	.then(() => this.toggleFormChanged(false));	×
178	};
179
180	changeGroupRename = (groupUploadTarget, new_name) => {	10✔
UNCOV 181	this.setState(	×
182	prevState => {
UNCOV 183	let new_files = prevState.files.map(files => {	×
UNCOV 184	if (files.id === groupUploadTarget) {	×
UNCOV 185	files.entry_rename = new_name;	×
186	}
187	return files;	×
188	});
UNCOV 189	return {files: new_files};	×
190	},
191	() => this.toggleFormChanged(true)	×
192	);
193	};
194
195	changeGroupUseRename = (groupUploadTarget, checked) => {	10✔
UNCOV 196	this.setState(	×
197	prevState => {
UNCOV 198	let new_files = prevState.files.map(files => {	×
199	if (files.id === groupUploadTarget) {	×
UNCOV 200	files.use_rename = checked;	×
201	}
UNCOV 202	return files;	×
203	});
UNCOV 204	return {files: new_files};	×
205	},
206	() => this.toggleFormChanged(true)	×
207	);
208	};
209
210	renderFileManagers = () => {	10✔
211	return (	20✔
212	<React.Fragment>
213	{Object.entries(this.state.files).map(data => {
214	const {id, name, files} = data[1];	10✔
215	return (	10✔
216	<fieldset key={id}>
217	<legend>
218	<StarterFileGroupName
219	name={name}
220	groupUploadTarget={id}
221	changeGroupName={this.changeGroupName}
222	/>
223	</legend>
224	<StarterFileFileManager
225	groupUploadTarget={id}
226	files={files}
227	noFilesMessage={I18n.t("submissions.no_files_available")}
228	readOnly={this.props.read_only}
229	onCreateFiles={this.handleCreateFiles}
230	onDeleteFile={this.handleDeleteFile}
231	onCreateFolder={this.handleCreateFolder}
232	onRenameFolder={
233	typeof this.handleCreateFolder === "function" ? () => {} : undefined	10!
234	}
235	onDeleteFolder={this.handleDeleteFolder}
236	onActionBarAddFileClick={this.openUploadModal}
237	downloadAllURL={Routes.download_files_course_starter_file_group_path(
238	this.props.course_id,
239	id
240	)}
241	disableActions={{rename: true}}
242	canFilter={false}
243	/>
244	<button
245	aria-label={I18n.t("assignments.starter_file.aria_labels.action_button")}
246	key={"delete_starter_file_group_button"}
247	className={"button"}
UNCOV 248	onClick={() => this.deleteStarterFileGroup(id)}	×
249	disabled={this.props.read_only}
250	>
251	<FontAwesomeIcon icon="fa-solid fa-trash" />
252	</button>
253	</fieldset>
254	);
255	})}
256	</React.Fragment>
257	);
258	};
259
260	updateSectionStarterFile = event => {	10✔
UNCOV 261	let [section_id, group_id] = event.target.value.split("_").map(val => {	×
UNCOV 262	return parseInt(val) \|\| null;	×
263	});
UNCOV 264	this.setState(	×
265	prevState => {
UNCOV 266	let new_sections = prevState.sections.map(section => {	×
UNCOV 267	if (section.section_id === section_id) {	×
UNCOV 268	section.group_id = group_id;	×
269	}
UNCOV 270	return section;	×
271	});
272	return {sections: new_sections};	×
273	},
274	() => this.toggleFormChanged(true)	×
275	);
276	};
277
278	renderStarterFileTypes = () => {	10✔
279	return (	20✔
280	<div>
281	<p>
282	<label>
283	<input
284	type={"radio"}
285	name={"starter_file_type"}
286	value={"simple"}
287	checked={this.state.starterfileType === "simple"}
288	disabled={!this.state.files.length \|\| this.props.read_only}	30✔
289	onChange={() => {
UNCOV 290	this.setState({starterfileType: "simple"}, () => this.toggleFormChanged(true));	×
291	}}
292	/>
293	{I18n.t("assignments.starter_file.starter_file_rule_types.simple")}
294	</label>
295	</p>
296	<p>
297	<label>
298	<input
299	type={"radio"}
300	name={"starter_file_type"}
301	value={"sections"}
302	checked={this.state.starterfileType === "sections"}
303	disabled={!this.state.files.length \|\| this.props.read_only}	30✔
304	onChange={() => {
UNCOV 305	this.setState({starterfileType: "sections"}, () => this.toggleFormChanged(true));	×
306	}}
307	/>
308	{I18n.t("assignments.starter_file.starter_file_rule_types.sections")}
309	</label>
310	</p>
311	<p>
312	<label>
313	<input
314	type={"radio"}
315	name={"starter_file_type"}
316	value={"group"}
317	checked={this.state.starterfileType === "group"}
318	disabled={!this.state.files.length \|\| this.props.read_only}	30✔
319	onChange={() => {
UNCOV 320	this.setState({starterfileType: "group"}, () => this.toggleFormChanged(true));	×
321	}}
322	/>
323	{I18n.t("assignments.starter_file.starter_file_rule_types.group")}
324	</label>
325	</p>
326	<p>
327	<label>
328	<input
329	type={"radio"}
330	name={"starter_file_type"}
331	value={"shuffle"}
332	checked={this.state.starterfileType === "shuffle"}
333	disabled={!this.state.files.length \|\| this.props.read_only}	30✔
334	onChange={() => {
UNCOV 335	this.setState({starterfileType: "shuffle"}, () => this.toggleFormChanged(true));	×
336	}}
337	/>
338	{I18n.t("assignments.starter_file.starter_file_rule_types.shuffle")}
339	</label>
340	</p>
341	</div>
342	);
343	};
344
345	renderStarterFileAssigner = () => {	10✔
346	if (["simple", "sections"].includes(this.state.starterfileType)) {	20!
347	let default_selector = (
348	<label>	20✔
349	{I18n.t("assignments.starter_file.default_starter_file_group")}
350	<select
351	onChange={e =>
UNCOV 352	this.setState({defaultStarterFileGroup: parseInt(e.target.value)}, () =>	×
UNCOV 353	this.toggleFormChanged(true)	×
354	)
355	}
356	aria-label={I18n.t("assignments.starter_file.aria_labels.dropdown")}
357	value={this.state.defaultStarterFileGroup}
358	disabled={!this.state.files.length \|\| this.props.read_only}	30✔
359	>
360	{Object.entries(this.state.files).map(data => {
361	const {id, name} = data[1];	10✔
362	return (	10✔
363	<option value={id} key={id}>
364	{name}
365	</option>
366	);
367	})}
368	</select>
369	</label>
370	);
371
372	let section_table = "";	20✔
373	if (this.state.starterfileType === "sections") {	20✔
374	section_table = (	10✔
375	<ReactTable
376	columns={[
377	{
378	Header: I18n.t("activerecord.models.section.one"),
379	accessor: "section_name",
380	},
381	{
382	Header: I18n.t("activerecord.models.starter_file_group.one"),
383	Cell: row => {
384	let selected = `${row.original.section_id}_${row.original.group_id \|\| ""}`;	20!
385	return (	20✔
386	<select
387	onChange={this.updateSectionStarterFile}
388	value={selected}
389	disabled={!this.state.files.length \|\| this.props.read_only}	40✔
390	aria-label={I18n.t("assignments.starter_file.aria_labels.dropdown")}
391	>
392	<option value={`${row.original.section_id}_`} />
393	{Object.entries(this.state.files).map(data => {
394	const {id, name} = data[1];	20✔
395	const value = `${row.original.section_id}_${id}`;	20✔
396	return (	20✔
397	<option value={value} key={id}>
398	{name}
399	</option>
400	);
401	})}
402	</select>
403	);
404	},
405	},
406	]}
407	data={this.state.sections}
408	/>
409	);
410	}
411	return (	20✔
412	<div>
413	<p>{default_selector}</p>
414	{section_table}
415	</div>
416	);
417	}
UNCOV 418	return "";	×
419	};
420
421	renderStarterFileRenamer = () => {	10✔
422	if (this.state.starterfileType === "shuffle") {	20!
UNCOV 423	return (	×
424	<ReactTable
425	columns={[
426	{
427	Header: I18n.t("activerecord.models.starter_file_group.one"),
428	Cell: row => row.original.name,	×
429	},
430	{
431	Header: I18n.t("assignments.starter_file.rename"),
432	Cell: row => {
433	return (	×
434	<StarterFileEntryRenameInput
435	entry_rename={row.original.entry_rename}
436	use_rename={row.original.use_rename}
437	groupUploadTarget={row.original.id}
438	changeGroupRename={this.changeGroupRename}
439	changeGroupUseRename={this.changeGroupUseRename}
440	/>
441	);
442	},
443	},
444	]}
445	data={this.state.files}
446	/>
447	);
448	}
449	return "";	20✔
450	};
451
452	renderVisibilityOptions = () => {	10✔
453	return (	20✔
454	<Fragment>
455	<label>
456	<input
457	type={"checkbox"}
458	checked={this.state.available_after_due}
459	data-testid="available_after_due_checkbox"
460	onChange={() => {
UNCOV 461	this.setState(	×
UNCOV 462	prev => ({available_after_due: !prev.available_after_due}),	×
UNCOV 463	() => this.toggleFormChanged(true)	×
464	);
465	}}
466	disabled={this.props.read_only}
467	/>
468	{I18n.t("assignments.starter_file.available_after_due")}
469	</label>
470	<div className="inline-help">
471	<p>{I18n.t("assignments.starter_file.available_after_due_help")}</p>
472	</div>
473	</Fragment>
474	);
475	};
476
477	render() {
478	return (	20✔
479	<div>
480	<fieldset>
481	<legend>
482	<span>{I18n.t("activerecord.models.starter_file_group.other")}</span>
483	</legend>
484	{this.renderFileManagers()}
485	<button
486	aria-label={I18n.t("assignments.starter_file.aria_labels.action_button")}
487	key={"create_starter_file_group_button"}
488	className={"button"}
489	onClick={this.createStarterFileGroup}
490	disabled={this.props.read_only}
491	>
492	<FontAwesomeIcon icon="fa-solid fa-add" />
493	</button>
494	<StarterFileFileUploadModal
495	groupUploadTarget={this.state.groupUploadTarget}
496	isOpen={this.state.showFileUploadModal}
497	onRequestClose={() =>
UNCOV 498	this.setState({	×
499	showFileUploadModal: false,
500	groupUploadTarget: undefined,
501	dirUploadTarget: undefined,
502	})
503	}
504	onSubmit={this.handleCreateFiles}
505	/>
506	</fieldset>
507	<fieldset className={"starter-file-rule-types"}>
508	<legend>
509	<span>{I18n.t("assignments.starter_file.starter_file_rule")}</span>
510	</legend>
511	<div className={"title_bar"}>
512	<div className={"float-right"}>
513	<a
514	href={Routes.download_starter_file_mappings_course_assignment_path(
515	this.props.course_id,
516	this.props.assignment_id
517	)}
518	>
519	{I18n.t("assignments.starter_file.download_mappings_csv")}
520	</a>
521	<span className={"menu_bar"} />
522	<a
523	href={Routes.download_sample_starter_files_course_assignment_path(
524	this.props.course_id,
525	this.props.assignment_id
526	)}
527	>
528	{I18n.t("assignments.starter_file.download_sample_starter_files")}
529	</a>
530	</div>
531	</div>
532	{this.renderStarterFileTypes()}
533	{this.renderStarterFileAssigner()}
534	{this.renderStarterFileRenamer()}
535	{this.renderVisibilityOptions()}
536	<p>
537	<input
538	type={"submit"}
539	value={I18n.t("save")}
540	data-testid={"save_button"}
541	onClick={this.saveStateChanges}
542	disabled={!this.state.form_changed \|\| this.props.read_only}	25✔
543	></input>
544	</p>
545	</fieldset>
546	</div>
547	);
548	}
549	}
550
551	class StarterFileGroupName extends React.Component {
552	constructor(props) {
553	super(props);	10✔
554	this.state = {	10✔
555	editing: false,
556	};
557	}
558
559	handleBlur = event => {	10✔
UNCOV 560	this.setState(	×
561	{editing: false},
562	this.props.changeGroupName(this.props.groupUploadTarget, this.props.name, event)
563	);
564	};
565
566	render() {
567	if (this.state.editing) {	10!
UNCOV 568	return (	×
569	<input
570	autoFocus
571	type={"text"}
572	placeholder={this.props.name}
573	onKeyPress={blurOnEnter}
574	onBlur={this.handleBlur}
575	/>
576	);
577	} else {
578	return (	10✔
579	<h3>
580	<a
581	href={"#"}
582	onClick={() => {
UNCOV 583	this.setState({editing: true});	×
584	}}
585	>
586	{this.props.name}
587	</a>
588	</h3>
589	);
590	}
591	}
592	}
593
594	class StarterFileEntryRenameInput extends React.Component {
UNCOV 595	handleBlur = event => {	×
UNCOV 596	this.props.changeGroupRename(this.props.groupUploadTarget, event.target.value);	×
597	};
598
UNCOV 599	handleClick = event => {	×
UNCOV 600	this.props.changeGroupUseRename(this.props.groupUploadTarget, !event.target.checked);	×
601	};
602
603	render() {
UNCOV 604	return (	×
605	<span className={"starter-file-rename-cell-content"}>
606	<input
607	type={"text"}
608	placeholder={this.props.entry_rename}
609	onKeyPress={blurOnEnter}
610	onBlur={this.handleBlur}
611	disabled={!this.props.use_rename \|\| this.props.disabled}	×
612	/>
613	<label className={"float-right"}>
614	<input
615	type={"checkbox"}
616	onChange={this.handleClick}
617	checked={!this.props.use_rename \|\| this.props.disabled}	×
618	/>
619	{I18n.t("assignments.starter_file.use_original_filename")}
620	</label>
621	</span>
622	);
623	}
624	}
625
626	class StarterFileFileUploadModal extends React.Component {
627	onSubmit = (...args) => {	10✔
UNCOV 628	return this.props.onSubmit(this.props.groupUploadTarget, ...args);	×
629	};
630
631	render() {
632	return <FileUploadModal {...this.props} onSubmit={this.onSubmit} />;	20✔
633	}
634	}
635
636	class StarterFileFileManager extends React.Component {
637	overridenProps = () => {	10✔
638	return {	10✔
UNCOV 639	onDeleteFile: (...args) => this.props.onDeleteFile(this.props.groupUploadTarget, ...args),	×
UNCOV 640	onCreateFolder: (...args) => this.props.onCreateFolder(this.props.groupUploadTarget, ...args),	×
UNCOV 641	onDeleteFolder: (...args) => this.props.onDeleteFolder(this.props.groupUploadTarget, ...args),	×
UNCOV 642	onCreateFiles: (...args) => this.props.onCreateFiles(this.props.groupUploadTarget, ...args),	×
643	onActionBarAddFileClick: (...args) =>
UNCOV 644	this.props.onActionBarAddFileClick(this.props.groupUploadTarget, ...args),	×
645	};
646	};
647
648	render() {
649	return <FileManager {...{...this.props, ...this.overridenProps()}} />;	10✔
650	}
651	}
652
653	export function makeStarterFileManager(elem, props) {
654	const root = createRoot(elem);	×
UNCOV 655	root.render(<StarterFileManager {...props} />);	×
656	}
657
658	export {StarterFileManager};

MarkUsProject / Markus / 26658959313

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