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)

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;

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
+                <TooltipResolver
-                    variant='outlined'
+                    titleComponent={
-                    color='primary'
+                        <article>
-                    startIcon={button.icon}
+                            <h3>{tooltipHeader}</h3>
-                    onClick={() => {
+                            <p>{description}</p>
-                        if (!preventOpen) {
+                        </article>
-                            open();
+                    }
-                        }
+                    variant='custom'
-                    }}
                 >
-                    <ButtonLabel labelWidth={button.labelWidth}>
+                    <Button
-                        {button.label}
+                        variant='outlined'
-                    </ButtonLabel>
+                        color='primary'
-                </Button>
+                        startIcon={button.icon}
+                        onClick={() => {
+                            if (!preventOpen) {
+                                open();
+                            }
+                        }}
+                    >
+                        <ButtonLabel labelWidth={button.labelWidth}>
+                            {button.label}
+                        </ButtonLabel>
+                    </Button>
+                </TooltipResolver>
             </Box>
             <StyledPopover
                 open={Boolean(anchorEl)}

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>;

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'>;
 

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