diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 81afdb355f67..2d08492a3f36 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -45,6 +45,8 @@ import { ProjectInsights } from './ProjectInsights/ProjectInsights'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { ProjectArchived } from './ArchiveProject/ProjectArchived'; import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; +import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; +import { useUiFlag } from 'hooks/useUiFlag'; const StyledBadge = styled(Badge)(({ theme }) => ({ position: 'absolute', @@ -64,6 +66,47 @@ interface ITab { isEnterprise?: boolean; } +const CircleContainer = styled('div')(({ theme }) => ({ + position: 'absolute', + width: theme.spacing(2.5), + height: theme.spacing(2.5), + display: 'grid', + placeItems: 'center', + borderRadius: '50%', + + background: theme.palette.background.alternative, + color: theme.palette.primary.contrastText, + fontSize: theme.typography.body2.fontSize, + + // todo: revisit these values later + top: 10, + right: 0, + [theme.breakpoints.down('md')]: { + top: 2, + }, +})); + +const ActionableChangeRequestsIndicator = () => { + // todo: useSWR for this instead (maybe conditional) + const count = 0; + + if (count <= 0) { + return null; + } + + const renderedCount = count > 9 ? '9+' : count; + + return ( + + You can move + {renderedCount} + + change requests into their next phase. + + + ); +}; + export const Project = () => { const projectId = useRequiredPathParam('projectId'); const { trackEvent } = usePlausibleTracker(); @@ -78,6 +121,9 @@ export const Project = () => { const basePath = `/projects/${projectId}`; const projectName = project?.name || projectId; const { favorite, unfavorite } = useFavoriteProjectsApi(); + const useActionableChangeRequestIndicator = useUiFlag( + 'simplifyProjectOverview', + ); const [showDelDialog, setShowDelDialog] = useState(false); @@ -281,6 +327,11 @@ export const Project = () => { } /> + {useActionableChangeRequestIndicator && + tab.name === + 'change-request' && ( + + )} {(tab.isEnterprise && isPro() && enterpriseIcon) || diff --git a/frontend/src/component/project/Project/ProjectFlags.tsx b/frontend/src/component/project/Project/ProjectFlags.tsx index 8b400d24189b..0f6b98d7f37d 100644 --- a/frontend/src/component/project/Project/ProjectFlags.tsx +++ b/frontend/src/component/project/Project/ProjectFlags.tsx @@ -51,10 +51,14 @@ const ProjectOverview: FC = () => { setLastViewed(projectId); }, [projectId, setLastViewed]); + const hideChangeRequestOverview = useUiFlag('simplifyProjectOverview'); + return ( - + {hideChangeRequestOverview ? null : ( + + )} }