Feat/private project badge (#5373)

Adds an icon with tooltip for private projects in ProjectCard and
Project header:

<img width="528" alt="Skjermbilde 2023-11-21 kl 10 58 13"
src="https://github.com/Unleash/unleash/assets/16081982/28004c11-a20d-4740-98f4-127f41639896">

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

@@ -0,0 +1,17 @@
+import { styled } from '@mui/material';
+import { VisibilityOff } from '@mui/icons-material';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
+
+export const StyledVisibilityIcon = styled(VisibilityOff)(({ theme }) => ({
+    color: theme.palette.action.disabled,
+}));
+
+export const HiddenProjectIconWithTooltip = () => (
+    <HtmlTooltip
+        title={`This projects collaboration mode is set to private. The project and associated feature 
+                            toggles can only be seen by you and the members of the project`}
+        arrow
+    >
+        <StyledVisibilityIcon />
+    </HtmlTooltip>
+);

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

@@ -41,6 +41,7 @@ import { Badge } from 'component/common/Badge/Badge';
 import { ProjectDoraMetrics } from './ProjectDoraMetrics/ProjectDoraMetrics';
 import { UiFlags } from 'interfaces/uiConfig';
 import { ExperimentalProjectFeatures } from './ExperimentalProjectFeatures/ExperimentalProjectFeatures';
+import { HiddenProjectIconWithTooltip } from './HiddenProjectIconWithTooltip/HiddenProjectIconWithTooltip';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -189,6 +190,10 @@ export const Project = () => {
                                 isFavorite={project?.favorite}
                             />
                             <StyledProjectTitle>
+                                <ConditionallyRender
+                                    condition={project?.mode === 'private'}
+                                    show={<HiddenProjectIconWithTooltip />}
+                                />
                                 <StyledName data-loading>
                                     {projectName}
                                 </StyledName>

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

@@ -23,13 +23,13 @@ export const CollaborationModeTooltip: FC = () => {
                     <Box>
                         <StyledTitle>open: </StyledTitle>
                         <StyledDescription>
-                            everyone can submit change requests
+                            Everyone can submit change requests
                         </StyledDescription>
                     </Box>
                     <Box sx={{ mt: 2 }}>
                         <StyledTitle>protected: </StyledTitle>
                         <StyledDescription>
-                            only admins and project members can submit change
+                            Only admins and project members can submit change
                             requests
                         </StyledDescription>
                     </Box>
@@ -39,8 +39,9 @@ export const CollaborationModeTooltip: FC = () => {
                             <Box sx={{ mt: 2 }}>
                                 <StyledTitle>private: </StyledTitle>
                                 <StyledDescription>
-                                    only projects members can and access see the
+                                    Only admins, editors and project members can
-                                    project
+                                    see and access the project and associated
+                                    feature toggles
                                 </StyledDescription>
                             </Box>
                         }

frontend/src/component/project/ProjectCard/ProjectCard.styles.ts

@@ -75,3 +75,8 @@ export const StyledParagraphInfo = styled('p')(({ theme }) => ({
     color: theme.palette.primary.dark,
     fontWeight: 'bold',
 }));
+
+export const StyledIconBox = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+}));

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { Menu, MenuItem } from '@mui/material';
+import { Menu, MenuItem, Tooltip, Box } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import React, { SyntheticEvent, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -26,8 +26,10 @@ import {
     StyledDivInfo,
     StyledDivInfoContainer,
     StyledParagraphInfo,
+    StyledIconBox,
 } from './ProjectCard.styles';
 import useToast from 'hooks/useToast';
+import { HiddenProjectIconWithTooltip } from '../Project/HiddenProjectIconWithTooltip/HiddenProjectIconWithTooltip';
 
 interface IProjectCardProps {
     name: string;
@@ -37,6 +39,7 @@ interface IProjectCardProps {
     id: string;
     onHover: () => void;
     isFavorite?: boolean;
+    mode: string;
 }
 
 export const ProjectCard = ({
@@ -46,6 +49,7 @@ export const ProjectCard = ({
     memberCount,
     onHover,
     id,
+    mode,
     isFavorite = false,
 }: IProjectCardProps) => {
     const { hasAccess } = useContext(AccessContext);
@@ -127,9 +131,13 @@ export const ProjectCard = ({
                     </MenuItem>
                 </Menu>
             </StyledDivHeader>
-            <div data-loading>
+            <StyledIconBox data-loading>
-                <StyledProjectIcon />
+                <ConditionallyRender
-            </div>
+                    condition={mode === 'private'}
+                    show={<HiddenProjectIconWithTooltip />}
+                    elseShow={<StyledProjectIcon />}
+                />
+            </StyledIconBox>
             <StyledDivInfo>
                 <StyledDivInfoContainer>
                     <StyledParagraphInfo data-loading>

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -245,6 +245,7 @@ export const ProjectListNew = () => {
                                         key={project.id}
                                         name={project.name}
                                         id={project.id}
+                                        mode={project.mode}
                                         memberCount={2}
                                         health={95}
                                         featureCount={4}
@@ -263,6 +264,7 @@ export const ProjectListNew = () => {
                                                     handleHover(project.id)
                                                 }
                                                 name={project.name}
+                                                mode={project.mode}
                                                 memberCount={
                                                     project.memberCount ?? 0
                                                 }

frontend/src/component/project/ProjectList/loadingData.ts

@@ -7,6 +7,7 @@ const loadingData = [
         featureCount: 4,
         createdAt: '',
         description: '',
+        mode: '',
     },
     {
         id: 'loading2',
@@ -16,6 +17,7 @@ const loadingData = [
         featureCount: 4,
         createdAt: '',
         description: '',
+        mode: '',
     },
     {
         id: 'loading3',
@@ -25,6 +27,7 @@ const loadingData = [
         featureCount: 4,
         createdAt: '',
         description: '',
+        mode: '',
     },
     {
         id: 'loading4',
@@ -34,6 +37,7 @@ const loadingData = [
         featureCount: 4,
         createdAt: '',
         description: '',
+        mode: '',
     },
 ];
 

frontend/src/interfaces/project.ts

@@ -10,6 +10,7 @@ export interface IProjectCard {
     health: number;
     description: string;
     featureCount: number;
+    mode: string;
     memberCount?: number;
     favorite?: boolean;
 }