From e432ae45e0c92f383c6f4a24adc74f04c7c89bd9 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Mon, 8 Aug 2022 09:50:49 +0200
Subject: [PATCH] update strategy border for playground

---
 .../StrategyItemContainer.styles.ts           |   2 +
 .../StrategyItemContainer.tsx                 |   7 +-
 .../FeatureResultInfoPopoverCell.styles.ts    |   8 +-
 .../PlaygroundResultFeatureStrategyList.tsx   |  49 ++++-----
 ...ygroundResultFeatureStrategyItem.styles.ts |   3 +
 .../PlaygroundResultFeatureStrategyItem.tsx   | 100 +++++-------------
 .../playgroundResultStrategyLists.tsx         |  57 +++++-----
 7 files changed, 98 insertions(+), 128 deletions(-)

diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts
index f0c781ad0d..a196ad6052 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts
+++ b/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',
diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
index 8d6ca0d7a7..fc3efe8e61 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
+++ b/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>}
             />
-
-            <div className={styles.container}>
+            <Box className={classNames(styles.container, className)}>
                 <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>
     );
 };
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
index 7ca759f769..ecbfd67489 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
+++ b/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,
     },
 }));
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
index 5941210c61..00d93fb271 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
@@ -1,13 +1,10 @@
-import {
-    PlaygroundResultStrategyLists,
-    WrappedPlaygroundResultStrategyList,
-} from './PlaygroundResultStrategyList/playgroundResultStrategyLists';
-import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
-import React from 'react';
+import { PlaygroundResultStrategyLists } from './PlaygroundResultStrategyList/playgroundResultStrategyLists';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 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
-                    strategies={feature?.strategies?.data!}
-                    feature={feature}
-                    input={input}
-                />
-            }
-            elseShow={
-                <PlaygroundResultStrategyLists
-                    strategies={feature?.strategies?.data!}
-                    input={input}
-                />
-            }
-        />
+        <>
+            <ConditionallyRender
+                condition={
+                    !feature.isEnabledInCurrentEnvironment &&
+                    Boolean(feature?.strategies?.data)
+                }
+                show={
+                    <Alert severity={'info'} color={'info'}>
+                        If environment would be enabled then this feature would
+                        be {feature.strategies.result ? 'TRUE' : 'FALSE'} and
+                        the strategies would evaluate like this:{' '}
+                    </Alert>
+                }
+            />
+            <PlaygroundResultStrategyLists
+                strategies={feature?.strategies?.data || []}
+                input={input}
+            />
+        </>
     );
 };
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts
index 60369dd079..a6721ebb07 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.styles.ts
+++ b/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}`,
+    },
 }));
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx
index 24ecf11045..bb4f4cb8cf 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx
+++ b/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 { 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 { useTheme } from '@mui/material';
 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
-            sx={{
-                width: '100%',
-                position: 'relative',
-                paddingRight: compact ? '12px' : 0,
-                ml: '-12px',
-            }}
+        <StrategyItemContainer
+            className={
+                result.enabled && result.evaluationStatus === 'complete'
+                    ? styles.successBorder
+                    : undefined
+            }
+            strategy={{ ...strategy, id: `${objectId(strategy)}` }}
+            orderNumber={index + 1}
+            actions={
+                <PlaygroundResultChip
+                    showIcon={false}
+                    enabled={result.enabled}
+                    label={label}
+                    size={
+                        result.evaluationStatus === 'incomplete'
+                            ? 'large'
+                            : 'default'
+                    }
+                />
+            }
         >
-            <ConditionallyRender
-                condition={index > 0}
-                show={<StrategySeparator text="OR" />}
+            <PlaygroundResultStrategyExecution
+                strategyResult={strategy}
+                input={input}
+                percentageFill={theme.palette.tertiary.light}
             />
-            <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}
-                            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>
+        </StrategyItemContainer>
     );
 };
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx
index b3913b2210..c3deacddb3 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx
+++ b/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';
-import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
-import { Alert, styled, Typography } from '@mui/material';
+} from 'hooks/api/actions/usePlayground/playground.model';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 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) => {
-    return (
-        <ConditionallyRender
-            condition={strategies.length > 0}
-            show={
-                <>
-                    <Typography
-                        variant={'subtitle1'}
-                        sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
-                    >{`Strategies (${strategies.length})`}</Typography>
+}: PlaygroundResultStrategyListProps) => (
+    <ConditionallyRender
+        condition={strategies.length > 0}
+        show={
+            <>
+                <Typography
+                    variant={'subtitle1'}
+                    sx={{ mt: 2, ml: 1, mb: 2, color: 'text.secondary' }}
+                >{`Strategies (${strategies.length})`}</Typography>
+                <Box sx={{ width: '100%' }}>
                     {strategies.map((strategy, index) => (
-                        <PlaygroundResultFeatureStrategyItem
-                            key={strategy.id}
-                            strategy={strategy}
-                            index={index}
-                            compact={compact}
-                            input={input}
-                        />
+                        <>
+                            <ConditionallyRender
+                                condition={index > 0}
+                                show={<StrategySeparator text="OR" />}
+                            />
+                            <PlaygroundResultFeatureStrategyItem
+                                key={strategy.id}
+                                strategy={strategy}
+                                index={index}
+                                compact={compact}
+                                input={input}
+                            />
+                        </>
                     ))}
-                </>
-            }
-        />
-    );
-};
+                </Box>
+            </>
+        }
+    />
+);
 
 interface WrappedPlaygroundResultStrategyListProps
     extends PlaygroundResultStrategyListProps {