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);