update strategy border for playground

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts

@@ -26,6 +26,8 @@ export const useStyles = makeStyles()(theme => ({
     actions: {
         marginLeft: 'auto',
         display: 'flex',
+        minHeight: theme.spacing(6),
+        alignItems: 'center',
     },
     resultChip: {
         marginLeft: 'auto',

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -17,6 +17,7 @@ interface IStrategyItemContainerProps {
     onDragEnd?: DragEventHandler<HTMLButtonElement>;
     actions?: ReactNode;
     orderNumber?: number;
+    className?: string;
 }
 
 const DragIcon = styled(IconButton)(({ theme }) => ({
@@ -44,6 +45,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
     actions,
     children,
     orderNumber,
+    className,
 }) => {
     const { classes: styles } = useStyles();
     const Icon = getFeatureStrategyIcon(strategy.name);
@@ -54,8 +56,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                 condition={orderNumber !== undefined}
                 show={<StyledIndexLabel>{orderNumber}</StyledIndexLabel>}
             />
-
+            <Box className={classNames(styles.container, className)}>
-            <div className={styles.container}>
                 <div
                     className={classNames(styles.header, {
                         [styles.headerDraggable]: Boolean(onDragStart),
@@ -89,7 +90,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                     <div className={styles.actions}>{actions}</div>
                 </div>
                 <div className={styles.body}>{children}</div>
-            </div>
+            </Box>
         </Box>
     );
 };

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

@@ -4,11 +4,13 @@ export const useStyles = makeStyles()(theme => ({
     popoverPaper: {
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'flex-start',
+        // alignItems: 'flex-start',
         padding: theme.spacing(6),
-        maxWidth: '728px',
+        // maxWidth: '728px',
+        width: 728,
+        maxWidth: '100%',
         height: 'auto',
-        overflowY: 'scroll',
+        overflowY: 'auto',
         backgroundColor: theme.palette.tertiary.light,
     },
 }));

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

@@ -1,13 +1,10 @@
-import {
+import { PlaygroundResultStrategyLists } from './PlaygroundResultStrategyList/playgroundResultStrategyLists';
-    PlaygroundResultStrategyLists,
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-    WrappedPlaygroundResultStrategyList,
-} from './PlaygroundResultStrategyList/playgroundResultStrategyLists';
-import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
-import React from 'react';
 import {
     PlaygroundFeatureSchema,
     PlaygroundRequestSchema,
-} from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from 'hooks/api/actions/usePlayground/playground.model';
+import { Alert } from '@mui/material';
 
 interface PlaygroundResultFeatureStrategyListProps {
     feature: PlaygroundFeatureSchema;
@@ -19,24 +16,24 @@ export const PlaygroundResultFeatureStrategyList = ({
     input,
 }: PlaygroundResultFeatureStrategyListProps) => {
     return (
+        <>
             <ConditionallyRender
                 condition={
                     !feature.isEnabledInCurrentEnvironment &&
                     Boolean(feature?.strategies?.data)
                 }
                 show={
-                <WrappedPlaygroundResultStrategyList
+                    <Alert severity={'info'} color={'info'}>
-                    strategies={feature?.strategies?.data!}
+                        If environment would be enabled then this feature would
-                    feature={feature}
+                        be {feature.strategies.result ? 'TRUE' : 'FALSE'} and
-                    input={input}
+                        the strategies would evaluate like this:{' '}
-                />
+                    </Alert>
                 }
-            elseShow={
+            />
             <PlaygroundResultStrategyLists
-                    strategies={feature?.strategies?.data!}
+                strategies={feature?.strategies?.data || []}
                 input={input}
             />
-            }
+        </>
-        />
     );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts

@@ -34,4 +34,7 @@ export const useStyles = makeStyles()(theme => ({
         borderRadius: theme.shape.borderRadiusMedium,
         background: theme.palette.background.default,
     },
+    successBorder: {
+        border: `1px solid ${theme.palette.success.main}`,
+    },
 }));

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx

@@ -1,11 +1,4 @@
-import { Box, styled, Typography, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import {
-    formatStrategyName,
-    getFeatureStrategyIcon,
-} from 'utils/strategyNames';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip';
 import {
     PlaygroundStrategySchema,
@@ -13,6 +6,8 @@ import {
 } from 'hooks/api/actions/usePlayground/playground.model';
 import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution';
 import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles';
+import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer';
+import { objectId } from 'utils/objectId';
 
 interface IPlaygroundResultFeatureStrategyItemProps {
     strategy: PlaygroundStrategySchema;
@@ -21,66 +16,32 @@ interface IPlaygroundResultFeatureStrategyItemProps {
     compact: boolean;
 }
 
-const StyledItemWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: theme.spacing(0.5, 0),
-    gap: theme.spacing(1),
-}));
-
 export const PlaygroundResultFeatureStrategyItem = ({
     strategy,
     input,
     index,
     compact,
 }: IPlaygroundResultFeatureStrategyItemProps) => {
-    const { result, name } = strategy;
+    const { result } = strategy;
     const { classes: styles } = useStyles();
     const theme = useTheme();
-    const Icon = getFeatureStrategyIcon(strategy.name);
     const label =
         result.evaluationStatus === 'incomplete'
             ? 'Unevaluated'
             : result.enabled
             ? 'True'
             : 'False';
-    const border =
-        result.enabled && result.evaluationStatus === 'complete'
-            ? `1px solid ${theme.palette.success.main}`
-            : `1px solid ${theme.palette.divider}`;
 
     return (
-        <Box
+        <StrategyItemContainer
-            sx={{
+            className={
-                width: '100%',
+                result.enabled && result.evaluationStatus === 'complete'
-                position: 'relative',
+                    ? styles.successBorder
-                paddingRight: compact ? '12px' : 0,
+                    : undefined
-                ml: '-12px',
+            }
-            }}
+            strategy={{ ...strategy, id: `${objectId(strategy)}` }}
-        >
+            orderNumber={index + 1}
-            <ConditionallyRender
+            actions={
-                condition={index > 0}
-                show={<StrategySeparator text="OR" />}
-            />
-            <StyledItemWrapper sx={{ mr: 2 }}>
-                <Typography
-                    variant={'subtitle1'}
-                    color={'text.secondary'}
-                    sx={{ ml: 1 }}
-                >
-                    {index + 1}
-                </Typography>
-                <Box className={styles.innerContainer} sx={{ border }}>
-                    <div className={styles.header}>
-                        <div className={styles.headerName}>
-                            <Icon className={styles.icon} />
-                            <StringTruncator
-                                maxWidth="150"
-                                maxLength={15}
-                                text={formatStrategyName(name)}
-                            />
-                        </div>
                 <PlaygroundResultChip
                     showIcon={false}
                     enabled={result.enabled}
@@ -91,16 +52,13 @@ export const PlaygroundResultFeatureStrategyItem = ({
                             : 'default'
                     }
                 />
-                    </div>
+            }
-                    <div className={styles.body}>
+        >
             <PlaygroundResultStrategyExecution
                 strategyResult={strategy}
                 input={input}
                 percentageFill={theme.palette.tertiary.light}
             />
-                    </div>
+        </StrategyItemContainer>
-                </Box>
-            </StyledItemWrapper>
-        </Box>
     );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx

@@ -1,11 +1,12 @@
+import { Alert, Box, styled, Typography } from '@mui/material';
 import {
     PlaygroundFeatureSchema,
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,
-} from '../../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from 'hooks/api/actions/usePlayground/playground.model';
-import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, styled, Typography } from '@mui/material';
 import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 
 const StyledAlertWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -34,8 +35,7 @@ export const PlaygroundResultStrategyLists = ({
     strategies,
     input,
     compact = false,
-}: PlaygroundResultStrategyListProps) => {
+}: PlaygroundResultStrategyListProps) => (
-    return (
     <ConditionallyRender
         condition={strategies.length > 0}
         show={
@@ -44,7 +44,13 @@ export const PlaygroundResultStrategyLists = ({
                     variant={'subtitle1'}
                     sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
                 >{`Strategies (${strategies.length})`}</Typography>
+                <Box sx={{ width: '100%' }}>
                     {strategies.map((strategy, index) => (
+                        <>
+                            <ConditionallyRender
+                                condition={index > 0}
+                                show={<StrategySeparator text="OR" />}
+                            />
                             <PlaygroundResultFeatureStrategyItem
                                 key={strategy.id}
                                 strategy={strategy}
@@ -52,12 +58,13 @@ export const PlaygroundResultStrategyLists = ({
                                 compact={compact}
                                 input={input}
                             />
+                        </>
                     ))}
+                </Box>
             </>
         }
     />
 );
-};
 
 interface WrappedPlaygroundResultStrategyListProps
     extends PlaygroundResultStrategyListProps {