mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
feat: make personal dashboard UI more compact (#8359)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
29bf902d8a
commit
ec1fe6278a
@ -1,5 +1,4 @@
|
||||
import { type FC, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
|
||||
import type { ILastSeenEnvironments } from 'interfaces/featureToggle';
|
||||
import { Box } from '@mui/material';
|
||||
@ -14,7 +13,6 @@ export const FlagExposure: FC<{
|
||||
flagName: string;
|
||||
onArchive: () => void;
|
||||
}> = ({ project, flagName, onArchive }) => {
|
||||
const navigate = useNavigate();
|
||||
const { feature, refetchFeature } = useFeature(project, flagName);
|
||||
const lastSeenEnvironments: ILastSeenEnvironments[] =
|
||||
feature.environments?.map((env) => ({
|
||||
@ -31,6 +29,7 @@ export const FlagExposure: FC<{
|
||||
return (
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<FeatureEnvironmentSeen
|
||||
sx={{ pt: 0, pb: 0 }}
|
||||
featureLastSeen={feature.lastSeenAt}
|
||||
environments={lastSeenEnvironments}
|
||||
/>
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
ContentGridContainer,
|
||||
EmptyGridItem,
|
||||
ProjectGrid,
|
||||
SpacedGridItem,
|
||||
GridItem,
|
||||
} from './Grid';
|
||||
|
||||
const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
|
||||
@ -70,13 +70,13 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
|
||||
return (
|
||||
<ContentGridContainer>
|
||||
<ProjectGrid>
|
||||
<SpacedGridItem gridArea='title'>
|
||||
<GridItem gridArea='title'>
|
||||
<Typography variant='h3'>My projects</Typography>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem gridArea='onboarding'>
|
||||
</GridItem>
|
||||
<GridItem gridArea='onboarding'>
|
||||
<Typography>Potential next steps</Typography>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem gridArea='projects'>
|
||||
</GridItem>
|
||||
<GridItem gridArea='projects'>
|
||||
<GridContent>
|
||||
<Typography>
|
||||
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.
|
||||
</Typography>
|
||||
</GridContent>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem gridArea='box1'>
|
||||
</GridItem>
|
||||
<GridItem gridArea='box1'>
|
||||
<GridContent>
|
||||
<TitleContainer>
|
||||
<NeutralCircleContainer>1</NeutralCircleContainer>
|
||||
@ -133,8 +133,8 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
|
||||
)}
|
||||
</BoxMainContent>
|
||||
</GridContent>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem gridArea='box2'>
|
||||
</GridItem>
|
||||
<GridItem gridArea='box2'>
|
||||
<GridContent>
|
||||
<TitleContainer>
|
||||
<NeutralCircleContainer>2</NeutralCircleContainer>
|
||||
@ -157,7 +157,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
|
||||
)}
|
||||
</BoxMainContent>
|
||||
</GridContent>
|
||||
</SpacedGridItem>
|
||||
</GridItem>
|
||||
<EmptyGridItem />
|
||||
<PaddedEmptyGridItem gridArea='owners' />
|
||||
</ProjectGrid>
|
||||
|
||||
@ -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', {
|
||||
shouldForwardProp: (prop) => prop !== 'gridArea',
|
||||
})<{ gridArea: string }>(({ theme, gridArea }) => ({
|
||||
padding: theme.spacing(4),
|
||||
padding: theme.spacing(3, 4),
|
||||
gridArea,
|
||||
}));
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
} from '@mui/material';
|
||||
import { Badge } from '../common/Badge/Badge';
|
||||
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 { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
|
||||
import { LatestProjectEvents } from './LatestProjectEvents';
|
||||
@ -26,6 +26,7 @@ import {
|
||||
ListItemBox,
|
||||
listItemStyle,
|
||||
ProjectGrid,
|
||||
GridItem,
|
||||
SpacedGridItem,
|
||||
} from './Grid';
|
||||
|
||||
@ -82,10 +83,10 @@ export const MyProjects: FC<{
|
||||
return (
|
||||
<ContentGridContainer>
|
||||
<ProjectGrid>
|
||||
<SpacedGridItem gridArea='title'>
|
||||
<GridItem gridArea='title'>
|
||||
<Typography variant='h3'>My projects</Typography>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem
|
||||
</GridItem>
|
||||
<GridItem
|
||||
gridArea='onboarding'
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -95,7 +96,7 @@ export const MyProjects: FC<{
|
||||
{setupIncomplete ? (
|
||||
<Badge color='warning'>Setup incomplete</Badge>
|
||||
) : null}
|
||||
</SpacedGridItem>
|
||||
</GridItem>
|
||||
<SpacedGridItem gridArea='projects'>
|
||||
<List
|
||||
disablePadding={true}
|
||||
@ -172,7 +173,7 @@ export const MyProjects: FC<{
|
||||
) : null}
|
||||
</SpacedGridItem>
|
||||
<EmptyGridItem />
|
||||
<SpacedGridItem gridArea='owners'>
|
||||
<GridItem gridArea='owners'>
|
||||
{personalDashboardProjectDetails ? (
|
||||
<RoleAndOwnerInfo
|
||||
roles={personalDashboardProjectDetails.roles.map(
|
||||
@ -181,7 +182,7 @@ export const MyProjects: FC<{
|
||||
owners={personalDashboardProjectDetails.owners}
|
||||
/>
|
||||
) : null}
|
||||
</SpacedGridItem>
|
||||
</GridItem>
|
||||
</ProjectGrid>
|
||||
</ContentGridContainer>
|
||||
);
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
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 { useLocalStorageState } from 'hooks/useLocalStorageState';
|
||||
import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
|
||||
@ -28,6 +28,7 @@ import {
|
||||
FlagGrid,
|
||||
ListItemBox,
|
||||
listItemStyle,
|
||||
GridItem,
|
||||
SpacedGridItem,
|
||||
} from './Grid';
|
||||
import { ContentGridNoProjects } from './ContentGridNoProjects';
|
||||
@ -183,10 +184,13 @@ export const PersonalDashboard = () => {
|
||||
|
||||
<ContentGridContainer>
|
||||
<FlagGrid sx={{ mt: 2 }}>
|
||||
<SpacedGridItem gridArea='title'>
|
||||
<GridItem
|
||||
gridArea='title'
|
||||
sx={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<Typography variant='h3'>My feature flags</Typography>
|
||||
</SpacedGridItem>
|
||||
<SpacedGridItem
|
||||
</GridItem>
|
||||
<GridItem
|
||||
gridArea='lifecycle'
|
||||
sx={{ display: 'flex', justifyContent: 'flex-end' }}
|
||||
>
|
||||
@ -197,7 +201,7 @@ export const PersonalDashboard = () => {
|
||||
onArchive={refetchDashboard}
|
||||
/>
|
||||
) : null}
|
||||
</SpacedGridItem>
|
||||
</GridItem>
|
||||
<SpacedGridItem gridArea='flags'>
|
||||
{personalDashboard &&
|
||||
personalDashboard.flags.length > 0 ? (
|
||||
|
||||
@ -11,7 +11,6 @@ const TitleContainer = styled('div')(({ theme }) => ({
|
||||
flexDirection: 'row',
|
||||
gap: theme.spacing(2),
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}));
|
||||
|
||||
const Health = styled('div')(({ theme }) => ({
|
||||
@ -30,7 +29,11 @@ const ActionBox = styled('article')(({ 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 }) => {
|
||||
@ -135,7 +138,7 @@ export const ProjectSetupComplete: FC<{
|
||||
<ActionBox>
|
||||
<TitleContainer>
|
||||
<Lightbulb color='primary' />
|
||||
<h3>Project Insight</h3>
|
||||
<ProjectInsight>Project Insight</ProjectInsight>
|
||||
</TitleContainer>
|
||||
|
||||
<Health>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user