From 366915bf711ad199de2facf623cc9e2a15679027 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 13 Jun 2025 12:41:08 +0200 Subject: [PATCH] chore(1-3832): clean up flag overview redesign (#10140) Addresses and removes all leftover comments related to the flag overview redesign flag. There's four changes here: 1. Remove release plan milestone strategy and environment footer. Dangling files, no references. 2. Delete old code without references in theme.ts 3. Delete legacy playground result chip. Replace all references to it with references to the new chip. The API is the exact same and the legacy chip was just passing through everything to the new chip anyway, so nothing should change. 4. Remove a now-redundant way to supply a default --- .../EnvironmentFooter/EnvironmentFooter.tsx | 40 ------------- .../FeatureOverviewEnvironment.tsx | 4 +- .../hooks/useEnvironmentVisibility.ts | 8 +-- .../ReleasePlanMilestoneStrategy.tsx | 56 ------------------- .../AdvancedPlaygroundEnvironmentCell.tsx | 2 +- .../FeatureDetails/FeatureDetails.tsx | 2 +- .../FeatureDetails/LegacyFeatureDetails.tsx | 2 +- .../FeatureStatusCell/FeatureStatusCell.tsx | 2 +- .../LegacyPlaygroundResultChip.tsx | 24 -------- frontend/src/themes/dark-theme.ts | 8 --- frontend/src/themes/theme.ts | 10 ---- frontend/src/themes/themeTypes.ts | 8 --- 12 files changed, 7 insertions(+), 159 deletions(-) delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx deleted file mode 100644 index 6717fdc52b..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle'; -import { FeatureMetricsStats } from 'component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats'; -import { SectionSeparator } from '../SectionSeparator/SectionSeparator.tsx'; -import { styled } from '@mui/material'; - -const StyledLabel = styled('span')(({ theme }) => ({ - background: theme.palette.envAccordion.expanded, - padding: theme.spacing(0, 2), -})); - -interface IEnvironmentFooterProps { - environmentMetric?: IFeatureEnvironmentMetrics; -} - -/** - * @deprecated remove with `featureOverviewRedesign` flag - */ -export const EnvironmentFooter = ({ - environmentMetric, -}: IEnvironmentFooterProps) => { - if (!environmentMetric) { - return null; - } - - return ( - <> - - Feature flag exposure - - -
- -
- - ); -}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 029aae374d..dcda1f02c8 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -16,7 +16,7 @@ import FeatureOverviewEnvironmentMetrics from './EnvironmentHeader/FeatureOvervi import { FeatureOverviewEnvironmentToggle } from './EnvironmentHeader/FeatureOverviewEnvironmentToggle/FeatureOverviewEnvironmentToggle.tsx'; import { useState } from 'react'; import type { IReleasePlan } from 'interfaces/releasePlans'; -import { EnvironmentAccordionBody as NewEnvironmentAccordionBody } from './EnvironmentAccordionBody/EnvironmentAccordionBody.tsx'; +import { EnvironmentAccordionBody } from './EnvironmentAccordionBody/EnvironmentAccordionBody.tsx'; import { Box } from '@mui/material'; import { ReleaseTemplatesFeedback } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback'; @@ -119,7 +119,7 @@ export const FeatureOverviewEnvironment = ({ - ; -}>('global:v1', {}); export const useEnvironmentVisibility = () => { const [value, setValue] = useLocalStorageState>( 'environment-visibiilty', - legacyStoreValue?.hiddenEnvironments || [], + [], ); const { trackEvent } = usePlausibleTracker(); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx deleted file mode 100644 index c60e440441..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx +++ /dev/null @@ -1,56 +0,0 @@ -// deprecated; remove with `flagOverviewRedesign` flag -import { Box, styled } from '@mui/material'; -import { StrategyExecution } from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx'; -import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; -import { - formatStrategyName, - getFeatureStrategyIcon, -} from 'utils/strategyNames'; -import type { IFeatureStrategy } from 'interfaces/strategy'; - -const StyledStrategy = styled('div')(({ theme }) => ({ - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadiusMedium, - padding: theme.spacing(2), -})); - -const StyledHeader = styled('div')(({ theme }) => ({ - display: 'flex', - gap: theme.spacing(1), - alignItems: 'center', - color: theme.palette.text.primary, - '& > svg': { - fill: theme.palette.action.disabled, - }, - marginBottom: theme.spacing(1), -})); - -interface IReleasePlanMilestoneStrategyProps { - strategy: IFeatureStrategy; -} - -export const ReleasePlanMilestoneStrategy = ({ - strategy, -}: IReleasePlanMilestoneStrategyProps) => { - const Icon = getFeatureStrategyIcon(strategy.strategyName); - - return ( - - - - {`${formatStrategyName(String(strategy.strategyName))}${strategy.title ? `: ${strategy.title}` : ''}`} - - - {strategy.variants && - strategy.variants.length > 0 && - (strategy.disabled ? ( - - - - ) : ( - - ))} - - ); -}; diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx index 9aac66832f..e46a0b9b61 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx @@ -8,12 +8,12 @@ import { useTheme, } from '@mui/material'; import { flexRow } from '../../../../../themes/themeStyles.ts'; -import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; import type React from 'react'; import { useState } from 'react'; import type { AdvancedPlaygroundEnvironmentFeatureSchema } from 'openapi'; import { PlaygroundEnvironmentTable } from '../../PlaygroundEnvironmentTable/PlaygroundEnvironmentTable.tsx'; +import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx'; const StyledContainer = styled( 'div', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx index e4dfd34bfe..d9e21e9413 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -1,6 +1,5 @@ import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi'; import { Alert, Typography, useTheme, styled, IconButton } from '@mui/material'; -import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip.tsx'; import CloseOutlined from '@mui/icons-material/CloseOutlined'; import type React from 'react'; import { @@ -8,6 +7,7 @@ import { hasCustomStrategies, hasOnlyCustomStrategies, } from './helpers.ts'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip.tsx'; const HeaderRow = styled('div')({ display: 'flex', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/LegacyFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/LegacyFeatureDetails.tsx index 7b2be6fe90..cc225e2bc2 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/LegacyFeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/LegacyFeatureDetails.tsx @@ -1,6 +1,5 @@ import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi'; import { Alert, IconButton, Typography, useTheme, styled } from '@mui/material'; -import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip.tsx'; import CloseOutlined from '@mui/icons-material/CloseOutlined'; import type React from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -9,6 +8,7 @@ import { hasCustomStrategies, hasOnlyCustomStrategies, } from './helpers.ts'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip.tsx'; const StyledDivWrapper = styled('div')({ display: 'flex', diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index 48b5163b49..b3c130491c 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -1,6 +1,6 @@ import { Box, styled } from '@mui/material'; -import { PlaygroundResultChip } from '../PlaygroundResultChip/LegacyPlaygroundResultChip.tsx'; import type { PlaygroundFeatureSchema } from 'openapi'; +import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip.tsx'; interface IFeatureStatusCellProps { feature: PlaygroundFeatureSchema; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx deleted file mode 100644 index eb3990d87a..0000000000 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { VFC } from 'react'; -import { PlaygroundResultChip as NewPlaygroundResultChip } from './PlaygroundResultChip.tsx'; - -interface IResultChipProps { - enabled: boolean | 'unevaluated' | 'unknown'; - label: string; - // Result icon - defaults to true - showIcon?: boolean; -} - -/** - * @deprecated remove with 'flagOverviewRedesign' flag. This pollutes a lot of places in the codebase 😞 - */ -export const PlaygroundResultChip: VFC = ({ - enabled, - label, - showIcon = true, -}) => ( - -); diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts index ef209550fe..448048eb29 100644 --- a/frontend/src/themes/dark-theme.ts +++ b/frontend/src/themes/dark-theme.ts @@ -194,14 +194,6 @@ const theme = { primary: '#302E42', }, - /** - * For Environment Accordion - */ - envAccordion: { - disabled: '#2B2A3C', - expanded: '#1A1924', - }, - /** * MUI grey colors */ diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index e088a81e36..720922d03f 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -250,16 +250,6 @@ const theme = { primary: colors.purple[100], }, - /** - * For Environment Accordion. - * @deprecated Use `elevation1` for `disabled` and `elevation2` for `expanded` instead. - * remove with the flagOverviewRedesign flag - */ - envAccordion: { - disabled: colors.grey[100], - expanded: colors.grey[200], - }, - /** * MUI grey colors */ diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index 3bcf15735a..28615b985b 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -129,14 +129,6 @@ declare module '@mui/material/styles' { */ links: string; - /** - * For Environment Accordion - */ - envAccordion: { - disabled: string; - expanded: string; - }; - /** * Variants, percentage split in strategies **/