Playground context value

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -16,11 +16,17 @@ import {
     semVerOperators,
 } from 'constants/operators';
 import { useStyles } from '../ConstraintAccordion.styles';
+import {
+    PlaygroundFeatureStrategyConstraintResult,
+    SdkContextSchema,
+} from '../../../../hooks/api/actions/usePlayground/playground.model';
 
 interface IConstraintAccordionViewProps {
-    constraint: IConstraint;
+    constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult;
     onDelete?: () => void;
     onEdit?: () => void;
+    playgroundContext?: SdkContextSchema;
+    maxLength?: number;
     sx?: SxProps<Theme>;
 }
 
@@ -29,6 +35,8 @@ export const ConstraintAccordionView = ({
     onEdit,
     onDelete,
     sx = undefined,
+    maxLength,
+    playgroundContext,
 }: IConstraintAccordionViewProps) => {
     const { classes: styles } = useStyles();
     const [expandable, setExpandable] = useState(true);
@@ -70,6 +78,8 @@ export const ConstraintAccordionView = ({
                     singleValue={singleValue}
                     allowExpand={setExpandable}
                     expanded={expanded}
+                    maxLength={maxLength ?? 112}
+                    playgroundContext={playgroundContext}
                 />
             </AccordionSummary>
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx

@@ -3,14 +3,20 @@ import { IConstraint } from 'interfaces/strategy';
 import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo';
 import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+import {
+    PlaygroundFeatureStrategyConstraintResult,
+    SdkContextSchema,
+} from '../../../../../hooks/api/actions/usePlayground/playground.model';
 
 interface IConstraintAccordionViewHeaderProps {
-    constraint: IConstraint;
+    constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult;
     onDelete?: () => void;
     onEdit?: () => void;
     singleValue: boolean;
     expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
+    playgroundContext?: SdkContextSchema;
+    maxLength?: number;
 }
 
 export const ConstraintAccordionViewHeader = ({
@@ -20,6 +26,8 @@ export const ConstraintAccordionViewHeader = ({
     singleValue,
     allowExpand,
     expanded,
+    maxLength,
+    playgroundContext,
 }: IConstraintAccordionViewHeaderProps) => {
     const { classes: styles } = useStyles();
 
@@ -31,6 +39,9 @@ export const ConstraintAccordionViewHeader = ({
                 singleValue={singleValue}
                 allowExpand={allowExpand}
                 expanded={expanded}
+                result={'result' in constraint ? constraint.result : undefined}
+                maxLength={maxLength}
+                playgroundContext={playgroundContext}
             />
             <ConstraintAccordionHeaderActions
                 onEdit={onEdit}

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx

@@ -1,4 +1,4 @@
-import { styled, Tooltip } from '@mui/material';
+import { styled, Tooltip, Typography, useTheme } from '@mui/material';
 import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
 import { ConstraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue';
@@ -6,6 +6,8 @@ import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordi
 import React from 'react';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useStyles } from '../../../ConstraintAccordion.styles';
+import { CancelOutlined } from '@mui/icons-material';
+import { SdkContextSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
 
 const StyledHeaderText = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -27,11 +29,21 @@ const StyledHeaderText = styled('span')(({ theme }) => ({
     },
 }));
 
+const StyledHeaderWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    borderRadius: '8px',
+}));
+
 interface ConstraintAccordionViewHeaderMetaInfoProps {
     constraint: IConstraint;
     singleValue: boolean;
     expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
+    result?: boolean;
+    maxLength?: number;
+    playgroundContext?: SdkContextSchema;
 }
 
 export const ConstraintAccordionViewHeaderInfo = ({
@@ -39,31 +51,70 @@ export const ConstraintAccordionViewHeaderInfo = ({
     singleValue,
     allowExpand,
     expanded,
+    result,
+    maxLength = 112,
+    playgroundContext,
 }: ConstraintAccordionViewHeaderMetaInfoProps) => {
     const { classes: styles } = useStyles();
+    const theme = useTheme();
+
     return (
-        <div className={styles.headerMetaInfo}>
-            <Tooltip title={constraint.contextName} arrow>
-                <StyledHeaderText>{constraint.contextName}</StyledHeaderText>
-            </Tooltip>
-            <ConstraintViewHeaderOperator constraint={constraint} />
+        <StyledHeaderWrapper>
+            <div className={styles.headerMetaInfo}>
+                <Tooltip title={constraint.contextName} arrow>
+                    <StyledHeaderText>
+                        {constraint.contextName}
+                        <ConditionallyRender
+                            condition={
+                                result !== undefined &&
+                                !Boolean(result) &&
+                                Boolean(playgroundContext)
+                            }
+                            show={
+                                <Typography
+                                    variant={'body1'}
+                                    color={
+                                        Boolean(
+                                            playgroundContext![
+                                                constraint.contextName
+                                            ]
+                                        )
+                                            ? theme.palette.neutral
+                                                  .dark
+                                            : theme.palette.error.main
+                                    }
+                                >
+                                    {playgroundContext![
+                                        constraint.contextName
+                                    ] || 'no value'}
+                                </Typography>
+                            }
+                        />
+                    </StyledHeaderText>
+                </Tooltip>
+                <ConstraintViewHeaderOperator constraint={constraint} />
+                <ConditionallyRender
+                    condition={singleValue}
+                    show={
+                        <ConstraintAccordionViewHeaderSingleValue
+                            constraint={constraint}
+                            allowExpand={allowExpand}
+                        />
+                    }
+                    elseShow={
+                        <ConstraintAccordionViewHeaderMultipleValues
+                            constraint={constraint}
+                            expanded={expanded}
+                            allowExpand={allowExpand}
+                            maxLength={maxLength}
+                        />
+                    }
+                />
+            </div>
             <ConditionallyRender
-                condition={singleValue}
-                show={
-                    <ConstraintAccordionViewHeaderSingleValue
-                        constraint={constraint}
-                        allowExpand={allowExpand}
-                    />
-                }
-                elseShow={
-                    <ConstraintAccordionViewHeaderMultipleValues
-                        constraint={constraint}
-                        expanded={expanded}
-                        allowExpand={allowExpand}
-                        maxLength={112}
-                    />
-                }
+                condition={result !== undefined && !Boolean(result)}
+                show={<CancelOutlined color="error" sx={{ mt: 1 }} />}
             />
-        </div>
+        </StyledHeaderWrapper>
     );
 };

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx

@@ -1,9 +1,10 @@
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { styled } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useStyles } from '../../../ConstraintAccordion.styles';
+import { PlaygroundFeatureStrategyConstraintResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
 
 const StyledValuesSpan = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -20,7 +21,7 @@ const StyledValuesSpan = styled('span')(({ theme }) => ({
 }));
 
 interface ConstraintSingleValueProps {
-    constraint: IConstraint;
+    constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult;
     expanded: boolean;
     maxLength: number;
     allowExpand: (shouldExpand: boolean) => void;
@@ -50,6 +51,21 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
     return (
         <div className={styles.headerValuesContainerWrapper}>
             <div className={styles.headerValuesContainer}>
+                <ConditionallyRender
+                    condition={
+                        'result' in constraint && !Boolean(constraint.result)
+                    }
+                    show={
+                        <Typography
+                            variant={'body2'}
+                            color={'error'}
+                            noWrap={true}
+                            sx={{ mr: 1 }}
+                        >
+                            does not match any values{' '}
+                        </Typography>
+                    }
+                />
                 <StyledValuesSpan>{text}</StyledValuesSpan>
                 <ConditionallyRender
                     condition={expandable}

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
-import { Chip, styled } from '@mui/material';
+import { Chip, styled, Typography } from '@mui/material';
 import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue';
 import { useStyles } from '../../../ConstraintAccordion.styles';
 import { IConstraint } from '../../../../../../interfaces/strategy';
 import { useLocationSettings } from '../../../../../../hooks/useLocationSettings';
+import { PlaygroundFeatureStrategyConstraintResult } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
 
 const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
     margin: 'auto 0',
@@ -13,7 +15,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
 }));
 
 interface ConstraintSingleValueProps {
-    constraint: IConstraint;
+    constraint: IConstraint | PlaygroundFeatureStrategyConstraintResult;
     allowExpand: (shouldExpand: boolean) => void;
 }
 
@@ -30,6 +32,16 @@ export const ConstraintAccordionViewHeaderSingleValue = ({
 
     return (
         <div className={styles.headerValuesContainerWrapper}>
+            <ConditionallyRender
+                condition={
+                    'result' in constraint && !Boolean(constraint.result)
+                }
+                show={
+                    <Typography variant={'body1'} color={'error'}>
+                        does not match any values{' '}
+                    </Typography>
+                }
+            />
             <StyledSingleValueChip
                 label={formatConstraintValue(constraint, locationSettings)}
             />

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx

@@ -1,21 +1,39 @@
-import { PlaygroundFeatureStrategyConstraintResult } from 'hooks/api/actions/usePlayground/playground.model';
+import {
+    PlaygroundFeatureStrategyConstraintResult,
+    SdkContextSchema,
+} from 'hooks/api/actions/usePlayground/playground.model';
 import React, { Fragment } from 'react';
 import { objectId } from '../../../../../../utils/objectId';
 import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from '../../../../../common/StrategySeparator/StrategySeparator';
 import { ConstraintAccordionView } from '../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
+import { styled } from '@mui/material';
 
 interface PlaygroundResultConstraintExecutionProps {
     constraints?: PlaygroundFeatureStrategyConstraintResult[];
 }
 
+export const PlaygroundResultConstraintExecutionWrapper = styled('div')(
+    ({ theme }) => ({
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    })
+);
+
 export const PlaygroundResultConstraintExecution = ({
     constraints,
 }: PlaygroundResultConstraintExecutionProps) => {
+    // const context = usePlaygroundContext();
+    const context: SdkContextSchema = {
+        appName: 'MyApp',
+        environment: '',
+    };
+
     if (!constraints) return null;
 
     return (
-        <>
+        <PlaygroundResultConstraintExecutionWrapper>
             {constraints?.map((constraint, index) => (
                 <Fragment key={objectId(constraint)}>
                     <ConditionallyRender
@@ -24,12 +42,14 @@ export const PlaygroundResultConstraintExecution = ({
                     />
                     <ConstraintAccordionView
                         constraint={constraint}
+                        playgroundContext={context}
+                        maxLength={80}
                         sx={{
                             backgroundColor: 'transparent!important',
                         }}
                     />
                 </Fragment>
             ))}
-        </>
+        </PlaygroundResultConstraintExecutionWrapper>
     );
 };

frontend/src/hooks/api/actions/usePlayground/playground.model.ts

@@ -264,6 +264,7 @@ export interface PlaygroundFeatureStrategySegmentResult {
     result: boolean;
     constraints?: PlaygroundFeatureStrategyConstraintResult[];
 }
+6;
 
 export interface PlaygroundFeatureStrategyResult {
     id: string;