Skip to content

Commit c129541

Browse files
feat: adds information about project modes to the project creation form (#7250)
This change adds information about the project modes to the new project creation form, using the tooltip for project creation modes. In doing so, it updates the config button tooltip to accept extra elements and adds styling for them. What it looks like: ![image](https://github.com/Unleash/unleash/assets/17786332/809fb48e-2404-416b-a867-6fa04978ccc1) ## a11y issues This solution does present one problem: the popover doesn't get focus, so it's impossible for you to scroll with only a keyboard. However, this is something that's present in Unleash already, and not something that I think would be easily solvable, so I don't think this is when we should solve it.
1 parent e5c3cc0 commit c129541

File tree

7 files changed

+77
-14
lines changed

7 files changed

+77
-14
lines changed

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010

1111
type ChangeRequestTableConfigButtonProps = Pick<
1212
ConfigButtonProps,
13-
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
13+
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
1414
> & {
1515
search: {
1616
label: string;

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,14 @@ export const ButtonLabel = styled('span', {
3030
width: 'max-content',
3131
},
3232
}));
33+
34+
export const StyledTooltipContent = styled('article')(({ theme }) => ({
35+
display: 'flex',
36+
flexDirection: 'column',
37+
gap: theme.spacing(1),
38+
paddingBlock: theme.spacing(1),
39+
40+
'& > *': {
41+
margin: 0,
42+
},
43+
}));

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,27 @@ import {
66
StyledPopover,
77
HiddenDescription,
88
ButtonLabel,
9+
StyledTooltipContent,
910
} from './ConfigButton.styles';
1011
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
1112

1213
export type ConfigButtonProps = {
13-
button: { label: string; icon: ReactNode; labelWidth?: string };
14+
button: {
15+
label: string;
16+
icon: ReactNode;
17+
labelWidth?: string;
18+
additionalTooltipContent?: ReactNode;
19+
};
1420
onOpen?: () => void;
1521
onClose?: () => void;
1622
description: string;
1723
preventOpen?: boolean;
1824
anchorEl: HTMLDivElement | null | undefined;
1925
setAnchorEl: (el: HTMLDivElement | null | undefined) => void;
20-
tooltipHeader: string;
26+
tooltip: {
27+
header: string;
28+
additionalContent?: ReactNode;
29+
};
2130
};
2231

2332
export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
@@ -29,7 +38,7 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
2938
preventOpen,
3039
anchorEl,
3140
setAnchorEl,
32-
tooltipHeader,
41+
tooltip,
3342
}) => {
3443
const ref = useRef<HTMLDivElement>(null);
3544
const descriptionId = uuidv4();
@@ -49,10 +58,11 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
4958
<Box ref={ref}>
5059
<TooltipResolver
5160
titleComponent={
52-
<article>
53-
<h3>{tooltipHeader}</h3>
61+
<StyledTooltipContent>
62+
<h3>{tooltip.header}</h3>
5463
<p>{description}</p>
55-
</article>
64+
{tooltip.additionalContent}
65+
</StyledTooltipContent>
5666
}
5767
variant='custom'
5868
>

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList';
44

55
type MultiSelectConfigButtonProps = Pick<
66
ConfigButtonProps,
7-
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
7+
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
88
> &
99
Pick<DropdownListProps, 'search' | 'options'> & {
1010
selectedOptions: Set<string>;

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList';
44

55
type SingleSelectConfigButtonProps = Pick<
66
ConfigButtonProps,
7-
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
7+
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
88
> &
99
Pick<DropdownListProps, 'search' | 'onChange' | 'options'>;
1010

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,16 @@ export const FormActions = styled(StyledFormSection)(({ theme }) => ({
7777
},
7878
},
7979
}));
80+
81+
export const StyledDefinitionList = styled('dl')(({ theme }) => ({
82+
dt: {
83+
fontWeight: 'bold',
84+
'&:after': {
85+
content: '":"',
86+
},
87+
},
88+
89+
'dd + dt': {
90+
marginBlockStart: theme.spacing(1),
91+
},
92+
}));

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
OptionButtons,
1515
ProjectDescriptionContainer,
1616
ProjectNameContainer,
17+
StyledDefinitionList,
1718
StyledForm,
1819
StyledHeader,
1920
StyledIcon,
@@ -70,7 +71,30 @@ const configButtonData = {
7071
},
7172
mode: {
7273
icon: <ProjectModeIcon />,
73-
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.',
74+
text: "A project's collaboration mode defines who should be allowed see your project and create change requests in it.",
75+
additionalTooltipContent: (
76+
<>
77+
<p>The modes and their functions are:</p>
78+
<StyledDefinitionList>
79+
<dt>Open</dt>
80+
<dd>
81+
Anyone can see the project and anyone can create change
82+
requests.
83+
</dd>
84+
<dt>Protected</dt>
85+
<dd>
86+
Anyone can see the project, but only admins and project
87+
members can submit change requests.
88+
</dd>
89+
<dt>Private</dt>
90+
<dd>
91+
Hides the project from users with the "viewer" root role
92+
who are not members of the project. Only project members
93+
and admins can submit change requests.
94+
</dd>
95+
</StyledDefinitionList>
96+
</>
97+
),
7498
},
7599
changeRequests: {
76100
icon: <ChangeRequestIcon />,
@@ -180,7 +204,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
180204

181205
<OptionButtons>
182206
<MultiSelectConfigButton
183-
tooltipHeader='Select project environments'
207+
tooltip={{ header: 'Select project environments' }}
184208
description={configButtonData.environments.text}
185209
selectedOptions={projectEnvironments}
186210
options={activeEnvironments.map((env) => ({
@@ -207,7 +231,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
207231
/>
208232

209233
<SingleSelectConfigButton
210-
tooltipHeader='Set default project stickiness'
234+
tooltip={{ header: 'Set default project stickiness' }}
211235
description={configButtonData.stickiness.text}
212236
options={stickinessOptions.map(({ key, ...rest }) => ({
213237
value: key,
@@ -235,7 +259,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
235259
condition={isEnterprise()}
236260
show={
237261
<SingleSelectConfigButton
238-
tooltipHeader='Set project mode'
262+
tooltip={{
263+
header: 'Set project collaboration mode',
264+
additionalContent:
265+
configButtonData.mode
266+
.additionalTooltipContent,
267+
}}
239268
description={configButtonData.mode.text}
240269
options={projectModeOptions}
241270
onChange={(value: any) => {
@@ -261,7 +290,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
261290
condition={isEnterprise()}
262291
show={
263292
<ChangeRequestTableConfigButton
264-
tooltipHeader='Configure change requests'
293+
tooltip={{ header: 'Configure change requests' }}
265294
description={configButtonData.changeRequests.text}
266295
activeEnvironments={
267296
availableChangeRequestEnvironments

0 commit comments

Comments
 (0)