Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: add tooltips to new project creation form config buttons (#7213)

Browse Source 
This PR adds tooltips to the new project creation form buttons to make
it clearer what they do. The tooltips tell you what the buttons do and
contains the same description that we use for docs.


![image](https://github.com/Unleash/unleash/assets/17786332/74667ff8-25b7-4daa-bb93-8938fe4e3dd2)

The tooltips will cover other buttons on narrow windows, but I think
that's an acceptable tradeoff


![image](https://github.com/Unleash/unleash/assets/17786332/9886f717-9db9-40bd-bd0b-0e6150896889)
This commit is contained in:
Thomas Heartman 2024-05-30 08:30:44 +02:00 committed by GitHub
parent 95f5f7a20b
commit 50c725e2a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import {
type ChangeRequestTableConfigButtonProps = Pick<
ConfigButtonProps,
'button' | 'onOpen' | 'onClose' | 'description'
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
> & {
search: {
label: string;

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

@ -7,6 +7,7 @@ import {
HiddenDescription,
ButtonLabel,
} from './ConfigButton.styles';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
export type ConfigButtonProps = {
button: { label: string; icon: ReactNode; labelWidth?: string };
@ -16,6 +17,7 @@ export type ConfigButtonProps = {
preventOpen?: boolean;
anchorEl: HTMLDivElement | null | undefined;
setAnchorEl: (el: HTMLDivElement | null | undefined) => void;
tooltipHeader: string;
};
export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
@ -27,6 +29,7 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
preventOpen,
anchorEl,
setAnchorEl,
tooltipHeader,
}) => {
const ref = useRef<HTMLDivElement>(null);
const descriptionId = uuidv4();
@ -44,20 +47,30 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
return (
<>
<Box ref={ref}>
<Button
variant='outlined'
color='primary'
startIcon={button.icon}
onClick={() => {
if (!preventOpen) {
open();
}
}}
<TooltipResolver
titleComponent={
<article>
<h3>{tooltipHeader}</h3>
<p>{description}</p>
</article>
}
variant='custom'
>
<ButtonLabel labelWidth={button.labelWidth}>
{button.label}
</ButtonLabel>
</Button>
<Button
variant='outlined'
color='primary'
startIcon={button.icon}
onClick={() => {
if (!preventOpen) {
open();
}
}}
>
<ButtonLabel labelWidth={button.labelWidth}>
{button.label}
</ButtonLabel>
</Button>
</TooltipResolver>
</Box>
<StyledPopover
open={Boolean(anchorEl)}

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

@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList';
type MultiSelectConfigButtonProps = Pick<
ConfigButtonProps,
'button' | 'onOpen' | 'onClose' | 'description'
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
> &
Pick<DropdownListProps, 'search' | 'options'> & {
selectedOptions: Set<string>;

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

@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList';
type SingleSelectConfigButtonProps = Pick<
ConfigButtonProps,
'button' | 'onOpen' | 'onClose' | 'description'
'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
> &
Pick<DropdownListProps, 'search' | 'onChange' | 'options'>;

4
frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
View File

@ -180,6 +180,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
<OptionButtons>
<MultiSelectConfigButton
tooltipHeader='Select project environments'
description={configButtonData.environments.text}
selectedOptions={projectEnvironments}
options={activeEnvironments.map((env) => ({
@ -206,6 +207,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
/>
<SingleSelectConfigButton
tooltipHeader='Set default project stickiness'
description={configButtonData.stickiness.text}
options={stickinessOptions.map(({ key, ...rest }) => ({
value: key,
@ -233,6 +235,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
condition={isEnterprise()}
show={
<SingleSelectConfigButton
tooltipHeader='Set project mode'
description={configButtonData.mode.text}
options={projectModeOptions}
onChange={(value: any) => {
@ -258,6 +261,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
condition={isEnterprise()}
show={
<ChangeRequestTableConfigButton
tooltipHeader='Configure change requests'
description={configButtonData.changeRequests.text}
activeEnvironments={
availableChangeRequestEnvironments