1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

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 <fredrik.no@gmail.com>
This commit is contained in:
andreas-unleash 2022-08-12 16:33:18 +03:00 committed by GitHub
parent 523807359e
commit eaaaa29199
3 changed files with 62 additions and 41 deletions

View File

@ -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;

View File

@ -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 = ({
<ConditionallyRender
condition={
!feature.isEnabledInCurrentEnvironment &&
(feature?.strategies?.data?.length || 0) > 0
Boolean(feature?.strategies?.data)
}
show={
<Alert severity="info" color="warning">
If environment was enabled, then this feature toggle
would be {feature.strategies?.result ? 'TRUE' : 'FALSE'}{' '}
with strategies evaluated like so:{' '}
</Alert>
<WrappedPlaygroundResultStrategyList
strategies={feature?.strategies}
input={input}
/>
}
elseShow={
<PlaygroundResultStrategyLists
strategies={feature?.strategies?.data || []}
input={input}
/>
}
/>
<PlaygroundResultStrategyLists
strategies={feature?.strategies?.data || []}
input={input}
/>
</>
);

View File

@ -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 = ({
<Typography
variant={'subtitle1'}
sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
>{`Strategies (${strategies.length})`}</Typography>
>{`Strategies (${strategies?.length})`}</Typography>
<Box sx={{ width: '100%' }}>
{strategies.map((strategy, index) => (
{strategies?.map((strategy, index) => (
<Fragment key={strategy.id}>
<ConditionallyRender
condition={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 (
<StyledAlertWrapper sx={{ pb: 1 }}>
<StyledAlert severity={'info'} color={'info'}>
If environment would be enabled then this feature would be{' '}
{feature.strategies.result ? 'TRUE' : 'FALSE'} and the
strategies would evaluate like this:{' '}
<StyledAlertWrapper sx={{ pb: 1, mt: 2 }}>
<StyledAlert severity={'info'} color={'warning'}>
If environment was enabled, then this feature toggle would be{' '}
{strategies?.result ? 'TRUE' : 'FALSE'} with strategies
evaluated like so:{' '}
</StyledAlert>
<StyledListWrapper>
<StyledListWrapper sx={{ p: 2.5 }}>
<PlaygroundResultStrategyLists
strategies={strategies}
strategies={strategies?.data || []}
input={input}
/>
</StyledListWrapper>