diff --git a/frontend/src/assets/icons/stage-archived.svg b/frontend/src/assets/icons/stage-archived.svg new file mode 100644 index 0000000000..53bf6ce79a --- /dev/null +++ b/frontend/src/assets/icons/stage-archived.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/assets/icons/stage-completed-discarded.svg b/frontend/src/assets/icons/stage-completed-discarded.svg new file mode 100644 index 0000000000..d7e6e40144 --- /dev/null +++ b/frontend/src/assets/icons/stage-completed-discarded.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/assets/icons/stage-completed.svg b/frontend/src/assets/icons/stage-completed.svg new file mode 100644 index 0000000000..63bbf00ba3 --- /dev/null +++ b/frontend/src/assets/icons/stage-completed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/assets/icons/stage-initial.svg b/frontend/src/assets/icons/stage-initial.svg new file mode 100644 index 0000000000..59ea830cac --- /dev/null +++ b/frontend/src/assets/icons/stage-initial.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/icons/stage-live.svg b/frontend/src/assets/icons/stage-live.svg new file mode 100644 index 0000000000..86855fb9c0 --- /dev/null +++ b/frontend/src/assets/icons/stage-live.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/assets/icons/stage-pre-live.svg b/frontend/src/assets/icons/stage-pre-live.svg new file mode 100644 index 0000000000..fac4bdf880 --- /dev/null +++ b/frontend/src/assets/icons/stage-pre-live.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx index 09967e7ace..633a20c425 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx @@ -1,8 +1,13 @@ import { Box, styled, Typography } from '@mui/material'; -import { Badge } from '../../../../common/Badge/Badge'; +import { Badge } from 'component/common/Badge/Badge'; import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; -import type { FC } from 'react'; import type * as React from 'react'; +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 ArchivedStageIcon } from 'assets/icons/stage-archived.svg'; const TimeLabel = styled('span')(({ theme }) => ({ color: theme.palette.text.secondary, @@ -24,18 +29,89 @@ const TimeLifecycleRow = styled(Box)(({ theme }) => ({ marginBottom: theme.spacing(1.5), })); +const IconsRow = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4), + marginBottom: theme.spacing(6), +})); + +const Line = styled(Box)(({ theme }) => ({ + height: '1px', + background: theme.palette.background.application, + flex: 1, +})); + +const StageBox = styled(Box, { + shouldForwardProp: (prop) => prop !== 'active', +})<{ active?: boolean }>(({ theme, active }) => ({ + position: 'relative', + // speech bubble triangle for active stage + ...(active && { + '&:before': { + content: '""', + position: 'absolute', + display: 'block', + borderStyle: 'solid', + borderColor: `${theme.palette.primary.main} transparent`, + borderWidth: '0 6px 6px', + top: theme.spacing(3.25), + left: theme.spacing(1.75), + }, + }), + // stage name text + '&:after': { + content: 'attr(data-after-content)', + display: 'block', + position: 'absolute', + top: theme.spacing(4), + left: theme.spacing(-1.25), + right: theme.spacing(-1.25), + textAlign: 'center', + whiteSpace: 'nowrap', + fontSize: theme.spacing(1.25), + padding: theme.spacing(0.25, 0), + color: theme.palette.text.secondary, + // active wrapper for stage name text + ...(active && { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + fontWeight: theme.fontWeight.bold, + borderRadius: theme.spacing(0.5), + }), + }, +})); + +const ColorFill = styled(Box)(({ 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 + padding: theme.spacing(2, 3), +})); + export const FeatureLifecycleTooltip: FC<{ children: React.ReactElement; }> = ({ children }) => ( ({ padding: theme.spacing(2) })}> Lifecycle - Initial + + Initial + + Stage entered at @@ -45,16 +121,37 @@ export const FeatureLifecycleTooltip: FC<{ Time spent in stage 3 days + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - ({ - 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), - })} - > + This feature toggle is currently in the initial phase of it's life cycle. @@ -67,7 +164,7 @@ export const FeatureLifecycleTooltip: FC<{ Once we detect metrics for a non-production environment it will move into pre-live. - + } >