refactoring for better grouping/readability

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

@@ -9,9 +9,10 @@ import { ConditionallyRender } from '../../../../common/ConditionallyRender/Cond
 import { useStyles } from './FeatureResultInfoPopoverCell.styles';
 import { PlaygroundResultFeatureDetails } from './PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails';
 import {
-    PlaygroundResultStrategyList,
+    PlaygroundResultStrategyLists,
     WrappedPlaygroundResultStrategyList,
-} from './PlaygroundResultStrategyList/PlaygroundResultStrategyList';
+} from './PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists';
+import { PlaygroundResultFeatureStrategyList } from './PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList';
 
 interface FeatureResultInfoPopoverCellProps {
     feature: PlaygroundFeatureSchema;
@@ -63,21 +64,9 @@ export const FeatureResultInfoPopoverCell = ({
                     input={input}
                     onClose={() => setOpen(false)}
                 />
-                <ConditionallyRender
+                <PlaygroundResultFeatureStrategyList
-                    condition={!feature.isEnabledInCurrentEnvironment}
+                    feature={feature}
-                    show={
+                    input={input}
-                        <PlaygroundResultStrategyList
-                            strategies={feature?.strategies}
-                            input={input}
-                        />
-                    }
-                    elseShow={
-                        <WrappedPlaygroundResultStrategyList
-                            strategies={feature?.strategies}
-                            feature={feature}
-                            input={input}
-                        />
-                    }
                 />
             </Popover>
         </FeatureResultPopoverWrapper>

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

@@ -28,7 +28,7 @@ export const PlaygroundResultFeatureDetails = ({
 
     const reason = Boolean(feature.isEnabled)
         ? 'at least one strategy is True'
-        : feature?.isEnabledInCurrentEnvironment
+        : !feature?.isEnabledInCurrentEnvironment
         ? 'the environment is disabled'
         : 'all strategies are False';
 

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

@@ -0,0 +1,39 @@
+import {
+    PlaygroundResultStrategyLists,
+    WrappedPlaygroundResultStrategyList,
+} from './PlaygroundResultStrategyList/playgroundResultStrategyLists';
+import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
+import React from 'react';
+import {
+    PlaygroundFeatureSchema,
+    PlaygroundRequestSchema,
+} from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+
+interface PlaygroundResultFeatureStrategyListProps {
+    feature: PlaygroundFeatureSchema;
+    input?: PlaygroundRequestSchema;
+}
+
+export const PlaygroundResultFeatureStrategyList = ({
+    feature,
+    input,
+}: PlaygroundResultFeatureStrategyListProps) => {
+    return (
+        <ConditionallyRender
+            condition={!feature.isEnabledInCurrentEnvironment}
+            show={
+                <PlaygroundResultStrategyLists
+                    strategies={feature?.strategies}
+                    input={input}
+                />
+            }
+            elseShow={
+                <WrappedPlaygroundResultStrategyList
+                    strategies={feature?.strategies}
+                    feature={feature}
+                    input={input}
+                />
+            }
+        />
+    );
+};

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

@@ -3,10 +3,10 @@ import {
     PlaygroundRequestSchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
 import React, { Fragment } from 'react';
-import { objectId } from '../../../../../../../utils/objectId';
+import { objectId } from '../../../../../../../../../utils/objectId';
-import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator';
+import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator';
-import { ConstraintAccordionView } from '../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
+import { ConstraintAccordionView } from '../../../../../../../../common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
 import { styled } from '@mui/material';
 
 interface PlaygroundResultConstraintExecutionProps {

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

@@ -6,7 +6,7 @@ import {
     getFeatureStrategyIcon,
 } from 'utils/strategyNames';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { PlaygroundResultChip } from '../../PlaygroundResultChip/PlaygroundResultChip';
+import { PlaygroundResultChip } from '../../../../PlaygroundResultChip/PlaygroundResultChip';
 import {
     PlaygroundFeatureStrategyResult,
     PlaygroundRequestSchema,

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

@@ -1,14 +1,14 @@
 import {
     PlaygroundFeatureStrategySegmentResult,
     PlaygroundRequestSchema,
-} from '../../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model';
 import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution';
 import { CancelOutlined, DonutLarge } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
-import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator';
+import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator';
 import { useStyles } from './PlaygroundResultSegmentExecution.styles';
 import { styled, Typography } from '@mui/material';
-import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender';
 
 interface PlaygroundResultSegmentExecutionProps {
     segments?: PlaygroundFeatureStrategySegmentResult[];

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

@@ -1,12 +1,12 @@
-import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from '../../../../../../../../common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from '../../../../../../common/StrategySeparator/StrategySeparator';
+import { StrategySeparator } from '../../../../../../../../common/StrategySeparator/StrategySeparator';
 import { Box, Chip, styled } from '@mui/material';
 import { useStyles } from './PlaygroundResultStrategyExecution.styles';
 import {
     PlaygroundFeatureStrategyResult,
     PlaygroundRequestSchema,
-} from '../../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from '../../../../../../../../../hooks/api/actions/usePlayground/playground.model';
-import useUiConfig from '../../../../../../../hooks/api/getters/useUiConfig/useUiConfig';
+import useUiConfig from '../../../../../../../../../hooks/api/getters/useUiConfig/useUiConfig';
 import React from 'react';
 import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution';
 import { PlaygroundResultSegmentExecution } from '../PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution';

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

@@ -2,10 +2,27 @@ import {
     PlaygroundFeatureSchema,
     PlaygroundFeatureStrategyResult,
     PlaygroundRequestSchema,
-} from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+} from '../../../../../../../hooks/api/actions/usePlayground/playground.model';
-import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from '../../../../../../common/ConditionallyRender/ConditionallyRender';
 import { Alert, styled, Typography } from '@mui/material';
-import { PlaygroundResultFeatureStrategyItem } from '../PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem';
+import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem';
+
+const StyledAlertWrapper = styled('div')(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.shape.borderRadiusMedium,
+    border: `1px solid ${theme.palette.info.main}`,
+}));
+
+const StyledListWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(1, 0.5),
+}));
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+}));
 
 interface PlaygroundResultStrategyListProps {
     strategies: PlaygroundFeatureStrategyResult[];
@@ -13,7 +30,7 @@ interface PlaygroundResultStrategyListProps {
     compact?: boolean;
 }
 
-export const PlaygroundResultStrategyList = ({
+export const PlaygroundResultStrategyLists = ({
     strategies,
     input,
     compact = false,
@@ -42,23 +59,6 @@ export const PlaygroundResultStrategyList = ({
     );
 };
 
-const StyledAlertWrapper = styled('div')(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.info.main}`,
-}));
-
-const StyledListWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(1, 0.5),
-}));
-
-const StyledAlert = styled(Alert)(({ theme }) => ({
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-}));
-
 interface WrappedPlaygroundResultStrategyListProps
     extends PlaygroundResultStrategyListProps {
     feature: PlaygroundFeatureSchema;
@@ -77,7 +77,7 @@ export const WrappedPlaygroundResultStrategyList = ({
                 evaluate like this:{' '}
             </StyledAlert>
             <StyledListWrapper>
-                <PlaygroundResultStrategyList
+                <PlaygroundResultStrategyLists
                     strategies={strategies}
                     input={input}
                     compact