demo data

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

@@ -66,12 +66,12 @@ export const FeatureResultInfoPopoverCell = ({
             ],
             segments: [
                 {
-                    result: false,
+                    result: feature?.isEnabled as any,
                     id: 5,
                     name: 'my-segment',
                     constraints: [
                         {
-                            result: false,
+                            result: feature?.isEnabled as any,
                             contextName: 'environment',
                             operator: 'IN',
                             caseInsensitive: false,
@@ -107,7 +107,10 @@ export const FeatureResultInfoPopoverCell = ({
                 }}
                 classes={{ paper: styles.popoverPaper }}
             >
-                <PlaygroundResultFeatureDetails feature={feature.isEnabled ? dummyPlaygroundFeatureTrue : dummyPlaygroundFeatureFalse} />
+                <PlaygroundResultFeatureDetails
+                    feature={feature.isEnabled ? dummyPlaygroundFeatureTrue : dummyPlaygroundFeatureFalse}
+                    onClose={() => setOpen(false)}
+                />
                 <ConditionallyRender
                     condition={strategies.length > 0}
                     show={

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

@@ -25,11 +25,16 @@ export const PlaygroundResultConstraintExecution = ({
     constraints,
 }: PlaygroundResultConstraintExecutionProps) => {
     // const context = usePlaygroundContext();
-    const context: SdkContextSchema = {
+    const contextFalse: SdkContextSchema = {
         appName: 'MyApp',
         environment: '',
     };
 
+    const contextTrue: SdkContextSchema = {
+        appName: 'MyApp',
+        environment: 'development',
+    };
+
     if (!constraints) return null;
 
     return (
@@ -42,7 +47,7 @@ export const PlaygroundResultConstraintExecution = ({
                     />
                     <ConstraintAccordionView
                         constraint={constraint}
-                        playgroundContext={context}
+                        playgroundContext={Boolean(constraint.result) ? contextTrue : contextFalse}
                         maxLength={80}
                         sx={{
                             backgroundColor: 'transparent!important',

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.styles.ts

@@ -1,6 +1,11 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
+    titleRowWrapper: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+    },
     titleRow: {
         display: 'inline-flex',
         alignItems: 'flex-start',
@@ -18,4 +23,8 @@ export const useStyles = makeStyles()(theme => ({
         fontWeight: 600,
         padding: '4px',
     },
+    icon: {
+        textAlign: 'right'
+
+    }
 }));

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

@@ -1,12 +1,16 @@
 import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
-import {Typography, useTheme} from '@mui/material';
+import {IconButton, Typography, useTheme} from '@mui/material';
 import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
 import { useStyles } from './PlaygroundResultFeatureDetails.styles';
+import {CloseOutlined} from "@mui/icons-material";
+import React from "react";
 interface PlaygroundFeatureResultDetailsProps {
     feature: PlaygroundFeatureSchema;
+    onClose: () => void
 }
 export const PlaygroundResultFeatureDetails = ({
     feature,
+    onClose,
 }: PlaygroundFeatureResultDetailsProps) => {
     const { classes: styles } = useStyles();
     const theme = useTheme();
@@ -19,15 +23,26 @@ export const PlaygroundResultFeatureDetails = ({
         : 'all strategies are False';
     const color = feature.isEnabled ? theme.palette.success.main : theme.palette.error.main;
 
+    const onCloseClick =
+        onClose &&
+        ((event: React.SyntheticEvent) => {
+            event.stopPropagation();
+            onClose();
+        });
     return (
         <>
-            <div className={styles.titleRow}>
-                <Typography variant={'subtitle1'} className={styles.name}>
-                    {feature.name}
-                </Typography>
-                <span>
-                    <PlaygroundResultChip enabled={feature.isEnabled} />
-                </span>
+            <div className={styles.titleRowWrapper}>
+                <div className={styles.titleRow}>
+                    <Typography variant={'subtitle1'} className={styles.name}>
+                        {feature.name}
+                    </Typography>
+                    <span>
+                        <PlaygroundResultChip enabled={feature.isEnabled} />
+                    </span>
+                </div>
+                <IconButton onClick={() => onClose()} className={styles.icon}>
+                    <CloseOutlined />
+                </IconButton>
             </div>
             <div className={styles.descriptionRow}>
                 <Typography variant={'body1'}>{description}</Typography>