feat: Project meta widget (#2995)

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

@@ -17,7 +17,8 @@ export const StyledColumn = styled('div')(() => ({
     flexDirection: 'column',
 }));
 
-export const StyledName = styled('div')(() => ({
+export const StyledName = styled('h1')(({ theme }) => ({
+    fontSize: theme.typography.h1.fontSize,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',

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

@@ -186,33 +186,41 @@ export const Project = () => {
                             </PermissionIconButton>
                         </StyledDiv>
                     </StyledTopRow>
-                    <StyledColumn>
-                        <StyledProjectTitle>
-                            <div>
-                                <ConditionallyRender
-                                    condition={Boolean(project.description)}
-                                    show={
+                    <ConditionallyRender
+                        condition={!uiConfig?.flags?.newProjectOverview}
+                        // TODO: !!! Remove entire block when removing feature flag!
+                        show={
+                            <StyledColumn>
+                                <StyledProjectTitle>
+                                    <div>
+                                        <ConditionallyRender
+                                            condition={Boolean(
+                                                project.description
+                                            )}
+                                            show={
+                                                <StyledDiv>
+                                                    <StyledTitle data-loading>
+                                                        Description:{' '}
+                                                    </StyledTitle>
+                                                    <StyledText data-loading>
+                                                        {project.description}
+                                                    </StyledText>
+                                                </StyledDiv>
+                                            }
+                                        />
                                         <StyledDiv>
                                             <StyledTitle data-loading>
-                                                Description:&nbsp;
+                                                projectId:{' '}
                                             </StyledTitle>
                                             <StyledText data-loading>
-                                                {project.description}
+                                                {projectId}
                                             </StyledText>
                                         </StyledDiv>
-                                    }
-                                />
-                                <StyledDiv>
-                                    <StyledTitle data-loading>
-                                        projectId:&nbsp;
-                                    </StyledTitle>
-                                    <StyledText data-loading>
-                                        {projectId}
-                                    </StyledText>
-                                </StyledDiv>
-                            </div>
-                        </StyledProjectTitle>
-                    </StyledColumn>
+                                    </div>
+                                </StyledProjectTitle>
+                            </StyledColumn>
+                        }
+                    />
                 </StyledInnerContainer>
 
                 <StyledSeparator />

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

@@ -1,11 +1,11 @@
 import {
     StyledArrowIcon,
     StyledCount,
-    StyledDivInfoContainer,
+    StyledProjectInfoWidgetContainer,
     StyledDivPercentageContainer,
     StyledLink,
     StyledParagraphEmphasizedText,
-    StyledParagraphSubtitle,
+    StyledWidgetTitle,
     StyledSpanLinkText,
 } from './ProjectInfo.styles';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
@@ -35,10 +35,10 @@ export const HealthWidget = ({
 
     if (uiConfig?.flags?.newProjectOverview) {
         return (
-            <StyledDivInfoContainer>
-                <StyledParagraphSubtitle data-loading>
+            <StyledProjectInfoWidgetContainer>
+                <StyledWidgetTitle data-loading>
                     Project health
-                </StyledParagraphSubtitle>
+                </StyledWidgetTitle>
                 <StyledDivPercentageContainer>
                     <PercentageCircle percentage={health} />
                 </StyledDivPercentageContainer>
@@ -63,18 +63,18 @@ export const HealthWidget = ({
                         View project health
                     </StyledSpanLinkText>
                 </StyledLink>
-            </StyledDivInfoContainer>
+            </StyledProjectInfoWidgetContainer>
         );
     }
 
     return (
-        <StyledDivInfoContainer>
+        <StyledProjectInfoWidgetContainer>
             <StyledDivPercentageContainer>
                 <PercentageCircle percentage={health} />
             </StyledDivPercentageContainer>
-            <StyledParagraphSubtitle data-loading>
+            <StyledWidgetTitle data-loading>
                 Overall health rating
-            </StyledParagraphSubtitle>
+            </StyledWidgetTitle>
             <StyledParagraphEmphasizedText data-loading>
                 {health}%
             </StyledParagraphEmphasizedText>
@@ -82,6 +82,6 @@ export const HealthWidget = ({
                 <StyledSpanLinkText data-loading>view more </StyledSpanLinkText>
                 <StyledArrowIcon data-loading />
             </StyledLink>
-        </StyledDivInfoContainer>
+        </StyledProjectInfoWidgetContainer>
     );
 };

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

@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Box, styled, Typography, Link } from '@mui/material';
+
+import {
+    StyledProjectInfoWidgetContainer,
+    StyledWidgetTitle,
+} from './ProjectInfo.styles';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+interface IMetaWidgetProps {
+    id?: string;
+    description?: string;
+}
+
+const StyledIDContainer = styled('div')(({ theme }) => ({
+    textAlign: 'left',
+    borderRadius: `${theme.shape.borderRadius}px`,
+    backgroundColor: `${theme.palette.secondaryContainer}`,
+    padding: theme.spacing(0.5, 2),
+    fontSize: theme.typography.body2.fontSize,
+}));
+
+export const MetaWidget: FC<IMetaWidgetProps> = ({ id, description }) => {
+    return (
+        <StyledProjectInfoWidgetContainer>
+            <StyledWidgetTitle>Project Meta</StyledWidgetTitle>
+            <StyledIDContainer>
+                <Typography
+                    component="span"
+                    variant="body2"
+                    color="text.secondary"
+                >
+                    ID:
+                </Typography>{' '}
+                <code data-loading>{id || '__________'}</code>
+            </StyledIDContainer>
+            <Typography mt={1.5} textAlign="left">
+                <ConditionallyRender
+                    condition={Boolean(description)}
+                    show={
+                        <>
+                            <Typography
+                                component="span"
+                                variant="body2"
+                                color="text.secondary"
+                            >
+                                Description:{' '}
+                            </Typography>
+                            <Typography component="span" variant="body2">
+                                {description}
+                            </Typography>
+                        </>
+                    }
+                    elseShow={
+                        <Typography variant="body2" textAlign="center">
+                            <Link
+                                component={RouterLink}
+                                to={`/projects/${id}/edit`}
+                            >
+                                Add description
+                            </Link>
+                        </Typography>
+                    }
+                />
+            </Typography>
+        </StyledProjectInfoWidgetContainer>
+    );
+};

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

@@ -3,10 +3,11 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { flexRow } from 'themes/themeStyles';
 import { styled } from '@mui/material';
 
-export const StyledDivContainer = styled('div')(({ theme }) => ({
+export const StyledProjectInfoSidebarContainer = styled('div')(({ theme }) => ({
     ...flexRow,
     width: '225px',
     flexDirection: 'column',
+    gap: theme.spacing(2),
     boxShadow: 'none',
     [theme.breakpoints.down('md')]: {
         flexDirection: 'row',
@@ -22,10 +23,9 @@ export const StyledDivPercentageContainer = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 0),
 }));
 
-export const StyledDivInfoContainer = styled('div')(({ theme }) => ({
+export const StyledProjectInfoWidgetContainer = styled('div')(({ theme }) => ({
     margin: '0',
     textAlign: 'center',
-    marginBottom: theme.spacing(2),
     backgroundColor: theme.palette.background.paper,
     borderRadius: theme.shape.borderRadiusLarge,
     width: '100%',
@@ -47,7 +47,7 @@ export const StyledDivInfoContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-export const StyledParagraphSubtitle = styled('p')(({ theme }) => ({
+export const StyledWidgetTitle = styled('p')(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 

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

@@ -1,10 +1,10 @@
+import type { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
 import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
-import { StyledDivContainer } from './ProjectInfo.styles';
-import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
+import { StyledProjectInfoSidebarContainer } from './ProjectInfo.styles';
 import { HealthWidget } from './HealthWidget';
 import { ToggleTypesWidget } from './ToggleTypesWidget';
+import { MetaWidget } from './MetaWidget';
 import { ProjectMembersWidget } from './ProjectMembersWidget';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
@@ -18,6 +18,7 @@ interface IProjectInfoProps {
 
 const ProjectInfo = ({
     id,
+    description,
     memberCount,
     health,
     features,
@@ -25,7 +26,11 @@ const ProjectInfo = ({
     const { uiConfig } = useUiConfig();
     return (
         <aside>
-            <StyledDivContainer>
+            <StyledProjectInfoSidebarContainer>
+                <ConditionallyRender
+                    condition={Boolean(uiConfig?.flags.newProjectOverview)}
+                    show={<MetaWidget id={id} description={description} />}
+                />
                 <HealthWidget
                     projectId={id}
                     health={health}
@@ -41,11 +46,8 @@ const ProjectInfo = ({
                         />
                     }
                 />
-                <ConditionallyRender
-                    condition={Boolean(uiConfig?.flags.newProjectOverview)}
-                    show={<ToggleTypesWidget features={features} />}
-                />
-            </StyledDivContainer>
+                <ToggleTypesWidget features={features} />
+            </StyledProjectInfoSidebarContainer>
         </aside>
     );
 };

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

@@ -1,9 +1,9 @@
 import {
     StyledArrowIcon,
-    StyledDivInfoContainer,
+    StyledProjectInfoWidgetContainer,
     StyledLink,
     StyledParagraphEmphasizedText,
-    StyledParagraphSubtitle,
+    StyledWidgetTitle,
     StyledSpanLinkText,
 } from './ProjectInfo.styles';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -26,10 +26,8 @@ export const ProjectMembersWidget = ({
     }
 
     return (
-        <StyledDivInfoContainer>
-            <StyledParagraphSubtitle data-loading>
-                Project members
-            </StyledParagraphSubtitle>
+        <StyledProjectInfoWidgetContainer>
+            <StyledWidgetTitle data-loading>Project members</StyledWidgetTitle>
             <StyledParagraphEmphasizedText data-loading>
                 {memberCount}
             </StyledParagraphEmphasizedText>
@@ -37,6 +35,6 @@ export const ProjectMembersWidget = ({
                 <StyledSpanLinkText data-loading>view more </StyledSpanLinkText>
                 <StyledArrowIcon data-loading />
             </StyledLink>
-        </StyledDivInfoContainer>
+        </StyledProjectInfoWidgetContainer>
     );
 };

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

@@ -1,19 +1,19 @@
-import { IFeatureToggleListItem } from '../../../../interfaces/featureToggle';
 import { useMemo } from 'react';
+import { styled } from '@mui/material';
+import type { IFeatureToggleListItem } from 'interfaces/featureToggle';
+import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import {
     StyledCount,
-    StyledDivInfoContainer,
+    StyledProjectInfoWidgetContainer,
     StyledParagraphGridRow,
-    StyledParagraphSubtitle,
+    StyledWidgetTitle,
 } from './ProjectInfo.styles';
-import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import { styled } from '@mui/material';
 
 export interface IToggleTypesWidgetProps {
     features: IFeatureToggleListItem[];
 }
 
-const StyledTypeCount = styled(StyledCount)(({ theme }) => ({
+const StyledTypeCount = styled(StyledCount)(() => ({
     marginLeft: 'auto',
 }));
 
@@ -52,10 +52,10 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
     const PermissionToggleIcon = getFeatureTypeIcons('permission');
 
     return (
-        <StyledDivInfoContainer>
-            <StyledParagraphSubtitle data-loading>
+        <StyledProjectInfoWidgetContainer>
+            <StyledWidgetTitle data-loading>
                 Toggle types used
-            </StyledParagraphSubtitle>
+            </StyledWidgetTitle>
             <StyledParagraphGridRow data-loading>
                 <ReleaseToggleIcon fontSize="small" data-loading />
                 <div>Release</div>
@@ -81,6 +81,6 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
                 <div>Permission</div>
                 <StyledTypeCount>{permission}</StyledTypeCount>
             </StyledParagraphGridRow>
-        </StyledDivInfoContainer>
+        </StyledProjectInfoWidgetContainer>
     );
 };