From 0aebaefedb200e49032c7f6c1e34031e2274a7e5 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 13:15:03 +0100 Subject: [PATCH 1/8] 1-3106: update completed copy --- .../project/Project/ProjectStatus/LifecycleMessages.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts b/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts index 3641cca2ffdb..d38a253b4812 100644 --- a/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts +++ b/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts @@ -10,7 +10,7 @@ export const lifecycleMessages: Record< '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. ', 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.', }; From a400a57da641a5b417b0f69e76d02881ecf5c7ba Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 13:37:11 +0100 Subject: [PATCH 2/8] 1-3106: switch to using focus for showing stuff --- .../ProjectStatus/ProjectLifecycleSummary.tsx | 53 ++++++------------- 1 file changed, 17 insertions(+), 36 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index a872ace6b448..6f30e57902be 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -1,4 +1,4 @@ -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'; @@ -8,6 +8,8 @@ import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/Pretti 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'; const LifecycleRow = styled('div')(({ theme }) => ({ display: 'flex', @@ -33,32 +35,26 @@ 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 LifecycleBox = ({ children, - isActive, - onClick, + tooltipText, }: { children: React.ReactNode; - isActive?: boolean; - onClick?: () => void; + tooltipText: string; }) => { return (
  • - - {children} - + + + {children} + +
    • ); }; @@ -194,10 +190,7 @@ export const ProjectLifecycleSummary = () => { - setActiveLifecycleStage('initial')} - isActive={activeLifecycleStage === 'initial'} - > +

    { averageDays={data?.lifecycleSummary.initial.averageDays} /> - setActiveLifecycleStage('preLive')} - isActive={activeLifecycleStage === 'preLive'} - > +

    { averageDays={data?.lifecycleSummary.preLive.averageDays} /> - setActiveLifecycleStage('live')} - isActive={activeLifecycleStage === 'live'} - > +

    { averageDays={data?.lifecycleSummary.live.averageDays} /> - setActiveLifecycleStage('completed')} - isActive={activeLifecycleStage === 'completed'} - > +

    { } /> - setActiveLifecycleStage('archived')} - isActive={activeLifecycleStage === 'archived'} - > +

    Date: Wed, 13 Nov 2024 13:38:56 +0100 Subject: [PATCH 3/8] 1-3106: do some cleanup --- .../Project/ProjectStatus/ProjectLifecycleSummary.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index 6f30e57902be..87994fcabcfc 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -3,10 +3,9 @@ import { FeatureLifecycleStageIcon } from 'component/feature/FeatureView/Feature 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'; @@ -167,11 +166,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( loading, '[data-loading-project-lifecycle-summary=true]', From 8347fcffc393d129b38a53774e747ab9b8cf9798 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 14:19:31 +0100 Subject: [PATCH 4/8] 1-3106: add rough lifecycle tooltip --- .../ProjectStatus/ProjectLifecycleSummary.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index 87994fcabcfc..81d9f76a1c98 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -9,6 +9,7 @@ import type { ProjectStatusSchemaLifecycleSummary } from 'openapi'; 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', @@ -40,6 +41,20 @@ const LifecycleBoxContent = styled('div')(({ theme }) => ({ }, })); +const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => { + const Container = styled('span')(({ theme }) => ({ + display: 'flex', + alignItems: 'flex-start', + gap: theme.spacing(1), + })); + return ( + + +

    {text}

    + + ); +}; + const LifecycleBox = ({ children, tooltipText, @@ -49,7 +64,11 @@ const LifecycleBox = ({ }) => { return (
  • - + } + > {children} From 2180867c4ef7e74f508f0e391bba75ea12fa7431 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 14:33:40 +0100 Subject: [PATCH 5/8] 1-3106: style up temp tooltip --- .../ProjectStatus/ProjectLifecycleSummary.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index 81d9f76a1c98..523fbd259cb2 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -1,4 +1,4 @@ -import { styled } from '@mui/material'; +import { Box, 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'; @@ -46,15 +46,20 @@ const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => { display: 'flex', alignItems: 'flex-start', gap: theme.spacing(1), + fontSize: theme.typography.body1.fontSize, })); return ( - +

    {text}

     ); }; +const StyledHtmlTooltip = styled(HtmlTooltip)(({ theme }) => ({ + backgroundColor: theme.palette.envAccordion.expanded, +})); + const LifecycleBox = ({ children, tooltipText, @@ -203,6 +208,17 @@ export const ProjectLifecycleSummary = () => {

    Flag lifecycle

    + + + +

    From 6b9421e180318d0360b5f27b63040b1d26812f68 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 14:38:09 +0100 Subject: [PATCH 6/8] 1-3106: do some more styling --- .../Project/ProjectStatus/ProjectLifecycleSummary.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index 523fbd259cb2..ca867d8e080c 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -47,6 +47,7 @@ const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => { alignItems: 'flex-start', gap: theme.spacing(1), fontSize: theme.typography.body1.fontSize, + padding: theme.spacing(1), })); return ( @@ -56,10 +57,6 @@ const LifecycleBoxTooltip: FC<{ text: string }> = ({ text }) => { ); }; -const StyledHtmlTooltip = styled(HtmlTooltip)(({ theme }) => ({ - backgroundColor: theme.palette.envAccordion.expanded, -})); - const LifecycleBox = ({ children, tooltipText, @@ -71,7 +68,7 @@ const LifecycleBox = ({

  • } > From 3dc32a20352639cd59f8b41f3d8ae3c94174bb72 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 14:38:53 +0100 Subject: [PATCH 7/8] 1-3106: remove sketch box --- .../ProjectStatus/ProjectLifecycleSummary.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx index ca867d8e080c..b59a48111d32 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx @@ -1,4 +1,4 @@ -import { Box, 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'; @@ -205,16 +205,6 @@ export const ProjectLifecycleSummary = () => {

    Flag lifecycle

    - - - From d9f4bf41afd92c2e5721969f823122155b487580 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 13 Nov 2024 14:47:40 +0100 Subject: [PATCH 8/8] 1-3106: copy tweaks --- .../project/Project/ProjectStatus/LifecycleMessages.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts b/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts index d38a253b4812..8669886c0651 100644 --- a/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts +++ b/frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts @@ -5,10 +5,10 @@ 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 the completed phase still receive metrics in production. Consider archiving them to clean up your codebase to reduce technical debt.', archived: