change: [M3-7731] - Tag breadcrumb label edit icon on Linode Details page for analytics

packages/manager/.changeset/pr-10183-tech-stories-1707777141390.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Add analytics event for breadcrumb label edit icon on Linode details page ([#10183](https://github.com/linode/manager/pull/10183))

packages/manager/src/components/Breadcrumb/FinalCrumb.tsx

@@ -21,6 +21,7 @@ export const FinalCrumb = React.memo((props: Props) => {
       <StyledEditableText
         data-qa-editable-text
         errorText={onEditHandlers.errorText}
+        handleAnalyticsEvent={onEditHandlers.handleAnalyticsEvent}
         labelLink={labelOptions && labelOptions.linkTo}
         onCancel={onEditHandlers.onCancel}
         onEdit={onEditHandlers.onEdit}

packages/manager/src/components/Breadcrumb/types.ts

@@ -12,6 +12,7 @@ export interface EditableProps {
   editableTextTitle: string;
   editableTextTitleSuffix?: string;
   errorText?: string;
+  handleAnalyticsEvent?: () => void;
   onCancel: () => void;
   onEdit: (value: string) => Promise<any>;
 }

packages/manager/src/components/EditableText/EditableText.tsx

@@ -104,6 +104,10 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
 interface Props {
   className?: string;
   errorText?: string;
+  /**
+   * Send event analytics
+   */
+  handleAnalyticsEvent?: () => void;
   /**
    * Optional link for the text when it is not in editing mode
    */
@@ -136,6 +140,7 @@ export const EditableText = (props: PassThroughProps) => {
   const {
     className,
     errorText,
+    handleAnalyticsEvent,
     labelLink,
     onCancel,
     onEdit,
@@ -158,6 +163,10 @@ export const EditableText = (props: PassThroughProps) => {
   };
 
   const openEdit = () => {
+    // Send analytics when pencil icon is clicked.
+    if (handleAnalyticsEvent) {
+      handleAnalyticsEvent();
+    }
     setIsEditing(true);
   };
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx

@@ -11,6 +11,7 @@ import {
   useLinodeQuery,
   useLinodeUpdateMutation,
 } from 'src/queries/linodes/linodes';
+import { sendUpdateLinodeLabelEvent } from 'src/utilities/analytics';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
 interface Props {
@@ -40,6 +41,7 @@ export const LinodeSettingsLabelPanel = (props: Props) => {
       enqueueSnackbar(`Successfully updated Linode label to ${label}`, {
         variant: 'success',
       });
+      sendUpdateLinodeLabelEvent('Settings');
     },
   });
 

packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx

@@ -21,7 +21,11 @@ import {
   useLinodeUpdateMutation,
 } from 'src/queries/linodes/linodes';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
-import { sendLinodeCreateFlowDocsClickEvent } from 'src/utilities/analytics';
+import {
+  sendEditBreadcrumbEvent,
+  sendLinodeCreateFlowDocsClickEvent,
+  sendUpdateLinodeLabelEvent,
+} from 'src/utilities/analytics';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
@@ -160,6 +164,7 @@ const LinodeDetailHeader = () => {
     return updateLinodeLabel(label)
       .then(() => {
         resetEditableLabel();
+        sendUpdateLinodeLabelEvent('Breadcrumb');
       })
       .catch((updateError) => {
         const errorReasons: string[] = [updateError.message];
@@ -226,6 +231,7 @@ const LinodeDetailHeader = () => {
           onEditHandlers: {
             editableTextTitle: linode?.label ?? '',
             errorText: editableLabelError,
+            handleAnalyticsEvent: () => sendEditBreadcrumbEvent(),
             onCancel: resetEditableLabel,
             onEdit: handleLinodeLabelUpdate,
           },

packages/manager/src/utilities/analytics.ts

@@ -434,3 +434,24 @@ export const sendLinodeConfigurationDocsEvent = (label: string) => {
     label,
   });
 };
+
+// LinodeDetailHeader.tsx
+export const sendEditBreadcrumbEvent = () => {
+  sendEvent({
+    action: 'Click:pencil icon',
+    category: 'Breadcrumb',
+    label: 'Edit Breadcrumb',
+  });
+};
+
+// LinodeDetailHeader.tsx
+// LinodeSettingsLabelPanel.tsx
+export const sendUpdateLinodeLabelEvent = (
+  label: 'Breadcrumb' | 'Settings'
+) => {
+  sendEvent({
+    action: 'Click:button',
+    category: 'Linode Label',
+    label: `Update linode label from ${label}`,
+  });
+};