diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx index 0718c2235a..220d7f1419 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/PlaygroundResultFeatureDetails.tsx +++ b/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 = ({ } /> + + {customStrategiesTxt} + + } + /> ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts index cbb3f5ad39..a8d01a6d77 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureDetails/helpers.ts +++ b/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) + ); +}; 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 ca67490b70..24ecf11045 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 @@ -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' } /> diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx index 3f217b41fd..60cf11b028 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/PlaygroundResultFeatureStrategyItem/PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution.tsx +++ b/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 }) => ({