From 70217639738f68e9a03bc3e8cb3a6b84ef2d0dc7 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 3 Jun 2024 13:54:06 +0200
Subject: [PATCH] feat: explain stickiness (#7248)

---
 .../StrategyExecution/StrategyExecution.tsx         | 12 ++++++++++++
 .../StrategyExecutionParameters.tsx                 | 13 +++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
index d896b77b82..9f7bf3dbe8 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
@@ -77,6 +77,9 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
     strategy,
 }) => {
     const { parameters, constraints = [] } = strategy;
+    const stickiness = parameters?.stickiness;
+    const explainStickiness =
+        typeof stickiness === 'string' && stickiness !== 'default';
     const { strategies } = useStrategies();
     const { segments } = useSegments();
     const strategySegments = segments?.filter((segment) => {
@@ -112,6 +115,15 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                             <div>
                                 <Badge color={badgeType}>{percentage}%</Badge>{' '}
                                 <span>of your base</span>{' '}
+                                <span>
+                                    {explainStickiness ? (
+                                        <>
+                                            with <strong>{stickiness}</strong>
+                                        </>
+                                    ) : (
+                                        ''
+                                    )}{' '}
+                                </span>
                                 <span>
                                     {constraints.length > 0
                                         ? 'who match constraints'
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
index 24631b4c9b..964e2ec819 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
@@ -34,6 +34,9 @@ export const PlaygroundResultStrategyExecutionParameters = ({
     input,
     disabled = false,
 }: PlaygroundResultStrategyExecutionParametersProps) => {
+    const stickiness = parameters?.stickiness;
+    const explainStickiness =
+        typeof stickiness === 'string' && stickiness !== 'default';
     return (
         <>
             {Object.keys(parameters).map((key) => {
@@ -81,6 +84,16 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                                         {percentage}%
                                     </Badge>{' '}
                                     of your base{' '}
+                                    <span>
+                                        {explainStickiness ? (
+                                            <>
+                                                with{' '}
+                                                <strong>{stickiness}</strong>
+                                            </>
+                                        ) : (
+                                            ''
+                                        )}{' '}
+                                    </span>
                                     {constraints.length > 0
                                         ? 'who match constraints'
                                         : ''}{' '}