mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-14 01:16:17 +02:00
refactor: extract my projects component (#8317)
This commit is contained in:
parent
96d8dc353a
commit
739ad07798
31
frontend/src/component/personalDashboard/Grid.tsx
Normal file
31
frontend/src/component/personalDashboard/Grid.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Box, Grid, styled } from '@mui/material';
|
||||||
|
import type { Theme } from '@mui/material/styles/createTheme';
|
||||||
|
|
||||||
|
export const ContentGrid = styled(Grid)(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
borderRadius: `${theme.shape.borderRadiusLarge}px`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const SpacedGridItem = styled(Grid)(({ theme }) => ({
|
||||||
|
padding: theme.spacing(4),
|
||||||
|
border: `0.5px solid ${theme.palette.divider}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const ListItemBox = styled(Box)(({ theme }) => ({
|
||||||
|
display: 'flex',
|
||||||
|
gap: theme.spacing(2),
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const listItemStyle = (theme: Theme) => ({
|
||||||
|
borderRadius: theme.spacing(0.5),
|
||||||
|
borderLeft: `${theme.spacing(0.5)} solid transparent`,
|
||||||
|
'&.Mui-selected': {
|
||||||
|
borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
|
||||||
|
},
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: theme.spacing(1),
|
||||||
|
});
|
175
frontend/src/component/personalDashboard/MyProjects.tsx
Normal file
175
frontend/src/component/personalDashboard/MyProjects.tsx
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
Link,
|
||||||
|
List,
|
||||||
|
ListItem,
|
||||||
|
ListItemButton,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { Badge } from '../common/Badge/Badge';
|
||||||
|
import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
|
||||||
|
import LinkIcon from '@mui/icons-material/Link';
|
||||||
|
import { ProjectSetupComplete } from './ProjectSetupComplete';
|
||||||
|
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
|
||||||
|
import { LatestProjectEvents } from './LatestProjectEvents';
|
||||||
|
import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
|
||||||
|
import type { FC } from 'react';
|
||||||
|
import { StyledCardTitle } from './PersonalDashboard';
|
||||||
|
import type {
|
||||||
|
PersonalDashboardProjectDetailsSchema,
|
||||||
|
PersonalDashboardSchemaProjectsItem,
|
||||||
|
} from '../../openapi';
|
||||||
|
import {
|
||||||
|
ContentGrid,
|
||||||
|
ListItemBox,
|
||||||
|
listItemStyle,
|
||||||
|
SpacedGridItem,
|
||||||
|
} from './Grid';
|
||||||
|
|
||||||
|
const ActiveProjectDetails: FC<{
|
||||||
|
project: PersonalDashboardSchemaProjectsItem;
|
||||||
|
}> = ({ project }) => {
|
||||||
|
return (
|
||||||
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Typography variant='subtitle2' color='primary'>
|
||||||
|
{project.featureCount}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='caption' color='text.secondary'>
|
||||||
|
flags
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Typography variant='subtitle2' color='primary'>
|
||||||
|
{project.memberCount}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='caption' color='text.secondary'>
|
||||||
|
members
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Typography variant='subtitle2' color='primary'>
|
||||||
|
{project.health}%
|
||||||
|
</Typography>
|
||||||
|
<Typography variant='caption' color='text.secondary'>
|
||||||
|
health
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MyProjects: FC<{
|
||||||
|
projects: PersonalDashboardSchemaProjectsItem[];
|
||||||
|
personalDashboardProjectDetails?: PersonalDashboardProjectDetailsSchema;
|
||||||
|
activeProject: string;
|
||||||
|
setActiveProject: (project: string) => void;
|
||||||
|
}> = ({
|
||||||
|
projects,
|
||||||
|
personalDashboardProjectDetails,
|
||||||
|
setActiveProject,
|
||||||
|
activeProject,
|
||||||
|
}) => {
|
||||||
|
const activeProjectStage =
|
||||||
|
personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
|
||||||
|
const setupIncomplete =
|
||||||
|
activeProjectStage === 'onboarding-started' ||
|
||||||
|
activeProjectStage === 'first-flag-created';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ContentGrid container columns={{ lg: 12, md: 1 }}>
|
||||||
|
<SpacedGridItem item lg={4} md={1}>
|
||||||
|
<Typography variant='h3'>My projects</Typography>
|
||||||
|
</SpacedGridItem>
|
||||||
|
<SpacedGridItem
|
||||||
|
item
|
||||||
|
lg={8}
|
||||||
|
md={1}
|
||||||
|
sx={{ display: 'flex', justifyContent: 'flex-end' }}
|
||||||
|
>
|
||||||
|
{setupIncomplete ? (
|
||||||
|
<Badge color='warning'>Setup incomplete</Badge>
|
||||||
|
) : null}
|
||||||
|
</SpacedGridItem>
|
||||||
|
<SpacedGridItem item lg={4} md={1}>
|
||||||
|
<List
|
||||||
|
disablePadding={true}
|
||||||
|
sx={{ maxHeight: '400px', overflow: 'auto' }}
|
||||||
|
>
|
||||||
|
{projects.map((project) => {
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
key={project.id}
|
||||||
|
disablePadding={true}
|
||||||
|
sx={{ mb: 1 }}
|
||||||
|
>
|
||||||
|
<ListItemButton
|
||||||
|
sx={listItemStyle}
|
||||||
|
selected={project.id === activeProject}
|
||||||
|
onClick={() => setActiveProject(project.id)}
|
||||||
|
>
|
||||||
|
<ListItemBox>
|
||||||
|
<ProjectIcon color='primary' />
|
||||||
|
<StyledCardTitle>
|
||||||
|
{project.name}
|
||||||
|
</StyledCardTitle>
|
||||||
|
<IconButton
|
||||||
|
component={Link}
|
||||||
|
href={`projects/${project.id}`}
|
||||||
|
size='small'
|
||||||
|
sx={{ ml: 'auto' }}
|
||||||
|
>
|
||||||
|
<LinkIcon
|
||||||
|
titleAccess={`projects/${project.id}`}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</ListItemBox>
|
||||||
|
{project.id === activeProject ? (
|
||||||
|
<ActiveProjectDetails
|
||||||
|
project={project}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</ListItemButton>
|
||||||
|
</ListItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</List>
|
||||||
|
</SpacedGridItem>
|
||||||
|
<SpacedGridItem item lg={4} md={1}>
|
||||||
|
{activeProjectStage === 'onboarded' ? (
|
||||||
|
<ProjectSetupComplete project={activeProject} />
|
||||||
|
) : null}
|
||||||
|
{activeProjectStage === 'onboarding-started' ||
|
||||||
|
activeProjectStage === 'loading' ? (
|
||||||
|
<CreateFlag project={activeProject} />
|
||||||
|
) : null}
|
||||||
|
{activeProjectStage === 'first-flag-created' ? (
|
||||||
|
<ExistingFlag project={activeProject} />
|
||||||
|
) : null}
|
||||||
|
</SpacedGridItem>
|
||||||
|
<SpacedGridItem item lg={4} md={1}>
|
||||||
|
{activeProjectStage === 'onboarded' &&
|
||||||
|
personalDashboardProjectDetails ? (
|
||||||
|
<LatestProjectEvents
|
||||||
|
latestEvents={
|
||||||
|
personalDashboardProjectDetails.latestEvents
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{setupIncomplete || activeProjectStage === 'loading' ? (
|
||||||
|
<ConnectSDK project={activeProject} />
|
||||||
|
) : null}
|
||||||
|
</SpacedGridItem>
|
||||||
|
<SpacedGridItem item lg={4} md={1} />
|
||||||
|
<SpacedGridItem item lg={8} md={1}>
|
||||||
|
{activeProject ? (
|
||||||
|
<RoleAndOwnerInfo
|
||||||
|
roles={['owner', 'custom']}
|
||||||
|
owners={[{ ownerType: 'system' }]}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</SpacedGridItem>
|
||||||
|
</ContentGrid>
|
||||||
|
);
|
||||||
|
};
|
@ -1,7 +1,5 @@
|
|||||||
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
|
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
|
||||||
import {
|
import {
|
||||||
Box,
|
|
||||||
Grid,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
Link,
|
Link,
|
||||||
List,
|
List,
|
||||||
@ -10,15 +8,10 @@ import {
|
|||||||
styled,
|
styled,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import type { Theme } from '@mui/material/styles/createTheme';
|
|
||||||
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
|
|
||||||
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/Link';
|
||||||
import { Badge } from '../common/Badge/Badge';
|
|
||||||
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
|
|
||||||
import { WelcomeDialog } from './WelcomeDialog';
|
import { WelcomeDialog } from './WelcomeDialog';
|
||||||
import { useLocalStorageState } from 'hooks/useLocalStorageState';
|
import { useLocalStorageState } from 'hooks/useLocalStorageState';
|
||||||
import { ProjectSetupComplete } from './ProjectSetupComplete';
|
|
||||||
import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
|
import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
|
||||||
import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
|
import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
|
||||||
import type {
|
import type {
|
||||||
@ -26,12 +19,17 @@ import type {
|
|||||||
PersonalDashboardSchemaProjectsItem,
|
PersonalDashboardSchemaProjectsItem,
|
||||||
} from '../../openapi';
|
} from '../../openapi';
|
||||||
import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
|
import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
|
||||||
import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
|
|
||||||
import { ContentGridNoProjects } from './ContentGridNoProjects';
|
|
||||||
import { LatestProjectEvents } from './LatestProjectEvents';
|
|
||||||
import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
|
import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
|
||||||
import HelpOutline from '@mui/icons-material/HelpOutline';
|
import HelpOutline from '@mui/icons-material/HelpOutline';
|
||||||
import useLoading from '../../hooks/useLoading';
|
import useLoading from '../../hooks/useLoading';
|
||||||
|
import { MyProjects } from './MyProjects';
|
||||||
|
import {
|
||||||
|
ContentGrid,
|
||||||
|
ListItemBox,
|
||||||
|
listItemStyle,
|
||||||
|
SpacedGridItem,
|
||||||
|
} from './Grid';
|
||||||
|
import { ContentGridNoProjects } from './ContentGridNoProjects';
|
||||||
|
|
||||||
const ScreenExplanation = styled('div')(({ theme }) => ({
|
const ScreenExplanation = styled('div')(({ theme }) => ({
|
||||||
marginBottom: theme.spacing(4),
|
marginBottom: theme.spacing(4),
|
||||||
@ -39,30 +37,6 @@ const ScreenExplanation = styled('div')(({ theme }) => ({
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const ContentGrid = styled(Grid)(({ theme }) => ({
|
|
||||||
backgroundColor: theme.palette.background.paper,
|
|
||||||
borderRadius: `${theme.shape.borderRadiusLarge}px`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const ProjectBox = styled(Box)(({ theme }) => ({
|
|
||||||
display: 'flex',
|
|
||||||
gap: theme.spacing(2),
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const projectStyle = (theme: Theme) => ({
|
|
||||||
borderRadius: theme.spacing(0.5),
|
|
||||||
borderLeft: `${theme.spacing(0.5)} solid transparent`,
|
|
||||||
'&.Mui-selected': {
|
|
||||||
borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
|
|
||||||
},
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
gap: theme.spacing(1),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const StyledCardTitle = styled('div')<{ lines?: number }>(
|
export const StyledCardTitle = styled('div')<{ lines?: number }>(
|
||||||
({ theme, lines = 2 }) => ({
|
({ theme, lines = 2 }) => ({
|
||||||
fontWeight: theme.typography.fontWeightRegular,
|
fontWeight: theme.typography.fontWeightRegular,
|
||||||
@ -80,56 +54,6 @@ export const StyledCardTitle = styled('div')<{ lines?: number }>(
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const ActiveProjectDetails: FC<{
|
|
||||||
project: PersonalDashboardSchemaProjectsItem;
|
|
||||||
}> = ({ project }) => {
|
|
||||||
return (
|
|
||||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant='subtitle2' color='primary'>
|
|
||||||
{project.featureCount}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='caption' color='text.secondary'>
|
|
||||||
flags
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant='subtitle2' color='primary'>
|
|
||||||
{project.memberCount}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='caption' color='text.secondary'>
|
|
||||||
members
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<Typography variant='subtitle2' color='primary'>
|
|
||||||
{project.health}%
|
|
||||||
</Typography>
|
|
||||||
<Typography variant='caption' color='text.secondary'>
|
|
||||||
health
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const SpacedGridItem = styled(Grid)(({ theme }) => ({
|
|
||||||
padding: theme.spacing(4),
|
|
||||||
border: `0.5px solid ${theme.palette.divider}`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const useProjects = (projects: PersonalDashboardSchemaProjectsItem[]) => {
|
|
||||||
const [activeProject, setActiveProject] = useState(projects[0]?.id);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!activeProject && projects.length > 0) {
|
|
||||||
setActiveProject(projects[0].id);
|
|
||||||
}
|
|
||||||
}, [JSON.stringify(projects)]);
|
|
||||||
|
|
||||||
return { projects, activeProject, setActiveProject };
|
|
||||||
};
|
|
||||||
|
|
||||||
const FlagListItem: FC<{
|
const FlagListItem: FC<{
|
||||||
flag: { name: string; project: string; type: string };
|
flag: { name: string; project: string; type: string };
|
||||||
selected: boolean;
|
selected: boolean;
|
||||||
@ -139,11 +63,11 @@ const FlagListItem: FC<{
|
|||||||
return (
|
return (
|
||||||
<ListItem key={flag.name} disablePadding={true} sx={{ mb: 1 }}>
|
<ListItem key={flag.name} disablePadding={true} sx={{ mb: 1 }}>
|
||||||
<ListItemButton
|
<ListItemButton
|
||||||
sx={projectStyle}
|
sx={listItemStyle}
|
||||||
selected={selected}
|
selected={selected}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<ProjectBox>
|
<ListItemBox>
|
||||||
<IconComponent color='primary' />
|
<IconComponent color='primary' />
|
||||||
<StyledCardTitle>{flag.name}</StyledCardTitle>
|
<StyledCardTitle>{flag.name}</StyledCardTitle>
|
||||||
<IconButton
|
<IconButton
|
||||||
@ -156,12 +80,24 @@ const FlagListItem: FC<{
|
|||||||
titleAccess={`projects/${flag.project}/features/${flag.name}`}
|
titleAccess={`projects/${flag.project}/features/${flag.name}`}
|
||||||
/>
|
/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</ProjectBox>
|
</ListItemBox>
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useActiveProject = (projects: PersonalDashboardSchemaProjectsItem[]) => {
|
||||||
|
const [activeProject, setActiveProject] = useState(projects[0]?.id);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!activeProject && projects.length > 0) {
|
||||||
|
setActiveProject(projects[0].id);
|
||||||
|
}
|
||||||
|
}, [JSON.stringify(projects)]);
|
||||||
|
|
||||||
|
return [activeProject, setActiveProject] as const;
|
||||||
|
};
|
||||||
|
|
||||||
export const PersonalDashboard = () => {
|
export const PersonalDashboard = () => {
|
||||||
const { user } = useAuthUser();
|
const { user } = useAuthUser();
|
||||||
|
|
||||||
@ -181,32 +117,25 @@ export const PersonalDashboard = () => {
|
|||||||
}
|
}
|
||||||
}, [JSON.stringify(personalDashboard?.flags)]);
|
}, [JSON.stringify(personalDashboard?.flags)]);
|
||||||
|
|
||||||
const { projects, activeProject, setActiveProject } = useProjects(
|
|
||||||
personalDashboard?.projects || [],
|
|
||||||
);
|
|
||||||
|
|
||||||
const { personalDashboardProjectDetails, loading: loadingDetails } =
|
|
||||||
usePersonalDashboardProjectDetails(activeProject);
|
|
||||||
|
|
||||||
const stage =
|
|
||||||
personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
|
|
||||||
|
|
||||||
const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
|
const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
|
||||||
'open' | 'closed'
|
'open' | 'closed'
|
||||||
>('welcome-dialog:v1', 'open');
|
>('welcome-dialog:v1', 'open');
|
||||||
|
|
||||||
|
const projects = personalDashboard?.projects || [];
|
||||||
|
const [activeProject, setActiveProject] = useActiveProject(projects);
|
||||||
|
|
||||||
|
const { personalDashboardProjectDetails, loading: loadingDetails } =
|
||||||
|
usePersonalDashboardProjectDetails(activeProject);
|
||||||
|
|
||||||
|
const activeProjectStage =
|
||||||
|
personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
|
||||||
|
const setupIncomplete =
|
||||||
|
activeProjectStage === 'onboarding-started' ||
|
||||||
|
activeProjectStage === 'first-flag-created';
|
||||||
|
|
||||||
const noProjects = projects.length === 0;
|
const noProjects = projects.length === 0;
|
||||||
|
|
||||||
const setupIncomplete =
|
const projectStageRef = useLoading(activeProjectStage === 'loading');
|
||||||
personalDashboardProjectDetails?.onboardingStatus.status ===
|
|
||||||
'onboarding-started' ||
|
|
||||||
personalDashboardProjectDetails?.onboardingStatus.status ===
|
|
||||||
'first-flag-created';
|
|
||||||
const onboarded =
|
|
||||||
personalDashboardProjectDetails?.onboardingStatus.status ===
|
|
||||||
'onboarded';
|
|
||||||
|
|
||||||
const projectStageRef = useLoading(stage === 'loading');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={projectStageRef}>
|
<div ref={projectStageRef}>
|
||||||
@ -215,13 +144,13 @@ export const PersonalDashboard = () => {
|
|||||||
</Typography>
|
</Typography>
|
||||||
<ScreenExplanation>
|
<ScreenExplanation>
|
||||||
<p data-loading>
|
<p data-loading>
|
||||||
{onboarded
|
{activeProjectStage === 'onboarded'
|
||||||
? 'We have gathered projects and flags you have favorited or owned'
|
? 'We have gathered projects and flags you have favorited or owned'
|
||||||
: null}
|
: null}
|
||||||
{setupIncomplete
|
{setupIncomplete
|
||||||
? 'Here are some tasks we think would be useful in order to get the most out of Unleash'
|
? 'Here are some tasks we think would be useful in order to get the most out of Unleash'
|
||||||
: null}
|
: null}
|
||||||
{stage === 'loading'
|
{activeProjectStage === 'loading'
|
||||||
? 'We have gathered projects and flags you have favorited or owned'
|
? 'We have gathered projects and flags you have favorited or owned'
|
||||||
: null}
|
: null}
|
||||||
</p>
|
</p>
|
||||||
@ -241,104 +170,16 @@ export const PersonalDashboard = () => {
|
|||||||
admins={personalDashboard.admins}
|
admins={personalDashboard.admins}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<ContentGrid container columns={{ lg: 12, md: 1 }}>
|
<MyProjects
|
||||||
<SpacedGridItem item lg={4} md={1}>
|
projects={projects}
|
||||||
<Typography variant='h3'>My projects</Typography>
|
activeProject={activeProject}
|
||||||
</SpacedGridItem>
|
setActiveProject={setActiveProject}
|
||||||
<SpacedGridItem
|
personalDashboardProjectDetails={
|
||||||
item
|
personalDashboardProjectDetails
|
||||||
lg={8}
|
}
|
||||||
md={1}
|
/>
|
||||||
sx={{ display: 'flex', justifyContent: 'flex-end' }}
|
|
||||||
>
|
|
||||||
{setupIncomplete ? (
|
|
||||||
<Badge color='warning'>Setup incomplete</Badge>
|
|
||||||
) : null}
|
|
||||||
</SpacedGridItem>
|
|
||||||
<SpacedGridItem item lg={4} md={1}>
|
|
||||||
<List
|
|
||||||
disablePadding={true}
|
|
||||||
sx={{ maxHeight: '400px', overflow: 'auto' }}
|
|
||||||
>
|
|
||||||
{projects.map((project) => {
|
|
||||||
return (
|
|
||||||
<ListItem
|
|
||||||
key={project.id}
|
|
||||||
disablePadding={true}
|
|
||||||
sx={{ mb: 1 }}
|
|
||||||
>
|
|
||||||
<ListItemButton
|
|
||||||
sx={projectStyle}
|
|
||||||
selected={
|
|
||||||
project.id === activeProject
|
|
||||||
}
|
|
||||||
onClick={() =>
|
|
||||||
setActiveProject(project.id)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ProjectBox>
|
|
||||||
<ProjectIcon color='primary' />
|
|
||||||
<StyledCardTitle>
|
|
||||||
{project.name}
|
|
||||||
</StyledCardTitle>
|
|
||||||
<IconButton
|
|
||||||
component={Link}
|
|
||||||
href={`projects/${project.id}`}
|
|
||||||
size='small'
|
|
||||||
sx={{ ml: 'auto' }}
|
|
||||||
>
|
|
||||||
<LinkIcon
|
|
||||||
titleAccess={`projects/${project.id}`}
|
|
||||||
/>
|
|
||||||
</IconButton>
|
|
||||||
</ProjectBox>
|
|
||||||
{project.id === activeProject ? (
|
|
||||||
<ActiveProjectDetails
|
|
||||||
project={project}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</ListItemButton>
|
|
||||||
</ListItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</List>
|
|
||||||
</SpacedGridItem>
|
|
||||||
<SpacedGridItem item lg={4} md={1}>
|
|
||||||
{stage === 'onboarded' ? (
|
|
||||||
<ProjectSetupComplete project={activeProject} />
|
|
||||||
) : null}
|
|
||||||
{stage === 'onboarding-started' ||
|
|
||||||
stage === 'loading' ? (
|
|
||||||
<CreateFlag project={activeProject} />
|
|
||||||
) : null}
|
|
||||||
{stage === 'first-flag-created' ? (
|
|
||||||
<ExistingFlag project={activeProject} />
|
|
||||||
) : null}
|
|
||||||
</SpacedGridItem>
|
|
||||||
<SpacedGridItem item lg={4} md={1}>
|
|
||||||
{stage === 'onboarded' &&
|
|
||||||
personalDashboardProjectDetails ? (
|
|
||||||
<LatestProjectEvents
|
|
||||||
latestEvents={
|
|
||||||
personalDashboardProjectDetails.latestEvents
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
{setupIncomplete || stage === 'loading' ? (
|
|
||||||
<ConnectSDK project={activeProject} />
|
|
||||||
) : null}
|
|
||||||
</SpacedGridItem>
|
|
||||||
<SpacedGridItem item lg={4} md={1} />
|
|
||||||
<SpacedGridItem item lg={8} md={1}>
|
|
||||||
{activeProject ? (
|
|
||||||
<RoleAndOwnerInfo
|
|
||||||
roles={['owner', 'custom']}
|
|
||||||
owners={[{ ownerType: 'system' }]}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</SpacedGridItem>
|
|
||||||
</ContentGrid>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<ContentGrid container columns={{ lg: 12, md: 1 }} sx={{ mt: 2 }}>
|
<ContentGrid container columns={{ lg: 12, md: 1 }} sx={{ mt: 2 }}>
|
||||||
<SpacedGridItem item lg={4} md={1}>
|
<SpacedGridItem item lg={4} md={1}>
|
||||||
<Typography variant='h3'>My feature flags</Typography>
|
<Typography variant='h3'>My feature flags</Typography>
|
||||||
|
Loading…
Reference in New Issue
Block a user