Merge remote-tracking branch 'origin/task/Add_strategy_information_to…

…_playground_results' into task/Add_strategy_information_to_playground_results # Conflicts: # src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem.tsx
Unleash · Aug 8, 2022 · 9f86c6c · 9f86c6c
2 parents 8d61f8e + 213c51b
commit 9f86c6c
Show file tree

Hide file tree

Showing 27 changed files with 303 additions and 296 deletions.
diff --git a/...eItem/StrategyItem/StrategyItem.styles.ts → ...Container/StrategyItemContainer.styles.ts b/...eItem/StrategyItem/StrategyItem.styles.ts → ...Container/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/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -0,0 +1,96 @@
+import { DragEventHandler, FC, ReactNode } from 'react';
+import { DragIndicator } from '@mui/icons-material';
+import { styled, IconButton, Box } from '@mui/material';
+import classNames from 'classnames';
+import { IFeatureStrategy } from 'interfaces/strategy';
+import {
+    getFeatureStrategyIcon,
+    formatStrategyName,
+} from 'utils/strategyNames';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useStyles } from './StrategyItemContainer.styles';
+
+interface IStrategyItemContainerProps {
+    strategy: IFeatureStrategy;
+    onDragStart?: DragEventHandler<HTMLButtonElement>;
+    onDragEnd?: DragEventHandler<HTMLButtonElement>;
+    actions?: ReactNode;
+    orderNumber?: number;
+    className?: string;
+}
+
+const DragIcon = styled(IconButton)(({ theme }) => ({
+    padding: 0,
+    cursor: 'inherit',
+    transition: 'color 0.2s ease-in-out',
+}));
+
+const StyledIndexLabel = styled('div')(({ theme }) => ({
+    fontSize: theme.typography.fontSize,
+    color: theme.palette.text.secondary,
+    position: 'absolute',
+    display: 'none',
+    right: 'calc(100% + 6px)',
+    top: theme.spacing(2.5),
+    [theme.breakpoints.up('md')]: {
+        display: 'block',
+    },
+}));
+
+export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
+    strategy,
+    onDragStart,
+    onDragEnd,
+    actions,
+    children,
+    orderNumber,
+    className,
+}) => {
+    const { classes: styles } = useStyles();
+    const Icon = getFeatureStrategyIcon(strategy.name);
+
+    return (
+        <Box sx={{ position: 'relative' }}>
+            <ConditionallyRender
+                condition={orderNumber !== undefined}
+                show={<StyledIndexLabel>{orderNumber}</StyledIndexLabel>}
+            />
+            <Box className={classNames(styles.container, className)}>
+                <div
+                    className={classNames(styles.header, {
+                        [styles.headerDraggable]: Boolean(onDragStart),
+                    })}
+                >
+                    <ConditionallyRender
+                        condition={Boolean(onDragStart)}
+                        show={() => (
+                            <DragIcon
+                                draggable
+                                disableRipple
+                                size="small"
+                                onDragStart={onDragStart}
+                                onDragEnd={onDragEnd}
+                                sx={{ cursor: 'move' }}
+                            >
+                                <DragIndicator
+                                    titleAccess="Drag to reorder"
+                                    cursor="grab"
+                                    sx={{ color: 'neutral.main' }}
+                                />
+                            </DragIcon>
+                        )}
+                    />
+                    <Icon className={styles.icon} />
+                    <StringTruncator
+                        maxWidth="150"
+                        maxLength={15}
+                        text={formatStrategyName(strategy.name)}
+                    />
+                    <div className={styles.actions}>{actions}</div>
+                </div>
+                <div className={styles.body}>{children}</div>
+            </Box>
+        </Box>
+    );
+};
diff --git a/...rviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx b/...rviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyDraggableItem.tsx
@@ -1,9 +1,9 @@
-import { Box, styled } from '@mui/material';
+import { DragEventHandler, RefObject, useRef } from 'react';
+import { Box } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { IFeatureEnvironment } from 'interfaces/featureToggle';
 import { IFeatureStrategy } from 'interfaces/strategy';
-import { DragEventHandler, RefObject, useRef } from 'react';
 import { StrategyItem } from './StrategyItem/StrategyItem';
 
 interface IStrategyDraggableItemProps {
@@ -22,19 +22,6 @@ interface IStrategyDraggableItemProps {
     ) => DragEventHandler<HTMLDivElement>;
     onDragEnd: () => void;
 }
