feat: export/import plausible tracking (#3145)

frontend/src/component/project/Project/Import/validate/ValidationStage.tsx

@@ -12,6 +12,7 @@ import { ActionsContainer } from '../ActionsContainer';
 import { IMPORT_CONFIGURATION_BUTTON } from 'utils/testIds';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const ImportInfoContainer = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.secondaryContainer,
@@ -93,14 +94,32 @@ export const ValidationStage: FC<{
 }> = ({ environment, project, payload, onClose, onBack, onSubmit }) => {
     const { validateImport } = useValidateImportApi();
     const { setToastData } = useToast();
+    const { trackEvent } = usePlausibleTracker();
     const [validationResult, setValidationResult] = useState<IValidationSchema>(
         { errors: [], warnings: [], permissions: [] }
     );
     const [validJSON, setValidJSON] = useState(true);
 
+    const trackValidation = (result: IValidationSchema) => {
+        if (result.errors.length > 0 || result.permissions.length > 0) {
+            trackEvent('export_import', {
+                props: {
+                    eventType: `validation fail`,
+                },
+            });
+        } else {
+            trackEvent('export_import', {
+                props: {
+                    eventType: `validation success`,
+                },
+            });
+        }
+        setValidationResult(result);
+    };
+
     useEffect(() => {
         validateImport({ environment, project, data: JSON.parse(payload) })
-            .then(setValidationResult)
+            .then(trackValidation)
             .catch(error => {
                 setValidJSON(false);
                 setToastData({

frontend/src/hooks/api/actions/useExportApi/useExportApi.ts

@@ -1,10 +1,12 @@
 import { ExportQuerySchema } from 'openapi';
 import useAPI from '../useApi/useApi';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const useExportApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
+    const { trackEvent } = usePlausibleTracker();
 
     const createExport = async (payload: ExportQuerySchema) => {
         const path = `api/admin/features-batch/export`;
@@ -15,7 +17,11 @@ export const useExportApi = () => {
 
         try {
             const res = await makeRequest(req.caller, req.id);
-
+            trackEvent('export_import', {
+                props: {
+                    eventType: `features exported`,
+                },
+            });
             return res;
         } catch (e) {
             throw e;

frontend/src/hooks/api/actions/useImportApi/useImportApi.ts

@@ -1,4 +1,5 @@
 import useAPI from '../useApi/useApi';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export interface ImportQuerySchema {
     project: string;
@@ -10,6 +11,7 @@ export const useImportApi = () => {
     const { makeRequest, createRequest, errors, loading } = useAPI({
         propagateErrors: true,
     });
+    const { trackEvent } = usePlausibleTracker();
 
     const createImport = async (payload: ImportQuerySchema) => {
         const path = `api/admin/features-batch/full-import`;
@@ -20,7 +22,11 @@ export const useImportApi = () => {
 
         try {
             const res = await makeRequest(req.caller, req.id);
-
+            trackEvent('export_import', {
+                props: {
+                    eventType: `features imported`,
+                },
+            });
             return res;
         } catch (e) {
             throw e;

frontend/src/hooks/usePlausibleTracker.ts

@@ -18,7 +18,8 @@ type CustomEvents =
     | 'hidden_environment'
     | 'project_overview'
     | 'suggest_tags'
-    | 'unknown_ui_error';
+    | 'unknown_ui_error'
+    | 'export_import';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);