1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

Chore(1-3520)/playground disabled badges (#9583)

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)
This commit is contained in:
Thomas Heartman 2025-03-20 13:19:16 +01:00 committed by GitHub
parent 2d47fb3827
commit 90eed05296
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 136 additions and 76 deletions

View File

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

View File

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

View File

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

View File

@ -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={
<PlaygroundResultChip
tabindex={-1}
showIcon={false}
enabled={result.enabled}
label={label}
/>
strategy.disabled ? null : (
<PlaygroundResultChip
showIcon={false}
enabled={result.enabled}
label={label}
/>
)
}
>
<StrategyExecution strategyResult={strategy} input={input} />

View File

@ -1,5 +1,5 @@
import { useTheme } from '@mui/material';
import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip';
import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/LegacyPlaygroundResultChip';
import type {
PlaygroundStrategySchema,
PlaygroundRequestSchema,

View File

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

View File

@ -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<IResultChipProps> = ({
enabled,
label,
showIcon = true,
tabindex,
}) => {
const theme = useTheme();
const flagOverviewRedesign = useUiFlag('flagOverviewRedesign');
if (flagOverviewRedesign) {
return (
<NewPlaygroundResultChip
enabled={enabled}
label={label}
showIcon={showIcon}
/>
);
}
const icon = (
<ConditionallyRender
condition={enabled === 'unknown' || enabled === 'unevaluated'}
show={<WarningOutlined color={'warning'} fontSize='inherit' />}
elseShow={
<ConditionallyRender
condition={typeof enabled === 'boolean' && Boolean(enabled)}
show={
<FeatureEnabledIcon
aria-hidden
color={theme.palette.success.main}
strokeWidth='0.25'
/>
}
elseShow={
<FeatureDisabledIcon
aria-hidden
color={theme.palette.error.main}
strokeWidth='0.25'
/>
}
/>
}
/>
);
return (
<ConditionallyRender
condition={enabled === 'unknown' || enabled === 'unevaluated'}
show={
<Badge icon={showIcon ? icon : undefined} color='warning'>
{label}
</Badge>
}
elseShow={
<ConditionallyRender
condition={typeof enabled === 'boolean' && Boolean(enabled)}
show={
<Badge
tabIndex={tabindex}
color='success'
icon={showIcon ? icon : undefined}
>
{label}
</Badge>
}
elseShow={
<Badge
color='error'
icon={showIcon ? icon : undefined}
tabIndex={tabindex}
>
{label}
</Badge>
}
/>
}
/>
);
};

View File

@ -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<IResultChipProps> = ({
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<ResultChipProps> = ({
enabled,
label,
showIcon = true,
tabindex,
}) => {
const theme = useTheme();
const icon = (
<ConditionallyRender
condition={enabled === 'unknown' || enabled === 'unevaluated'}
show={<WarningOutlined color={'warning'} fontSize='inherit' />}
elseShow={
<ConditionallyRender
condition={typeof enabled === 'boolean' && Boolean(enabled)}
show={
<FeatureEnabledIcon
aria-hidden
color={theme.palette.success.main}
strokeWidth='0.25'
/>
}
elseShow={
<FeatureDisabledIcon
aria-hidden
color={theme.palette.error.main}
strokeWidth='0.25'
/>
}
/>
}
/>
);
const [Icon, color] = useIconAndColor(enabled);
return (
<ConditionallyRender
condition={enabled === 'unknown' || enabled === 'unevaluated'}
show={
<Badge icon={showIcon ? icon : undefined} color='warning'>
{label}
</Badge>
<Badge
tabIndex={-1}
color={color}
icon={
showIcon ? (
<Icon aria-hidden color={color} strokeWidth='0.25' />
) : undefined
}
elseShow={
<ConditionallyRender
condition={typeof enabled === 'boolean' && Boolean(enabled)}
show={
<Badge
tabIndex={tabindex}
color='success'
icon={showIcon ? icon : undefined}
>
{label}
</Badge>
}
elseShow={
<Badge
color='error'
icon={showIcon ? icon : undefined}
tabIndex={tabindex}
>
{label}
</Badge>
}
/>
}
/>
>
{label}
</Badge>
);
};