3627199690

Build # 3627199690

Build Type

github

Committed by GitHub

Commit Message

Merge d974ee25b into 77850b02e

Pull Request Pull Request #139: Edit Message Table, Message Create Modal

Run Details

227 of 284 branches covered (79.93%)

Branch coverage included in aggregate %.

49 of 49 new or added lines in 4 files covered. (100.0%)

1432 of 1519 relevant lines covered (94.27%)

4.89 hits per line

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

48.82

/frontend/src/components/Message/MessageCreateModal.tsx

import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  InputLabel,
  MenuItem,
  Select,
  SelectChangeEvent,
  TextField,
} from "@mui/material";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { fetchMessages } from "../../store/slices/message";
import { AppDispatch } from "../../store";
import { fetchProjects } from "../../store/slices/project";
import { EnumNotificationType } from "../../Enums";
import { createMessage2 } from "../../services/message";

interface IProps {
  open: any;
  handleClose: any;
}

export default function MessageCreateModal(props: IProps) {
  const [notificationType, setNotificationtype] = useState("");
  const [content, setContent]: [any, any] = useState({});
  const [fieldErrors, setFieldErrors]: [any, any] = useState({});

  const dispatch = useDispatch<AppDispatch>();
  useEffect(() => {
    dispatch(fetchProjects());
  }, [dispatch]);

  const clearForm = () => {
    setContent({});
  };

  const handleClickConfirm = async () => {
    if (notificationType) {
      switch (notificationType) {
        case EnumNotificationType.SLACK:
          if (
            "channel" in content &&
            "message" in content &&
            Boolean(content.channel) &&
            Boolean(content.message)
          )
            await createMessage2(notificationType, {
              channel: content.channel,
              message: content.message,
            });
          else {
            let newFieldErrors = fieldErrors;
            if (!Boolean(content.channel)) {
              newFieldErrors = {
                ...newFieldErrors,
                channel: "This field is required.",
              };
            }
            if (!Boolean(content.message)) {
              newFieldErrors = {
                ...newFieldErrors,
                message: "This field is required.",
              };
            }
            setFieldErrors(newFieldErrors);
            return;
          }
          break;
        case EnumNotificationType.EMAIL:
          if (
            "title" in content &&
            "message" in content &&
            Boolean(content.title) &&
            Boolean(content.message)
          )
            await createMessage2(notificationType, {
              title: content.title,
              message: content.message,
            });
          else {
            let newFieldErrors = fieldErrors;
            if (!Boolean(content.title)) {
              newFieldErrors = {
                ...newFieldErrors,
                title: "This field is required.",
              };
            }
            if (!Boolean(content.message)) {
              newFieldErrors = {
                ...newFieldErrors,
                message: "This field is required.",
              };
            }
            setFieldErrors(newFieldErrors);
            return;
          }
          break;
        case EnumNotificationType.WEBHOOK:
          if ("message" in content && Boolean(content.message))
            await createMessage2(notificationType, {
              message: content.message,
            });
          else {
            let newFieldErrors = fieldErrors;
            if (!Boolean(content.message)) {
              newFieldErrors = {
                ...newFieldErrors,
                message: "This field is required.",
              };
            }
            setFieldErrors(newFieldErrors);
            return;
          }
          break;
        case EnumNotificationType.SMS:
          if ("message" in content && Boolean(content.message))
            await createMessage2(notificationType, {
              message: content.message,
            });
          else {
            let newFieldErrors = fieldErrors;
            if (!Boolean(content.message)) {
              newFieldErrors = {
                ...newFieldErrors,
                message: "This field is required.",
              };
            }
            setFieldErrors(newFieldErrors);
            return;
          }
          break;
      }
      props.handleClose();
      clearForm();
      dispatch(fetchMessages());
    }
  };

  let form;
  switch (notificationType) {
    case EnumNotificationType.SLACK:
      form = (
        <>
          <br />
          <br />
          <br />
          <InputLabel id="demo-simple-select-label">Channel</InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "slack-channel-input" }}
            onChange={(event: any) => {
              setContent({ ...content, channel: event.target.value });
              setFieldErrors({ ...fieldErrors, channel: undefined });
            }}
            value={"channel" in content ? content.channel : ""}
            helperText={fieldErrors?.channel}
            error={Boolean(fieldErrors?.channel)}
            rows={1}
          />
          <br />
          <br />
          <br />
          <InputLabel id="demo-simple-select-label" margin="dense">
            Message
          </InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "slack-message-input" }}
            onChange={(event: any) => {
              setContent({ ...content, message: event.target.value });
              setFieldErrors({ ...fieldErrors, message: undefined });
            }}
            value={"message" in content ? content.message : ""}
            helperText={fieldErrors?.message}
            error={Boolean(fieldErrors?.message)}
            rows={4}
          />
        </>
      );
      break;
    case EnumNotificationType.EMAIL:
      form = (
        <>
          <br />
          <br />
          <InputLabel id="demo-simple-select-label">Title</InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "email-title-input" }}
            onChange={(event: any) => {
              setContent({ ...content, title: event.target.value });
              setFieldErrors({ ...fieldErrors, title: undefined });
            }}
            value={"title" in content ? content.title : ""}
            helperText={fieldErrors?.title}
            error={Boolean(fieldErrors?.title)}
            rows={1}
          />
          <br />
          <br />
          <InputLabel id="demo-simple-select-label" margin="dense">
            Message
          </InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "email-message-input" }}
            onChange={(event: any) => {
              setContent({ ...content, message: event.target.value });
              setFieldErrors({ ...fieldErrors, message: undefined });
            }}
            value={"message" in content ? content.message : ""}
            helperText={fieldErrors?.message}
            error={Boolean(fieldErrors?.message)}
            rows={8}
          />
        </>
      );
      break;
    case EnumNotificationType.WEBHOOK:
      form = (
        <>
          <br />
          <br />
          <InputLabel id="demo-simple-select-label" margin="dense">
            JSON Message
          </InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "webhook-message-input" }}
            onChange={(event: any) => {
              setContent({ ...content, message: event.target.value });
              setFieldErrors({ ...fieldErrors, message: undefined });
            }}
            value={"message" in content ? content.message : ""}
            helperText={fieldErrors?.message}
            error={Boolean(fieldErrors?.message)}
            rows={9}
          />
        </>
      );
      break;
    case EnumNotificationType.SMS:
      form = (
        <>
          <br />
          <br />
          <InputLabel id="demo-simple-select-label" margin="dense">
            Message
          </InputLabel>
          <TextField
            id="outlined-multiline-static"
            fullWidth
            multiline
            inputProps={{ "data-testid": "sms-message-input" }}
            onChange={(event: any) => {
              setContent({ ...content, message: event.target.value });
              setFieldErrors({ ...fieldErrors, message: undefined });
            }}
            value={"message" in content ? content.message : ""}
            helperText={fieldErrors?.message}
            error={Boolean(fieldErrors?.message)}
            rows={9}
          />
        </>
      );
      break;
  }

  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="parent-modal-title"
        aria-describedby="parent-modal-description"
        fullWidth
      >
        <DialogTitle>New Message</DialogTitle>
        <DialogContent>
          <InputLabel id="demo-simple-select-label">Project Type</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={notificationType}
            inputProps={{
              "data-testid": "type-input",
            }}
            onChange={(event: SelectChangeEvent) => {
              setNotificationtype(event.target.value as string);
            }}
            fullWidth
          >
            <MenuItem value={EnumNotificationType.SLACK}>Slack</MenuItem>
            <MenuItem value={EnumNotificationType.EMAIL}>Email</MenuItem>
            <MenuItem value={EnumNotificationType.WEBHOOK}>Webhook</MenuItem>
            <MenuItem value={EnumNotificationType.SMS}>SMS</MenuItem>
          </Select>
          {form}
        </DialogContent>
        <DialogActions>
          <Button data-testid="create-button" onClick={handleClickConfirm}>
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

