Merge pull request #1468 from AppQuality/UN-1960-tag-edit-analytics

Un 1960 tag edit analytics

Author: marcbon

src/pages/Video/components/EditTagModal.tsx

@@ -13,6 +13,7 @@ import {
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import analytics from 'src/analytics';
 import { appTheme } from 'src/app/theme';
 import { ReactComponent as SaveIcon } from 'src/assets/icons/save.svg';
 import {
@@ -26,6 +27,7 @@ interface EditModalProps {
   title: string;
   label: string;
   description: string;
+  type: 'theme' | 'extraTag';
 }
 
 export const EditTagModal = ({
@@ -34,6 +36,7 @@ export const EditTagModal = ({
   title,
   label,
   description,
+  type,
 }: EditModalProps) => {
   // Extract both the current title and the usage number in parentheses in two variables
 
@@ -56,6 +59,13 @@ export const EditTagModal = ({
   }, [newName]);
 
   const handleSubmit = async () => {
+    analytics.track('tagUpdateSubmitted', {
+      tagId: tag.id.toString(),
+      tagType: type,
+      associatedObservations: tag.usageNumber,
+      submissionTime: Date.now(),
+    });
+
     if (error) return;
     // Update the title in the form
     try {
@@ -82,6 +92,15 @@ export const EditTagModal = ({
         { placement: 'top' }
       );
     } catch (err: any) {
+      analytics.track('tagUpdateFailed', {
+        tagId: tag.id.toString(),
+        tagType: type,
+        attemptedTagName: newName,
+        errorType: err.status === 409 ? 'duplicate' : 'other',
+        errorMessage: err.message,
+        associatedObservations: tag.usageNumber,
+      });
+
       // Handle error (e.g., show error toast)
       // if status code is 409, conflict with another already saved name, show specific error
       if (err.status === 409) {

src/pages/Video/components/ObservationForm.tsx

@@ -17,6 +17,7 @@ import { Form, Formik, FormikHelpers, FormikProps } from 'formik';
 import { ComponentProps, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import analytics from 'src/analytics';
 import { appTheme } from 'src/app/theme';
 import { getColorWithAlpha } from 'src/common/utils';
 import {
@@ -149,6 +150,7 @@ const ObservationForm = ({
             selected: selectedOptions.some((bt) => bt.id === tag.id),
             actions: ({ closeModal }) => (
               <EditTagModal
+                type="extraTag"
                 tag={tag}
                 closeModal={closeModal}
                 title={t('__VIDEO_PAGE_TAGS_DROPDOWN_EDIT_MODAL_TITLE')}
@@ -163,6 +165,14 @@ const ObservationForm = ({
               />
             ),
             actionIcon: <EditIcon />,
+            onOptionActionClick: () => {
+              analytics.track('tagEditModalOpened', {
+                tagId: tag.id.toString(),
+                tagType: 'extraTag',
+                tagName: tag.name,
+                associatedObservations: tag.usageNumber,
+              });
+            },
           }))
       );
     }
@@ -381,6 +391,14 @@ const ObservationForm = ({
                     listboxAppendToNode={document.body}
                     creatable
                     maxItems={4}
+                    onClick={() =>
+                      analytics.track('tagDropdownOpened', {
+                        dropdownType: 'extraTags',
+                        availableTagsCount: options.length,
+                        selectedTagsCount: options.filter((o) => o.selected)
+                          .length,
+                      })
+                    }
                     size="medium"
                     i18n={{
                       placeholder: t(

src/pages/Video/components/TitleDropdownNew.tsx

@@ -4,8 +4,10 @@ import {
 } from '@appquality/unguess-design-system';
 import { ReactComponent as EditIcon } from '@zendeskgarden/svg-icons/src/12/pencil-stroke.svg';
 import { FormikProps } from 'formik';
+import { ComponentProps, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import analytics from 'src/analytics';
 import { ReactComponent as CopyIcon } from 'src/assets/icons/copy-icon.svg';
 import {
   GetCampaignsByCidVideoTagsApiResponse,
@@ -31,6 +33,42 @@ export const TitleDropdown = ({
   const { campaignId } = useParams();
   const [addVideoTags] = usePostCampaignsByCidVideoTagsMutation();
   const titleMaxLength = 70;
+  const options: ComponentProps<typeof Autocomplete>['options'] = useMemo(
+    () =>
+      (titles || []).map((i) => ({
+        id: i.id.toString(),
+        value: i.id.toString(),
+        label: `${i.name} (${i.usageNumber})`,
+        isSelected: formProps.values.title === i.id,
+        actions: ({ closeModal }) => (
+          <EditTagModal
+            type="theme"
+            tag={i}
+            closeModal={closeModal}
+            title={t('__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_TITLE')}
+            label={t('__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_LABEL')}
+            description={t(
+              '__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_DESCRIPTION',
+              {
+                usageNumber: i.usageNumber,
+                count: Number(i.usageNumber),
+              }
+            )}
+          />
+        ),
+        actionIcon: <EditIcon />,
+        itemID: i.id.toString(),
+        onOptionActionClick: () => {
+          analytics.track('tagEditModalOpened', {
+            tagId: i.id.toString(),
+            tagType: 'theme',
+            tagName: i.name,
+            associatedObservations: i.usageNumber,
+          });
+        },
+      })),
+    [titles, formProps.values.title]
+  );
 
   if (!titles) {
     return null;
@@ -39,6 +77,7 @@ export const TitleDropdown = ({
   return (
     <Field>
       <Autocomplete
+        options={options}
         data-qa="video-title-dropdown"
         isEditable
         isCreatable
@@ -49,6 +88,12 @@ export const TitleDropdown = ({
           const title = titles.find((i) => i.id === Number(selection.value));
           return title?.name || '';
         }}
+        onClick={() =>
+          analytics.track('tagDropdownOpened', {
+            dropdownType: 'theme',
+            availableTagsCount: options.length,
+          })
+        }
         selectionValue={formProps.values.title.toString()}
         onCreateNewOption={async (value) => {
           if (value.length > titleMaxLength) {
@@ -83,29 +128,6 @@ export const TitleDropdown = ({
           if (!selectionValue || !inputValue) return;
           formProps.setFieldValue('title', Number(selectionValue));
         }}
-        options={(titles || []).map((i) => ({
-          id: i.id.toString(),
-          value: i.id.toString(),
-          label: `${i.name} (${i.usageNumber})`,
-          isSelected: formProps.values.title === i.id,
-          actions: ({ closeModal }) => (
-            <EditTagModal
-              tag={i}
-              closeModal={closeModal}
-              title={t('__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_TITLE')}
-              label={t('__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_LABEL')}
-              description={t(
-                '__VIDEO_PAGE_THEMES_DROPDOWN_EDIT_MODAL_DESCRIPTION',
-                {
-                  usageNumber: i.usageNumber,
-                  count: Number(i.usageNumber),
-                }
-              )}
-            />
-          ),
-          itemID: i.id.toString(),
-          actionIcon: <EditIcon />,
-        }))}
         startIcon={<CopyIcon />}
         placeholder={t(
           '__VIDEO_PAGE_ACTIONS_OBSERVATION_FORM_FIELD_TITLE_PLACEHOLDER'