From 47d3686b6cb4e9734e1e40db92a22c72b0dfbf30 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:47:47 +0200
Subject: [PATCH] chore(telemetry): measure "Add/edit note" on collection items
 (#9850)

- Adds measurement.
- Merges Collections-related constants into frozen PLUS_COLLECTIONS object.
---
 client/src/plus/collections/collection.tsx    | 13 +++++++--
 client/src/plus/collections/index.tsx         | 11 +++-----
 .../collections/new-edit-collection-modal.tsx |  4 +--
 client/src/telemetry/constants.ts             | 27 ++++++++++---------
 .../article-actions/bookmark-menu/index.tsx   | 17 +++++-------
 5 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/client/src/plus/collections/collection.tsx b/client/src/plus/collections/collection.tsx
index 6c388e47c7e1..d480435e916d 100644
--- a/client/src/plus/collections/collection.tsx
+++ b/client/src/plus/collections/collection.tsx
@@ -22,6 +22,8 @@ import {
   FrequentlyViewedCollection,
   useFrequentlyViewed,
 } from "./frequently-viewed";
+import { useGleanClick } from "../../telemetry/glean-context";
+import { PLUS_COLLECTIONS } from "../../telemetry/constants";
 dayjs.extend(relativeTime);
 
 export function CollectionComponent() {
@@ -174,6 +176,7 @@ function ItemComponent({
   const [note, setNote] = useState<string>();
 
   const locale = useLocale();
+  const gleanClick = useGleanClick();
 
   useEffect(() => {
     const slicedNote = item.notes && charSlice(item.notes, 0, 180);
@@ -255,7 +258,10 @@ function ItemComponent({
               <Button
                 icon="edit"
                 type="action"
-                onClickHandler={openBookmarkMenu}
+                onClickHandler={(e) => {
+                  gleanClick(PLUS_COLLECTIONS.ACTIONS_NOTE_EDIT);
+                  return openBookmarkMenu(e);
+                }}
               >
                 <span className="visually-hidden">Edit note</span>
               </Button>
@@ -294,7 +300,10 @@ function ItemComponent({
           extraClasses="add-note"
           icon="edit"
           type="action"
-          onClickHandler={openBookmarkMenu}
+          onClickHandler={(e) => {
+            gleanClick(PLUS_COLLECTIONS.ACTIONS_NOTE_ADD);
+            return openBookmarkMenu(e);
+          }}
         >
           Add note
         </Button>
diff --git a/client/src/plus/collections/index.tsx b/client/src/plus/collections/index.tsx
index d348ad2232ec..593089e7b130 100644
--- a/client/src/plus/collections/index.tsx
+++ b/client/src/plus/collections/index.tsx
@@ -21,10 +21,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import Mandala from "../../ui/molecules/mandala";
 import { useGleanClick } from "../../telemetry/glean-context";
-import {
-  COLLECTIONS_BANNER_NEW_COLLECTION,
-  NEW_COLLECTION_MODAL_SUBMIT_COLLECTIONS_PAGE,
-} from "../../telemetry/constants";
+import { PLUS_COLLECTIONS } from "../../telemetry/constants";
 import { camelWrap } from "../../utils";
 import { useFrequentlyViewed } from "./frequently-viewed";
 import { Icon } from "../../ui/atoms/icon";
@@ -89,7 +86,7 @@ function Overview() {
           </p>
           <Button
             onClickHandler={() => {
-              gleanClick(COLLECTIONS_BANNER_NEW_COLLECTION);
+              gleanClick(PLUS_COLLECTIONS.BANNER_NEW);
               setShowCreate(true);
             }}
             isDisabled={isLoading}
@@ -99,7 +96,7 @@ function Overview() {
           <NewEditCollectionModal
             show={showCreate}
             setShow={setShowCreate}
-            source={NEW_COLLECTION_MODAL_SUBMIT_COLLECTIONS_PAGE}
+            source={PLUS_COLLECTIONS.NEW_MODAL_SUBMIT_COLLECTIONS_PAGE}
           />
         </Container>
       </header>
@@ -205,7 +202,7 @@ function CollectionCard({ collection }: { collection: Collection }) {
           editingCollection={collection}
           show={showEdit}
           setShow={setShowEdit}
-          source={NEW_COLLECTION_MODAL_SUBMIT_COLLECTIONS_PAGE}
+          source={PLUS_COLLECTIONS.NEW_MODAL_SUBMIT_COLLECTIONS_PAGE}
         />
         <MDNModal
           isOpen={showDelete}
diff --git a/client/src/plus/collections/new-edit-collection-modal.tsx b/client/src/plus/collections/new-edit-collection-modal.tsx
index b581776b0fdd..e0fa802f4eae 100644
--- a/client/src/plus/collections/new-edit-collection-modal.tsx
+++ b/client/src/plus/collections/new-edit-collection-modal.tsx
@@ -12,7 +12,7 @@ import {
   useCollectionEdit,
   useCollections,
 } from "./api";
-import { NEW_COLLECTION_MODAL_UPGRADE_LINK } from "../../telemetry/constants";
+import { PLUS_COLLECTIONS } from "../../telemetry/constants";
 import LimitedInput from "../../ui/atoms/form/limited-input";
 import ExpandingTextarea from "../../ui/atoms/form/expanding-textarea";
 
@@ -105,7 +105,7 @@ export default function NewEditCollectionModal({
             <div className="mdn-form-item is-button-row">
               <SignUpLink
                 toPlans={true}
-                gleanContext={NEW_COLLECTION_MODAL_UPGRADE_LINK}
+                gleanContext={PLUS_COLLECTIONS.NEW_MODAL_UPGRADE_LINK}
               />
             </div>
           </div>
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 1b9bd918057e..42efca99ba27 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -1,18 +1,5 @@
 import { ViewportBreakpoint } from "./glean-context";
 
-export const ARTICLE_ACTIONS_COLLECTION_SELECT_OPENED =
-  "article_actions_collection_select_opened";
-export const ARTICLE_ACTIONS_NEW_COLLECTION = "article_actions_new_collection";
-export const ARTICLE_ACTIONS_COLLECTIONS_OPENED =
-  "article_actions_collections_opened";
-export const COLLECTIONS_BANNER_NEW_COLLECTION =
-  "collections_banner_new_collection";
-export const NEW_COLLECTION_MODAL_SUBMIT_ARTICLE_ACTIONS =
-  "new_collection_modal_submit_article_actions";
-export const NEW_COLLECTION_MODAL_SUBMIT_COLLECTIONS_PAGE =
-  "new_collection_modal_submit_collections_page";
-export const NEW_COLLECTION_MODAL_UPGRADE_LINK =
-  "new_collection_modal_upgrade_link";
 export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
 export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
@@ -31,6 +18,20 @@ export const BANNER_AI_HELP_CLICK = "banner_ai_help_click";
 export const PLAYGROUND = "play_action";
 export const AI_EXPLAIN = "ai_explain";
 
+export const PLUS_COLLECTIONS = Object.freeze({
+  ACTIONS_NOTE_ADD: "collections_actions_note_add",
+  ACTIONS_NOTE_EDIT: "collections_actions_note_edit",
+  ARTICLE_ACTIONS_SELECT_OPENED: "article_actions_collection_select_opened",
+  ARTICLE_ACTIONS_NEW: "article_actions_new_collection",
+  ARTICLE_ACTIONS_OPENED: "article_actions_collections_opened",
+  BANNER_NEW: "collections_banner_new_collection",
+  NEW_MODAL_SUBMIT_ARTICLE_ACTIONS:
+    "new_collection_modal_submit_article_actions",
+  NEW_MODAL_SUBMIT_COLLECTIONS_PAGE:
+    "new_collection_modal_submit_collections_page",
+  NEW_MODAL_UPGRADE_LINK: "new_collection_modal_upgrade_link",
+});
+
 export const PLUS_UPDATES = Object.freeze({
   EVENT_COLLAPSE: "plus_updates_event_collapse",
   EVENT_EXPAND: "plus_updates_event_expand",
diff --git a/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx b/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx
index ee410b057a8b..34467c3dcc13 100644
--- a/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx
+++ b/client/src/ui/organisms/article-actions/bookmark-menu/index.tsx
@@ -18,12 +18,7 @@ import { DropdownMenu, DropdownMenuWrapper } from "../../../molecules/dropdown";
 import { Icon } from "../../../atoms/icon";
 import NoteCard from "../../../molecules/notecards";
 import { useGleanClick } from "../../../../telemetry/glean-context";
-import {
-  ARTICLE_ACTIONS_COLLECTION_SELECT_OPENED,
-  ARTICLE_ACTIONS_NEW_COLLECTION,
-  ARTICLE_ACTIONS_COLLECTIONS_OPENED,
-  NEW_COLLECTION_MODAL_SUBMIT_ARTICLE_ACTIONS,
-} from "../../../../telemetry/constants";
+import { PLUS_COLLECTIONS } from "../../../../telemetry/constants";
 import ExpandingTextarea from "../../../atoms/form/expanding-textarea";
 import { KeyedMutator } from "swr";
 
@@ -71,7 +66,7 @@ export default function BookmarkMenu({
         onClickHandler={() => {
           setShow((v) => !v);
           if (!show) {
-            gleanClick(ARTICLE_ACTIONS_COLLECTIONS_OPENED);
+            gleanClick(PLUS_COLLECTIONS.ARTICLE_ACTIONS_OPENED);
           }
         }}
       >
@@ -158,7 +153,7 @@ function BookmarkMenuDropdown({
   const collectionChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const { value } = e.target;
     if (value === addValue) {
-      gleanClick(ARTICLE_ACTIONS_NEW_COLLECTION);
+      gleanClick(PLUS_COLLECTIONS.ARTICLE_ACTIONS_NEW);
       setDisableAutoClose(true);
       setShowNewCollection(true);
       changeHandler(e);
@@ -276,7 +271,9 @@ function BookmarkMenuDropdown({
                   onChange={collectionChangeHandler}
                   onFocus={() => {
                     if (!focusEventTriggered) {
-                      gleanClick(ARTICLE_ACTIONS_COLLECTION_SELECT_OPENED);
+                      gleanClick(
+                        PLUS_COLLECTIONS.ARTICLE_ACTIONS_SELECT_OPENED
+                      );
                       setFocusEventTriggered(true);
                     }
                   }}
@@ -372,7 +369,7 @@ function BookmarkMenuDropdown({
               collection_id: collection_id || collections[0].id,
             });
           }}
-          source={NEW_COLLECTION_MODAL_SUBMIT_ARTICLE_ACTIONS}
+          source={PLUS_COLLECTIONS.NEW_MODAL_SUBMIT_ARTICLE_ACTIONS}
         />
       )}
     </>