Merge branch 'main' into avm99963-monorail
Merged commit 4137ed7879acadbf891e8c471108acb874dae886.
GitOrigin-RevId: b6100ffc5b1da355a35f37b13fcaaf746ee8b307
diff --git a/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx b/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
index 9a5a7d2..d371ef7 100644
--- a/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
+++ b/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
@@ -5,12 +5,7 @@
import React from 'react';
import { makeStyles } from '@material-ui/styles';
import { RoleSelection } from './RoleSelection/RoleSelection.tsx';
-
-const userGroups = Object.freeze({
- END_USER: 'End User',
- WEB_DEVELOPER: 'Web Developer',
- CONTRIBUTOR: 'Chromium Contributor',
-});
+import {ISSUE_WIZARD_PERSONAS_DETAIL, IssueWizardPersona} from '../IssueWizardTypes.tsx';
const useStyles = makeStyles({
flex: {
@@ -19,41 +14,48 @@
}
});
+const getUserGroupSelectors = (
+ value: IssueWizardPersona,
+ onSelectorClick:
+ (selector: string) =>
+ (event: React.MouseEvent<HTMLElement>) => any) => {
+ const selectors = new Array();
+ Object.entries(ISSUE_WIZARD_PERSONAS_DETAIL).forEach(([key, persona]) => {
+ selectors.push(
+ <RoleSelection
+ checked={IssueWizardPersona[value] === key}
+ handleOnClick={onSelectorClick(key)}
+ value={persona.name}
+ description={persona.description}
+ inputProps={{ 'aria-label': persona.name }}
+ />
+ );
+ });
+ return selectors;
+}
/**
* RadioDescription contains a set of radio buttons and descriptions (RoleSelection)
* to be chosen from in the landing step of the Issue Wizard.
*
* @returns React.ReactElement
*/
-export const RadioDescription = ({ value, setValue }: { value: string, setValue: Function }): React.ReactElement => {
+type Props = {
+ selectedRadio: IssueWizardPersona,
+ onClickRadio: Function,
+}
+
+export const RadioDescription = (props: Props): React.ReactElement => {
+ const { selectedRadio, onClickRadio } = props;
const classes = useStyles();
const handleRoleSelectionClick = (userGroup: string) =>
- (event: React.MouseEvent<HTMLElement>) => setValue(userGroup)
+ (event: React.MouseEvent<HTMLElement>) => onClickRadio(userGroup);
+
+ const userGroupsSelectors = getUserGroupSelectors(selectedRadio, handleRoleSelectionClick);
return (
<div className={classes.flex}>
- <RoleSelection
- checked={value === userGroups.END_USER}
- handleOnClick={handleRoleSelectionClick(userGroups.END_USER)}
- value={userGroups.END_USER}
- description="I am a user trying to do something on a website."
- inputProps={{ 'aria-label': userGroups.END_USER }}
- />
- <RoleSelection
- checked={value === userGroups.WEB_DEVELOPER}
- handleOnClick={handleRoleSelectionClick(userGroups.WEB_DEVELOPER)}
- value={userGroups.WEB_DEVELOPER}
- description="I am a web developer trying to build something."
- inputProps={{ 'aria-label': userGroups.WEB_DEVELOPER }}
- />
- <RoleSelection
- checked={value === userGroups.CONTRIBUTOR}
- handleOnClick={handleRoleSelectionClick(userGroups.CONTRIBUTOR)}
- value={userGroups.CONTRIBUTOR}
- description="I know about a problem in specific tests or code."
- inputProps={{ 'aria-label': userGroups.CONTRIBUTOR }}
- />
+ {userGroupsSelectors}
</div>
);
-}
\ No newline at end of file
+}