From 90eed05296aab0e5fe5088761fbfbdead2b40d36 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Thu, 20 Mar 2025 13:19:16 +0100 Subject: [PATCH] Chore(1-3520)/playground disabled badges (#9583) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gives a small update in how we deal with unevaluated and disabled strategies in the new playground design: - "Unevaluated" badges go from yellow warning to blue info and their text changed to "Not evaluated" - Don't show "Not evaluated" badges on strategies that are disabled. To avoid this change affecting the current playground setup, I duplicated the old resultschip into a legacy file and changed the existing impl. To avoid updating all other files that use that chip (it's all over the playground) and checking flags or creating duplicates there, I decided to do a quick check at the top of the legacy file and use the new file if the flag is on. In doing so, I've also simplified the actual chip file and have more or less cut the total line count in it in two 😄 ![image](https://github.com/user-attachments/assets/44e38a8e-4faa-440b-82ed-9ee377160922) --- .../AdvancedPlaygroundEnvironmentCell.tsx | 2 +- .../FeatureDetails/FeatureDetails.tsx | 2 +- .../FeatureDetails/LegacyFeatureDetails.tsx | 2 +- .../StrategyItem/FeatureStrategyItem.tsx | 15 +-- .../LegacyFeatureStrategyItem.tsx | 2 +- .../FeatureStatusCell/FeatureStatusCell.tsx | 2 +- .../LegacyPlaygroundResultChip.tsx | 96 +++++++++++++++++++ .../PlaygroundResultChip.tsx | 91 ++++++------------ 8 files changed, 136 insertions(+), 76 deletions(-) create mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx index 6c7496bf18..0250d9523c 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentCell.tsx @@ -8,7 +8,7 @@ import { useTheme, } from '@mui/material'; import { flexRow } from '../../../../../themes/themeStyles'; -import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../../PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; import type React from 'react'; import { useState } from 'react'; 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 e56eefb55f..cdb84ee5db 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,6 @@ import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi'; import { Alert, Typography, useTheme, styled, IconButton } from '@mui/material'; -import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip'; import CloseOutlined from '@mui/icons-material/CloseOutlined'; import type React from 'react'; import { 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 4ebf9e60cc..660a7d690b 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,6 @@ import type { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi'; import { Alert, IconButton, Typography, useTheme, styled } from '@mui/material'; -import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../../PlaygroundResultChip/LegacyPlaygroundResultChip'; import CloseOutlined from '@mui/icons-material/CloseOutlined'; import type React from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index aaf4bb1fa2..e1aeff16ef 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -22,7 +22,7 @@ export const FeatureStrategyItem = ({ const label = result.evaluationStatus === 'incomplete' || result.evaluationStatus === 'unevaluated' - ? 'Unevaluated' + ? 'Not evaluated' : result.enabled ? 'True' : 'False'; @@ -33,12 +33,13 @@ export const FeatureStrategyItem = ({ strategyHeaderLevel={4} className={className} headerItemsLeft={ - + strategy.disabled ? null : ( + + ) } > diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx index 178df05f5c..8607e9305c 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx @@ -1,5 +1,5 @@ import { useTheme } from '@mui/material'; -import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/LegacyPlaygroundResultChip'; import type { PlaygroundStrategySchema, PlaygroundRequestSchema, diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx index bef4f51c31..97ab675b31 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx @@ -1,5 +1,5 @@ import { Box, styled } from '@mui/material'; -import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; +import { PlaygroundResultChip } from '../PlaygroundResultChip/LegacyPlaygroundResultChip'; import type { PlaygroundFeatureSchema } from 'openapi'; interface IFeatureStatusCellProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx new file mode 100644 index 0000000000..e85f161fc9 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/LegacyPlaygroundResultChip.tsx @@ -0,0 +1,96 @@ +// deprecated; remove with 'flagOverviewRedesign' flag +import type { VFC } from 'react'; +import { useTheme } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg'; +import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; +import WarningOutlined from '@mui/icons-material/WarningOutlined'; +import { Badge } from 'component/common/Badge/Badge'; +import { useUiFlag } from 'hooks/useUiFlag'; +import { PlaygroundResultChip as NewPlaygroundResultChip } from './PlaygroundResultChip'; + +interface IResultChipProps { + enabled: boolean | 'unevaluated' | 'unknown'; + label: string; + // Result icon - defaults to true + showIcon?: boolean; + tabindex?: number; +} + +export const PlaygroundResultChip: VFC = ({ + enabled, + label, + showIcon = true, + tabindex, +}) => { + const theme = useTheme(); + const flagOverviewRedesign = useUiFlag('flagOverviewRedesign'); + if (flagOverviewRedesign) { + return ( + + ); + } + const icon = ( + } + elseShow={ + + } + elseShow={ + + } + /> + } + /> + ); + + return ( + + {label} + + } + elseShow={ + + {label} + + } + elseShow={ + + {label} + + } + /> + } + /> + ); +}; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx index f7ef9883c9..36c9fea6d2 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx @@ -1,83 +1,46 @@ -import type { VFC } from 'react'; -import { useTheme } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ReactComponent as FeatureEnabledIcon } from 'assets/icons/isenabled-true.svg'; import { ReactComponent as FeatureDisabledIcon } from 'assets/icons/isenabled-false.svg'; -import WarningOutlined from '@mui/icons-material/WarningOutlined'; import { Badge } from 'component/common/Badge/Badge'; +import type { FC } from 'react'; +import InfoOutlined from '@mui/icons-material/InfoOutlined'; -interface IResultChipProps { +interface ResultChipProps { enabled: boolean | 'unevaluated' | 'unknown'; label: string; // Result icon - defaults to true showIcon?: boolean; - tabindex?: number; } -export const PlaygroundResultChip: VFC = ({ +const useIconAndColor = ( + enabled: boolean | 'unevaluated' | 'unknown', +): [any, any] => { + if (enabled === 'unknown' || enabled === 'unevaluated') { + return [InfoOutlined, 'info']; + } else if (enabled === true) { + return [FeatureEnabledIcon, 'success']; + } else { + return [FeatureDisabledIcon, 'error']; + } +}; + +export const PlaygroundResultChip: FC = ({ enabled, label, showIcon = true, - tabindex, }) => { - const theme = useTheme(); - const icon = ( - } - elseShow={ - - } - elseShow={ - - } - /> - } - /> - ); + const [Icon, color] = useIconAndColor(enabled); return ( - - {label} - + + ) : undefined } - elseShow={ - - {label} - - } - elseShow={ - - {label} - - } - /> - } - /> + > + {label} + ); };