fmt and lint

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useMemo, VFC } from 'react';
-import { Box, Chip, Tooltip } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';

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

@@ -71,8 +71,8 @@ export const PlaygroundResultFeatureDetails = ({
                                 feature.isEnabled === 'unevaluated'
                                     ? '?'
                                     : Boolean(feature.isEnabled)
-                                        ? 'True'
+                                    ? 'True'
-                                        : 'False'
+                                    : 'False'
                             }
                         />
                     </span>

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

@@ -20,9 +20,7 @@ export const PlaygroundResultFeatureStrategyList = ({
 }: PlaygroundResultFeatureStrategyListProps) => {
     return (
         <ConditionallyRender
-            condition={
+            condition={!feature.isEnabledInCurrentEnvironment}
-                !feature.isEnabledInCurrentEnvironment
-            }
             show={
                 <WrappedPlaygroundResultStrategyList
                     strategies={feature?.strategies}

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

@@ -56,7 +56,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
                 width: '100%',
                 position: 'relative',
                 paddingRight: compact ? '12px' : 0,
-                ml: '-12px'
+                ml: '-12px',
             }}
         >
             <ConditionallyRender
@@ -64,7 +64,9 @@ export const PlaygroundResultFeatureStrategyItem = ({
                 show={<StrategySeparator text="OR" />}
             />
             <StyledItemWrapper>
-                <Typography variant={'subtitle1'} color={'text.secondary'}>{index + 1}</Typography>
+                <Typography variant={'subtitle1'} color={'text.secondary'}>
+                    {index + 1}
+                </Typography>
                 <Box className={styles.innerContainer} sx={{ border }}>
                     <div className={styles.header}>
                         <div className={styles.headerName}>

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

@@ -31,10 +31,9 @@ const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({
 }));
 
 const StyledParamWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(2,1),
+    padding: theme.spacing(2, 1),
 }));
 
-
 export const PlaygroundResultStrategyExecution = ({
     strategyResult,
     input,
@@ -170,7 +169,10 @@ export const PlaygroundResultStrategyExecution = ({
                     );
                     return (
                         <Fragment key={param?.name}>
-                            <PlaygroundConstraintItem value={values} text={param.name} />
+                            <PlaygroundConstraintItem
+                                value={values}
+                                text={param.name}
+                            />
                             <ConditionallyRender
                                 condition={notLastItem}
                                 show={<StrategySeparator text="AND" />}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureStatusCell/FeatureStatusCell.tsx

@@ -22,7 +22,13 @@ export const FeatureStatusCell = ({ enabled }: IFeatureStatusCellProps) => {
             <StyledChipWrapper data-loading>
                 <PlaygroundResultChip
                     enabled={enabled}
-                    label={enabled === 'unevaluated' ? '?' : Boolean(enabled) ? 'True': 'False' }
+                    label={
+                        enabled === 'unevaluated'
+                            ? '?'
+                            : Boolean(enabled)
+                            ? 'True'
+                            : 'False'
+                    }
                 />
             </StyledChipWrapper>
         </StyledCellBox>

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip.tsx

@@ -4,10 +4,10 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond
 import React from 'react';
 import { ReactComponent as FeatureEnabledIcon } from '../../../../../assets/icons/isenabled-true.svg';
 import { ReactComponent as FeatureDisabledIcon } from '../../../../../assets/icons/isenabled-false.svg';
-import { WarningOutlined } from "@mui/icons-material";
+import { WarningOutlined } from '@mui/icons-material';
 
 interface IResultChipProps {
-    enabled: boolean | 'unevaluated' | 'unknown'
+    enabled: boolean | 'unevaluated' | 'unknown';
     label: string;
     // Result icon - defaults to true
     showIcon?: boolean;
@@ -69,8 +69,8 @@ export const PlaygroundResultChip = ({
     const theme = useTheme();
     const icon = (
         <ConditionallyRender
-            condition={enabled === 'unknown' || enabled === 'unevaluated' }
+            condition={enabled === 'unknown' || enabled === 'unevaluated'}
-            show={<WarningOutlined color={'warning'} fontSize='inherit' /> }
+            show={<WarningOutlined color={'warning'} fontSize="inherit" />}
             elseShow={
                 <ConditionallyRender
                     condition={typeof enabled === 'boolean' && Boolean(enabled)}
@@ -91,13 +91,13 @@ export const PlaygroundResultChip = ({
         />
     );
 
-    let  chipWidth = 60;
+    let chipWidth = 60;
     if (size === 'medium') chipWidth = 72;
     if (size === 'large') chipWidth = 100;
 
     return (
         <ConditionallyRender
-            condition={enabled === 'unknown' || enabled === 'unevaluated' }
+            condition={enabled === 'unknown' || enabled === 'unevaluated'}
             show={
                 <StyledUnknownChip
                     icon={showIcon ? icon : undefined}
@@ -125,5 +125,5 @@ export const PlaygroundResultChip = ({
                 />
             }
         />
-    )
+    );
 };