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 😄 
This commit is contained in:
parent
2d47fb3827
commit
90eed05296
@ -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';
|
||||
|
@ -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 {
|
||||
|
@ -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';
|
||||
|
@ -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} />
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useTheme } from '@mui/material';
|
||||
import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip';
|
||||
import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/LegacyPlaygroundResultChip';
|
||||
import type {
|
||||
PlaygroundStrategySchema,
|
||||
PlaygroundRequestSchema,
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user