feat: A/B test search feedback variants (#6085)

Search was not getting any feedback. We introduced 3 different variants to compare conversion rate. ![image](https://github.com/Unleash/unleash/assets/964450/9c4fbcd6-c6d9-4570-9a08-9321087f609a) ![image](https://github.com/Unleash/unleash/assets/964450/6d643d48-1dcb-4a67-9951-7f0c6865f31d) ![image](https://github.com/Unleash/unleash/assets/964450/423dbd54-5dd1-409c-9cd5-295edb9453d9)
Unleash · Jan 31, 2024 · bb02ffd · bb02ffd
1 parent 79e86e1
commit bb02ffd
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 24 deletions.
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, VFC } from 'react';
 import {
     Box,
+    Button,
     IconButton,
     Link,
     Tooltip,
@@ -69,7 +70,7 @@ const feedbackCategory = 'search';
 
 export const FeatureToggleListTable: VFC = () => {
     const theme = useTheme();
-    const { openFeedback } = useFeedback(feedbackCategory, 'automatic');
+    const featureSearchFeedback = useUiFlag('featureSearchFeedback');
     const { trackEvent } = usePlausibleTracker();
     const { environments } = useEnvironments();
     const enabledEnvironments = environments
@@ -81,7 +82,17 @@ export const FeatureToggleListTable: VFC = () => {
 
     const { setToastApiError } = useToast();
     const { uiConfig } = useUiConfig();
-    const featureSearchFeedback = useUiFlag('featureSearchFeedback');
+
+    const variant =
+        featureSearchFeedback !== false
+            ? featureSearchFeedback?.name ?? ''
+            : '';
+
+    const { openFeedback } = useFeedback(
+        feedbackCategory,
+        'automatic',
+        variant,
+    );
 
     const stateConfig = {
         offset: withDefault(NumberParam, 0),
@@ -352,19 +363,64 @@ export const FeatureToggleListTable: VFC = () => {
                             <FeatureToggleListActions
                                 onExportClick={() => setShowExportDialog(true)}
                             />
-                            <ConditionallyRender
-                                condition={featureSearchFeedback}
-                                show={
-                                    <Tooltip title='Provide feedback' arrow>
-                                        <IconButton
-                                            onClick={createFeedbackContext}
-                                            size='large'
-                                        >
-                                            <ReviewsOutlined />
-                                        </IconButton>
-                                    </Tooltip>
-                                }
-                            />
+                            {featureSearchFeedback !== false &&
+                                featureSearchFeedback?.enabled && (
+                                    <>
+                                        <ConditionallyRender
+                                            condition={
+                                                variant === 'withoutText'
+                                            }
+                                            show={
+                                                <Tooltip
+                                                    title='Provide feedback'
+                                                    arrow
+                                                >
+                                                    <IconButton
+                                                        onClick={
+                                                            createFeedbackContext
+                                                        }
+                                                        size='large'
+                                                    >
+                                                        <ReviewsOutlined />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            }
+                                        />
+                                        <ConditionallyRender
+                                            condition={variant === 'withText'}
+                                            show={
+                                                <Button
+                                                    startIcon={
+                                                        <ReviewsOutlined />
+                                                    }
+                                                    onClick={
+                                                        createFeedbackContext
+                                                    }
+                                                >
+                                                    Provide feedback
+                                                </Button>
+                                            }
+                                        />{' '}
+                                        <ConditionallyRender
+                                            condition={
+                                                variant === 'withTextOutlined'
+                                            }
+                                            show={
+                                                <Button
+                                                    startIcon={
+                                                        <ReviewsOutlined />
+                                                    }
+                                                    onClick={
+                                                        createFeedbackContext
+                                                    }
+                                                    variant='outlined'
+                                                >
+                                                    Provide feedback
+                                                </Button>
+                                            }
+                                        />
+                                    </>
+                                )}
                         </>
                     }
                 >

diff --git a/frontend/src/component/feedbackNew/FeedbackContext.ts b/frontend/src/component/feedbackNew/FeedbackContext.ts
@@ -4,7 +4,11 @@ import { IFeedbackCategory } from 'hooks/useSubmittedFeedback';
 export type FeedbackMode = 'automatic' | 'manual';
 export interface IFeedbackContext {
     feedbackData: FeedbackData | undefined;
-    openFeedback: (data: FeedbackData, mode: FeedbackMode) => void;
+    openFeedback: (
+        data: FeedbackData,
+        mode: FeedbackMode,
+        variant?: string,
+    ) => void;
     closeFeedback: () => void;
     showFeedback: boolean;
     setShowFeedback: (visible: boolean) => void;

diff --git a/frontend/src/component/feedbackNew/FeedbackProvider.tsx b/frontend/src/component/feedbackNew/FeedbackProvider.tsx
@@ -13,7 +13,11 @@ export const FeedbackProvider: FC = ({ children }) => {
     const [feedbackMode, setFeedbackMode] = useState<
         FeedbackMode | undefined
     >();
-    const openFeedback = (data: FeedbackData, mode: FeedbackMode) => {
+    const openFeedback = (
+        data: FeedbackData,
+        mode: FeedbackMode,
+        variant: string = '',
+    ) => {
         setFeedbackData(data);
         setShowFeedback(true);
         setFeedbackMode(mode);
@@ -22,6 +26,7 @@ export const FeedbackProvider: FC = ({ children }) => {
             props: {
                 eventType: `feedback opened - ${data.category}`,
                 category: data.category,
+                variant: variant,
             },
         });
     };

diff --git a/frontend/src/component/feedbackNew/useFeedback.tsx b/frontend/src/component/feedbackNew/useFeedback.tsx
@@ -30,6 +30,7 @@ export const useFeedbackContext = (): IFeedbackContext => {
 export const useFeedback = (
     feedbackCategory: IFeedbackCategory,
     mode: FeedbackMode,
+    variant: string = '',
 ) => {
     const context = useFeedbackContext();
     const { hasSubmittedFeedback } = useUserSubmittedFeedback(feedbackCategory);
@@ -44,6 +45,7 @@ export const useFeedback = (
                     category: feedbackCategory,
                 },
                 mode,
+                variant,
             );
         },
     };

diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
@@ -69,7 +69,7 @@ export type UiFlags = {
     automatedActions?: boolean;
     celebrateUnleash?: boolean;
     increaseUnleashWidth?: boolean;
-    featureSearchFeedback?: boolean;
+    featureSearchFeedback?: Variant;
     enableLicense?: boolean;
     newStrategyConfigurationFeedback?: boolean;
     extendedUsageMetricsUI?: boolean;

diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -94,7 +94,14 @@ exports[`should create default config 1`] = `
       "executiveDashboard": false,
       "extendedUsageMetrics": false,
       "extendedUsageMetricsUI": false,
-      "featureSearchFeedback": false,
+      "featureSearchFeedback": {
+        "enabled": true,
+        "name": "withText",
+        "payload": {
+          "type": "json",
+          "value": "",
+        },
+      },
       "featureSearchFeedbackPosting": false,
       "featuresExportImport": true,
       "feedbackComments": {

diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
@@ -157,10 +157,19 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_INCREASE_UNLEASH_WIDTH,
         false,
     ),
-    featureSearchFeedback: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_FEATURE_SEARCH_FEEDBACK,
-        false,
-    ),
+    featureSearchFeedback: {
+        name: 'withText',
+        enabled: parseEnvVarBoolean(
+            process.env.UNLEASH_EXPERIMENTAL_FEATURE_SEARCH_FEEDBACK,
+            true,
+        ),
+        payload: {
+            type: PayloadType.JSON,
+            value:
+                process.env
+                    .UNLEASH_EXPERIMENTAL_FEATURE_SEARCH_FEEDBACK_PAYLOAD ?? '',
+        },
+    },
     featureSearchFeedbackPosting: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_FEATURE_SEARCH_FEEDBACK_POSTING,
         false,

diff --git a/src/server-dev.ts b/src/server-dev.ts
@@ -45,7 +45,6 @@ process.nextTick(async () => {
                         stripHeadersOnAPI: true,
                         celebrateUnleash: true,
                         increaseUnleashWidth: true,
-                        featureSearchFeedback: true,
                         newStrategyConfigurationFeedback: true,
                         extendedUsageMetricsUI: true,
                         executiveDashboard: true,