From b24471c1b4b0c7705796aaeee3ef861f940abf82 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 4 Jan 2024 14:10:01 +0200 Subject: [PATCH] feat: add dont ask me again button (#5753) --- .../NewFeatureStrategyForm.tsx | 6 +- .../FeatureToggleListTable.tsx | 6 +- .../feedbackNew/FeedbackComponent.tsx | 55 +++++++++++++++---- .../component/feedbackNew/FeedbackContext.ts | 4 +- .../feedbackNew/FeedbackProvider.tsx | 20 ++++--- .../src/component/feedbackNew/useFeedback.tsx | 22 ++++++-- frontend/src/hooks/useSubmittedFeedback.ts | 2 +- 7 files changed, 82 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx index 9238c6406050..31947b79339c 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx @@ -190,8 +190,10 @@ export const NewFeatureStrategyForm = ({ setTab, StrategyVariants, }: IFeatureStrategyFormProps) => { - const { openFeedback, hasSubmittedFeedback } = - useFeedback(feedbackCategory); + const { openFeedback, hasSubmittedFeedback } = useFeedback( + feedbackCategory, + 'manual', + ); const { trackEvent } = usePlausibleTracker(); const [showProdGuard, setShowProdGuard] = useState(false); const hasValidConstraints = useConstraintsValidation(strategy.constraints); diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index 8ac7c94bfa30..abb37b7d41c8 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -71,8 +71,10 @@ const feedbackCategory = 'search'; const FeatureToggleListTableComponent: VFC = () => { const theme = useTheme(); - const { openFeedback, hasSubmittedFeedback } = - useFeedback(feedbackCategory); + const { openFeedback, hasSubmittedFeedback } = useFeedback( + feedbackCategory, + 'automatic', + ); const { trackEvent } = usePlausibleTracker(); const { environments } = useEnvironments(); const enabledEnvironments = environments diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx index 0aa7384afdd5..a59810fb8c24 100644 --- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx +++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx @@ -18,7 +18,7 @@ import { useUserSubmittedFeedback } from 'hooks/useSubmittedFeedback'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { IToast } from 'interfaces/toast'; import { useTheme } from '@mui/material/styles'; -import { FeedbackData } from './FeedbackContext'; +import { FeedbackData, FeedbackMode } from './FeedbackContext'; export const ParentContainer = styled('div')(({ theme }) => ({ position: 'relative', @@ -161,16 +161,25 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({ color: theme.palette.background.paper, })); +const StyledButtonContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1.25), + alignItems: 'flex-start', +})); + export const FeedbackComponentWrapper = () => { - const { feedbackData, showFeedback, closeFeedback } = useFeedbackContext(); + const { feedbackData, showFeedback, closeFeedback, feedbackMode } = + useFeedbackContext(); - if (!feedbackData) return null; + if (!feedbackData || !feedbackMode) return null; return ( ); }; @@ -178,6 +187,7 @@ export const FeedbackComponentWrapper = () => { interface IFeedbackComponent { feedbackData: FeedbackData; showFeedback: boolean; + feedbackMode: FeedbackMode; closeFeedback: () => void; } @@ -185,6 +195,7 @@ export const FeedbackComponent = ({ feedbackData, showFeedback, closeFeedback, + feedbackMode, }: IFeedbackComponent) => { const { setToastData } = useToast(); const theme = useTheme(); @@ -207,6 +218,11 @@ export const FeedbackComponent = ({ ); } + const dontAskAgain = () => { + closeFeedback(); + setHasSubmittedFeedback(true); + }; + const onSubmission = async (event: React.FormEvent) => { event.preventDefault(); const formData = new FormData(event.currentTarget); @@ -357,15 +373,30 @@ export const FeedbackComponent = ({ size='small' /> - - - Send Feedback - + + + Send Feedback + + + Don't ask me again + + } + /> + diff --git a/frontend/src/component/feedbackNew/FeedbackContext.ts b/frontend/src/component/feedbackNew/FeedbackContext.ts index 280662d88e17..2b8a2e91480d 100644 --- a/frontend/src/component/feedbackNew/FeedbackContext.ts +++ b/frontend/src/component/feedbackNew/FeedbackContext.ts @@ -1,12 +1,14 @@ import { createContext } from 'react'; import { IFeedbackCategory } from 'hooks/useSubmittedFeedback'; +export type FeedbackMode = 'automatic' | 'manual'; export interface IFeedbackContext { feedbackData: FeedbackData | undefined; - openFeedback: (data: FeedbackData) => void; + openFeedback: (data: FeedbackData, mode: FeedbackMode) => void; closeFeedback: () => void; showFeedback: boolean; setShowFeedback: (visible: boolean) => void; + feedbackMode: FeedbackMode | undefined; } interface IFeedbackText { diff --git a/frontend/src/component/feedbackNew/FeedbackProvider.tsx b/frontend/src/component/feedbackNew/FeedbackProvider.tsx index 85414d899c92..f2de2421b0af 100644 --- a/frontend/src/component/feedbackNew/FeedbackProvider.tsx +++ b/frontend/src/component/feedbackNew/FeedbackProvider.tsx @@ -1,19 +1,20 @@ -import { - FeedbackComponent, - FeedbackComponentWrapper, -} from './FeedbackComponent'; -import { FeedbackContext, FeedbackData } from './FeedbackContext'; +import { FeedbackComponentWrapper } from './FeedbackComponent'; +import { FeedbackContext, FeedbackData, FeedbackMode } from './FeedbackContext'; import { FC, useState } from 'react'; export const FeedbackProvider: FC = ({ children }) => { - const [feedbackData, setFeedbackData] = useState( - undefined, - ); + const [feedbackData, setFeedbackData] = useState< + FeedbackData | undefined + >(); const [showFeedback, setShowFeedback] = useState(false); - const openFeedback = (data: FeedbackData) => { + const [feedbackMode, setFeedbackMode] = useState< + FeedbackMode | undefined + >(); + const openFeedback = (data: FeedbackData, mode: FeedbackMode) => { setFeedbackData(data); setShowFeedback(true); + setFeedbackMode(mode); }; const closeFeedback = () => { @@ -29,6 +30,7 @@ export const FeedbackProvider: FC = ({ children }) => { closeFeedback, showFeedback, setShowFeedback, + feedbackMode, }} > {children} diff --git a/frontend/src/component/feedbackNew/useFeedback.tsx b/frontend/src/component/feedbackNew/useFeedback.tsx index c8abe6095aff..7587725e5385 100644 --- a/frontend/src/component/feedbackNew/useFeedback.tsx +++ b/frontend/src/component/feedbackNew/useFeedback.tsx @@ -2,7 +2,11 @@ import { IFeedbackCategory, useUserSubmittedFeedback, } from 'hooks/useSubmittedFeedback'; -import { FeedbackContext, IFeedbackContext } from './FeedbackContext'; +import { + FeedbackContext, + FeedbackMode, + IFeedbackContext, +} from './FeedbackContext'; import { useContext } from 'react'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -24,7 +28,10 @@ export const useFeedbackContext = (): IFeedbackContext => { return context; }; -export const useFeedback = (feedbackCategory: IFeedbackCategory) => { +export const useFeedback = ( + feedbackCategory: IFeedbackCategory, + mode: FeedbackMode, +) => { const context = useFeedbackContext(); const { hasSubmittedFeedback } = useUserSubmittedFeedback(feedbackCategory); @@ -32,10 +39,13 @@ export const useFeedback = (feedbackCategory: IFeedbackCategory) => { ...context, hasSubmittedFeedback, openFeedback: (parameters: OpenFeedbackParams) => { - context.openFeedback({ - ...parameters, - category: feedbackCategory, - }); + context.openFeedback( + { + ...parameters, + category: feedbackCategory, + }, + mode, + ); }, }; }; diff --git a/frontend/src/hooks/useSubmittedFeedback.ts b/frontend/src/hooks/useSubmittedFeedback.ts index 2f96cc93ad09..8abf91724ccb 100644 --- a/frontend/src/hooks/useSubmittedFeedback.ts +++ b/frontend/src/hooks/useSubmittedFeedback.ts @@ -6,7 +6,7 @@ import { createLocalStorage } from '../utils/createLocalStorage'; export type IFeedbackCategory = 'search' | 'newStrategyForm'; export const useUserSubmittedFeedback = (category: IFeedbackCategory) => { - const key = `${basePath}:unleash-userSubmittedFeedback:${category}`; + const key = `unleash-userSubmittedFeedback:${category}`; const { value: hasSubmittedFeedback, setValue: setHasSubmittedFeedback } = createLocalStorage(key, false);