17867130469

Committed 19 Sep 2025 06:49PM UTC coverage: 91.832% (-0.002%) from 91.834%

Build # 17867130469

Build Type

push

github

Committed by

web-flow

Commit Message

Converted Create Group modal to React component (#7663)

Run Details

693 of 1482 branches covered (46.76%)

Branch coverage included in aggregate %.

12 of 13 new or added lines in 1 file covered. (92.31%)

42302 of 45337 relevant lines covered (93.31%)

119.16 hits per line

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

86.67

/app/javascript/Components/Modals/create_group_modal.jsx

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

export default class CreateGroupModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      groupName: "",
    };
  }

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

  handleChange = event => {
    this.setState({groupName: event.target.value});
  };

  handleSubmit = event => {
    event.preventDefault();
    if (!this.state.groupName) {
      return;
    }
    this.props.onSubmit(this.state.groupName);
    this.setState({groupName: ""});
  };

  render() {
    return (
      <Modal
        className="react-modal markus-dialog"
        isOpen={this.props.isOpen}
        onRequestClose={this.props.onRequestClose}
        id="create_group_modal"
      >
        <h2>{I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}</h2>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="groupName">{I18n.t("activerecord.models.group.one")}</label>
          <input
            id="groupName"
            type="text"
            value={this.state.groupName}
            onChange={event => this.handleChange(event)}
            autoFocus
          />
          <div className={"dialog-actions"}>
            <button className="button" type="submit" disabled={!this.state.groupName}>
              {I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}
            </button>
            <button className="button" type="reset" onClick={this.props.onRequestClose}>
              {I18n.t("cancel")}
            </button>
          </div>
        </form>
      </Modal>
    );
  }
}

1	import React from "react";
2	import Modal from "react-modal";
3
4	export default class CreateGroupModal extends React.Component {
5	constructor(props) {
6	super(props);	3✔
7	this.state = {	3✔
8	groupName: "",
9	};
10	}
11
12	componentDidMount() {
13	Modal.setAppElement("body");	3✔
14	}
15
16	handleChange = event => {	3✔
17	this.setState({groupName: event.target.value});	1✔
18	};
19
20	handleSubmit = event => {	3✔
21	event.preventDefault();	1✔
22	if (!this.state.groupName) {	1!
NEW 23	return;	×
24	}
25	this.props.onSubmit(this.state.groupName);	1✔
26	this.setState({groupName: ""});	1✔
27	};
28
29	render() {
30	return (	5✔
31	<Modal
32	className="react-modal markus-dialog"
33	isOpen={this.props.isOpen}
34	onRequestClose={this.props.onRequestClose}
35	id="create_group_modal"
36	>
37	<h2>{I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}</h2>
38	<form onSubmit={this.handleSubmit}>
39	<label htmlFor="groupName">{I18n.t("activerecord.models.group.one")}</label>
40	<input
41	id="groupName"
42	type="text"
43	value={this.state.groupName}
44	onChange={event => this.handleChange(event)}	1✔
45	autoFocus
46	/>
47	<div className={"dialog-actions"}>
48	<button className="button" type="submit" disabled={!this.state.groupName}>
49	{I18n.t("helpers.submit.create", {model: I18n.t("activerecord.models.group.one")})}
50	</button>
51	<button className="button" type="reset" onClick={this.props.onRequestClose}>
52	{I18n.t("cancel")}
53	</button>
54	</div>
55	</form>
56	</Modal>
57	);
58	}
59	}

MarkUsProject / Markus / 17867130469

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