Merge branch 'main' into avm99963-monorail
Merged commit 4137ed7879acadbf891e8c471108acb874dae886.
GitOrigin-RevId: b6100ffc5b1da355a35f37b13fcaaf746ee8b307
diff --git a/static_src/react/issue-wizard/LandingStep.tsx b/static_src/react/issue-wizard/LandingStep.tsx
index 2925e87..3a83b2c 100644
--- a/static_src/react/issue-wizard/LandingStep.tsx
+++ b/static_src/react/issue-wizard/LandingStep.tsx
@@ -9,6 +9,10 @@
import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
import SelectMenu from './SelectMenu.tsx';
import { RadioDescription } from './RadioDescription/RadioDescription.tsx';
+import {GetCategoriesByPersona} from './IssueWizardUtils.tsx';
+import {ISSUE_WIZARD_QUESTIONS} from './IssueWizardConfig.ts';
+import DotMobileStepper from './DotMobileStepper.tsx';
+import {IssueWizardPersona} from './IssueWizardTypes.tsx';
const CustomCheckbox = withStyles({
root: {
@@ -28,9 +32,6 @@
flex: {
display: 'flex',
},
- inlineBlock: {
- display: 'inline-block',
- },
warningBox: {
minHeight: '10vh',
borderStyle: 'solid',
@@ -39,7 +40,7 @@
borderRadius: '8px',
background: yellow[50],
padding: '0px 20px 1em',
- margin: '30px 0px'
+ margin: '1rem 0'
},
warningHeader: {
color: yellow[800],
@@ -54,27 +55,79 @@
},
header: {
color: grey[900],
- fontSize: '28px',
- marginTop: '6vh',
+ fontSize: '1.5rem',
+ margin: '1rem 0',
},
subheader: {
color: grey[700],
- fontSize: '18px',
- lineHeight: '32px',
+ fontSize: '1.125rem',
+ margin: '1rem 0',
+ },
+ alertDetail: {
+ fontSize: '16px',
+ },
+ link: {
+ fontSize: '20px',
+ fontWeight: 'bolder',
+ textDecoration: 'underline',
},
red: {
color: red[600],
},
+ line: {
+ color: grey[200],
+ marginTop: '1.5rem',
+ minWidth: '360px',
+ }
});
-export default function LandingStep({ checkExisting, setCheckExisting, userType, setUserType, category, setCategory }:
- { checkExisting: boolean, setCheckExisting: Function, userType: string, setUserType: Function, category: string, setCategory: Function }) {
+type Props = {
+ userPersona: IssueWizardPersona,
+ setUserPersona: Function,
+ category: string,
+ setCategory: Function,
+ setActiveStep: Function,
+};
+
+export default function LandingStep(props: Props) {
+
+ const {userPersona, setUserPersona, category, setCategory, setActiveStep} = props;
const classes = useStyles();
+ const categoriesByPersonaMap = GetCategoriesByPersona(ISSUE_WIZARD_QUESTIONS);
+
+ const [categoryList, setCategoryList] = React.useState(categoriesByPersonaMap.get(userPersona));
+ const [checkExisting, setCheckExisting] = React.useState(false);
+
const handleCheckChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setCheckExisting(event.target.checked);
};
+ const onSelectUserPersona = (userPersona: string) => {
+ setUserPersona(userPersona);
+ setCategoryList(categoriesByPersonaMap.get(userPersona));
+ setCategory('');
+ }
+
+ const contributorAlert = () => {
+ return (
+ <div>
+ <div className={classes.subheader}>
+ Prefer to file an issue manually?
+ </div>
+ <div className={classes.alertDetail}>
+ 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.
+ Otherwise it might take longer for your issue to be triaged and resolved.
+ </div>
+ <div className={classes.alertDetail}>
+ However, if you are a Chromium contributor and none of the other options apply, you may use the
+ <a className={classes.link} href="entry"> regular issue entry form</a>.
+ </div>
+ </div>
+ );
+ }
+
+ const nextEnabled = (userPersona != IssueWizardPersona.Contributor) && checkExisting && (category != '');
return (
<>
<p className={classes.header}>Report an issue with Chromium</p>
@@ -86,27 +139,35 @@
<p className={classes.subheader}>
Please select your following role: <span className={classes.red}>*</span>
</p>
- <RadioDescription value={userType} setValue={setUserType} />
- <div className={classes.subheader}>
- Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
- </div>
- <SelectMenu option={category} setOption={setCategory} />
- <div className={classes.warningBox}>
- <p className={classes.warningHeader}> Avoid duplicate issue reports:</p>
+ <RadioDescription selectedRadio={userPersona} onClickRadio={onSelectUserPersona} />
+ { userPersona === IssueWizardPersona.Contributor ? contributorAlert() :
<div>
- <div className={classes.star}>*</div>
- <FormControlLabel className={classes.pad}
- control={
- <CustomCheckbox
- checked={checkExisting}
- onChange={handleCheckChange}
- name="warningCheck"
+ <div className={classes.subheader}>
+ Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
+ </div>
+ <SelectMenu optionsList={categoryList} selectedOption={category} setOption={setCategory} />
+ <div className={classes.warningBox}>
+ <p className={classes.warningHeader}> <span className={classes.star}>*</span>Avoid duplicate issue reports:</p>
+ <div>
+ <FormControlLabel className={classes.pad}
+ control={
+ <CustomCheckbox
+ checked={checkExisting}
+ onChange={handleCheckChange}
+ name="warningCheck"
+ />
+ }
+ label={
+ <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>
+ }
/>
- }
- label="By checking this box, I'm acknowledging that I have searched for existing issues that already report this problem."
- />
+ </div>
+ </div>
</div>
- </div>
+ }
+ { userPersona === IssueWizardPersona.Contributor ? null :
+ <DotMobileStepper nextEnabled={nextEnabled} activeStep={0} setActiveStep={setActiveStep}/>
+ }
</>
);
-}
\ No newline at end of file
+}