From c129541df6e874899bc7d3797a5c3c1f18ddc655 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 5 Jun 2024 09:20:18 +0200
Subject: [PATCH] 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.
---
 .../ChangeRequestTableConfigButton.tsx        |  2 +-
 .../ConfigButtons/ConfigButton.styles.tsx     | 11 ++++++
 .../ConfigButtons/ConfigButton.tsx            | 22 ++++++++---
 .../ConfigButtons/MultiSelectConfigButton.tsx |  2 +-
 .../SingleSelectConfigButton.tsx              |  2 +-
 .../NewProjectForm.styles.tsx                 | 13 +++++++
 .../NewCreateProjectForm/NewProjectForm.tsx   | 39 ++++++++++++++++---
 7 files changed, 77 insertions(+), 14 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 964e90c5cb3b..4637521dc9ee 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' | 'tooltipHeader'
+    'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
 > & {
     search: {
         label: string;
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
index 5a71b39b6e18..76d7d75f73e1 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx
@@ -30,3 +30,14 @@ export const ButtonLabel = styled('span', {
         width: 'max-content',
     },
 }));
+
+export const StyledTooltipContent = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    paddingBlock: theme.spacing(1),
+
+    '& > *': {
+        margin: 0,
+    },
+}));
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 6e1621c991c9..473ac84959fa 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx
@@ -6,18 +6,27 @@ import {
     StyledPopover,
     HiddenDescription,
     ButtonLabel,
+    StyledTooltipContent,
 } from './ConfigButton.styles';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 
 export type ConfigButtonProps = {
-    button: { label: string; icon: ReactNode; labelWidth?: string };
+    button: {
+        label: string;
+        icon: ReactNode;
+        labelWidth?: string;
+        additionalTooltipContent?: ReactNode;
+    };
     onOpen?: () => void;
     onClose?: () => void;
     description: string;
     preventOpen?: boolean;
     anchorEl: HTMLDivElement | null | undefined;
     setAnchorEl: (el: HTMLDivElement | null | undefined) => void;
-    tooltipHeader: string;
+    tooltip: {
+        header: string;
+        additionalContent?: ReactNode;
+    };
 };
 
 export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
@@ -29,7 +38,7 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
     preventOpen,
     anchorEl,
     setAnchorEl,
-    tooltipHeader,
+    tooltip,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
     const descriptionId = uuidv4();
@@ -49,10 +58,11 @@ export const ConfigButton: FC<PropsWithChildren<ConfigButtonProps>> = ({
             <Box ref={ref}>
                 <TooltipResolver
                     titleComponent={
-                        <article>
-                            <h3>{tooltipHeader}</h3>
+                        <StyledTooltipContent>
+                            <h3>{tooltip.header}</h3>
                             <p>{description}</p>
-                        </article>
+                            {tooltip.additionalContent}
+                        </StyledTooltipContent>
                     }
                     variant='custom'
                 >
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 c8ed1c6ade58..66b09bfe07ca 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' | 'tooltipHeader'
+    'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
 > &
     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 072cb86c4e08..9c5903e428f7 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' | 'tooltipHeader'
+    'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip'
 > &
     Pick<DropdownListProps, 'search' | 'onChange' | 'options'>;
 
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
index 5e4da3427e95..610b51922ac2 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx
@@ -77,3 +77,16 @@ export const FormActions = styled(StyledFormSection)(({ theme }) => ({
         },
     },
 }));
+
+export const StyledDefinitionList = styled('dl')(({ theme }) => ({
+    dt: {
+        fontWeight: 'bold',
+        '&:after': {
+            content: '":"',
+        },
+    },
+
+    'dd + dt': {
+        marginBlockStart: theme.spacing(1),
+    },
+}));
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
index 5783a6518a32..2d6f4436cf5e 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx
@@ -14,6 +14,7 @@ import {
     OptionButtons,
     ProjectDescriptionContainer,
     ProjectNameContainer,
+    StyledDefinitionList,
     StyledForm,
     StyledHeader,
     StyledIcon,
@@ -70,7 +71,30 @@ const configButtonData = {
     },
     mode: {
         icon: <ProjectModeIcon />,
-        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.',
+        text: "A project's collaboration mode defines who should be allowed see your project and create change requests in it.",
+        additionalTooltipContent: (
+            <>
+                <p>The modes and their functions are:</p>
+                <StyledDefinitionList>
+                    <dt>Open</dt>
+                    <dd>
+                        Anyone can see the project and anyone can create change
+                        requests.
+                    </dd>
+                    <dt>Protected</dt>
+                    <dd>
+                        Anyone can see the project, but only admins and project
+                        members can submit change requests.
+                    </dd>
+                    <dt>Private</dt>
+                    <dd>
+                        Hides the project from users with the "viewer" root role
+                        who are not members of the project. Only project members
+                        and admins can submit change requests.
+                    </dd>
+                </StyledDefinitionList>
+            </>
+        ),
     },
     changeRequests: {
         icon: <ChangeRequestIcon />,
@@ -180,7 +204,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
 
             <OptionButtons>
                 <MultiSelectConfigButton
-                    tooltipHeader='Select project environments'
+                    tooltip={{ header: 'Select project environments' }}
                     description={configButtonData.environments.text}
                     selectedOptions={projectEnvironments}
                     options={activeEnvironments.map((env) => ({
@@ -207,7 +231,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                 />
 
                 <SingleSelectConfigButton
-                    tooltipHeader='Set default project stickiness'
+                    tooltip={{ header: 'Set default project stickiness' }}
                     description={configButtonData.stickiness.text}
                     options={stickinessOptions.map(({ key, ...rest }) => ({
                         value: key,
@@ -235,7 +259,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                     condition={isEnterprise()}
                     show={
                         <SingleSelectConfigButton
-                            tooltipHeader='Set project mode'
+                            tooltip={{
+                                header: 'Set project collaboration mode',
+                                additionalContent:
+                                    configButtonData.mode
+                                        .additionalTooltipContent,
+                            }}
                             description={configButtonData.mode.text}
                             options={projectModeOptions}
                             onChange={(value: any) => {
@@ -261,7 +290,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                     condition={isEnterprise()}
                     show={
                         <ChangeRequestTableConfigButton
-                            tooltipHeader='Configure change requests'
+                            tooltip={{ header: 'Configure change requests' }}
                             description={configButtonData.changeRequests.text}
                             activeEnvironments={
                                 availableChangeRequestEnvironments