feat: Stage timeline styling (#6903)

frontend/src/assets/icons/stage-archived.svg

@@ -0,0 +1,8 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F3F3FD"/>
+    <path d="M8.48149 4.7716C9.27968 3.84038 10.7203 3.84038 11.5185 4.7716L14.8844 8.69842C15.5263 9.4474 15.5263 10.5526 14.8844 11.3016L11.5185 15.2284C10.7203 16.1596 9.27968 16.1596 8.48149 15.2284L5.11564 11.3016C4.47366 10.5526 4.47366 9.4474 5.11564 8.69842L8.48149 4.7716Z" fill="#9F9FA1"/>
+    <path d="M17.2778 4.12081C16.0805 2.72397 13.9195 2.72397 12.7222 4.12081L9.35639 8.04763C8.39341 9.17109 8.39341 10.8289 9.35639 11.9524L12.7222 15.8792C13.9195 17.276 16.0805 17.276 17.2778 15.8792L20.6436 11.9524C21.6066 10.8289 21.6066 9.1711 20.6436 8.04763L17.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M22.2778 4.12081C21.0805 2.72397 18.9195 2.72397 17.7222 4.12081L14.3564 8.04763C13.3934 9.17109 13.3934 10.8289 14.3564 11.9524L17.7222 15.8792C18.9195 17.276 21.0805 17.276 22.2778 15.8792L25.6436 11.9524C26.6066 10.8289 26.6066 9.1711 25.6436 8.04763L22.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M27.2778 4.12081C26.0805 2.72397 23.9195 2.72397 22.7222 4.12081L19.3564 8.04763C18.3934 9.17109 18.3934 10.8289 19.3564 11.9524L22.7222 15.8792C23.9195 17.276 26.0805 17.276 27.2778 15.8792L30.6436 11.9524C31.6066 10.8289 31.6066 9.17109 30.6436 8.04763L27.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M32.2778 4.12081C31.0805 2.72397 28.9195 2.72397 27.7222 4.12081L24.3564 8.04763C23.3934 9.17109 23.3934 10.8289 24.3564 11.9524L27.7222 15.8792C28.9195 17.276 31.0805 17.276 32.2778 15.8792L35.6436 11.9524C36.6066 10.8289 36.6066 9.17109 35.6436 8.04763L32.2778 4.12081Z" fill="#6E6E70" stroke="#F3F3FD" stroke-width="2"/>
+</svg>

frontend/src/assets/icons/stage-completed-discarded.svg

@@ -0,0 +1,7 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#FFF2F3"/>
+    <path d="M10.4815 4.7716C11.2797 3.84038 12.7203 3.84038 13.5185 4.7716L16.8844 8.69842C17.5263 9.4474 17.5263 10.5526 16.8844 11.3016L13.5185 15.2284C12.7203 16.1596 11.2797 16.1596 10.4815 15.2284L7.11564 11.3016C6.47366 10.5526 6.47366 9.4474 7.11564 8.69842L10.4815 4.7716Z" fill="#FEB0B7"/>
+    <path d="M19.2778 4.12081C18.0805 2.72397 15.9195 2.72397 14.7222 4.12081L11.3564 8.04763C10.3934 9.17109 10.3934 10.8289 11.3564 11.9524L14.7222 15.8792C15.9195 17.276 18.0805 17.276 19.2778 15.8792L22.6436 11.9524C23.6066 10.8289 23.6066 9.1711 22.6436 8.04763L19.2778 4.12081Z" fill="#FEB0B7" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M24.2778 4.12081C23.0805 2.72397 20.9195 2.72397 19.7222 4.12081L16.3564 8.04763C15.3934 9.17109 15.3934 10.8289 16.3564 11.9524L19.7222 15.8792C20.9195 17.276 23.0805 17.276 24.2778 15.8792L27.6436 11.9524C28.6066 10.8289 28.6066 9.17109 27.6436 8.04763L24.2778 4.12081Z" fill="#FEB0B7" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M29.2778 4.12081C28.0805 2.72397 25.9195 2.72397 24.7222 4.12081L21.3564 8.04763C20.3934 9.17109 20.3934 10.8289 21.3564 11.9524L24.7222 15.8792C25.9195 17.276 28.0805 17.276 29.2778 15.8792L32.6436 11.9524C33.6066 10.8289 33.6066 9.1711 32.6436 8.04763L29.2778 4.12081Z" fill="#D93644" stroke="#F3F3FD" stroke-width="2"/>
+</svg>

frontend/src/assets/icons/stage-completed.svg

@@ -0,0 +1,7 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F4FAEB"/>
+    <path d="M10.4815 4.7716C11.2797 3.84038 12.7203 3.84038 13.5185 4.7716L16.8844 8.69842C17.5263 9.4474 17.5263 10.5526 16.8844 11.3016L13.5185 15.2284C12.7203 16.1596 11.2797 16.1596 10.4815 15.2284L7.11564 11.3016C6.47366 10.5526 6.47366 9.4474 7.11564 8.69842L10.4815 4.7716Z" fill="#B0D182"/>
+    <path d="M19.2778 4.12081C18.0805 2.72397 15.9195 2.72397 14.7222 4.12081L11.3564 8.04763C10.3934 9.17109 10.3934 10.8289 11.3564 11.9524L14.7222 15.8792C15.9195 17.276 18.0805 17.276 19.2778 15.8792L22.6436 11.9524C23.6066 10.8289 23.6066 9.1711 22.6436 8.04763L19.2778 4.12081Z" fill="#B0D182" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M24.2778 4.12081C23.0805 2.72397 20.9195 2.72397 19.7222 4.12081L16.3564 8.04763C15.3934 9.17109 15.3934 10.8289 16.3564 11.9524L19.7222 15.8792C20.9195 17.276 23.0805 17.276 24.2778 15.8792L27.6436 11.9524C28.6066 10.8289 28.6066 9.1711 27.6436 8.04763L24.2778 4.12081Z" fill="#B0D182" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M29.2778 4.12081C28.0805 2.72397 25.9195 2.72397 24.7222 4.12081L21.3564 8.04763C20.3934 9.17109 20.3934 10.8289 21.3564 11.9524L24.7222 15.8792C25.9195 17.276 28.0805 17.276 29.2778 15.8792L32.6436 11.9524C33.6066 10.8289 33.6066 9.1711 32.6436 8.04763L29.2778 4.12081Z" fill="#68A611" stroke="#F3F3FD" stroke-width="2"/>
+</svg>

frontend/src/assets/icons/stage-initial.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="39" height="19" rx="3.5" stroke="#BDBDBF" stroke-dasharray="2 2"/>
+    <path d="M18.8611 5.09699C19.4598 4.39858 20.5402 4.39858 21.1389 5.09699L24.5047 9.02381C24.9862 9.58555 24.9862 10.4145 24.5047 10.9762L21.1389 14.903C20.5402 15.6014 19.4598 15.6014 18.8611 14.903L15.4953 10.9762C15.0138 10.4145 15.0138 9.58555 15.4953 9.02381L18.8611 5.09699Z" stroke="#78787A"/>
+</svg>

frontend/src/assets/icons/stage-live.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F3F3FD"/>
+    <path d="M12.4815 4.7716C13.2797 3.84038 14.7203 3.84038 15.5185 4.7716L18.8844 8.69842C19.5263 9.4474 19.5263 10.5526 18.8844 11.3016L15.5185 15.2284C14.7203 16.1596 13.2797 16.1596 12.4815 15.2284L9.11564 11.3016C8.47366 10.5526 8.47366 9.4474 9.11564 8.69842L12.4815 4.7716Z" fill="#BEBBF3"/>
+    <path d="M22.2778 4.12081C21.0805 2.72397 18.9195 2.72397 17.7222 4.12081L14.3564 8.04763C13.3934 9.17109 13.3934 10.8289 14.3564 11.9524L17.7222 15.8792C18.9195 17.276 21.0805 17.276 22.2778 15.8792L25.6436 11.9524C26.6066 10.8289 26.6066 9.1711 25.6436 8.04763L22.2778 4.12081Z" fill="#BEBBF3" stroke="#F3F3FD" stroke-width="2"/>
+    <path d="M28.2778 4.12081C27.0805 2.72397 24.9195 2.72397 23.7222 4.12081L20.3564 8.04763C19.3934 9.17109 19.3934 10.8289 20.3564 11.9524L23.7222 15.8792C24.9195 17.276 27.0805 17.276 28.2778 15.8792L31.6436 11.9524C32.6066 10.8289 32.6066 9.1711 31.6436 8.04763L28.2778 4.12081Z" fill="#817AFE" stroke="#F3F3FD" stroke-width="2"/>
+</svg>

frontend/src/assets/icons/stage-pre-live.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="39" height="19" rx="3.5" stroke="#BDBDBF" stroke-dasharray="2 2"/>
+    <path d="M15.4815 4.7716C16.2797 3.84038 17.7203 3.84038 18.5185 4.7716L21.8844 8.69842C22.5263 9.4474 22.5263 10.5526 21.8844 11.3016L18.5185 15.2284C17.7203 16.1596 16.2797 16.1596 15.4815 15.2284L12.1156 11.3016C11.4737 10.5526 11.4737 9.4474 12.1156 8.69842L15.4815 4.7716Z" fill="#BDBDBF"/>
+    <path d="M25.2778 4.12081C24.0805 2.72397 21.9195 2.72397 20.7222 4.12081L17.3564 8.04763C16.3934 9.17109 16.3934 10.8289 17.3564 11.9524L20.7222 15.8792C21.9195 17.276 24.0805 17.276 25.2778 15.8792L28.6436 11.9524C29.6066 10.8289 29.6066 9.1711 28.6436 8.04763L25.2778 4.12081Z" fill="#78787A" stroke="#F7F7FA" stroke-width="2"/>
+</svg>

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<any, any>;
 }> = ({ children }) => (
     <HtmlTooltip
         maxHeight={800}
+        maxWidth={350}
         arrow
         title={
             <Box>
                 <Box sx={(theme) => ({ padding: theme.spacing(2) })}>
                     <MainLifecycleRow>
                         <Typography variant='h3'>Lifecycle</Typography>
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                            }}
+                        >
                             <Badge>Initial</Badge>