-
-const StyledIndexLabel = styled('div')(({ theme }) => ({
-    fontSize: theme.typography.fontSize,
-    color: theme.palette.text.secondary,
-    position: 'absolute',
-    display: 'none',
-    right: 'calc(100% + 6px)',
-    top: theme.spacing(2.5),
-    [theme.breakpoints.up('md')]: {
-        display: 'block',
-    },
-}));
-
 export const StrategyDraggableItem = ({
     strategy,
     index,
@@ -58,16 +45,15 @@ export const StrategyDraggableItem = ({
                 condition={index > 0}
                 show={<StrategySeparator text="OR" />}
             />
-            <Box sx={{ position: 'relative' }}>
-                <StyledIndexLabel>{index + 1}</StyledIndexLabel>
-                <StrategyItem
-                    strategy={strategy}
-                    environmentId={environmentName}
-                    otherEnvironments={otherEnvironments}
-                    onDragStart={onDragStartRef(ref, index)}
-                    onDragEnd={onDragEnd}
-                />
-            </Box>
+
+            <StrategyItem
+                strategy={strategy}
+                environmentId={environmentName}
+                otherEnvironments={otherEnvironments}
+                onDragStart={onDragStartRef(ref, index)}
+                onDragEnd={onDragEnd}
+                orderNumber={index + 1}
+            />
         </Box>
     );
 };
diff --git a/...tAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/...tAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
@@ -20,7 +20,6 @@ import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 
 interface IStrategyExecutionProps {
     strategy: IFeatureStrategy;
-    percentageFill?: string;
 }
 
 const NoItems: VFC = () => (

diff --git a/...wEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx b/...wEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem.tsx
@@ -1,51 +1,37 @@
-import { DragEventHandler } from 'react';
-import { DragIndicator, Edit } from '@mui/icons-material';
-import { styled, useTheme, IconButton } from '@mui/material';
+import { DragEventHandler, VFC } from 'react';
+import { Edit } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
-import classNames from 'classnames';
 import { IFeatureEnvironment } from 'interfaces/featureToggle';
 import { IFeatureStrategy } from 'interfaces/strategy';
-import {
-    getFeatureStrategyIcon,
-    formatStrategyName,
-} from 'utils/strategyNames';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import { formatEditStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
 import { FeatureStrategyRemove } from 'component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { StrategyExecution } from './StrategyExecution/StrategyExecution';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { CopyStrategyIconMenu } from './CopyStrategyIconMenu/CopyStrategyIconMenu';
-import { useStyles } from './StrategyItem.styles';
+import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer';
 
 interface IStrategyItemProps {
     environmentId: string;
     strategy: IFeatureStrategy;
     onDragStart?: DragEventHandler<HTMLButtonElement>;
     onDragEnd?: DragEventHandler<HTMLButtonElement>;
     otherEnvironments?: IFeatureEnvironment['name'][];
+    orderNumber?: number;
 }
 
-const DragIcon = styled(IconButton)(({ theme }) => ({
-    padding: 0,
-    cursor: 'inherit',
-    transition: 'color 0.2s ease-in-out',
-}));
-
-export const StrategyItem = ({
+export const StrategyItem: VFC<IStrategyItemProps> = ({
     environmentId,
     strategy,
     onDragStart,
     onDragEnd,
     otherEnvironments,
-}: IStrategyItemProps) => {
+    orderNumber,
+}) => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
-    const theme = useTheme();
-    const { classes: styles } = useStyles();
-    const Icon = getFeatureStrategyIcon(strategy.name);
 
     const editStrategyPath = formatEditStrategyPath(
         projectId,
@@ -55,38 +41,13 @@ export const StrategyItem = ({
     );
 
     return (
-        <div className={styles.container}>
-            <div
-                className={classNames(styles.header, {
-                    [styles.headerDraggable]: Boolean(onDragStart),
-                })}
-            >
-                <ConditionallyRender
-                    condition={Boolean(onDragStart)}
-                    show={() => (
-                        <DragIcon
-                            draggable
-                            disableRipple
-                            size="small"
-                            onDragStart={onDragStart}
-                            onDragEnd={onDragEnd}
-                            sx={{ cursor: 'move' }}
-                        >
-                            <DragIndicator
-                                titleAccess="Drag to reorder"
-                                cursor="grab"
-                                sx={{ color: 'neutral.main' }}
-                            />
-                        </DragIcon>
-                    )}
-                />
-                <Icon className={styles.icon} />
-                <StringTruncator
-                    maxWidth="150"
-                    maxLength={15}
-                    text={formatStrategyName(strategy.name)}
-                />
-                <div className={styles.actions}>
+        <StrategyItemContainer
+            strategy={strategy}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            orderNumber={orderNumber}
+            actions={
+                <>
                     <ConditionallyRender
                         condition={Boolean(
                             otherEnvironments && otherEnvironments?.length > 0
@@ -115,14 +76,10 @@ export const StrategyItem = ({
                         strategyId={strategy.id}
                         icon
                     />
-                </div>
-            </div>
-            <div className={styles.body}>
-                <StrategyExecution
-                    strategy={strategy}
-                    percentageFill={theme.palette.grey[200]}
-                />
-            </div>
-        </div>
+                </>
+            }
+        >
+            <StrategyExecution strategy={strategy} />
+        </StrategyItemContainer>
     );
 };
diff --git a/...laygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/...laygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
@@ -4,11 +4,11 @@ export const useStyles = makeStyles()(theme => ({
     popoverPaper: {
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'flex-start',
         padding: theme.spacing(6),
-        maxWidth: '728px',
+        width: 728,
+        maxWidth: '100%',
         height: 'auto',
-        overflowY: 'scroll',
+        overflowY: 'auto',
         backgroundColor: theme.palette.tertiary.light,
     },
 }));
diff --git a/...foPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/...foPopoverCell/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}
+            />
+        </>
     );
 };