feat: project mode tooltip (#3353)

frontend/src/component/project/Project/ProjectForm/CollaborationModeTooltip.tsx

@@ -0,0 +1,38 @@
+import { Box, styled, Typography } from '@mui/material';
+import { HelpOutline } from '@mui/icons-material';
+import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
+import React, { FC } from 'react';
+
+const StyledTitle = styled(Typography)(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    display: ' inline',
+}));
+const StyledDescription = styled(Typography)(({ theme }) => ({
+    display: ' inline',
+    color: theme.palette.text.secondary,
+}));
+
+export const CollaborationModeTooltip: FC = () => (
+    <HtmlTooltip
+        title={
+            <>
+                <Box>
+                    <StyledTitle>open: </StyledTitle>
+                    <StyledDescription>
+                        everyone can submit change requests
+                    </StyledDescription>
+                </Box>
+                <Box sx={{ mt: 2 }}>
+                    <StyledTitle>protected: </StyledTitle>
+                    <StyledDescription>
+                        only project members can submit change requests
+                    </StyledDescription>
+                </Box>
+            </>
+        }
+        arrow
+        describeChild
+    >
+        <HelpOutline />
+    </HtmlTooltip>
+);

frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts

@@ -13,6 +13,7 @@ export const StyledContainer = styled('div')(() => ({
 
 export const StyledDescription = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
 }));
 
 export const StyledInput = styled(Input)(({ theme }) => ({

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

@@ -14,6 +14,8 @@ import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrate
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import Select from 'component/common/select';
 import { DefaultStickiness, ProjectMode } from '../hooks/useProjectForm';
+import { Box } from '@mui/material';
+import { CollaborationModeTooltip } from './CollaborationModeTooltip';
 
 interface IProjectForm {
     projectId: string;
@@ -138,14 +140,17 @@ const ProjectForm: React.FC<IProjectForm> = ({
                     condition={Boolean(projectModeFlag)}
                     show={
                         <>
-                            <StyledDescription>
+                            <Box sx={{ display: 'flex' }}>
-                                What is your project mode?
+                                <StyledDescription>
-                            </StyledDescription>
+                                    What is your project collaboration mode?
+                                </StyledDescription>
+                                <CollaborationModeTooltip />
+                            </Box>
                             <Select
                                 id="project-mode"
                                 value={projectMode}
-                                label="Project mode"
+                                label="Project collaboration mode"
-                                name="Project mode"
+                                name="Project collaboration mode"
                                 onChange={e => {
                                     setProjectMode?.(
                                         e.target.value as ProjectMode
@@ -155,7 +160,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                                     { key: 'open', label: 'open' },
                                     { key: 'protected', label: 'protected' },
                                 ]}
-                                style={{ minWidth: '150px' }}
+                                style={{ minWidth: '200px' }}
                             ></Select>
                         </>
                     }