feat: plausible for feedback (#5763)

frontend/src/component/feedbackNew/FeedbackComponent.tsx

@@ -19,6 +19,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { IToast } from 'interfaces/toast';
 import { useTheme } from '@mui/material/styles';
 import { FeedbackData, FeedbackMode } from './FeedbackContext';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const ParentContainer = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -198,6 +199,7 @@ export const FeedbackComponent = ({
     feedbackMode,
 }: IFeedbackComponent) => {
     const { setToastData } = useToast();
+    const { trackEvent } = usePlausibleTracker();
     const theme = useTheme();
     const { isPro, isOss, isEnterprise } = useUiConfig();
     const { addFeedback } = useUserFeedbackApi();
@@ -221,6 +223,12 @@ export const FeedbackComponent = ({
     const dontAskAgain = () => {
         closeFeedback();
         setHasSubmittedFeedback(true);
+        trackEvent('feedback', {
+            props: {
+                eventType: `dont ask again`,
+                category: feedbackData.category,
+            },
+        });
     };
 
     const onSubmission = async (event: React.FormEvent<HTMLFormElement>) => {

frontend/src/component/feedbackNew/FeedbackProvider.tsx

@@ -1,11 +1,13 @@
 import { FeedbackComponentWrapper } from './FeedbackComponent';
 import { FeedbackContext, FeedbackData, FeedbackMode } from './FeedbackContext';
 import { FC, useState } from 'react';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const FeedbackProvider: FC = ({ children }) => {
     const [feedbackData, setFeedbackData] = useState<
         FeedbackData | undefined
     >();
+    const { trackEvent } = usePlausibleTracker();
 
     const [showFeedback, setShowFeedback] = useState(false);
     const [feedbackMode, setFeedbackMode] = useState<
@@ -15,6 +17,13 @@ export const FeedbackProvider: FC = ({ children }) => {
         setFeedbackData(data);
         setShowFeedback(true);
         setFeedbackMode(mode);
+
+        trackEvent('feedback', {
+            props: {
+                eventType: `feedback opened`,
+                category: data.category,
+            },
+        });
     };
 
     const closeFeedback = () => {

frontend/src/hooks/usePlausibleTracker.ts

@@ -54,7 +54,8 @@ export type CustomEvents =
     | 'search-filter'
     | 'scheduled-configuration-changes'
     | 'search-feature-buttons'
-    | 'new-strategy-form';
+    | 'new-strategy-form'
+    | 'feedback';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);