diff --git a/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx index c6e4e9e88f..b31ea5653f 100644 --- a/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx @@ -154,6 +154,25 @@ export const NewProjectForm: React.FC = ({ const stickinessOptions = useStickinessOptions(projectStickiness); + const selectionButtonData = { + environments: { + icon: , + text: `Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`, + }, + stickiness: { + icon: , + text: 'Stickiness is used to guarantee that your users see the same result when using a gradual rollout. Default stickiness allows you to choose which field is used by default in this project.', + }, + mode: { + icon: , + text: 'Mode defines who should be allowed to interact and see your project. Private mode hides the project from anyone except the project owner and members.', + }, + changeRequests: { + icon: , + text: 'Change requests can be configured per environment and require changes to go through an approval process before being applied.', + }, + }; + return ( { @@ -207,6 +226,7 @@ export const NewProjectForm: React.FC = ({ ({ label: env.name, @@ -225,15 +245,13 @@ export const NewProjectForm: React.FC = ({ placeholder: 'Select project environments', }} onOpen={() => - overrideDocumentation({ - icon: , - text: `Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`, - }) + overrideDocumentation(selectionButtonData.environments) } onClose={clearDocumentationOverride} /> ({ value: key, ...rest, @@ -250,10 +268,7 @@ export const NewProjectForm: React.FC = ({ placeholder: 'Select default stickiness', }} onOpen={() => - overrideDocumentation({ - icon: , - text: 'Stickiness is used to guarantee that your users see the same result when using a gradual rollout. Default stickiness allows you to choose which field is used by default in this project.', - }) + overrideDocumentation(selectionButtonData.stickiness) } onClose={clearDocumentationOverride} /> @@ -262,6 +277,7 @@ export const NewProjectForm: React.FC = ({ condition={isEnterprise()} show={ { setProjectMode(value); @@ -275,10 +291,7 @@ export const NewProjectForm: React.FC = ({ placeholder: 'Select project mode', }} onOpen={() => - overrideDocumentation({ - icon: , - text: 'Mode defines who should be allowed to interact and see your project. Private mode hides the project from anyone except the project owner and members.', - }) + overrideDocumentation(selectionButtonData.mode) } onClose={clearDocumentationOverride} /> @@ -288,6 +301,9 @@ export const NewProjectForm: React.FC = ({ condition={isEnterprise()} show={ @@ -321,10 +337,9 @@ export const NewProjectForm: React.FC = ({ projectChangeRequestConfiguration } onOpen={() => - overrideDocumentation({ - icon: , - text: 'Change requests can be configured per environment and require changes to go through an approval process before being applied.', - }) + overrideDocumentation( + selectionButtonData.changeRequests, + ) } onClose={clearDocumentationOverride} /> diff --git a/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx index d4317514af..382d16c6d2 100644 --- a/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx +++ b/frontend/src/component/project/Project/CreateProject/SelectionButton.styles.tsx @@ -40,6 +40,11 @@ const visuallyHiddenStyles = { whiteSpace: 'nowrap', }; +export const HiddenDescription = styled('p')(() => ({ + ...visuallyHiddenStyles, + position: 'absolute', +})); + export const StyledDropdownSearch = styled(TextField, { shouldForwardProp: (prop) => prop !== 'hideLabel', })<{ hideLabel?: boolean }>(({ theme, hideLabel }) => ({ diff --git a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx index 610725b7ca..16705f9e4d 100644 --- a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx +++ b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx @@ -1,4 +1,5 @@ import Search from '@mui/icons-material/Search'; +import { v4 as uuidv4 } from 'uuid'; import { Box, Button, InputAdornment, List, ListItemText } from '@mui/material'; import { type FC, type ReactNode, useRef, useState, useMemo } from 'react'; import { @@ -8,6 +9,7 @@ import { StyledPopover, StyledDropdownSearch, TableSearchInput, + HiddenDescription, } from './SelectionButton.styles'; import { ChangeRequestTable } from './ChangeRequestTable'; @@ -81,6 +83,7 @@ type CombinedSelectProps = { multiselect?: { selectedOptions: Set }; onOpen?: () => void; onClose?: () => void; + description: string; // visually hidden, for assistive tech }; const CombinedSelect: FC = ({ @@ -91,10 +94,12 @@ const CombinedSelect: FC = ({ multiselect, onOpen = () => {}, onClose = () => {}, + description, }) => { const ref = useRef(null); const [anchorEl, setAnchorEl] = useState(); const [searchText, setSearchText] = useState(''); + const descriptionId = uuidv4(); const [recentlyClosed, setRecentlyClosed] = useState(false); const open = () => { @@ -156,7 +161,10 @@ const CombinedSelect: FC = ({ horizontal: 'left', }} > - + + {description} + + = ({ return ( = ({ type MultiselectListProps = Pick< CombinedSelectProps, - 'options' | 'button' | 'search' | 'onOpen' | 'onClose' + 'options' | 'button' | 'search' | 'onOpen' | 'onClose' | 'description' > & { selectedOptions: Set; onChange: (values: Set) => void; @@ -270,7 +279,13 @@ export const MultiselectList: FC = ({ type SingleSelectListProps = Pick< CombinedSelectProps, - 'options' | 'button' | 'search' | 'onChange' | 'onOpen' | 'onClose' + | 'options' + | 'button' + | 'search' + | 'onChange' + | 'onOpen' + | 'onClose' + | 'description' >; export const SingleSelectList: FC = (props) => { @@ -279,7 +294,7 @@ export const SingleSelectList: FC = (props) => { type TableSelectProps = Pick< CombinedSelectProps, - 'button' | 'search' | 'onOpen' | 'onClose' + 'button' | 'search' | 'onOpen' | 'onClose' | 'description' > & { updateProjectChangeRequestConfiguration: { disableChangeRequests: (env: string) => void;