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={
+            <ConditionallyRender
-                !feature.isEnabledInCurrentEnvironment &&
+                condition={
-                Boolean(feature?.strategies?.data)
+                    !feature.isEnabledInCurrentEnvironment &&
-            }
+                    Boolean(feature?.strategies?.data)
-            show={
+                }
-                <WrappedPlaygroundResultStrategyList
+                show={
-                    strategies={feature?.strategies?.data!}
+                    <Alert severity={'info'} color={'info'}>
-                    feature={feature}
+                        If environment would be enabled then this feature would
-                    input={input}
+                        be {feature.strategies.result ? 'TRUE' : 'FALSE'} and
-                />
+                        the strategies would evaluate like this:{' '}
-            }
+                    </Alert>
-            elseShow={
+                }
-                <PlaygroundResultStrategyLists
+            />
-                    strategies={feature?.strategies?.data!}
+            <PlaygroundResultStrategyLists
-                    input={input}
+                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,86 +16,49 @@ 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}
+            actions={
+                <PlaygroundResultChip
+                    showIcon={false}
+                    enabled={result.enabled}
+                    label={label}
+                    size={
+                        result.evaluationStatus === 'incomplete'
+                            ? 'large'
+                            : 'default'
+                    }
+                />
+            }
         >
-            <ConditionallyRender
+            <PlaygroundResultStrategyExecution
-                condition={index > 0}
+                strategyResult={strategy}
-                show={<StrategySeparator text="OR" />}
+                input={input}
+                percentageFill={theme.palette.tertiary.light}
             />
-            <StyledItemWrapper sx={{ mr: 2 }}>
+        </StrategyItemContainer>
-                <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}
-                            label={label}
-                            size={
-                                result.evaluationStatus === 'incomplete'
-                                    ? 'large'
-                                    : 'default'
-                            }
-                        />
-                    </div>
-                    <div className={styles.body}>
-                        <PlaygroundResultStrategyExecution
-                            strategyResult={strategy}
-                            input={input}
-                            percentageFill={theme.palette.tertiary.light}
-                        />
-                    </div>
-                </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,30 +35,36 @@ export const PlaygroundResultStrategyLists = ({
     strategies,
     input,
     compact = false,
-}: PlaygroundResultStrategyListProps) => {
+}: PlaygroundResultStrategyListProps) => (
-    return (
+    <ConditionallyRender
-        <ConditionallyRender
+        condition={strategies.length > 0}
-            condition={strategies.length > 0}
+        show={
-            show={
+            <>
-                <>
+                <Typography
-                    <Typography
+                    variant={'subtitle1'}
-                        variant={'subtitle1'}
+                    sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
-                        sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
+                >{`Strategies (${strategies.length})`}</Typography>
-                    >{`Strategies (${strategies.length})`}</Typography>
+                <Box sx={{ width: '100%' }}>
                     {strategies.map((strategy, index) => (
-                        <PlaygroundResultFeatureStrategyItem
+                        <>
-                            key={strategy.id}
+                            <ConditionallyRender
-                            strategy={strategy}
+                                condition={index > 0}
-                            index={index}
+                                show={<StrategySeparator text="OR" />}
-                            compact={compact}
+                            />
-                            input={input}
+                            <PlaygroundResultFeatureStrategyItem
-                        />
+                                key={strategy.id}
+                                strategy={strategy}
+                                index={index}
+                                compact={compact}
+                                input={input}
+                            />
+                        </>
                     ))}
-                </>
+                </Box>
-            }
+            </>
-        />
+        }
-    );
+    />
-};
+);
 
 interface WrappedPlaygroundResultStrategyListProps
     extends PlaygroundResultStrategyListProps {