Skip to content

Commit d912dc7

Browse files
Move constraint designs into ConstraintExecution
1 parent 7f7bbf2 commit d912dc7

File tree

2 files changed

+55
-41
lines changed
  • frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution

2 files changed

+55
-41
lines changed

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintError/ConstraintError.tsx

-39
This file was deleted.

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx

+55-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,68 @@ import type {
33
PlaygroundConstraintSchema,
44
PlaygroundRequestSchema,
55
} from 'openapi';
6-
import { ConstraintError } from './ConstraintError/ConstraintError';
7-
import { ConstraintOk } from './ConstraintOk/LegacyConstraintOk';
86
import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem';
7+
import CheckCircle from '@mui/icons-material/CheckCircle';
8+
import { styled } from '@mui/material';
9+
import Cancel from '@mui/icons-material/Cancel';
910

1011
interface IConstraintExecutionProps {
1112
constraint?: PlaygroundConstraintSchema;
1213
input?: PlaygroundRequestSchema;
1314
}
1415

16+
const StyledContainer = styled('div', {
17+
shouldForwardProp: (prop) => prop !== 'variant',
18+
})<{ variant: 'ok' | 'error' }>(({ theme, variant }) => ({
19+
display: 'flex',
20+
alignItems: 'center',
21+
gap: theme.spacing(1),
22+
color:
23+
variant === 'ok'
24+
? theme.palette.success.dark
25+
: theme.palette.error.dark,
26+
27+
fontSize: theme.typography.body2.fontSize,
28+
svg: {
29+
// todo: how best to size this?
30+
fontSize: `calc(${theme.typography.body1.fontSize} * 1.1)`,
31+
},
32+
}));
33+
34+
const ConstraintOk = () => {
35+
return (
36+
<StyledContainer variant='ok'>
37+
<CheckCircle aria-hidden='true' />
38+
<p>Constraint met by value in context</p>
39+
</StyledContainer>
40+
);
41+
};
42+
43+
export const ConstraintError = ({
44+
constraint,
45+
input,
46+
}: {
47+
constraint: PlaygroundConstraintSchema;
48+
input?: PlaygroundRequestSchema;
49+
}) => {
50+
const formatText = () => {
51+
const value = input?.context[constraint.contextName];
52+
53+
if (value) {
54+
return `Constraint not met – the value in the context: { ${value} } is not ${constraint.operator} ${constraint.contextName}`;
55+
}
56+
57+
return `Constraint not met – no value was specified for ${constraint.contextName}`;
58+
};
59+
60+
return (
61+
<StyledContainer variant='error'>
62+
<Cancel aria-hidden='true' />
63+
<p>{formatText()}</p>
64+
</StyledContainer>
65+
);
66+
};
67+
1568
export const ConstraintExecution: FC<IConstraintExecutionProps> = ({
1669
constraint,
1770
input,

0 commit comments

Comments
 (0)