bug fix

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

@@ -8,7 +8,7 @@ import { useStyles } from './PlaygroundResultFeatureDetails.styles';
 import { CloseOutlined } from '@mui/icons-material';
 import React from 'react';
 import { ConditionallyRender } from '../../../../../common/ConditionallyRender/ConditionallyRender';
-import { checkForEmptyValues } from './helpers';
+import { checkForEmptyValues, hasCustomStrategies } from './helpers';
 
 interface PlaygroundFeatureResultDetailsProps {
     feature: PlaygroundFeatureSchema;
@@ -41,6 +41,10 @@ export const PlaygroundResultFeatureDetails = ({
         ? 'You did not provide a value for your context field in step 2 of the configuration'
         : undefined;
 
+    const customStrategiesTxt = hasCustomStrategies(feature)
+        ? `You have custom strategies. Custom strategies can't be evaluated and they will be set as Unevaluated`
+        : undefined;
+
     const onCloseClick =
         onClose &&
         ((event: React.SyntheticEvent) => {
@@ -82,6 +86,14 @@ export const PlaygroundResultFeatureDetails = ({
                     </div>
                 }
             />
+            <ConditionallyRender
+                condition={Boolean(customStrategiesTxt)}
+                show={
+                    <div className={styles.alertRow}>
+                        <Alert color={'info'}>{customStrategiesTxt}</Alert>
+                    </div>
+                }
+            />
         </>
     );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts

@@ -1,3 +1,16 @@
+import { PlaygroundFeatureSchema } from '../../../../../../hooks/api/actions/usePlayground/playground.model';
+
+export const DEFAULT_STRATEGIES = [
+    'default',
+    'applicationHostname',
+    'flexibleRollout',
+    'gradualRolloutRandom',
+    'gradualRolloutSessionId',
+    'gradualRolloutUserId',
+    'remoteAddress',
+    'userWithId',
+];
+
 export function checkForEmptyValues(object?: Object): boolean {
     if (object === undefined) {
         return true;
@@ -6,3 +19,9 @@ export function checkForEmptyValues(object?: Object): boolean {
         v && typeof v === 'object' ? checkForEmptyValues(v) : v === null
     );
 }
+
+export const hasCustomStrategies = (feature: PlaygroundFeatureSchema) => {
+    return feature.strategies?.data?.find(strategy =>
+        DEFAULT_STRATEGIES.includes(strategy.name)
+    );
+};

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

@@ -25,7 +25,7 @@ const StyledItemWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    margin: theme.spacing(0.5),
+    margin: theme.spacing(0.5, 0),
     gap: theme.spacing(1),
 }));
 
@@ -41,7 +41,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
     const Icon = getFeatureStrategyIcon(strategy.name);
     const label =
         result.evaluationStatus === 'incomplete'
-            ? 'Unknown'
+            ? 'Unevaluated'
             : result.enabled
             ? 'True'
             : 'False';
@@ -87,7 +87,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
                             label={label}
                             size={
                                 result.evaluationStatus === 'incomplete'
-                                    ? 'medium'
+                                    ? 'large'
                                     : 'default'
                             }
                         />

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

@@ -20,7 +20,7 @@ interface PlaygroundResultStrategyExecutionProps {
 }
 
 const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(1),
+    padding: theme.spacing(0),
 }));
 
 const StyledParamWrapper = styled('div')(({ theme }) => ({