Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: make personal dashboard UI more compact (#8359)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-10-03 16:20:45 +02:00 committed by GitHub
parent 29bf902d8a
commit ec1fe6278a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx
View File

@ -1,5 +1,4 @@
import { type FC, useState } from 'react'; import { type FC, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import type { ILastSeenEnvironments } from 'interfaces/featureToggle'; import type { ILastSeenEnvironments } from 'interfaces/featureToggle';
import { Box } from '@mui/material'; import { Box } from '@mui/material';
@ -14,7 +13,6 @@ export const FlagExposure: FC<{
flagName: string; flagName: string;
onArchive: () => void; onArchive: () => void;
}> = ({ project, flagName, onArchive }) => { }> = ({ project, flagName, onArchive }) => {
const navigate = useNavigate();
const { feature, refetchFeature } = useFeature(project, flagName); const { feature, refetchFeature } = useFeature(project, flagName);
const lastSeenEnvironments: ILastSeenEnvironments[] = const lastSeenEnvironments: ILastSeenEnvironments[] =
feature.environments?.map((env) => ({ feature.environments?.map((env) => ({
@ -31,6 +29,7 @@ export const FlagExposure: FC<{
return ( return (
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<FeatureEnvironmentSeen <FeatureEnvironmentSeen
sx={{ pt: 0, pb: 0 }}
featureLastSeen={feature.lastSeenAt} featureLastSeen={feature.lastSeenAt}
environments={lastSeenEnvironments} environments={lastSeenEnvironments}
/> />

22
frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
View File

@ -8,7 +8,7 @@ import {
ContentGridContainer, ContentGridContainer,
EmptyGridItem, EmptyGridItem,
ProjectGrid, ProjectGrid,
SpacedGridItem, GridItem,
} from './Grid'; } from './Grid';
const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({ const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
@ -70,13 +70,13 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
return ( return (
<ContentGridContainer> <ContentGridContainer>
<ProjectGrid> <ProjectGrid>
<SpacedGridItem gridArea='title'> <GridItem gridArea='title'>
<Typography variant='h3'>My projects</Typography> <Typography variant='h3'>My projects</Typography>
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='onboarding'> <GridItem gridArea='onboarding'>
<Typography>Potential next steps</Typography> <Typography>Potential next steps</Typography>
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='projects'> <GridItem gridArea='projects'>
<GridContent> <GridContent>
<Typography> <Typography>
You don't currently have access to any projects in You don't currently have access to any projects in
@ -91,8 +91,8 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
projects in the system and ask the owner for access. projects in the system and ask the owner for access.
</Typography> </Typography>
</GridContent> </GridContent>
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='box1'> <GridItem gridArea='box1'>
<GridContent> <GridContent>
<TitleContainer> <TitleContainer>
<NeutralCircleContainer>1</NeutralCircleContainer> <NeutralCircleContainer>1</NeutralCircleContainer>
@ -133,8 +133,8 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
)} )}
</BoxMainContent> </BoxMainContent>
</GridContent> </GridContent>
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='box2'> <GridItem gridArea='box2'>
<GridContent> <GridContent>
<TitleContainer> <TitleContainer>
<NeutralCircleContainer>2</NeutralCircleContainer> <NeutralCircleContainer>2</NeutralCircleContainer>
@ -157,7 +157,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
)} )}
</BoxMainContent> </BoxMainContent>
</GridContent> </GridContent>
</SpacedGridItem> </GridItem>
<EmptyGridItem /> <EmptyGridItem />
<PaddedEmptyGridItem gridArea='owners' /> <PaddedEmptyGridItem gridArea='owners' />
</ProjectGrid> </ProjectGrid>

9
frontend/src/component/personalDashboard/Grid.tsx
View File

@ -59,10 +59,17 @@ export const FlagGrid = styled(ContentGrid)(
}), }),
); );
export const GridItem = styled('div', {
shouldForwardProp: (prop) => prop !== 'gridArea',
})<{ gridArea: string }>(({ theme, gridArea }) => ({
padding: theme.spacing(2, 4),
gridArea,
}));
export const SpacedGridItem = styled('div', { export const SpacedGridItem = styled('div', {
shouldForwardProp: (prop) => prop !== 'gridArea', shouldForwardProp: (prop) => prop !== 'gridArea',
})<{ gridArea: string }>(({ theme, gridArea }) => ({ })<{ gridArea: string }>(({ theme, gridArea }) => ({
padding: theme.spacing(4), padding: theme.spacing(3, 4),
gridArea, gridArea,
})); }));

15
frontend/src/component/personalDashboard/MyProjects.tsx
View File

@ -9,7 +9,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import { Badge } from '../common/Badge/Badge'; import { Badge } from '../common/Badge/Badge';
import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon'; import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
import LinkIcon from '@mui/icons-material/Link'; import LinkIcon from '@mui/icons-material/ArrowForward';
import { ProjectSetupComplete } from './ProjectSetupComplete'; import { ProjectSetupComplete } from './ProjectSetupComplete';
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK'; import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
import { LatestProjectEvents } from './LatestProjectEvents'; import { LatestProjectEvents } from './LatestProjectEvents';
@ -26,6 +26,7 @@ import {
ListItemBox, ListItemBox,
listItemStyle, listItemStyle,
ProjectGrid, ProjectGrid,
GridItem,
SpacedGridItem, SpacedGridItem,
} from './Grid'; } from './Grid';
@ -82,10 +83,10 @@ export const MyProjects: FC<{
return ( return (
<ContentGridContainer> <ContentGridContainer>
<ProjectGrid> <ProjectGrid>
<SpacedGridItem gridArea='title'> <GridItem gridArea='title'>
<Typography variant='h3'>My projects</Typography> <Typography variant='h3'>My projects</Typography>
</SpacedGridItem> </GridItem>
<SpacedGridItem <GridItem
gridArea='onboarding' gridArea='onboarding'
sx={{ sx={{
display: 'flex', display: 'flex',
@ -95,7 +96,7 @@ export const MyProjects: FC<{
{setupIncomplete ? ( {setupIncomplete ? (
<Badge color='warning'>Setup incomplete</Badge> <Badge color='warning'>Setup incomplete</Badge>
) : null} ) : null}
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='projects'> <SpacedGridItem gridArea='projects'>
<List <List
disablePadding={true} disablePadding={true}
@ -172,7 +173,7 @@ export const MyProjects: FC<{
) : null} ) : null}
</SpacedGridItem> </SpacedGridItem>
<EmptyGridItem /> <EmptyGridItem />
<SpacedGridItem gridArea='owners'> <GridItem gridArea='owners'>
{personalDashboardProjectDetails ? ( {personalDashboardProjectDetails ? (
<RoleAndOwnerInfo <RoleAndOwnerInfo
roles={personalDashboardProjectDetails.roles.map( roles={personalDashboardProjectDetails.roles.map(
@ -181,7 +182,7 @@ export const MyProjects: FC<{
owners={personalDashboardProjectDetails.owners} owners={personalDashboardProjectDetails.owners}
/> />
) : null} ) : null}
</SpacedGridItem> </GridItem>
</ProjectGrid> </ProjectGrid>
</ContentGridContainer> </ContentGridContainer>
); );

14
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -9,7 +9,7 @@ import {
Typography, Typography,
} from '@mui/material'; } from '@mui/material';
import React, { type FC, useEffect, useState } from 'react'; import React, { type FC, useEffect, useState } from 'react';
import LinkIcon from '@mui/icons-material/Link'; import LinkIcon from '@mui/icons-material/ArrowForward';
import { WelcomeDialog } from './WelcomeDialog'; import { WelcomeDialog } from './WelcomeDialog';
import { useLocalStorageState } from 'hooks/useLocalStorageState'; import { useLocalStorageState } from 'hooks/useLocalStorageState';
import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard'; import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
@ -28,6 +28,7 @@ import {
FlagGrid, FlagGrid,
ListItemBox, ListItemBox,
listItemStyle, listItemStyle,
GridItem,
SpacedGridItem, SpacedGridItem,
} from './Grid'; } from './Grid';
import { ContentGridNoProjects } from './ContentGridNoProjects'; import { ContentGridNoProjects } from './ContentGridNoProjects';
@ -183,10 +184,13 @@ export const PersonalDashboard = () => {
<ContentGridContainer> <ContentGridContainer>
<FlagGrid sx={{ mt: 2 }}> <FlagGrid sx={{ mt: 2 }}>
<SpacedGridItem gridArea='title'> <GridItem
gridArea='title'
sx={{ display: 'flex', alignItems: 'center' }}
>
<Typography variant='h3'>My feature flags</Typography> <Typography variant='h3'>My feature flags</Typography>
</SpacedGridItem> </GridItem>
<SpacedGridItem <GridItem
gridArea='lifecycle' gridArea='lifecycle'
sx={{ display: 'flex', justifyContent: 'flex-end' }} sx={{ display: 'flex', justifyContent: 'flex-end' }}
> >
@ -197,7 +201,7 @@ export const PersonalDashboard = () => {
onArchive={refetchDashboard} onArchive={refetchDashboard}
/> />
) : null} ) : null}
</SpacedGridItem> </GridItem>
<SpacedGridItem gridArea='flags'> <SpacedGridItem gridArea='flags'>
{personalDashboard && {personalDashboard &&
personalDashboard.flags.length > 0 ? ( personalDashboard.flags.length > 0 ? (

9
frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
View File

@ -11,7 +11,6 @@ const TitleContainer = styled('div')(({ theme }) => ({
flexDirection: 'row', flexDirection: 'row',
gap: theme.spacing(2), gap: theme.spacing(2),
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
})); }));
const Health = styled('div')(({ theme }) => ({ const Health = styled('div')(({ theme }) => ({
@ -30,7 +29,11 @@ const ActionBox = styled('article')(({ theme }) => ({
})); }));
const PercentageScore = styled('span')(({ theme }) => ({ const PercentageScore = styled('span')(({ theme }) => ({
color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightBold,
}));
const ProjectInsight = styled('h3')(({ theme }) => ({
margin: 0,
})); }));
const ConnectedSdkProject: FC<{ project: string }> = ({ project }) => { const ConnectedSdkProject: FC<{ project: string }> = ({ project }) => {
@ -135,7 +138,7 @@ export const ProjectSetupComplete: FC<{
<ActionBox> <ActionBox>
<TitleContainer> <TitleContainer>
<Lightbulb color='primary' /> <Lightbulb color='primary' />
<h3>Project Insight</h3> <ProjectInsight>Project Insight</ProjectInsight>
</TitleContainer> </TitleContainer>
<Health> <Health>