mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
feat: add dont ask me again button (#5753)
This commit is contained in:
parent
5582339560
commit
b24471c1b4
@ -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);
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
}));
|
||||
|
||||
export const FeedbackComponentWrapper = () => {
|
||||
const { feedbackData, showFeedback, closeFeedback } = useFeedbackContext();
|
||||
const StyledButtonContainer = styled(Box)(({ theme }) => ({
|
||||
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 (
|
||||
<FeedbackComponent
|
||||
feedbackData={feedbackData}
|
||||
showFeedback={showFeedback}
|
||||
closeFeedback={closeFeedback}
|
||||
feedbackMode={feedbackMode}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -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<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.currentTarget);
|
||||
@ -357,15 +373,30 @@ export const FeedbackComponent = ({
|
||||
size='small'
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<StyledButton
|
||||
disabled={!selectedScore}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
type='submit'
|
||||
>
|
||||
Send Feedback
|
||||
</StyledButton>
|
||||
<StyledButtonContainer>
|
||||
<StyledButton
|
||||
disabled={!selectedScore}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
type='submit'
|
||||
>
|
||||
Send Feedback
|
||||
</StyledButton>
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
feedbackMode === 'manual'
|
||||
}
|
||||
show={
|
||||
<StyledButton
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
onClick={dontAskAgain}
|
||||
>
|
||||
Don't ask me again
|
||||
</StyledButton>
|
||||
}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
</StyledForm>
|
||||
</StyledContent>
|
||||
</StyledContainer>
|
||||
|
@ -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 {
|
||||
|
@ -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<FeedbackData | undefined>(
|
||||
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}
|
||||
|
@ -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,
|
||||
);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
@ -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<Boolean>(key, false);
|
||||
|
Loading…
Reference in New Issue
Block a user