+                            <InitialStageIcon />
+                        </Box>
                     </MainLifecycleRow>
                     <TimeLifecycleRow>
                         <TimeLabel>Stage entered at</TimeLabel>
@@ -45,16 +121,37 @@ export const FeatureLifecycleTooltip: FC<{
                         <TimeLabel>Time spent in stage</TimeLabel>
                         <span>3 days</span>
                     </TimeLifecycleRow>
+                    <IconsRow>
+                        <StageBox data-after-content='Initial' active={true}>
+                            <InitialStageIcon />
+                        </StageBox>
+
+                        <Line />
+
+                        <StageBox data-after-content='Pre-live'>
+                            <PreLiveStageIcon />
+                        </StageBox>
+
+                        <Line />
+
+                        <StageBox data-after-content='Live'>
+                            <LiveStageIcon />
+                        </StageBox>
+
+                        <Line />
+
+                        <StageBox data-after-content='Completed'>
+                            <CompletedStageIcon />
+                        </StageBox>
+
+                        <Line />
+
+                        <StageBox data-after-content='Archived'>
+                            <ArchivedStageIcon />
+                        </StageBox>
+                    </IconsRow>
                 </Box>
-                <Box
+                <ColorFill>
-                    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.
@@ -67,7 +164,7 @@ export const FeatureLifecycleTooltip: FC<{
                         Once we detect metrics for a non-production environment
                         it will move into pre-live.
                     </InfoText>
-                </Box>
+                </ColorFill>
             </Box>
         }
     >