1	import {
2	Button,
3	Dialog,
4	DialogActions,
5	DialogContent,
6	DialogTitle,
7	InputLabel,
8	MenuItem,
9	Select,
10	SelectChangeEvent,
11	TextField,
12	} from "@mui/material";
13	import { useEffect, useState } from "react";
14	import { useDispatch } from "react-redux";
15	import { fetchMessages } from "../../store/slices/message";
16	import { AppDispatch } from "../../store";
17	import { fetchProjects } from "../../store/slices/project";
18	import { EnumNotificationType } from "../../Enums";
19	import { createMessage2 } from "../../services/message";
20
21	interface IProps {
22	open: any;
23	handleClose: any;
24	}
25
26	export default function MessageCreateModal(props: IProps) {
27	const [notificationType, setNotificationtype] = useState("");	21✔
28	const [content, setContent]: [any, any] = useState({});	20✔
29	const [fieldErrors, setFieldErrors]: [any, any] = useState({});	20✔
30
31	const dispatch = useDispatch<AppDispatch>();	20✔
32	useEffect(() => {	20✔
33	dispatch(fetchProjects());	8✔
34	}, [dispatch]);
35
36	const clearForm = () => {	20✔
37	setContent({});	1✔
38	};
39
40	const handleClickConfirm = async () => {	20✔
41	if (notificationType) {	3✔
42	switch (notificationType) {	2!
43	case EnumNotificationType.SLACK:
44	if (	2✔
45	"channel" in content &&	5✔
46	"message" in content &&
47	Boolean(content.channel) &&
48	Boolean(content.message)
49	)
50	await createMessage2(notificationType, {	1✔
51	channel: content.channel,
52	message: content.message,
53	});
54	else {
55	let newFieldErrors = fieldErrors;	1✔
56	if (!Boolean(content.channel)) {	1!
57	newFieldErrors = {	1✔
58	...newFieldErrors,
59	channel: "This field is required.",
60	};
61	}
62	if (!Boolean(content.message)) {	1!
63	newFieldErrors = {	1✔
64	...newFieldErrors,
65	message: "This field is required.",
66	};
67	}
68	setFieldErrors(newFieldErrors);	1✔
69	return;	1✔
70	}
71	break;	1✔
72	case EnumNotificationType.EMAIL:
73	if (	×
74	"title" in content &&	×
75	"message" in content &&
76	Boolean(content.title) &&
77	Boolean(content.message)
78	)
79	await createMessage2(notificationType, {	×
80	title: content.title,
81	message: content.message,
82	});
83	else {
84	let newFieldErrors = fieldErrors;	×
85	if (!Boolean(content.title)) {	×
86	newFieldErrors = {	×
87	...newFieldErrors,
88	title: "This field is required.",
89	};
90	}
91	if (!Boolean(content.message)) {	×
92	newFieldErrors = {	×
93	...newFieldErrors,
94	message: "This field is required.",
95	};
96	}
97	setFieldErrors(newFieldErrors);	×
98	return;	×
99	}
100	break;	×
101	case EnumNotificationType.WEBHOOK:
102	if ("message" in content && Boolean(content.message))	×
103	await createMessage2(notificationType, {	×
104	message: content.message,
105	});
106	else {
107	let newFieldErrors = fieldErrors;	×
108	if (!Boolean(content.message)) {	×
109	newFieldErrors = {	×
110	...newFieldErrors,
111	message: "This field is required.",
112	};
113	}
114	setFieldErrors(newFieldErrors);	×
115	return;	×
116	}
117	break;	×
118	case EnumNotificationType.SMS:
119	if ("message" in content && Boolean(content.message))	×
120	await createMessage2(notificationType, {	×
121	message: content.message,
122	});
123	else {
124	let newFieldErrors = fieldErrors;	×
125	if (!Boolean(content.message)) {	×
126	newFieldErrors = {	×
127	...newFieldErrors,
128	message: "This field is required.",
129	};
130	}
131	setFieldErrors(newFieldErrors);	×
132	return;	×
133	}
134	break;	×
135	}
136	props.handleClose();	1✔
137	clearForm();	1✔
138	dispatch(fetchMessages());	1✔
139	}
140	};
141
142	let form;
143	switch (notificationType) {	20✔
144	case EnumNotificationType.SLACK:
145	form = (	4✔
146	<>
147	<br />
148	<br />
149	<br />
150	<InputLabel id="demo-simple-select-label">Channel</InputLabel>
151	<TextField
152	id="outlined-multiline-static"
153	fullWidth
154	multiline
155	inputProps={{ "data-testid": "slack-channel-input" }}
156	onChange={(event: any) => {
157	setContent({ ...content, channel: event.target.value });	1✔
158	setFieldErrors({ ...fieldErrors, channel: undefined });	1✔
159	}}
160	value={"channel" in content ? content.channel : ""}	4✔
161	helperText={fieldErrors?.channel}
162	error={Boolean(fieldErrors?.channel)}
163	rows={1}
164	/>
165	<br />
166	<br />
167	<br />
168	<InputLabel id="demo-simple-select-label" margin="dense">
169	Message
170	</InputLabel>
171	<TextField
172	id="outlined-multiline-static"
173	fullWidth
174	multiline
175	inputProps={{ "data-testid": "slack-message-input" }}
176	onChange={(event: any) => {
177	setContent({ ...content, message: event.target.value });	1✔
178	setFieldErrors({ ...fieldErrors, message: undefined });	1✔
179	}}
180	value={"message" in content ? content.message : ""}	4✔
181	helperText={fieldErrors?.message}
182	error={Boolean(fieldErrors?.message)}
183	rows={4}
184	/>
185	</>
186	);
187	break;	4✔
188	case EnumNotificationType.EMAIL:
189	form = (	1✔
190	<>
191	<br />
192	<br />
193	<InputLabel id="demo-simple-select-label">Title</InputLabel>
194	<TextField
195	id="outlined-multiline-static"
196	fullWidth
197	multiline
198	inputProps={{ "data-testid": "email-title-input" }}
199	onChange={(event: any) => {
200	setContent({ ...content, title: event.target.value });	×
201	setFieldErrors({ ...fieldErrors, title: undefined });	×
202	}}
203	value={"title" in content ? content.title : ""}	1!
204	helperText={fieldErrors?.title}
205	error={Boolean(fieldErrors?.title)}
206	rows={1}
207	/>
208	<br />
209	<br />
210	<InputLabel id="demo-simple-select-label" margin="dense">
211	Message
212	</InputLabel>
213	<TextField
214	id="outlined-multiline-static"
215	fullWidth
216	multiline
217	inputProps={{ "data-testid": "email-message-input" }}
218	onChange={(event: any) => {
219	setContent({ ...content, message: event.target.value });	×
220	setFieldErrors({ ...fieldErrors, message: undefined });	×
221	}}
222	value={"message" in content ? content.message : ""}	1!
223	helperText={fieldErrors?.message}
224	error={Boolean(fieldErrors?.message)}
225	rows={8}
226	/>
227	</>
228	);
229	break;	1✔
230	case EnumNotificationType.WEBHOOK:
231	form = (	1✔
232	<>
233	<br />
234	<br />
235	<InputLabel id="demo-simple-select-label" margin="dense">
236	JSON Message
237	</InputLabel>
238	<TextField
239	id="outlined-multiline-static"
240	fullWidth
241	multiline
242	inputProps={{ "data-testid": "webhook-message-input" }}
243	onChange={(event: any) => {
244	setContent({ ...content, message: event.target.value });	×
245	setFieldErrors({ ...fieldErrors, message: undefined });	×
246	}}
247	value={"message" in content ? content.message : ""}	1!
248	helperText={fieldErrors?.message}
249	error={Boolean(fieldErrors?.message)}
250	rows={9}
251	/>
252	</>
253	);
254	break;	1✔
255	case EnumNotificationType.SMS:
256	form = (	1✔
257	<>
258	<br />
259	<br />
260	<InputLabel id="demo-simple-select-label" margin="dense">
261	Message
262	</InputLabel>
263	<TextField
264	id="outlined-multiline-static"
265	fullWidth
266	multiline
267	inputProps={{ "data-testid": "sms-message-input" }}
268	onChange={(event: any) => {
269	setContent({ ...content, message: event.target.value });	×
270	setFieldErrors({ ...fieldErrors, message: undefined });	×
271	}}
272	value={"message" in content ? content.message : ""}	1!
273	helperText={fieldErrors?.message}
274	error={Boolean(fieldErrors?.message)}
275	rows={9}
276	/>
277	</>
278	);
279	break;	1✔
280	}
281
282	return (	20✔
283	<div>
284	<Dialog
285	open={props.open}
286	onClose={props.handleClose}
287	aria-labelledby="parent-modal-title"
288	aria-describedby="parent-modal-description"
289	fullWidth
290	>
291	<DialogTitle>New Message</DialogTitle>
292	<DialogContent>
293	<InputLabel id="demo-simple-select-label">Project Type</InputLabel>
294	<Select
295	labelId="demo-simple-select-label"
296	id="demo-simple-select"
297	value={notificationType}
298	inputProps={{
299	"data-testid": "type-input",
300	}}
301	onChange={(event: SelectChangeEvent) => {
302	setNotificationtype(event.target.value as string);	4✔
303	}}
304	fullWidth
305	>
306	<MenuItem value={EnumNotificationType.SLACK}>Slack</MenuItem>
307	<MenuItem value={EnumNotificationType.EMAIL}>Email</MenuItem>
308	<MenuItem value={EnumNotificationType.WEBHOOK}>Webhook</MenuItem>
309	<MenuItem value={EnumNotificationType.SMS}>SMS</MenuItem>
310	</Select>
311	{form}
312	</DialogContent>
313	<DialogActions>
314	<Button data-testid="create-button" onClick={handleClickConfirm}>
315	Confirm
316	</Button>
317	</DialogActions>
318	</Dialog>
319	</div>
320	);
321	}

swsnu / swppfall2022-team15 / 3627199690

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