mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-23 00:22:19 +01:00
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.
This commit is contained in:
Fredrik Strand Oseberg
GitHub
parent
c5afa8ff11
commit
60d2176efa
@ -20,6 +20,7 @@ import { IToast } from 'interfaces/toast';
|
|||||||
import { useTheme } from '@mui/material/styles';
|
import { useTheme } from '@mui/material/styles';
|
||||||
import { FeedbackData, FeedbackMode } from './FeedbackContext';
|
import { FeedbackData, FeedbackMode } from './FeedbackContext';
|
||||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||||
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
|
|
||||||
export const ParentContainer = styled('div')(({ theme }) => ({
|
export const ParentContainer = styled('div')(({ theme }) => ({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
@ -206,6 +207,7 @@ export const FeedbackComponent = ({
|
|||||||
const { setHasSubmittedFeedback } = useUserSubmittedFeedback(
|
const { setHasSubmittedFeedback } = useUserSubmittedFeedback(
|
||||||
feedbackData.category,
|
feedbackData.category,
|
||||||
);
|
);
|
||||||
|
const feedbackComments = useUiFlag('feedbackComments');
|
||||||
|
|
||||||
function isProvideFeedbackSchema(data: any): data is ProvideFeedbackSchema {
|
function isProvideFeedbackSchema(data: any): data is ProvideFeedbackSchema {
|
||||||
data.difficultyScore = data.difficultyScore
|
data.difficultyScore = data.difficultyScore
|
||||||
@ -349,50 +351,103 @@ export const FeedbackComponent = ({
|
|||||||
</StyledScoreHelp>
|
</StyledScoreHelp>
|
||||||
</ScoreHelpContainer>
|
</ScoreHelpContainer>
|
||||||
</StyledScoreContainer>
|
</StyledScoreContainer>
|
||||||
<Box>
|
|
||||||
<FormSubTitle>
|
{feedbackComments !== false &&
|
||||||
{feedbackData.positiveLabel}
|
feedbackComments.enabled &&
|
||||||
</FormSubTitle>
|
feedbackComments.name ===
|
||||||
<TextField
|
'withoutComments' ? (
|
||||||
placeholder='Your answer here'
|
<>
|
||||||
style={{ width: '100%' }}
|
<Box>
|
||||||
name='positive'
|
<TextField
|
||||||
multiline
|
placeholder='Your answer here'
|
||||||
rows={3}
|
style={{ width: '100%' }}
|
||||||
variant='outlined'
|
name='positive'
|
||||||
size='small'
|
hidden
|
||||||
InputLabelProps={{
|
value={
|
||||||
style: {
|
feedbackComments.name
|
||||||
fontSize:
|
}
|
||||||
theme.fontSizes
|
multiline
|
||||||
.smallBody,
|
rows={3}
|
||||||
},
|
variant='outlined'
|
||||||
}}
|
size='small'
|
||||||
/>
|
InputLabelProps={{
|
||||||
</Box>
|
style: {
|
||||||
<Box>
|
fontSize:
|
||||||
<FormSubTitle>
|
theme.fontSizes
|
||||||
{
|
.smallBody,
|
||||||
feedbackData.areasForImprovementsLabel
|
},
|
||||||
}
|
}}
|
||||||
</FormSubTitle>
|
/>
|
||||||
<TextField
|
</Box>
|
||||||
placeholder='Your answer here'
|
<Box>
|
||||||
style={{ width: '100%' }}
|
<TextField
|
||||||
multiline
|
placeholder='Your answer here'
|
||||||
name='areasForImprovement'
|
style={{ width: '100%' }}
|
||||||
rows={3}
|
multiline
|
||||||
InputLabelProps={{
|
name='areasForImprovement'
|
||||||
style: {
|
rows={3}
|
||||||
fontSize:
|
InputLabelProps={{
|
||||||
theme.fontSizes
|
style: {
|
||||||
.smallBody,
|
fontSize:
|
||||||
},
|
theme.fontSizes
|
||||||
}}
|
.smallBody,
|
||||||
variant='outlined'
|
},
|
||||||
size='small'
|
}}
|
||||||
/>
|
variant='outlined'
|
||||||
</Box>
|
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>
|
<StyledButtonContainer>
|
||||||
<StyledButton
|
<StyledButton
|
||||||
disabled={!selectedScore}
|
disabled={!selectedScore}
|
||||||
|
|||||||
@ -77,6 +77,7 @@ export type UiFlags = {
|
|||||||
adminTokenKillSwitch?: boolean;
|
adminTokenKillSwitch?: boolean;
|
||||||
executiveDashboard?: boolean;
|
executiveDashboard?: boolean;
|
||||||
changeRequestConflictHandling?: boolean;
|
changeRequestConflictHandling?: boolean;
|
||||||
|
feedbackComments?: Variant;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface IVersionInfo {
|
export interface IVersionInfo {
|
||||||
|
|||||||
@ -98,6 +98,14 @@ exports[`should create default config 1`] = `
|
|||||||
"featureSearchFeedbackPosting": false,
|
"featureSearchFeedbackPosting": false,
|
||||||
"featureSearchFrontend": false,
|
"featureSearchFrontend": false,
|
||||||
"featuresExportImport": true,
|
"featuresExportImport": true,
|
||||||
|
"feedbackComments": {
|
||||||
|
"enabled": false,
|
||||||
|
"name": "feedbackComments",
|
||||||
|
"payload": {
|
||||||
|
"type": "json",
|
||||||
|
"value": "",
|
||||||
|
},
|
||||||
|
},
|
||||||
"filterInvalidClientMetrics": false,
|
"filterInvalidClientMetrics": false,
|
||||||
"googleAuthEnabled": false,
|
"googleAuthEnabled": false,
|
||||||
"incomingWebhooks": false,
|
"incomingWebhooks": false,
|
||||||
|
|||||||
@ -125,6 +125,7 @@ class ConfigController extends Controller {
|
|||||||
const expFlags = this.config.flagResolver.getAll({
|
const expFlags = this.config.flagResolver.getAll({
|
||||||
email: req.user.email,
|
email: req.user.email,
|
||||||
});
|
});
|
||||||
|
|
||||||
const flags = { ...this.config.ui.flags, ...expFlags };
|
const flags = { ...this.config.ui.flags, ...expFlags };
|
||||||
|
|
||||||
const response: UiConfigSchema = {
|
const response: UiConfigSchema = {
|
||||||
|
|||||||
@ -45,7 +45,8 @@ export type IFlagKey =
|
|||||||
| 'extendedUsageMetricsUI'
|
| 'extendedUsageMetricsUI'
|
||||||
| 'adminTokenKillSwitch'
|
| 'adminTokenKillSwitch'
|
||||||
| 'changeRequestConflictHandling'
|
| 'changeRequestConflictHandling'
|
||||||
| 'executiveDashboard';
|
| 'executiveDashboard'
|
||||||
|
| 'feedbackComments';
|
||||||
|
|
||||||
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
|
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
|
||||||
|
|
||||||
@ -208,6 +209,19 @@ const flags: IFlags = {
|
|||||||
process.env.UNLEASH_EXPERIMENTAL_EXECUTIVE_DASHBOARD,
|
process.env.UNLEASH_EXPERIMENTAL_EXECUTIVE_DASHBOARD,
|
||||||
false,
|
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 = {
|
export const defaultExperimentalOptions: IExperimentalOptions = {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user