Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
andreas-unleash 2022-08-03 17:18:03 +03:00
parent 2858aae45e
commit f9d8c4a36a
3 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx
View File

@ -66,16 +66,13 @@ export const PlaygroundResultFeatureDetails = ({
</Typography> </Typography>
<span> <span>
<PlaygroundResultChip <PlaygroundResultChip
enabled={ enabled={feature.isEnabled}
label={
feature.isEnabled === 'unevaluated' feature.isEnabled === 'unevaluated'
? 'unknown' ? '?'
: feature.isEnabled : Boolean(feature.isEnabled)
} ? 'True'
label={String(feature.isEnabled)} : 'False'
size={
feature.isEnabled === 'unevaluated'
? 'large'
: 'default'
} }
/> />
</span> </span>

7
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx
View File

@ -3,7 +3,7 @@ import { Box, styled } from '@mui/material';
import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip'; import { PlaygroundResultChip } from '../PlaygroundResultChip/PlaygroundResultChip';
interface IFeatureStatusCellProps { interface IFeatureStatusCellProps {
enabled: boolean | 'unknown'; enabled: boolean | 'unevaluated';
} }
const StyledCellBox = styled(Box)(({ theme }) => ({ const StyledCellBox = styled(Box)(({ theme }) => ({
@ -20,7 +20,10 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => {
return ( return (
<StyledCellBox> <StyledCellBox>
<StyledChipWrapper data-loading> <StyledChipWrapper data-loading>
<PlaygroundResultChip enabled={enabled} /> <PlaygroundResultChip
enabled={enabled}
label={enabled === 'unevaluated' ? '?' : Boolean(enabled) ? 'True': 'False' }
/>
</StyledChipWrapper> </StyledChipWrapper>
</StyledCellBox> </StyledCellBox>
); );

63
frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx
View File

@ -4,12 +4,13 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond
import React from 'react'; import React from 'react';
import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg'; import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg';
import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg'; import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg';
import { WarningOutlined } from "@mui/icons-material";
interface IResultChipProps { interface IResultChipProps {
enabled: boolean | 'unknown'; enabled: boolean | 'unevaluated' | 'unknown'
label: string;
// Result icon - defaults to true // Result icon - defaults to true
showIcon?: boolean; showIcon?: boolean;
label?: string;
size?: 'default' | 'medium' | 'large'; size?: 'default' | 'medium' | 'large';
} }
@ -61,68 +62,68 @@ export const StyledUnknownChip = styled(StyledChip)(({ theme }) => ({
export const PlaygroundResultChip = ({ export const PlaygroundResultChip = ({
enabled, enabled,
showIcon = true,
label, label,
showIcon = true,
size = 'default', size = 'default',
}: IResultChipProps) => { }: IResultChipProps) => {
const theme = useTheme(); const theme = useTheme();
const icon = ( const icon = (
<ConditionallyRender <ConditionallyRender
condition={enabled !== 'unknown' && enabled} condition={enabled === 'unknown' || enabled === 'unevaluated' }
show={ show={<WarningOutlined color={'warning'} fontSize='inherit' /> }
<FeatureEnabledIcon
color={theme.palette.success.main}
strokeWidth="0.25"
/>
}
elseShow={ elseShow={
<FeatureDisabledIcon <ConditionallyRender
color={theme.palette.error.main} condition={typeof enabled === 'boolean' && Boolean(enabled)}
strokeWidth="0.25" show={
<FeatureEnabledIcon
color={theme.palette.success.main}
strokeWidth="0.25"
/>
}
elseShow={
<FeatureDisabledIcon
color={theme.palette.error.main}
strokeWidth="0.25"
/>
}
/> />
} }
/> />
); );
const defaultLabel = enabled ? 'True' : 'False'; let chipWidth = 60;
if (size === 'medium') chipWidth = 72;
let chipWidth = 60; if (size === 'large') chipWidth = 100;
if (size === 'medium') {
chipWidth = 72;
}
if (size === 'large') {
chipWidth = 100;
}
return ( return (
<ConditionallyRender <ConditionallyRender
condition={enabled !== 'unknown' && enabled} condition={enabled === 'unknown' || enabled === 'unevaluated' }
show={ show={
<StyledTrueChip <StyledUnknownChip
icon={showIcon ? icon : undefined} icon={showIcon ? icon : undefined}
label={label || defaultLabel} label={label}
width={chipWidth} width={chipWidth}
/> />
} }
elseShow={ elseShow={
<ConditionallyRender <ConditionallyRender
condition={enabled === 'unknown'} condition={typeof enabled === 'boolean' && Boolean(enabled)}
show={ show={
<StyledUnknownChip <StyledTrueChip
label={label || 'Unknown'} icon={showIcon ? icon : undefined}
label={label}
width={chipWidth} width={chipWidth}
/> />
} }
elseShow={ elseShow={
<StyledFalseChip <StyledFalseChip
icon={showIcon ? icon : undefined} icon={showIcon ? icon : undefined}
label={label || defaultLabel} label={label}
width={chipWidth} width={chipWidth}
/> />
} }
/> />
} }
/> />
); )
}; };