From 60d2176efac5a4a06fd245231923de00887d4688 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Mon, 22 Jan 2024 13:14:27 +0100
Subject: [PATCH] feat: add option to use variants with feedback (#5986)

This PR will allow us to use a feature flag with variants to control
whether or not we should show the comments field of the feedback form.
This will allow us to see whether we can increase feedback collection if
we reduce the load on the customer.
---
 .../feedbackNew/FeedbackComponent.tsx         | 143 ++++++++++++------
 frontend/src/interfaces/uiConfig.ts           |   1 +
 .../__snapshots__/create-config.test.ts.snap  |   8 +
 src/lib/routes/admin-api/config.ts            |   1 +
 src/lib/types/experimental.ts                 |  16 +-
 5 files changed, 124 insertions(+), 45 deletions(-)

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index 41aeaa0522..28db21f045 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -20,6 +20,7 @@ import { IToast } from 'interfaces/toast';
 import { useTheme } from '@mui/material/styles';
 import { FeedbackData, FeedbackMode } from './FeedbackContext';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 export const ParentContainer = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -206,6 +207,7 @@ export const FeedbackComponent = ({
     const { setHasSubmittedFeedback } = useUserSubmittedFeedback(
         feedbackData.category,
     );
+    const feedbackComments = useUiFlag('feedbackComments');
 
     function isProvideFeedbackSchema(data: any): data is ProvideFeedbackSchema {
         data.difficultyScore = data.difficultyScore
@@ -349,50 +351,103 @@ export const FeedbackComponent = ({
                                             </StyledScoreHelp>
                                         </ScoreHelpContainer>
                                     </StyledScoreContainer>
-                                    <Box>
-                                        <FormSubTitle>
-                                            {feedbackData.positiveLabel}
-                                        </FormSubTitle>
-                                        <TextField
-                                            placeholder='Your answer here'
-                                            style={{ width: '100%' }}
-                                            name='positive'
-                                            multiline
-                                            rows={3}
-                                            variant='outlined'
-                                            size='small'
-                                            InputLabelProps={{
-                                                style: {
-                                                    fontSize:
-                                                        theme.fontSizes
-                                                            .smallBody,
-                                                },
-                                            }}
-                                        />
-                                    </Box>
-                                    <Box>
-                                        <FormSubTitle>
-                                            {
-                                                feedbackData.areasForImprovementsLabel
-                                            }
-                                        </FormSubTitle>
-                                        <TextField
-                                            placeholder='Your answer here'
-                                            style={{ width: '100%' }}
-                                            multiline
-                                            name='areasForImprovement'
-                                            rows={3}
-                                            InputLabelProps={{
-                                                style: {
-                                                    fontSize:
-                                                        theme.fontSizes
-                                                            .smallBody,
-                                                },
-                                            }}
-                                            variant='outlined'
-                                            size='small'
-                                        />
-                                    </Box>
+
+                                    {feedbackComments !== false &&
+                                    feedbackComments.enabled &&
+                                    feedbackComments.name ===
+                                        'withoutComments' ? (
+                                        <>
+                                            <Box>
+                                                <TextField
+                                                    placeholder='Your answer here'
+                                                    style={{ width: '100%' }}
+                                                    name='positive'
+                                                    hidden
+                                                    value={
+                                                        feedbackComments.name
+                                                    }
+                                                    multiline
+                                                    rows={3}
+                                                    variant='outlined'
+                                                    size='small'
+                                                    InputLabelProps={{
+                                                        style: {
+                                                            fontSize:
+                                                                theme.fontSizes
+                                                                    .smallBody,
+                                                        },
+                                                    }}
+                                                />
+                                            </Box>
+                                            <Box>
+                                                <TextField
+                                                    placeholder='Your answer here'
+                                                    style={{ width: '100%' }}
+                                                    multiline
+                                                    name='areasForImprovement'
+                                                    rows={3}
+                                                    InputLabelProps={{
+                                                        style: {
+                                                            fontSize:
+                                                                theme.fontSizes
+                                                                    .smallBody,
+                                                        },
+                                                    }}
+                                                    variant='outlined'
+                                                    size='small'
+                                                    hidden
+                                                />
+                                            </Box>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Box>
+                                                <FormSubTitle>
+                                                    {feedbackData.positiveLabel}
+                                                </FormSubTitle>
+                                                <TextField
+                                                    placeholder='Your answer here'
+                                                    style={{ width: '100%' }}
+                                                    name='positive'
+                                                    multiline
+                                                    rows={3}
+                                                    variant='outlined'
+                                                    size='small'
+                                                    InputLabelProps={{
+                                                        style: {
+                                                            fontSize:
+                                                                theme.fontSizes
+                                                                    .smallBody,
+                                                        },
+                                                    }}
+                                                />
+                                            </Box>
+                                            <Box>
+                                                <FormSubTitle>
+                                                    {
+                                                        feedbackData.areasForImprovementsLabel
+                                                    }
+                                                </FormSubTitle>
+                                                <TextField
+                                                    placeholder='Your answer here'
+                                                    style={{ width: '100%' }}
+                                                    multiline
+                                                    name='areasForImprovement'
+                                                    rows={3}
+                                                    InputLabelProps={{
+                                                        style: {
+                                                            fontSize:
+                                                                theme.fontSizes
+                                                                    .smallBody,
+                                                        },
+                                                    }}
+                                                    variant='outlined'
+                                                    size='small'
+                                                />
+                                            </Box>
+                                        </>
+                                    )}
+
                                     <StyledButtonContainer>
                                         <StyledButton
                                             disabled={!selectedScore}
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index b0bf4a01b7..49b9d3435d 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -77,6 +77,7 @@ export type UiFlags = {
     adminTokenKillSwitch?: boolean;
     executiveDashboard?: boolean;
     changeRequestConflictHandling?: boolean;
+    feedbackComments?: Variant;
 };
 
 export interface IVersionInfo {
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index 707c8911d1..c8f79e6033 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -98,6 +98,14 @@ exports[`should create default config 1`] = `
       "featureSearchFeedbackPosting": false,
       "featureSearchFrontend": false,
       "featuresExportImport": true,
+      "feedbackComments": {
+        "enabled": false,
+        "name": "feedbackComments",
+        "payload": {
+          "type": "json",
+          "value": "",
+        },
+      },
       "filterInvalidClientMetrics": false,
       "googleAuthEnabled": false,
       "incomingWebhooks": false,
diff --git a/src/lib/routes/admin-api/config.ts b/src/lib/routes/admin-api/config.ts
index b7632b944c..9f8cf0ee53 100644
--- a/src/lib/routes/admin-api/config.ts
+++ b/src/lib/routes/admin-api/config.ts
@@ -125,6 +125,7 @@ class ConfigController extends Controller {
         const expFlags = this.config.flagResolver.getAll({
             email: req.user.email,
         });
+
         const flags = { ...this.config.ui.flags, ...expFlags };
 
         const response: UiConfigSchema = {
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index af46ae2ffb..6990ce9477 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -45,7 +45,8 @@ export type IFlagKey =
     | 'extendedUsageMetricsUI'
     | 'adminTokenKillSwitch'
     | 'changeRequestConflictHandling'
-    | 'executiveDashboard';
+    | 'executiveDashboard'
+    | 'feedbackComments';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -208,6 +209,19 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_EXECUTIVE_DASHBOARD,
         false,
     ),
+    feedbackComments: {
+        name: 'feedbackComments',
+        enabled: parseEnvVarBoolean(
+            process.env.UNLEASH_EXPERIMENTAL_FEEDBACK_COMMENTS,
+            false,
+        ),
+        payload: {
+            type: PayloadType.JSON,
+            value:
+                process.env.UNLEASH_EXPERIMENTAL_FEEDBACK_COMMENTS_PAYLOAD ??
+                '',
+        },
+    },
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {