Skip to content

Commit

Permalink
feat: add option to use variants with feedback (#5986)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@FredrikOseberg
FredrikOseberg committed Jan 22, 2024
1 parent c5afa8f commit 60d2176
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 45 deletions.
143 changes: 99 additions & 44 deletions frontend/src/component/feedbackNew/FeedbackComponent.tsx
View file
Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions frontend/src/interfaces/uiConfig.ts
View file
Expand Up @@ -77,6 +77,7 @@ export type UiFlags = {
adminTokenKillSwitch?: boolean;
executiveDashboard?: boolean;
changeRequestConflictHandling?: boolean;
feedbackComments?: Variant;
};

export interface IVersionInfo {
Expand Down
8 changes: 8 additions & 0 deletions src/lib/__snapshots__/create-config.test.ts.snap
View file
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/lib/routes/admin-api/config.ts
View file
Expand Up @@ -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 = {
Expand Down
16 changes: 15 additions & 1 deletion src/lib/types/experimental.ts
View file
Expand Up @@ -45,7 +45,8 @@ export type IFlagKey =
| 'extendedUsageMetricsUI'
| 'adminTokenKillSwitch'
| 'changeRequestConflictHandling'
| 'executiveDashboard';
| 'executiveDashboard'
| 'feedbackComments';

export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;

Expand Down Expand Up @@ -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 = {
Expand Down

0 comments on commit 60d2176

Please sign in to comment.