diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx index e38a4bcab9..cb239ef8ee 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx +++ b/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 }} > - + setOpen(false)} + /> 0} show={ diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx index 4d3185afa9..53501a4493 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution.tsx +++ b/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 = ({ /> ({ + 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' + + } })); diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 66e015cbb0..a5283d6173 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/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 ( <> -
- - {feature.name} - - - - +
+
+ + {feature.name} + + + + +
+ onClose()} className={styles.icon}> + +
{description}