Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/react/issue-wizard/SelectMenu.tsx b/static_src/react/issue-wizard/SelectMenu.tsx
new file mode 100644
index 0000000..3b0b96d
--- /dev/null
+++ b/static_src/react/issue-wizard/SelectMenu.tsx
@@ -0,0 +1,133 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import React from 'react';
+import {createTheme, Theme} from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/styles';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
+
+const CATEGORIES = [
+ {
+ value: 'UI',
+ label: 'UI',
+ },
+ {
+ value: 'Accessibility',
+ label: 'Accessibility',
+ },
+ {
+ value: 'Network/Downloading',
+ label: 'Network/Downloading',
+ },
+ {
+ value: 'Audio/Video',
+ label: 'Audio/Video',
+ },
+ {
+ value: 'Content',
+ label: 'Content',
+ },
+ {
+ value: 'Apps',
+ label: 'Apps',
+ },
+ {
+ value: 'Extensions/Themes',
+ label: 'Extensions/Themes',
+ },
+ {
+ value: 'Webstore',
+ label: 'Webstore',
+ },
+ {
+ value: 'Sync',
+ label: 'Sync',
+ },
+ {
+ value: 'Enterprise',
+ label: 'Enterprise',
+ },
+ {
+ value: 'Installation',
+ label: 'Installation',
+ },
+ {
+ value: 'Crashes',
+ label: 'Crashes',
+ },
+ {
+ value: 'Security',
+ label: 'Security',
+ },
+ {
+ value: 'Other',
+ label: 'Other',
+ },
+];
+
+const theme: Theme = createTheme();
+
+const useStyles = makeStyles((theme: Theme) => ({
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ maxWidth: '65%',
+ },
+ textField: {
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ },
+ menu: {
+ width: '100%',
+ minWidth: '300px',
+ },
+}), {defaultTheme: theme});
+
+/**
+ * Select menu component that is located on the landing step if the
+ * Issue Wizard. The menu is used for the user to indicate the category
+ * of their bug when filing an issue.
+ *
+ * @return ReactElement.
+ */
+export default function SelectMenu({option, setOption}: {option: string, setOption: Function}) {
+ const classes = useStyles();
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+ setOption(event.target.value as string);
+ };
+
+ return (
+ <form className={classes.container} noValidate autoComplete="off">
+ <TextField
+ id="outlined-select-category"
+ select
+ label=''
+ className={classes.textField}
+ value={option}
+ onChange={handleChange}
+ InputLabelProps={{shrink: false}}
+ SelectProps={{
+ MenuProps: {
+ className: classes.menu,
+ },
+ }}
+ margin="normal"
+ variant="outlined"
+ fullWidth={true}
+ >
+ {CATEGORIES.map(option => (
+ <MenuItem
+ className={classes.menu}
+ key={option.value}
+ value={option.value}
+ data-testid="select-menu-item"
+ >
+ {option.label}
+ </MenuItem>
+ ))}
+ </TextField>
+ </form>
+ );
+}
\ No newline at end of file