17596504377

Committed 09 Sep 2025 09:43PM UTC coverage: 91.815% (-0.03%) from 91.849%

Build # 17596504377

Build Type

Pull #7663

github

Committed by

web-flow

Commit Message

Merge b5a3b42c6 into bd307134c

Pull Request Pull Request #7663: Convert Create Group modal to React component

Run Details

683 of 1464 branches covered (46.65%)

Branch coverage included in aggregate %.

42136 of 45172 relevant lines covered (93.28%)

118.37 hits per line

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

34.78

/app/javascript/Components/Modals/submission_url_submit_modal.jsx

import React from "react";
import Modal from "react-modal";

class SubmitUrlUploadModal extends React.Component {
  constructor() {
    super();
    this.state = {
      newUrl: "",
      newUrlText: "",
      manualUrlAlias: false,
    };
  }

  componentDidMount() {
    Modal.setAppElement("body");
  }

  onSubmit = event => {
    event.preventDefault();
    this.props.onSubmit(this.state.newUrl, this.state.newUrlText);
    this.setState({
      newUrl: "",
      newUrlText: "",
    });
  };

  handleUrlChange = event => {
    const urlInput = event.target.value;
    try {
      if (!this.state.manualUrlAlias) {
        const validatedURL = new URL(urlInput);
        const suggestedText = validatedURL.hostname;
        this.setState({newUrlText: suggestedText});
      }
    } catch (e) {
      // If here, URL object creation failed and URL is invalid. Thus, no recommended text
    } finally {
      this.setState({newUrl: urlInput});
    }
  };

  handleUrlAliasChange = event => {
    this.setState({newUrlText: event.target.value, manualUrlAlias: true});
  };

  handleModalClose = () => {
    this.setState({
      newUrl: "",
      newUrlText: "",
      manualUrlAlias: false,
    });
    this.props.onRequestClose();
  };

  render() {
    return (
      <Modal
        className="react-modal"
        isOpen={this.props.isOpen}
        onRequestClose={this.handleModalClose}
      >
        <h2>{I18n.t("submit_the", {item: I18n.t("submissions.student.link")})}</h2>
        <form onSubmit={this.onSubmit}>
          <div className={"modal-container-vertical"}>
            <div className={"modal-container"}>
              <div className={"modal-inline-label"}>
                <label className={"required"}>{I18n.t("submissions.student.url")}</label>
              </div>
              <input
                type={"url"}
                name={"new_url"}
                value={this.state.newUrl}
                onChange={this.handleUrlChange}
                required={true}
              />
            </div>
            <div className={"modal-container"}>
              <div className={"modal-inline-label"}>
                <label className={"required"}>{I18n.t("submissions.student.url_text")}</label>
              </div>
              <input
                type={"text"}
                name={"new_url_text"}
                value={this.state.newUrlText}
                onChange={this.handleUrlAliasChange}
                required={true}
                className={"required"}
              />
            </div>
          </div>
          <div className={"modal-container"}>
            <input type="submit" value={I18n.t("save")} />
          </div>
        </form>
      </Modal>
    );
  }
}

export default SubmitUrlUploadModal;

1	import React from "react";
2	import Modal from "react-modal";
3
4	class SubmitUrlUploadModal extends React.Component {
5	constructor() {
6	super();	6✔
7	this.state = {	6✔
8	newUrl: "",
9	newUrlText: "",
10	manualUrlAlias: false,
11	};
12	}
13
14	componentDidMount() {
15	Modal.setAppElement("body");	6✔
16	}
17
18	onSubmit = event => {	6✔
19	event.preventDefault();	×
20	this.props.onSubmit(this.state.newUrl, this.state.newUrlText);	×
21	this.setState({	×
22	newUrl: "",
23	newUrlText: "",
24	});
25	};
26
27	handleUrlChange = event => {	6✔
28	const urlInput = event.target.value;	×
29	try {	×
30	if (!this.state.manualUrlAlias) {	×
31	const validatedURL = new URL(urlInput);	×
32	const suggestedText = validatedURL.hostname;	×
33	this.setState({newUrlText: suggestedText});	×
34	}
35	} catch (e) {
36	// If here, URL object creation failed and URL is invalid. Thus, no recommended text
37	} finally {
38	this.setState({newUrl: urlInput});	×
39	}
40	};
41
42	handleUrlAliasChange = event => {	6✔
43	this.setState({newUrlText: event.target.value, manualUrlAlias: true});	×
44	};
45
46	handleModalClose = () => {	6✔
47	this.setState({	×
48	newUrl: "",
49	newUrlText: "",
50	manualUrlAlias: false,
51	});
52	this.props.onRequestClose();	×
53	};
54
55	render() {
56	return (	24✔
57	<Modal
58	className="react-modal"
59	isOpen={this.props.isOpen}
60	onRequestClose={this.handleModalClose}
61	>
62	<h2>{I18n.t("submit_the", {item: I18n.t("submissions.student.link")})}</h2>
63	<form onSubmit={this.onSubmit}>
64	<div className={"modal-container-vertical"}>
65	<div className={"modal-container"}>
66	<div className={"modal-inline-label"}>
67	<label className={"required"}>{I18n.t("submissions.student.url")}</label>
68	</div>
69	<input
70	type={"url"}
71	name={"new_url"}
72	value={this.state.newUrl}
73	onChange={this.handleUrlChange}
74	required={true}
75	/>
76	</div>
77	<div className={"modal-container"}>
78	<div className={"modal-inline-label"}>
79	<label className={"required"}>{I18n.t("submissions.student.url_text")}</label>
80	</div>
81	<input
82	type={"text"}
83	name={"new_url_text"}
84	value={this.state.newUrlText}
85	onChange={this.handleUrlAliasChange}
86	required={true}
87	className={"required"}
88	/>
89	</div>
90	</div>
91	<div className={"modal-container"}>
92	<input type="submit" value={I18n.t("save")} />
93	</div>
94	</form>
95	</Modal>
96	);
97	}
98	}
99
100	export default SubmitUrlUploadModal;

MarkUsProject / Markus / 17596504377

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