Merge branch 'main' into avm99963-monorail
Merged commit 4137ed7879acadbf891e8c471108acb874dae886.
GitOrigin-RevId: b6100ffc5b1da355a35f37b13fcaaf746ee8b307
diff --git a/static_src/react/issue-wizard/SelectMenu.tsx b/static_src/react/issue-wizard/SelectMenu.tsx
index 3b0b96d..f440d55 100644
--- a/static_src/react/issue-wizard/SelectMenu.tsx
+++ b/static_src/react/issue-wizard/SelectMenu.tsx
@@ -7,65 +7,7 @@
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',
- },
-];
+import {SelectMenuOption} from './IssueWizardTypes.tsx';
const theme: Theme = createTheme();
@@ -74,15 +16,19 @@
display: 'flex',
flexWrap: 'wrap',
maxWidth: '65%',
+ marginRight: '1rem',
},
textField: {
- marginLeft: theme.spacing(1),
- marginRight: theme.spacing(1),
+ margin: '0',
},
menu: {
width: '100%',
minWidth: '300px',
},
+ description: {
+ fontSize: 'small',
+ color: 'gray',
+ },
}), {defaultTheme: theme});
/**
@@ -92,8 +38,17 @@
*
* @return ReactElement.
*/
-export default function SelectMenu({option, setOption}: {option: string, setOption: Function}) {
+type Props = {
+ optionsList: SelectMenuOption[] | null,
+ selectedOption: SelectMenuOption | null,
+ setOption: Function,
+};
+
+export default function SelectMenu(props: Props) {
const classes = useStyles();
+
+ const {optionsList, selectedOption, setOption} = props;
+
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setOption(event.target.value as string);
};
@@ -105,7 +60,7 @@
select
label=''
className={classes.textField}
- value={option}
+ value={selectedOption}
onChange={handleChange}
InputLabelProps={{shrink: false}}
SelectProps={{
@@ -117,17 +72,25 @@
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>
- ))}
+ {
+ optionsList?.map(option => (
+ <MenuItem
+ className={classes.menu}
+ key={option.name}
+ value={option.name}
+ data-testid="select-menu-item"
+ >
+ <div>
+ <div>{option.name}</div>
+ {
+ option.description ?
+ <div className={classes.description}>{option.description}</div>
+ : null
+ }
+ </div>
+ </MenuItem>))
+ }
</TextField>
</form>
);
-}
\ No newline at end of file
+}