From eaaaa291991e44d2a630f0239d8a69ee337b580a Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 12 Aug 2022 16:33:18 +0300 Subject: [PATCH] Playground UI bugs and improvements (#1219) * fix status cell logic * Add back disabled env wrapper * Add back disabled env wrapper * fmt * Wording improvements, refactor for readability * improvement * fmt * Fixes after merge Co-authored-by: Fredrik Strand Oseberg --- .../FeatureDetails/FeatureDetails.tsx | 42 +++++++++++++------ .../PlaygroundResultFeatureStrategyList.tsx | 26 +++++++----- .../playgroundResultStrategyLists.tsx | 35 ++++++++-------- 3 files changed, 62 insertions(+), 41 deletions(-) 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 e069b0e0eb..8c8de09cdc 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.tsx @@ -27,26 +27,42 @@ export const FeatureDetails = ({ const { classes: styles } = useStyles(); const theme = useTheme(); - const description = feature.isEnabled - ? `This feature toggle is True in ${input?.environment} because ` - : `This feature toggle is False in ${input?.environment} because `; - - const reason = (() => { - if (feature.isEnabled) return 'at least one strategy is True'; + const [description, reason, color] = (() => { + if (feature.isEnabled) + return [ + `This feature toggle is True in ${input?.environment} because `, + 'at least one strategy is True', + theme.palette.success.main, + ]; if (!feature.isEnabledInCurrentEnvironment) - return 'the environment is disabled'; + return [ + `This feature toggle is False in ${input?.environment} because `, + 'the environment is disabled', + theme.palette.error.main, + ]; if (hasOnlyCustomStrategies(feature)) - return 'no strategies could be fully evaluated'; + return [ + `This feature toggle is Unknown in ${input?.environment} because `, + 'no strategies could be fully evaluated', + theme.palette.warning.main, + ]; - return 'all strategies are either False or could not be fully evaluated'; + if (hasCustomStrategies(feature)) + return [ + `This feature toggle is Unknown in ${input?.environment} because `, + 'not all strategies could be fully evaluated', + theme.palette.warning.main, + ]; + + return [ + `This feature toggle is False in ${input?.environment} because `, + 'all strategies are either False or could not be fully evaluated', + theme.palette.error.main, + ]; })(); - const color = feature.isEnabled - ? theme.palette.success.main - : theme.palette.error.main; - const noValueTxt = checkForEmptyValues(input?.context) ? 'You did not provide a value for your context field in step 2 of the configuration' : undefined; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx index 40887bd9d0..ed37b24068 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx @@ -1,4 +1,7 @@ -import { PlaygroundResultStrategyLists } from './StrategyList/playgroundResultStrategyLists'; +import { + PlaygroundResultStrategyLists, + WrappedPlaygroundResultStrategyList, +} from './StrategyList/playgroundResultStrategyLists'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PlaygroundFeatureSchema, @@ -29,19 +32,20 @@ export const PlaygroundResultFeatureStrategyList = ({ 0 + Boolean(feature?.strategies?.data) } show={ - - If environment was enabled, then this feature toggle - would be {feature.strategies?.result ? 'TRUE' : 'FALSE'}{' '} - with strategies evaluated like so:{' '} - + + } + elseShow={ + } - /> - ); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx index e260116ba4..8ba0bcf35b 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/playgroundResultStrategyLists.tsx @@ -1,9 +1,9 @@ import { Fragment } from 'react'; import { Alert, Box, styled, Typography } from '@mui/material'; import { - PlaygroundFeatureSchema, PlaygroundStrategySchema, PlaygroundRequestSchema, + PlaygroundStrategyResultSchema, } from 'component/playground/Playground/interfaces/playground.model'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem'; @@ -14,16 +14,18 @@ const StyledAlertWrapper = styled('div')(({ theme }) => ({ padding: `0, 4px`, flexDirection: 'column', borderRadius: theme.shape.borderRadiusMedium, - border: `1px solid ${theme.palette.info.border}`, + border: `1px solid ${theme.palette.warning.border}`, })); const StyledListWrapper = styled('div')(({ theme }) => ({ padding: theme.spacing(1, 0.5), })); -const StyledAlert = styled(Alert)(() => ({ +const StyledAlert = styled(Alert)(({ theme }) => ({ + border: '0!important', borderBottomLeftRadius: 0, borderBottomRightRadius: 0, + borderBottom: `1px solid ${theme.palette.warning.border}!important`, })); interface PlaygroundResultStrategyListProps { @@ -42,9 +44,9 @@ export const PlaygroundResultStrategyLists = ({ {`Strategies (${strategies.length})`} + >{`Strategies (${strategies?.length})`} - {strategies.map((strategy, index) => ( + {strategies?.map((strategy, index) => ( 0} @@ -64,26 +66,25 @@ export const PlaygroundResultStrategyLists = ({ /> ); -interface WrappedPlaygroundResultStrategyListProps - extends PlaygroundResultStrategyListProps { - feature: PlaygroundFeatureSchema; +interface IWrappedPlaygroundResultStrategyListProps { + strategies: PlaygroundStrategyResultSchema; + input?: PlaygroundRequestSchema; } export const WrappedPlaygroundResultStrategyList = ({ strategies, - feature, input, -}: WrappedPlaygroundResultStrategyListProps) => { +}: IWrappedPlaygroundResultStrategyListProps) => { return ( - - - If environment would be enabled then this feature would be{' '} - {feature.strategies.result ? 'TRUE' : 'FALSE'} and the - strategies would evaluate like this:{' '} + + + If environment was enabled, then this feature toggle would be{' '} + {strategies?.result ? 'TRUE' : 'FALSE'} with strategies + evaluated like so:{' '} - +