mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
feat: A/B test search feedback variants (#6085)
Search was not getting any feedback. We introduced 3 different variants to compare conversion rate.   
This commit is contained in:
Jaanus Sellin
GitHub
parent
79e86e1aca
commit
bb02ffd8c4
@ -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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -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,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@ -69,7 +69,7 @@ export type UiFlags = {
|
||||
automatedActions?: boolean;
|
||||
celebrateUnleash?: boolean;
|
||||
increaseUnleashWidth?: boolean;
|
||||
featureSearchFeedback?: boolean;
|
||||
featureSearchFeedback?: Variant;
|
||||
enableLicense?: boolean;
|
||||
newStrategyConfigurationFeedback?: boolean;
|
||||
extendedUsageMetricsUI?: boolean;
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -45,7 +45,6 @@ process.nextTick(async () => {
|
||||
stripHeadersOnAPI: true,
|
||||
celebrateUnleash: true,
|
||||
increaseUnleashWidth: true,
|
||||
featureSearchFeedback: true,
|
||||
newStrategyConfigurationFeedback: true,
|
||||
extendedUsageMetricsUI: true,
|
||||
executiveDashboard: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user