feat: show documentation relating to the specific thing your configuring in the new project form (#6993)

This PR updates the documentation text in the new project form to show
the documentation relating to the specific thing you're configuring.

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

@@ -16,6 +16,7 @@ import { GO_BACK } from 'constants/navigate';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Button, styled } from '@mui/material';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { useState } from 'react';
 
 const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
 
@@ -51,6 +52,14 @@ const CreateProject = () => {
         errors,
     } = useProjectForm();
 
+    const generalDocumentation =
+        'Projects allows you to group feature toggles together in the management UI.';
+
+    const [documentation, setDocumentation] = useState(generalDocumentation);
+
+    const clearDocumentationOverride = () =>
+        setDocumentation(generalDocumentation);
+
     const useNewProjectForm = useUiFlag('newCreateProjectUI');
 
     const { createProject, loading } = useProjectApi();
@@ -102,7 +111,7 @@ const CreateProject = () => {
             <FormTemplate
                 disablePadding
                 loading={loading}
-                description='Projects allows you to group feature toggles together in the management UI.'
+                description={documentation}
                 documentationLink='https://docs.getunleash.io/reference/projects'
                 documentationLinkLabel='Projects documentation'
                 formatApiCode={formatApiCode}
@@ -131,6 +140,8 @@ const CreateProject = () => {
                     mode='Create'
                     clearErrors={clearErrors}
                     validateProjectId={validateProjectId}
+                    overrideDocumentation={setDocumentation}
+                    clearDocumentationOverride={clearDocumentationOverride}
                 >
                     <StyledButton onClick={handleCancel}>Cancel</StyledButton>
                     <CreateButton

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

@@ -109,6 +109,8 @@ type FormProps = {
     mode: 'Create' | 'Edit';
     clearErrors: () => void;
     validateProjectId: () => void;
+    overrideDocumentation: (description: string) => void;
+    clearDocumentationOverride: () => void;
 };
 
 const PROJECT_NAME_INPUT = 'PROJECT_NAME_INPUT';
@@ -137,6 +139,8 @@ export const NewProjectForm: React.FC<FormProps> = ({
     errors,
     mode,
     clearErrors,
+    overrideDocumentation,
+    clearDocumentationOverride,
 }) => {
     const { isEnterprise } = useUiConfig();
     const { environments: allEnvironments } = useEnvironments();
@@ -219,6 +223,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         label: 'Filter project environments',
                         placeholder: 'Select project environments',
                     }}
+                    onOpen={() =>
+                        overrideDocumentation(
+                            `Each feature toggle can have a separate configuration per environment. This setting configures which environments your project should start with.`,
+                        )
+                    }
+                    onClose={clearDocumentationOverride}
                 />
 
                 <SingleSelectList
@@ -237,6 +247,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         label: 'Filter stickiness options',
                         placeholder: 'Select default stickiness',
                     }}
+                    onOpen={() =>
+                        overrideDocumentation(
+                            'Stickiness is used to guarantee that your users see the same result when using a gradual rollout. Default stickiness allows you to choose which field is used by default in this project.',
+                        )
+                    }
+                    onClose={clearDocumentationOverride}
                 />
 
                 <ConditionallyRender
@@ -255,6 +271,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                                 label: 'Filter project mode options',
                                 placeholder: 'Select project mode',
                             }}
+                            onOpen={() =>
+                                overrideDocumentation(
+                                    '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.',
+                                )
+                            }
+                            onClose={clearDocumentationOverride}
                         />
                     }
                 />
@@ -294,6 +316,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                             projectChangeRequestConfiguration={
                                 projectChangeRequestConfiguration
                             }
+                            onOpen={() =>
+                                overrideDocumentation(
+                                    'Change requests can be configured per environment and require changes to go through an approval process before being applied.',
+                                )
+                            }
+                            onClose={clearDocumentationOverride}
                         />
                     }
                 />

frontend/src/component/project/Project/CreateProject/SelectionButton.tsx

@@ -79,6 +79,8 @@ type CombinedSelectProps = {
         placeholder: string;
     };
     multiselect?: { selectedOptions: Set<string> };
+    onOpen?: () => void;
+    onClose?: () => void;
 };
 
 const CombinedSelect: FC<CombinedSelectProps> = ({
@@ -87,6 +89,8 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
     button,
     search,
     multiselect,
+    onOpen = () => {},
+    onClose = () => {},
 }) => {
     const ref = useRef<HTMLDivElement>(null);
     const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>();
@@ -95,16 +99,18 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
     const open = () => {
         setSearchText('');
         setAnchorEl(ref.current);
+        onOpen();
     };
 
-    const onClose = () => {
+    const handleClose = () => {
         setAnchorEl(null);
+        onClose();
     };
 
     const onSelection = (selected: string) => {
         onChange(selected);
         if (!multiselect) {
-            onClose();
+            handleClose();
         }
     };
 
@@ -135,7 +141,7 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
             <StyledPopover
                 open={Boolean(anchorEl)}
                 anchorEl={anchorEl}
-                onClose={onClose}
+                onClose={handleClose}
                 anchorOrigin={{
                     vertical: 'bottom',
                     horizontal: 'left',
@@ -222,7 +228,7 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
 
 type MultiselectListProps = Pick<
     CombinedSelectProps,
-    'options' | 'button' | 'search'
+    'options' | 'button' | 'search' | 'onOpen' | 'onClose'
 > & {
     selectedOptions: Set<string>;
     onChange: (values: Set<string>) => void;
@@ -258,14 +264,17 @@ export const MultiselectList: FC<MultiselectListProps> = ({
 
 type SingleSelectListProps = Pick<
     CombinedSelectProps,
-    'options' | 'button' | 'search' | 'onChange'
+    'options' | 'button' | 'search' | 'onChange' | 'onOpen' | 'onClose'
 >;
 
 export const SingleSelectList: FC<SingleSelectListProps> = (props) => {
     return <CombinedSelect {...props} />;
 };
 
-type TableSelectProps = Pick<CombinedSelectProps, 'button' | 'search'> & {
+type TableSelectProps = Pick<
+    CombinedSelectProps,
+    'button' | 'search' | 'onOpen' | 'onClose'
+> & {
     updateProjectChangeRequestConfiguration: {
         disableChangeRequests: (env: string) => void;
         enableChangeRequests: (env: string, requiredApprovals: number) => void;
@@ -287,6 +296,8 @@ export const TableSelect: FC<TableSelectProps> = ({
     projectChangeRequestConfiguration,
     updateProjectChangeRequestConfiguration,
     activeEnvironments,
+    onOpen = () => {},
+    onClose = () => {},
 }) => {
     const configured = useMemo(() => {
         return Object.fromEntries(
@@ -327,10 +338,12 @@ export const TableSelect: FC<TableSelectProps> = ({
     const open = () => {
         setSearchText('');
         setAnchorEl(ref.current);
+        onOpen();
     };
 
-    const onClose = () => {
+    const handleClose = () => {
         setAnchorEl(null);
+        onClose();
     };
 
     const filteredEnvs = tableEnvs.filter((env) =>
@@ -370,7 +383,7 @@ export const TableSelect: FC<TableSelectProps> = ({
             <StyledPopover
                 open={Boolean(anchorEl)}
                 anchorEl={anchorEl}
-                onClose={onClose}
+                onClose={handleClose}
                 anchorOrigin={{
                     vertical: 'bottom',
                     horizontal: 'left',