feat: send doc icons to sidebar

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

@@ -1,5 +1,4 @@
 import { formatUnknownError } from 'utils/formatUnknownError';
-import StickinessIcon from '@mui/icons-material/FormatPaint';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import useToast from 'hooks/useToast';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
@@ -15,6 +14,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Button, Dialog, styled } from '@mui/material';
+import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 
 interface ICreateProjectDialogueProps {
     open: boolean;
@@ -37,6 +37,11 @@ const StyledButton = styled(Button)(({ theme }) => ({
     marginLeft: theme.spacing(3),
 }));
 
+const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
+    fill: theme.palette.common.white,
+    stroke: theme.palette.common.white,
+}));
+
 export const CreateProjectDialogue = ({
     open,
     onClose,
@@ -69,8 +74,10 @@ export const CreateProjectDialogue = ({
         errors,
     } = useProjectForm();
 
-    const generalDocumentation =
+    const generalDocumentation = {
-        'Projects allows you to group feature flags together in the management UI.';
+        icon: <StyledProjectIcon />,
+        text: 'Projects allows you to group feature flags together in the management UI.',
+    };
 
     const [documentation, setDocumentation] = useState(generalDocumentation);
 
@@ -122,10 +129,10 @@ export const CreateProjectDialogue = ({
         <StyledDialog open={open} onClose={onClose}>
             <FormTemplate
                 disablePadding
-                description={documentation}
+                description={documentation.text}
+                documentationIcon={documentation.icon}
                 documentationLink='https://docs.getunleash.io/reference/projects'
                 documentationLinkLabel='Projects documentation'
-                documentationIcon={<StickinessIcon />}
                 formatApiCode={formatApiCode}
             >
                 <NewProjectForm

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

@@ -15,6 +15,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { useStickinessOptions } from 'hooks/useStickinessOptions';
 import { ReactComponent as ChangeRequestIcon } from 'assets/icons/merge.svg';
+import type { ReactNode } from 'react';
 
 const StyledForm = styled('form')(({ theme }) => ({
     background: theme.palette.background.default,
@@ -37,7 +38,8 @@ const TopGrid = styled(StyledFormSection)(({ theme }) => ({
 }));
 
 const StyledIcon = styled(ProjectIcon)(({ theme }) => ({
-    color: theme.palette.primary.main,
+    fill: theme.palette.primary.main,
+    stroke: theme.palette.primary.main,
 }));
 
 const StyledHeader = styled(Typography)(({ theme }) => ({
@@ -108,7 +110,7 @@ type FormProps = {
     mode: 'Create' | 'Edit';
     clearErrors: () => void;
     validateProjectId: () => void;
-    overrideDocumentation: (description: string) => void;
+    overrideDocumentation: (args: { text: string; icon: ReactNode }) => void;
     clearDocumentationOverride: () => void;
 };
 
@@ -216,9 +218,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         placeholder: 'Select project environments',
                     }}
                     onOpen={() =>
-                        overrideDocumentation(
+                        overrideDocumentation({
-                            `Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`,
+                            icon: <EnvironmentsIcon />,
-                        )
+                            text: `Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`,
+                        })
                     }
                     onClose={clearDocumentationOverride}
                 />
@@ -240,9 +243,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         placeholder: 'Select default stickiness',
                     }}
                     onOpen={() =>
-                        overrideDocumentation(
+                        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.',
+                            icon: <StickinessIcon />,
-                        )
+                            text: '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}
                 />
@@ -264,9 +268,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
                                 placeholder: 'Select project mode',
                             }}
                             onOpen={() =>
-                                overrideDocumentation(
+                                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.',
+                                    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.',
+                                })
                             }
                             onClose={clearDocumentationOverride}
                         />
@@ -309,9 +314,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
                                 projectChangeRequestConfiguration
                             }
                             onOpen={() =>
-                                overrideDocumentation(
+                                overrideDocumentation({
-                                    'Change requests can be configured per environment and require changes to go through an approval process before being applied.',
+                                    icon: <ChangeRequestIcon />,
-                                )
+                                    text: 'Change requests can be configured per environment and require changes to go through an approval process before being applied.',
+                                })
                             }
                             onClose={clearDocumentationOverride}
                         />