blob: ae968c14639f1af118da9dac3123d99a49b491fc [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2021 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import React from 'react';
6import {createStyles, createTheme} from '@material-ui/core/styles';
7import {makeStyles} from '@material-ui/styles';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +02008import { TextareaAutosize } from '@material-ui/core';
Copybara854996b2021-09-07 19:36:02 +00009import TextField from '@material-ui/core/TextField';
10import {red, grey} from '@material-ui/core/colors';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020011import DotMobileStepper from './DotMobileStepper.tsx';
12import SelectMenu from './SelectMenu.tsx';
13import {OS_LIST, ISSUE_WIZARD_QUESTIONS, ISSUE_REPRODUCE_PLACEHOLDER, OS_CHANNEL_LIST} from './IssueWizardConfig.ts'
14import {getTipByCategory} from './IssueWizardUtils.tsx';
15import CustomQuestionSelector from './CustomQuestions/CustomQuestionSelector.tsx';
Copybara854996b2021-09-07 19:36:02 +000016
17/**
18 * The detail step is the second step on the dot
19 * stepper. This react component provides the users with
20 * specific questions about their bug to be filled out.
21 */
22const theme: Theme = createTheme();
23
24const useStyles = makeStyles((theme: Theme) =>
25 createStyles({
26 root: {
27 '& > *': {
Copybara854996b2021-09-07 19:36:02 +000028 width: '100%',
29 },
30 },
31 head: {
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020032 marginTop: '1.5rem',
33 fontSize: '1rem'
Copybara854996b2021-09-07 19:36:02 +000034 },
35 red: {
36 color: red[600],
37 },
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020038 pageHeader: {
39 color: grey[600],
40 fontSize: '1.5rem',
41 margin: '1rem 0',
Copybara854996b2021-09-07 19:36:02 +000042 },
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020043 inlineStyle: {
44 display: 'inline-flex',
45 alignItems: 'center',
46 marginTop: '1.5rem',
47 },
48 inlineTitle: {
49 marginRight: '10px',
50 fontSize: '1rem',
51 }
Copybara854996b2021-09-07 19:36:02 +000052 }), {defaultTheme: theme}
53);
54
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020055type Props = {
56 textValues: Object,
57 setTextValues: Function,
58 category: string,
59 setActiveStep: Function,
60 osName: string,
61 setOsName: Function,
62 setIsRegression: Function,
63};
64
65export default function DetailsStep(props: Props): React.ReactElement {
Copybara854996b2021-09-07 19:36:02 +000066 const classes = useStyles();
67
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020068 const {
69 textValues,
70 setTextValues,
71 category,
72 setActiveStep,
73 setIsRegression
74 } = props;
75
Copybara854996b2021-09-07 19:36:02 +000076 const handleChange = (valueName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
77 const textInput = e.target.value;
78 setTextValues({...textValues, [valueName]: textInput});
79 };
80
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020081 const selectOs = (os: string) => {
82 setTextValues({...textValues, 'osName': os});
83 }
84
85 const selectChannel = (channel: string) => {
86 setTextValues({...textValues, 'channel': channel});
87 }
88
89 const tipByCategory = getTipByCategory(ISSUE_WIZARD_QUESTIONS);
90
91 const nextEnabled =
92 (textValues.oneLineSummary.trim() !== '') &&
93 (textValues.stepsToReproduce.trim() !== ISSUE_REPRODUCE_PLACEHOLDER) &&
94 (textValues.stepsToReproduce.trim() !== '') &&
95 (textValues.describeProblem.trim() !== '');
96
97 const getTipInnerHtml = () => {
98 return {__html: tipByCategory.get(category)};
99 }
Copybara854996b2021-09-07 19:36:02 +0000100 return (
101 <>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200102 <h2 className={classes.pageHeader}>Details for problems with {category}</h2>
103
Copybara854996b2021-09-07 19:36:02 +0000104 <form className={classes.root} noValidate autoComplete="off">
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200105 <div dangerouslySetInnerHTML={getTipInnerHtml()}/>
Copybara854996b2021-09-07 19:36:02 +0000106
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200107 <h3 className={classes.head}>Please confirm that the following version information is correct. <span className={classes.red}>*</span></h3>
108 <div className={classes.inlineStyle}>
109 <h3 className={classes.inlineTitle}>Operating System:</h3>
110 <SelectMenu optionsList={OS_LIST} selectedOption={textValues.osName} setOption={selectOs} />
111 <h3 className={classes.inlineTitle}>Channel:</h3>
112 <SelectMenu optionsList={OS_CHANNEL_LIST} selectedOption={textValues.channel} setOption={selectChannel} />
113 </div>
114 <div className={classes.inlineStyle}>
115 <h3 className={classes.inlineTitle}>Chrome version: </h3>
116 <TextField variant="outlined" onChange={handleChange('chromeVersion')} value={textValues.chromeVersion}/>
117 </div>
Copybara854996b2021-09-07 19:36:02 +0000118
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200119 <h3 className={classes.head}>Please enter a one line summary (100 character limit) <span className={classes.red}>*</span></h3>
120 <TextField id="outlined-basic-1" variant="outlined" inputProps={{maxLength: 100}} onChange={handleChange('oneLineSummary')} value={textValues.oneLineSummary}/>
Copybara854996b2021-09-07 19:36:02 +0000121
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200122 <h3 className={classes.head}>Steps to reproduce problem (5000 character limit) <span className={classes.red}>*</span></h3>
123 <TextareaAutosize minRows={4} id="outlined-basic-2" maxLength={5000} onChange={handleChange('stepsToReproduce')} value={textValues.stepsToReproduce}/>
124
125 <h3 className={classes.head}>Please describe the problem (5000 character limit)<span className={classes.red}>*</span></h3>
126 <TextareaAutosize minRows={3} id="outlined-basic-3" maxLength={5000} onChange={handleChange('describeProblem')} value={textValues.describeProblem}/>
127
128 <CustomQuestionSelector
129 question="Did this work before?"
130 options={["Not applicable or don't know", "Yes - This is a regression", "No - I think it never worked"]}
131 subQuestions={null}
132 updateAnswers={(answer: string) => {
133 if (answer === "Yes - This is a regression") {
134 setIsRegression(true);
135 } else {
136 setIsRegression(false);
137 }
138 }}
139 />
Copybara854996b2021-09-07 19:36:02 +0000140 </form>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200141 <DotMobileStepper nextEnabled={nextEnabled} activeStep={1} setActiveStep={setActiveStep}/>
Copybara854996b2021-09-07 19:36:02 +0000142 </>
143 );
144}