feat: add tooltips to lifecycle boxes (#8739)

This pr adds tooltips to lifecycle boxes when they're hovered or focused. There's also some small copy tweaks. We decided to go with tooltips instead of buttons for this iteration because it'd be an easier thing to implement, especially in regards to keyboard navigation and avoiding overlapping other elements. I've also not changed the background color of the tooltips just yet. There's two reasons for this: 1. The practical reason is that our `HtmlTooltipComponent` doesn't allow you to do that and I didn't wanna start messing about with that. 2. If all our other tooltips follow this color scheme, why not do the same here? Especially because they're not buttons anymore, so using the same color as other tooltips seems sensible. ![image](https://github.com/user-attachments/assets/2e0ebf26-6809-4952-87db-9b7d2838eed7)
Unleash · Nov 13, 2024 · 088eaed · 088eaed
1 parent 940182a
commit 088eaed
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 45 deletions.
diff --git a/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts b/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts
@@ -5,12 +5,12 @@ export const lifecycleMessages: Record<
     string
 > = {
     initial:
-        'Feature flags in the initial phase indicate you have created flags that is not detected in any environments which mean either integration issues or unused flags',
+        'Feature flags in the initial phase are flags that have not yet received metrics from any environments. This might mean that the flags have not been used yet, or it could indicate integration issues.',
     preLive:
-        'In the pre-live phase the feature is being developed and tested in controlled environments. Once the feature is ready the flag can be enabled in production.',
-    live: 'The feature is being rolled out in production according to the decided strategy targeting user segments and/or using percentage rollout. ',
+        'In the pre-live phase, the feature is being developed and tested in controlled environments. Once the feature is ready, the flag can be enabled in production.',
+    live: 'The feature is being rolled out in production according to its assigned strategies (targeting user segments and/or using percentage rollout).',
     completed:
-        'Flags that are in cleanup are potentially stale flags. View the flags to evaluate whether you should archive them in Unleash and clean up your codebase to reduce technical debt',
+        'Flags that are in the completed phase still receive metrics in production. Consider archiving them to clean up your codebase to reduce technical debt.',
     archived:
         'Flags that have been archived and are no longer in use, but kept for future reference.',
 };
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
@@ -1,13 +1,15 @@
-import { CardActionArea, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { FeatureLifecycleStageIcon } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon';
 import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
 import useLoading from 'hooks/useLoading';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { useState, type FC } from 'react';
+import type { FC } from 'react';
 import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
 import type { ProjectStatusSchemaLifecycleSummary } from 'openapi';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
+import { lifecycleMessages } from './LifecycleMessages';
+import InfoIcon from '@mui/icons-material/Info';
 
 const LifecycleRow = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -33,32 +35,46 @@ const LifecycleBoxContent = styled('div')(({ theme }) => ({
     transition: 'border-color 200ms',
     borderRadius: theme.shape.borderRadiusExtraLarge,
     border: `2px solid ${theme.palette.divider}`,
-}));
-
-const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadiusExtraLarge,
-    '&[aria-pressed="true"] > *': {
+    '&:focus-visible': {
+        outline: 'none',
         borderColor: theme.palette.primary.main,
     },
 }));
 
+const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => {
+    const Container = styled('span')(({ theme }) => ({
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: theme.spacing(1),
+        fontSize: theme.typography.body1.fontSize,
+        padding: theme.spacing(1),
+    }));
+    return (
+        <Container>
+            <InfoIcon fontSize='small' color='primary' />
+            <p>{text}</p>
+        </Container>
+    );
+};
+
 const LifecycleBox = ({
     children,
-    isActive,
-    onClick,
+    tooltipText,
 }: {
     children: React.ReactNode;
-    isActive?: boolean;
-    onClick?: () => void;
+    tooltipText: string;
 }) => {
     return (
         <li>
-            <StyledCardActionArea
-                onClick={onClick}
-                aria-pressed={isActive ? 'true' : 'false'}
+            <HtmlTooltip
+                arrow
+                maxWidth='850px'
+                title={<LifecycleBoxTooltip text={tooltipText} />}
             >
-                <LifecycleBoxContent>{children}</LifecycleBoxContent>
-            </StyledCardActionArea>
+                <LifecycleBoxContent tabIndex={0}>
+                    {children}
+                </LifecycleBoxContent>
+            </HtmlTooltip>
         </li>
     );
 };
@@ -171,11 +187,7 @@ const LifecycleTooltip: FC = () => {
 export const ProjectLifecycleSummary = () => {
     const projectId = useRequiredPathParam('projectId');
     const { data, loading } = useProjectStatus(projectId);
-    const { isEnterprise } = useUiConfig();
 
-    const [activeLifecycleStage, setActiveLifecycleStage] = useState<
-        keyof ProjectStatusSchemaLifecycleSummary | null
-    >(null);
     const loadingRef = useLoading<HTMLUListElement>(
         loading,
         '[data-loading-project-lifecycle-summary=true]',
@@ -193,11 +205,9 @@ export const ProjectLifecycleSummary = () => {
                 <h4>Flag lifecycle</h4>
                 <LifecycleTooltip />
             </HeaderRow>
+
             <LifecycleList ref={loadingRef}>
-                <LifecycleBox
-                    onClick={() => setActiveLifecycleStage('initial')}
-                    isActive={activeLifecycleStage === 'initial'}
-                >
+                <LifecycleBox tooltipText={lifecycleMessages.initial}>
                     <p>
                         <Counter>
                             <BigNumber
@@ -217,10 +227,7 @@ export const ProjectLifecycleSummary = () => {
                         averageDays={data?.lifecycleSummary.initial.averageDays}
                     />
                 </LifecycleBox>
-                <LifecycleBox
-                    onClick={() => setActiveLifecycleStage('preLive')}
-                    isActive={activeLifecycleStage === 'preLive'}
-                >
+                <LifecycleBox tooltipText={lifecycleMessages.preLive}>
                     <p>
                         <Counter>
                             <BigNumber
@@ -240,10 +247,7 @@ export const ProjectLifecycleSummary = () => {
                         averageDays={data?.lifecycleSummary.preLive.averageDays}
                     />
                 </LifecycleBox>
-                <LifecycleBox
-                    onClick={() => setActiveLifecycleStage('live')}
-                    isActive={activeLifecycleStage === 'live'}
-                >
+                <LifecycleBox tooltipText={lifecycleMessages.live}>
                     <p>
                         <Counter>
                             <BigNumber
@@ -261,10 +265,7 @@ export const ProjectLifecycleSummary = () => {
                         averageDays={data?.lifecycleSummary.live.averageDays}
                     />
                 </LifecycleBox>
-                <LifecycleBox
-                    onClick={() => setActiveLifecycleStage('completed')}
-                    isActive={activeLifecycleStage === 'completed'}
-                >
+                <LifecycleBox tooltipText={lifecycleMessages.completed}>
                     <p>
                         <Counter>
                             <BigNumber
@@ -287,10 +288,7 @@ export const ProjectLifecycleSummary = () => {
                         }
                     />
                 </LifecycleBox>
-                <LifecycleBox
-                    onClick={() => setActiveLifecycleStage('archived')}
-                    isActive={activeLifecycleStage === 'archived'}
-                >
+                <LifecycleBox tooltipText={lifecycleMessages.archived}>
                     <p>
                         <Counter>
                             <BigNumber