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;
}