feat: Stage timeline styling (#6903)

Unleash · Apr 23, 2024 · d59f1ad · d59f1ad
1 parent e7fe31e
commit d59f1ad
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 13 deletions.
diff --git a/frontend/src/assets/icons/stage-archived.svg b/frontend/src/assets/icons/stage-archived.svg
diff --git a/frontend/src/assets/icons/stage-completed-discarded.svg b/frontend/src/assets/icons/stage-completed-discarded.svg
diff --git a/frontend/src/assets/icons/stage-completed.svg b/frontend/src/assets/icons/stage-completed.svg
diff --git a/frontend/src/assets/icons/stage-initial.svg b/frontend/src/assets/icons/stage-initial.svg
diff --git a/frontend/src/assets/icons/stage-live.svg b/frontend/src/assets/icons/stage-live.svg
diff --git a/frontend/src/assets/icons/stage-pre-live.svg b/frontend/src/assets/icons/stage-pre-live.svg
diff --git a/...t/feature/FeatureView/FeatureOverview/FeatureLifecycleTooltip/FeatureLifecycleTooltip.tsx b/...t/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>
-                        <Badge>Initial</Badge>
+                        <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
-                    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),
-                    })}
-                >
+                <ColorFill>
                     <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>
         }
     >