Feature/epmrpp 99276 add events copy paste dashboard configuration ga4 (

#4193) * EPMRPP-99276 || Add events for copy and paste dashboard configuration in Google Analytics 4 * refactor: make the event code more concise * fix: restore edit and duplicate functionality * fix: reset on error with duplicated names * EPMRPP-99276 || Code review fixes - 1
reportportal · Feb 12, 2025 · d226d93 · d226d93
1 parent e677111
commit d226d93
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 14 deletions.
diff --git a/app/src/components/main/analytics/events/ga4Events/dashboardsPageEvents.js b/app/src/components/main/analytics/events/ga4Events/dashboardsPageEvents.js
@@ -89,6 +89,24 @@ export const DASHBOARD_EVENTS = {
     element_name: 'add_new_dashboard',
   },
 
+  CLICK_ON_SHOW_DASHBOARD_CONFIG: {
+    ...getBasicClickEventParameters(DASHBOARDS),
+    element_name: 'show_dashboard_configuration',
+    modal: 'add_new_dashboard',
+  },
+
+  CLICK_ON_PASTE_CONFIGURATION: {
+    ...getBasicClickEventParameters(DASHBOARDS),
+    element_name: 'paste_configuration',
+    modal: 'add_new_dashboard',
+  },
+
+  CLICK_ON_REMOVE_CONFIGURATION: {
+    ...getBasicClickEventParameters(DASHBOARDS),
+    element_name: 'remove_configuration',
+    modal: 'add_new_dashboard',
+  },
+
   clickOnAddNewWidgetButton: (dashboardId) => ({
     ...getBasicClickEventParameters(DASHBOARDS),
     element_name: 'add_new_widget',
@@ -128,11 +146,12 @@ export const DASHBOARD_EVENTS = {
     number: dashboardId,
   }),
 
-  clickOnButtonInModalAddNewDashboard: (dashboardId, linkName) => ({
+  clickOnButtonInModalAddNewDashboard: (dashboardId, linkName, condition = 'standard') => ({
     ...getBasicClickEventParameters(DASHBOARDS),
     element_name: 'add',
     modal: 'add_new_dashboard',
     link_name: linkName,
+    condition,
     number: dashboardId,
   }),
 

diff --git a/app/src/controllers/dashboard/sagas.js b/app/src/controllers/dashboard/sagas.js
@@ -113,16 +113,19 @@ function* fetchDashboard() {
 function* addDashboard({ payload }) {
   const activeProject = yield select(activeProjectSelector);
   const owner = yield select(userIdSelector);
-
+  const { onSuccess, onError } = payload;
+  const isPreconfigured = typeof payload.config !== 'undefined';
   try {
     let response;
-    const isPreconfigured = payload.config !== undefined;
     let parsedConfig = null;
 
     if (isPreconfigured) {
       try {
         parsedConfig = JSON.parse(payload.config);
       } catch (error) {
+        if (onError) {
+          onError();
+        }
         yield put(
           showNotification({
             messageId: 'addPreconfigDashboardError',
@@ -140,6 +143,10 @@ function* addDashboard({ payload }) {
           config: parsedConfig,
         },
       });
+
+      if (onSuccess) {
+        onSuccess();
+      }
     } else {
       response = yield call(fetch, URLS.dashboards(activeProject), {
         method: 'post',
@@ -164,6 +171,9 @@ function* addDashboard({ payload }) {
       payload: { projectId: activeProject, dashboardId: id },
     });
   } catch (error) {
+    if (isPreconfigured && onError) {
+      onError();
+    }
     yield put(showDefaultErrorNotification(error));
   }
 }

diff --git a/app/src/pages/inside/dashboardPage/modals/addEditModal/addEditModal.jsx b/app/src/pages/inside/dashboardPage/modals/addEditModal/addEditModal.jsx
@@ -177,15 +177,19 @@ export class AddEditModal extends Component {
     isSubmitting: false,
   };
 
+  tracking = this.props.tracking;
+
   componentDidMount() {
     this.props.initialize(this.props.data.dashboardItem);
   }
 
   handleShowDashboardConfig = () => {
+    this.tracking.trackEvent(DASHBOARD_EVENTS.CLICK_ON_SHOW_DASHBOARD_CONFIG);
     this.setState({ showConfig: true });
   };
 
   handlePasteConfiguration = async () => {
+    this.tracking.trackEvent(DASHBOARD_EVENTS.CLICK_ON_PASTE_CONFIGURATION);
     try {
       const clipboardText = await navigator.clipboard.readText();
       if (!clipboardText.trim()) {
@@ -208,12 +212,34 @@ export class AddEditModal extends Component {
   };
 
   handleRemoveConfiguration = () => {
+    this.tracking.trackEvent(DASHBOARD_EVENTS.CLICK_ON_REMOVE_CONFIGURATION);
     this.setState({
       pastedConfig: null,
       isSubmitting: false,
     });
   };
 
+  handleTrackSuccess = (dashboardId, isChangedDescription) => {
+    this.tracking.trackEvent(
+      DASHBOARD_EVENTS.clickOnButtonInModalAddNewDashboard(
+        dashboardId,
+        isChangedDescription,
+        'successfully_created',
+      ),
+    );
+  };
+
+  handleTrackError = (dashboardId, isChangedDescription) => {
+    this.setState({ isSubmitting: false });
+    this.tracking.trackEvent(
+      DASHBOARD_EVENTS.clickOnButtonInModalAddNewDashboard(
+        dashboardId,
+        isChangedDescription,
+        'cannot_be_created',
+      ),
+    );
+  };
+
   getTrackingEvent = (dashboardId, isChangedDescription) => {
     const { type } = this.props.data;
 
@@ -229,16 +255,18 @@ export class AddEditModal extends Component {
           isChangedDescription,
         );
       default:
-        return DASHBOARD_EVENTS.clickOnButtonInModalAddNewDashboard(
-          dashboardId,
-          isChangedDescription,
-        );
+        return this.pastedConfig
+          ? null
+          : DASHBOARD_EVENTS.clickOnButtonInModalAddNewDashboard(
+              dashboardId,
+              isChangedDescription,
+              'standard',
+            );
     }
   };
 
   submitFormAndCloseModal = (closeModal) => (formData) => {
     const {
-      tracking: { trackEvent },
       data: { dashboardItem, type, onSubmit },
       dirty,
     } = this.props;
@@ -250,9 +278,11 @@ export class AddEditModal extends Component {
       const isChangedDescription =
         formData.description !== this.props.data.dashboardItem?.description;
 
-      trackEvent(this.getTrackingEvent(dashboardId, isChangedDescription));
-
-      if (pastedConfig) {
+      if (!pastedConfig) {
+        this.tracking.trackEvent(this.getTrackingEvent(dashboardId, isChangedDescription));
+        onSubmit(formData);
+        closeModal();
+      } else {
         if (this.state.isSubmitting) {
           return;
         }
@@ -263,12 +293,11 @@ export class AddEditModal extends Component {
             name: formData.name,
             description: formData.description,
             config: pastedConfig,
+            onSuccess: () => this.handleTrackSuccess(dashboardId, isChangedDescription),
+            onError: () => this.handleTrackError(dashboardId, isChangedDescription),
           },
           true,
         );
-      } else {
-        onSubmit(formData);
-        closeModal();
       }
     } else {
       closeModal();