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

feat: pass lifecycle stage to tooltip (#6904)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-04-23 11:19:24 +02:00 committed by GitHub
parent dec107a597
commit 18d317f1ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 90 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon.tsx Normal file
View File

@ -0,0 +1,35 @@
import type { FC } from 'react';
import { ReactComponent as InitialStageIcon } from 'assets/icons/stage-initial.svg';
import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.svg';
import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
import { ReactComponent as CompletedDiscardedStageIcon } from 'assets/icons/stage-completed-discarded.svg';
import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
export type LifecycleStage =
| { name: 'initial' }
| { name: 'pre-live' }
| { name: 'live' }
| {
name: 'completed';
status: 'kept' | 'discarded';
}
| { name: 'archived' };
export const FeatureLifecycleStageIcon: FC<{ stage: LifecycleStage }> = ({
stage,
}) => {
if (stage.name === 'archived') {
return <ArchivedStageIcon />;
} else if (stage.name === 'pre-live') {
return <PreLiveStageIcon />;
} else if (stage.name === 'live') {
return <LiveStageIcon />;
} else if (stage.name === 'completed' && stage.status === 'kept') {
return <CompletedStageIcon />;
} else if (stage.name === 'completed' && stage.status === 'discarded') {
return <CompletedDiscardedStageIcon />;
} else {
return <InitialStageIcon />;
}
};

48
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx → frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
View File

@ -7,7 +7,12 @@ import { ReactComponent as InitialStageIcon } from 'assets/icons/stage-initial.s
import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.svg';
import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
import { ReactComponent as CompletedDiscardedStageIcon } from 'assets/icons/stage-completed-discarded.svg';
import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
import {
FeatureLifecycleStageIcon,
type LifecycleStage,
} from './FeatureLifecycleStageIcon';
const TimeLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
@ -92,7 +97,8 @@ const ColorFill = styled(Box)(({ theme }) => ({
export const FeatureLifecycleTooltip: FC<{
children: React.ReactElement<any, any>;
}> = ({ children }) => (
stage: LifecycleStage;
}> = ({ children, stage }) => (
<HtmlTooltip
maxHeight={800}
maxWidth={350}
@ -109,8 +115,10 @@ export const FeatureLifecycleTooltip: FC<{
gap: 1,
}}
>
<Badge>Initial</Badge>
<InitialStageIcon />
<Badge sx={{ textTransform: 'capitalize' }}>
{stage.name}
</Badge>
<FeatureLifecycleStageIcon stage={stage} />
</Box>
</MainLifecycleRow>
<TimeLifecycleRow>
@ -122,31 +130,51 @@ export const FeatureLifecycleTooltip: FC<{
<span>3 days</span>
</TimeLifecycleRow>
<IconsRow>
<StageBox data-after-content='Initial' active={true}>
<StageBox
data-after-content='Initial'
active={stage.name === 'initial'}
>
<InitialStageIcon />
</StageBox>
<Line />
<StageBox data-after-content='Pre-live'>
<StageBox
data-after-content='Pre-live'
active={stage.name === 'pre-live'}
>
<PreLiveStageIcon />
</StageBox>
<Line />
<StageBox data-after-content='Live'>
<StageBox
data-after-content='Live'
active={stage.name === 'live'}
>
<LiveStageIcon />
</StageBox>
<Line />
<StageBox data-after-content='Completed'>
<CompletedStageIcon />
<StageBox
data-after-content='Completed'
active={stage.name === 'completed'}
>
{stage.name === 'completed' &&
stage.status === 'discarded' ? (
<CompletedDiscardedStageIcon />
) : (
<CompletedStageIcon />
)}
</StageBox>
<Line />
<StageBox data-after-content='Archived'>
<StageBox
data-after-content='Archived'
active={stage.name === 'archived'}
>
<ArchivedStageIcon />
</StageBox>
</IconsRow>
@ -168,6 +196,6 @@ export const FeatureLifecycleTooltip: FC<{
</Box>
}
>
{children}
<Box>{children}</Box>
</HtmlTooltip>
);

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

@ -8,7 +8,8 @@ import PermissionIconButton from 'component/common/PermissionIconButton/Permissi
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useUiFlag } from 'hooks/useUiFlag';
import { FeatureLifecycleTooltip } from '../FeatureLifecycleTooltip/FeatureLifecycleTooltip';
import { FeatureLifecycleTooltip } from '../FeatureLifecycle/FeatureLifecycleTooltip';
import { FeatureLifecycleStageIcon } from '../FeatureLifecycle/FeatureLifecycleStageIcon';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
@ -94,10 +95,21 @@ const FeatureOverviewMetaData = () => {
<ConditionallyRender
condition={featureLifecycleEnabled}
show={
<StyledBodyItem data-loading>
Lifecycle:{' '}
<FeatureLifecycleTooltip>
<span>Initial</span>
<StyledBodyItem
sx={{
display: 'flex',
gap: 1,
alignItems: 'start',
}}
data-loading
>
<span>Lifecycle:</span>
<FeatureLifecycleTooltip
stage={{ name: 'initial' }}
>
<FeatureLifecycleStageIcon
stage={{ name: 'initial' }}
/>
</FeatureLifecycleTooltip>
</StyledBodyItem>
}