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: initial sketch for the lifecycle tooltip (#6899)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-04-23 08:56:18 +02:00 committed by GitHub
parent 13aa58e0e9
commit 131e9dd6d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx Normal file
View File

@ -0,0 +1,76 @@
import { Box, styled, Typography } from '@mui/material';
import { Badge } from '../../../../common/Badge/Badge';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
import type { FC } from 'react';
import type * as React from 'react';
const TimeLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
}));
const InfoText = styled('p')(({ theme }) => ({
paddingBottom: theme.spacing(1),
}));
const MainLifecycleRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
}));
const TimeLifecycleRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(1.5),
}));
export const FeatureLifecycleTooltip: FC<{
children: React.ReactElement<any, any>;
}> = ({ children }) => (
<HtmlTooltip
maxHeight={800}
arrow
title={
<Box>
<Box sx={(theme) => ({ padding: theme.spacing(2) })}>
<MainLifecycleRow>
<Typography variant='h3'>Lifecycle</Typography>
<Badge>Initial</Badge>
</MainLifecycleRow>
<TimeLifecycleRow>
<TimeLabel>Stage entered at</TimeLabel>
<span>14/01/2024</span>
</TimeLifecycleRow>
<TimeLifecycleRow>
<TimeLabel>Time spent in stage</TimeLabel>
<span>3 days</span>
</TimeLifecycleRow>
</Box>
<Box
sx={(theme) => ({
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: theme.spacing(0, 0, 1, 1), // has to match the parent tooltip container
margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container
p: theme.spacing(2, 3),
})}
>
<InfoText>
This feature toggle is currently in the initial phase of
it's life cycle.
</InfoText>
<InfoText>
This means that the flag has been created, but it has
not yet been seen in any environment.
</InfoText>
<InfoText>
Once we detect metrics for a non-production environment
it will move into pre-live.
</InfoText>
</Box>
</Box>
}
>
{children}
</HtmlTooltip>
);

15
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -7,6 +7,8 @@ import Edit from '@mui/icons-material/Edit';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useUiFlag } from 'hooks/useUiFlag';
import { FeatureLifecycleTooltip } from '../FeatureLifecycleTooltip/FeatureLifecycleTooltip';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
@ -63,6 +65,7 @@ const FeatureOverviewMetaData = () => {
const featureId = useRequiredPathParam('featureId');
const { feature } = useFeature(projectId, featureId);
const { project, description, type } = feature;
const featureLifecycleEnabled = useUiFlag('featureLifecycle');
const IconComponent = getFeatureTypeIcons(type);
@ -88,6 +91,18 @@ const FeatureOverviewMetaData = () => {
<StyledBodyItem data-loading>
Project: {project}
</StyledBodyItem>
<ConditionallyRender
condition={featureLifecycleEnabled}
show={
<StyledBodyItem data-loading>
Lifecycle:{' '}
<FeatureLifecycleTooltip>
<span>Initial</span>
</FeatureLifecycleTooltip>
</StyledBodyItem>
}
/>
<ConditionallyRender
condition={Boolean(description)}
show={