1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00

feat: add dont ask me again button (#5753)

This commit is contained in:
Jaanus Sellin 2024-01-04 14:10:01 +02:00 committed by GitHub
parent 5582339560
commit b24471c1b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 34 deletions

View File

@ -190,8 +190,10 @@ export const NewFeatureStrategyForm = ({
setTab, setTab,
StrategyVariants, StrategyVariants,
}: IFeatureStrategyFormProps) => { }: IFeatureStrategyFormProps) => {
const { openFeedback, hasSubmittedFeedback } = const { openFeedback, hasSubmittedFeedback } = useFeedback(
useFeedback(feedbackCategory); feedbackCategory,
'manual',
);
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const [showProdGuard, setShowProdGuard] = useState(false); const [showProdGuard, setShowProdGuard] = useState(false);
const hasValidConstraints = useConstraintsValidation(strategy.constraints); const hasValidConstraints = useConstraintsValidation(strategy.constraints);

View File

@ -71,8 +71,10 @@ const feedbackCategory = 'search';
const FeatureToggleListTableComponent: VFC = () => { const FeatureToggleListTableComponent: VFC = () => {
const theme = useTheme(); const theme = useTheme();
const { openFeedback, hasSubmittedFeedback } = const { openFeedback, hasSubmittedFeedback } = useFeedback(
useFeedback(feedbackCategory); feedbackCategory,
'automatic',
);
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const { environments } = useEnvironments(); const { environments } = useEnvironments();
const enabledEnvironments = environments const enabledEnvironments = environments

View File

@ -18,7 +18,7 @@ import { useUserSubmittedFeedback } from 'hooks/useSubmittedFeedback';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { IToast } from 'interfaces/toast'; import { IToast } from 'interfaces/toast';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { FeedbackData } from './FeedbackContext'; import { FeedbackData, FeedbackMode } from './FeedbackContext';
export const ParentContainer = styled('div')(({ theme }) => ({ export const ParentContainer = styled('div')(({ theme }) => ({
position: 'relative', position: 'relative',
@ -161,16 +161,25 @@ const StyledCloseButton = styled(IconButton)(({ theme }) => ({
color: theme.palette.background.paper, color: theme.palette.background.paper,
})); }));
export const FeedbackComponentWrapper = () => { const StyledButtonContainer = styled(Box)(({ theme }) => ({
const { feedbackData, showFeedback, closeFeedback } = useFeedbackContext(); display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1.25),
alignItems: 'flex-start',
}));
if (!feedbackData) return null; export const FeedbackComponentWrapper = () => {
const { feedbackData, showFeedback, closeFeedback, feedbackMode } =
useFeedbackContext();
if (!feedbackData || !feedbackMode) return null;
return ( return (
<FeedbackComponent <FeedbackComponent
feedbackData={feedbackData} feedbackData={feedbackData}
showFeedback={showFeedback} showFeedback={showFeedback}
closeFeedback={closeFeedback} closeFeedback={closeFeedback}
feedbackMode={feedbackMode}
/> />
); );
}; };
@ -178,6 +187,7 @@ export const FeedbackComponentWrapper = () => {
interface IFeedbackComponent { interface IFeedbackComponent {
feedbackData: FeedbackData; feedbackData: FeedbackData;
showFeedback: boolean; showFeedback: boolean;
feedbackMode: FeedbackMode;
closeFeedback: () => void; closeFeedback: () => void;
} }
@ -185,6 +195,7 @@ export const FeedbackComponent = ({
feedbackData, feedbackData,
showFeedback, showFeedback,
closeFeedback, closeFeedback,
feedbackMode,
}: IFeedbackComponent) => { }: IFeedbackComponent) => {
const { setToastData } = useToast(); const { setToastData } = useToast();
const theme = useTheme(); const theme = useTheme();
@ -207,6 +218,11 @@ export const FeedbackComponent = ({
); );
} }
const dontAskAgain = () => {
closeFeedback();
setHasSubmittedFeedback(true);
};
const onSubmission = async (event: React.FormEvent<HTMLFormElement>) => { const onSubmission = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
const formData = new FormData(event.currentTarget); const formData = new FormData(event.currentTarget);
@ -357,15 +373,30 @@ export const FeedbackComponent = ({
size='small' size='small'
/> />
</Box> </Box>
<StyledButtonContainer>
<StyledButton <StyledButton
disabled={!selectedScore} disabled={!selectedScore}
variant='contained' variant='contained'
color='primary' color='primary'
type='submit' type='submit'
> >
Send Feedback Send Feedback
</StyledButton> </StyledButton>
<ConditionallyRender
condition={
feedbackMode === 'manual'
}
show={
<StyledButton
variant='outlined'
color='primary'
onClick={dontAskAgain}
>
Don't ask me again
</StyledButton>
}
/>
</StyledButtonContainer>
</StyledForm> </StyledForm>
</StyledContent> </StyledContent>
</StyledContainer> </StyledContainer>

View File

@ -1,12 +1,14 @@
import { createContext } from 'react'; import { createContext } from 'react';
import { IFeedbackCategory } from 'hooks/useSubmittedFeedback'; import { IFeedbackCategory } from 'hooks/useSubmittedFeedback';
export type FeedbackMode = 'automatic' | 'manual';
export interface IFeedbackContext { export interface IFeedbackContext {
feedbackData: FeedbackData | undefined; feedbackData: FeedbackData | undefined;
openFeedback: (data: FeedbackData) => void; openFeedback: (data: FeedbackData, mode: FeedbackMode) => void;
closeFeedback: () => void; closeFeedback: () => void;
showFeedback: boolean; showFeedback: boolean;
setShowFeedback: (visible: boolean) => void; setShowFeedback: (visible: boolean) => void;
feedbackMode: FeedbackMode | undefined;
} }
interface IFeedbackText { interface IFeedbackText {

View File

@ -1,19 +1,20 @@
import { import { FeedbackComponentWrapper } from './FeedbackComponent';
FeedbackComponent, import { FeedbackContext, FeedbackData, FeedbackMode } from './FeedbackContext';
FeedbackComponentWrapper,
} from './FeedbackComponent';
import { FeedbackContext, FeedbackData } from './FeedbackContext';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
export const FeedbackProvider: FC = ({ children }) => { export const FeedbackProvider: FC = ({ children }) => {
const [feedbackData, setFeedbackData] = useState<FeedbackData | undefined>( const [feedbackData, setFeedbackData] = useState<
undefined, FeedbackData | undefined
); >();
const [showFeedback, setShowFeedback] = useState(false); const [showFeedback, setShowFeedback] = useState(false);
const openFeedback = (data: FeedbackData) => { const [feedbackMode, setFeedbackMode] = useState<
FeedbackMode | undefined
>();
const openFeedback = (data: FeedbackData, mode: FeedbackMode) => {
setFeedbackData(data); setFeedbackData(data);
setShowFeedback(true); setShowFeedback(true);
setFeedbackMode(mode);
}; };
const closeFeedback = () => { const closeFeedback = () => {
@ -29,6 +30,7 @@ export const FeedbackProvider: FC = ({ children }) => {
closeFeedback, closeFeedback,
showFeedback, showFeedback,
setShowFeedback, setShowFeedback,
feedbackMode,
}} }}
> >
{children} {children}

View File

@ -2,7 +2,11 @@ import {
IFeedbackCategory, IFeedbackCategory,
useUserSubmittedFeedback, useUserSubmittedFeedback,
} from 'hooks/useSubmittedFeedback'; } from 'hooks/useSubmittedFeedback';
import { FeedbackContext, IFeedbackContext } from './FeedbackContext'; import {
FeedbackContext,
FeedbackMode,
IFeedbackContext,
} from './FeedbackContext';
import { useContext } from 'react'; import { useContext } from 'react';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@ -24,7 +28,10 @@ export const useFeedbackContext = (): IFeedbackContext => {
return context; return context;
}; };
export const useFeedback = (feedbackCategory: IFeedbackCategory) => { export const useFeedback = (
feedbackCategory: IFeedbackCategory,
mode: FeedbackMode,
) => {
const context = useFeedbackContext(); const context = useFeedbackContext();
const { hasSubmittedFeedback } = useUserSubmittedFeedback(feedbackCategory); const { hasSubmittedFeedback } = useUserSubmittedFeedback(feedbackCategory);
@ -32,10 +39,13 @@ export const useFeedback = (feedbackCategory: IFeedbackCategory) => {
...context, ...context,
hasSubmittedFeedback, hasSubmittedFeedback,
openFeedback: (parameters: OpenFeedbackParams) => { openFeedback: (parameters: OpenFeedbackParams) => {
context.openFeedback({ context.openFeedback(
...parameters, {
category: feedbackCategory, ...parameters,
}); category: feedbackCategory,
},
mode,
);
}, },
}; };
}; };

View File

@ -6,7 +6,7 @@ import { createLocalStorage } from '../utils/createLocalStorage';
export type IFeedbackCategory = 'search' | 'newStrategyForm'; export type IFeedbackCategory = 'search' | 'newStrategyForm';
export const useUserSubmittedFeedback = (category: IFeedbackCategory) => { export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
const key = `${basePath}:unleash-userSubmittedFeedback:${category}`; const key = `unleash-userSubmittedFeedback:${category}`;
const { value: hasSubmittedFeedback, setValue: setHasSubmittedFeedback } = const { value: hasSubmittedFeedback, setValue: setHasSubmittedFeedback } =
createLocalStorage<Boolean>(key, false); createLocalStorage<Boolean>(key, false);