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

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentFooter/EnvironmentFooter.tsx

@@ -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 (
-        <>
-            <SectionSeparator>
-                <StyledLabel>Feature flag exposure</StyledLabel>
-            </SectionSeparator>
-
-            <div>
-                <FeatureMetricsStats
-                    totalYes={environmentMetric.yes}
-                    totalNo={environmentMetric.no}
-                    hoursBack={1}
-                />
-            </div>
-        </>
-    );
-};

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 = ({
                 </EnvironmentHeader>
                 <NewStyledAccordionDetails>
                     <StyledEnvironmentAccordionContainer>
-                        <NewEnvironmentAccordionBody
+                        <EnvironmentAccordionBody
                             featureEnvironment={environment}
                             isDisabled={!environment.enabled}
                             otherEnvironments={otherEnvironments}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/EnvironmentVisibilityMenu/hooks/useEnvironmentVisibility.ts

@@ -1,16 +1,10 @@
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { createLocalStorage } from 'utils/createLocalStorage';
-
-// Reading legacy value will be safely refactored out in a next version - related to `flagOverviewRedesign` flag
-const { value: legacyStoreValue } = createLocalStorage<{
-    hiddenEnvironments?: Array<string>;
-}>('global:v1', {});
 
 export const useEnvironmentVisibility = () => {
     const [value, setValue] = useLocalStorageState<Array<string>>(
         'environment-visibiilty',
-        legacyStoreValue?.hiddenEnvironments || [],
+        [],
     );
     const { trackEvent } = usePlausibleTracker();
 

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx

@@ -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 (
-        <StyledStrategy>
-            <StyledHeader>
-                <Icon />
-                {`${formatStrategyName(String(strategy.strategyName))}${strategy.title ? `: ${strategy.title}` : ''}`}
-            </StyledHeader>
-            <StrategyExecution strategy={strategy} displayGroupId />
-            {strategy.variants &&
-                strategy.variants.length > 0 &&
-                (strategy.disabled ? (
-                    <Box sx={{ opacity: '0.5' }}>
-                        <VariantsSplitPreview variants={strategy.variants} />
-                    </Box>
-                ) : (
-                    <VariantsSplitPreview variants={strategy.variants} />
-                ))}
-        </StyledStrategy>
-    );
-};

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',

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',

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',

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;

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx

@@ -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<IResultChipProps> = ({
-    enabled,
-    label,
-    showIcon = true,
-}) => (
-    <NewPlaygroundResultChip
-        enabled={enabled}
-        label={label}
-        showIcon={showIcon}
-    />
-);

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
          */

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
          */

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
          **/