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:
parent
5582339560
commit
b24471c1b4
@ -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);
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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}
|
||||||
|
@ -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,
|
||||||
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user