Use new strategy execution in playground (#9553)

Implements playground results for strategies.

Old design:

![image](https://github.com/user-attachments/assets/6c1f1bad-4568-4959-82ee-3ebc6a0aab2d)

New design:

![image](https://github.com/user-attachments/assets/8991fc67-7055-4f6c-b2cb-b2d445057962)


Still left: segments.

I also discovered during this that some of the new hooks (and also some
of the new components) accept deprecated types
(`IFeatureStrategyPayload` in this case). If that should indeed be
deprecated, then we also shouldn't use it in the new hooks / components
if we can avoid it. I'll make a task for it.

---------

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

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

@@ -15,7 +15,10 @@ import type {
 import type { IFeatureStrategyPayload } from 'interfaces/strategy';
 
 export const useCustomStrategyParameters = (
-    strategy: CreateFeatureStrategySchema | IFeatureStrategyPayload,
+    strategy: Pick<
+        CreateFeatureStrategySchema | IFeatureStrategyPayload,
+        'parameters' | 'name'
+    >,
     strategies: StrategySchema[],
 ) => {
     const { parameters } = strategy;

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

@@ -5,7 +5,12 @@ import type { FeatureStrategySchema } from 'openapi';
 import { RolloutParameter } from '../RolloutParameter/RolloutParameter';
 
 export const useStrategyParameters = (
-    strategy: Partial<FeatureStrategySchema>,
+    strategy: Partial<
+        Pick<
+            FeatureStrategySchema,
+            'name' | 'constraints' | 'variants' | 'parameters'
+        >
+    >,
     displayGroupId?: boolean,
 ) => {
     const { constraints, variants } = strategy;

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -4,35 +4,38 @@ import type {
 } from 'openapi';
 import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
 import { SegmentExecution } from './SegmentExecution/SegmentExecution';
-import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters';
-import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
 import { formattedStrategyNames } from 'utils/strategyNames';
 import { StyledBoxSummary } from './StrategyExecution.styles';
 import { Badge } from 'component/common/Badge/Badge';
 import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList';
 import { objectId } from 'utils/objectId';
 import type { FC } from 'react';
+import { useStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters';
+import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
+import { useCustomStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters';
 
-interface IStrategyExecutionProps {
+type StrategyExecutionProps = {
     strategyResult: PlaygroundStrategySchema;
     percentageFill?: string;
     input?: PlaygroundRequestSchema;
-}
+};
 
-export const StrategyExecution: FC<IStrategyExecutionProps> = ({
+export const StrategyExecution: FC<StrategyExecutionProps> = ({
     strategyResult,
     input,
 }) => {
     const { name, constraints, segments, parameters } = strategyResult;
+    const params = useStrategyParameters(strategyResult);
+
+    const { strategies } = useStrategies();
+    const { isCustomStrategy, customStrategyParameters: customStrategyItems } =
+        useCustomStrategyParameters(strategyResult, strategies);
 
     const hasSegments = Boolean(segments && segments.length > 0);
     const hasConstraints = Boolean(constraints && constraints?.length > 0);
     const hasExecutionParameters =
         name !== 'default' &&
         Object.keys(formattedStrategyNames).includes(name);
-    const hasCustomStrategyParameters =
-        Object.keys(parameters).length > 0 &&
-        strategyResult.result.evaluationStatus === 'incomplete'; // Use of custom strategy can be more explicit from the API
 
     if (!parameters) {
         return null;
@@ -49,16 +52,8 @@ export const StrategyExecution: FC<IStrategyExecutionProps> = ({
                   />
               ))
             : []),
-        hasExecutionParameters && (
+        hasExecutionParameters && params,
-            <PlaygroundResultStrategyExecutionParameters
+        isCustomStrategy && customStrategyItems,
-                parameters={parameters}
-                constraints={constraints}
-                input={input}
-            />
-        ),
-        hasCustomStrategyParameters && (
-            <CustomStrategyParams strategyName={name} parameters={parameters} />
-        ),
         name === 'default' && (
             <StyledBoxSummary sx={{ width: '100%' }}>
                 The standard strategy is <Badge color='success'>ON</Badge> for