diff --git a/frontend/src/component/project/Project/HiddenProjectIconWithTooltip/HiddenProjectIconWithTooltip.tsx b/frontend/src/component/project/Project/HiddenProjectIconWithTooltip/HiddenProjectIconWithTooltip.tsx new file mode 100644 index 0000000000..bb753b5caa --- /dev/null +++ b/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 = () => ( + + + +); diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 58427523a0..500e00c896 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/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} /> + } + /> {projectName} diff --git a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/CollaborationModeTooltip.tsx b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/CollaborationModeTooltip.tsx index 0afaab9e12..659ba8cdb1 100644 --- a/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/CollaborationModeTooltip.tsx +++ b/frontend/src/component/project/Project/ProjectEnterpriseSettingsForm/CollaborationModeTooltip.tsx @@ -23,13 +23,13 @@ export const CollaborationModeTooltip: FC = () => { open: - everyone can submit change requests + Everyone can submit change requests protected: - only admins and project members can submit change + Only admins and project members can submit change requests @@ -39,8 +39,9 @@ export const CollaborationModeTooltip: FC = () => { private: - only projects members can and access see the - project + Only admins, editors and project members can + see and access the project and associated + feature toggles } diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts index bf78de9c48..397947a832 100644 --- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts +++ b/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', +})); diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx index 52ff4a5eac..f35d3b612b 100644 --- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx +++ b/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 = ({ -
- -
+ + } + elseShow={} + /> + diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx index a9f5c5ce67..a6d8d9279e 100644 --- a/frontend/src/component/project/ProjectList/ProjectList.tsx +++ b/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 } diff --git a/frontend/src/component/project/ProjectList/loadingData.ts b/frontend/src/component/project/ProjectList/loadingData.ts index 04de3f2973..4e6f4d7033 100644 --- a/frontend/src/component/project/ProjectList/loadingData.ts +++ b/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: '', }, ]; diff --git a/frontend/src/interfaces/project.ts b/frontend/src/interfaces/project.ts index 06d4a3a9d2..b17f6fb86d 100644 --- a/frontend/src/interfaces/project.ts +++ b/frontend/src/interfaces/project.ts @@ -10,6 +10,7 @@ export interface IProjectCard { health: number; description: string; featureCount: number; + mode: string; memberCount?: number; favorite?: boolean; }