blob: 3a83b2ca280cebb64c9f13cd92a0ed86cc3a664d [file] [log] [blame]
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02001// 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
Copybara854996b2021-09-07 19:36:02 +00005import React from 'react';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02006import { makeStyles, withStyles } from '@material-ui/styles';
7import { blue, yellow, red, grey } from '@material-ui/core/colors';
Copybara854996b2021-09-07 19:36:02 +00008import FormControlLabel from '@material-ui/core/FormControlLabel';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02009import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
Copybara854996b2021-09-07 19:36:02 +000010import SelectMenu from './SelectMenu.tsx';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020011import { RadioDescription } from './RadioDescription/RadioDescription.tsx';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020012import {GetCategoriesByPersona} from './IssueWizardUtils.tsx';
13import {ISSUE_WIZARD_QUESTIONS} from './IssueWizardConfig.ts';
14import DotMobileStepper from './DotMobileStepper.tsx';
15import {IssueWizardPersona} from './IssueWizardTypes.tsx';
Copybara854996b2021-09-07 19:36:02 +000016
17const CustomCheckbox = withStyles({
18 root: {
19 color: blue[400],
20 '&$checked': {
21 color: blue[600],
22 },
23 },
24 checked: {},
25})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
26
27const useStyles = makeStyles({
28 pad: {
29 margin: '10px, 20px',
30 display: 'inline-block',
31 },
32 flex: {
33 display: 'flex',
34 },
Copybara854996b2021-09-07 19:36:02 +000035 warningBox: {
36 minHeight: '10vh',
37 borderStyle: 'solid',
38 borderWidth: '2px',
39 borderColor: yellow[800],
40 borderRadius: '8px',
41 background: yellow[50],
42 padding: '0px 20px 1em',
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020043 margin: '1rem 0'
Copybara854996b2021-09-07 19:36:02 +000044 },
45 warningHeader: {
46 color: yellow[800],
47 fontSize: '16px',
48 fontWeight: '500',
49 },
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020050 star: {
Copybara854996b2021-09-07 19:36:02 +000051 color: red[700],
52 marginRight: '8px',
53 fontSize: '16px',
54 display: 'inline-block',
55 },
56 header: {
57 color: grey[900],
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020058 fontSize: '1.5rem',
59 margin: '1rem 0',
Copybara854996b2021-09-07 19:36:02 +000060 },
61 subheader: {
62 color: grey[700],
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020063 fontSize: '1.125rem',
64 margin: '1rem 0',
65 },
66 alertDetail: {
67 fontSize: '16px',
68 },
69 link: {
70 fontSize: '20px',
71 fontWeight: 'bolder',
72 textDecoration: 'underline',
Copybara854996b2021-09-07 19:36:02 +000073 },
74 red: {
75 color: red[600],
76 },
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020077 line: {
78 color: grey[200],
79 marginTop: '1.5rem',
80 minWidth: '360px',
81 }
Copybara854996b2021-09-07 19:36:02 +000082});
83
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020084type Props = {
85 userPersona: IssueWizardPersona,
86 setUserPersona: Function,
87 category: string,
88 setCategory: Function,
89 setActiveStep: Function,
90};
91
92export default function LandingStep(props: Props) {
93
94 const {userPersona, setUserPersona, category, setCategory, setActiveStep} = props;
Copybara854996b2021-09-07 19:36:02 +000095 const classes = useStyles();
96
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020097 const categoriesByPersonaMap = GetCategoriesByPersona(ISSUE_WIZARD_QUESTIONS);
98
99 const [categoryList, setCategoryList] = React.useState(categoriesByPersonaMap.get(userPersona));
100 const [checkExisting, setCheckExisting] = React.useState(false);
101
Copybara854996b2021-09-07 19:36:02 +0000102 const handleCheckChange = (event: React.ChangeEvent<HTMLInputElement>) => {
103 setCheckExisting(event.target.checked);
104 };
105
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200106 const onSelectUserPersona = (userPersona: string) => {
107 setUserPersona(userPersona);
108 setCategoryList(categoriesByPersonaMap.get(userPersona));
109 setCategory('');
110 }
111
112 const contributorAlert = () => {
113 return (
114 <div>
115 <div className={classes.subheader}>
116 Prefer to file an issue manually?
117 </div>
118 <div className={classes.alertDetail}>
119 It's usually best to work through this short wizard so that your issue is given the labels needed for the right team to see it.
120 Otherwise it might take longer for your issue to be triaged and resolved.
121 </div>
122 <div className={classes.alertDetail}>
123 However, if you are a Chromium contributor and none of the other options apply, you may use the
124 <a className={classes.link} href="entry"> regular issue entry form</a>.
125 </div>
126 </div>
127 );
128 }
129
130 const nextEnabled = (userPersona != IssueWizardPersona.Contributor) && checkExisting && (category != '');
Copybara854996b2021-09-07 19:36:02 +0000131 return (
132 <>
133 <p className={classes.header}>Report an issue with Chromium</p>
134 <p className={classes.subheader}>
135 We want you to enter the best possible issue report so that the project team members
136 can act on it effectively. The following steps will help route your issue to the correct
137 people.
138 </p>
139 <p className={classes.subheader}>
140 Please select your following role: <span className={classes.red}>*</span>
141 </p>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200142 <RadioDescription selectedRadio={userPersona} onClickRadio={onSelectUserPersona} />
143 { userPersona === IssueWizardPersona.Contributor ? contributorAlert() :
Copybara854996b2021-09-07 19:36:02 +0000144 <div>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200145 <div className={classes.subheader}>
146 Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
147 </div>
148 <SelectMenu optionsList={categoryList} selectedOption={category} setOption={setCategory} />
149 <div className={classes.warningBox}>
150 <p className={classes.warningHeader}> <span className={classes.star}>*</span>Avoid duplicate issue reports:</p>
151 <div>
152 <FormControlLabel className={classes.pad}
153 control={
154 <CustomCheckbox
155 checked={checkExisting}
156 onChange={handleCheckChange}
157 name="warningCheck"
158 />
159 }
160 label={
161 <span>By checking this box, I'm acknowledging that I have searched for <a href="/p/chromium/issues/list" target="_blank">existing issues</a> that already report this problem.</span>
162 }
Copybara854996b2021-09-07 19:36:02 +0000163 />
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200164 </div>
165 </div>
Copybara854996b2021-09-07 19:36:02 +0000166 </div>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200167 }
168 { userPersona === IssueWizardPersona.Contributor ? null :
169 <DotMobileStepper nextEnabled={nextEnabled} activeStep={0} setActiveStep={setActiveStep}/>
170 }
Copybara854996b2021-09-07 19:36:02 +0000171 </>
172 );
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200173}