From 50c725e2a915babd69fb15bf6f4f24b52a14afa8 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 30 May 2024 08:30:44 +0200
Subject: [PATCH] feat: add tooltips to new project creation form config
 buttons (#7213)

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)
---
 .../ChangeRequestTableConfigButton.tsx        |  2 +-
 .../ConfigButtons/ConfigButton.tsx            | 39 ++++++++++++-------
 .../ConfigButtons/MultiSelectConfigButton.tsx |  2 +-
 .../SingleSelectConfigButton.tsx              |  2 +-
 .../NewCreateProjectForm/NewProjectForm.tsx   |  4 ++
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
index 58a31a21a9..964e90c5cb 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx
@@ -10,7 +10,7 @@ import {
 
 type ChangeRequestTableConfigButtonProps = Pick<
     ConfigButtonProps,
-    'button' | 'onOpen' | 'onClose' | 'description'
+    'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader'
 > & {
     search: {
         label: string;
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
index 06aaa4d8b5..6e1621c991 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
@@ -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)}
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx
index 4888cfcbaa..c8ed1c6ade 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx
@@ -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>;
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx
index e47d175418..be26d8c273 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx
@@ -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'>;
 
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
index a1edb0f92e..5783a6518a 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
@@ -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