Add AUTH_WIDGET_* events to lexicon (#9204)

* add auth_widget to lexicon

* fix typos

* add auth_widget_refresh to lexicon

* add auth_widget_hide_add_new to the lexicon map

* refactor rename AuthWidget -> ActivationIntegration

src/components/integrations/AuthWidget.tsx

@@ -73,7 +73,7 @@ const RefreshButton: React.VFC<{
       className={styles.actionButton}
       onClick={() => {
         refreshAuthOptions();
-        reportEvent(Events.AUTH_WIDGET_REFRESH);
+        reportEvent(Events.ACTIVATION_INTEGRATION_REFRESH);
       }}
       title="Refresh integration configurations"
     >
@@ -150,7 +150,7 @@ const AuthWidgetContent: React.FC<AuthWidgetContentProps> = ({
 
       await helpers.setValue(id);
 
-      reportEvent(Events.AUTH_WIDGET_SELECT, {
+      reportEvent(Events.ACTIVATION_INTEGRATION_CONFIG_SELECT, {
         integration_id: integration.id,
         is_user_action: true,
         is_create: true,
@@ -186,7 +186,7 @@ const AuthWidgetContent: React.FC<AuthWidgetContentProps> = ({
         upsertIntegrationConfig(config: IntegrationConfig) {
           dispatch(upsertIntegrationConfig(config));
           void helpers.setValue(config.id);
-          reportEvent(Events.AUTH_WIDGET_SELECT, {
+          reportEvent(Events.ACTIVATION_INTEGRATION_CONFIG_SELECT, {
             integration_id: config.integrationId,
             is_user_action: true,
             is_create: true,
@@ -205,7 +205,7 @@ const AuthWidgetContent: React.FC<AuthWidgetContentProps> = ({
     }
 
     setShowEditorModal(true);
-    reportEvent(Events.AUTH_WIDGET_SHOW_ADD_NEW);
+    reportEvent(Events.ACTIVATION_INTEGRATION_ADD_NEW_CLICK);
   }, [
     dispatch,
     helpers,
@@ -240,7 +240,7 @@ const AuthWidgetContent: React.FC<AuthWidgetContentProps> = ({
         integration={integration}
         onClose={() => {
           setShowEditorModal(false);
-          reportEvent(Events.AUTH_WIDGET_HIDE_ADD_NEW);
+          reportEvent(Events.ACTIVATION_INTEGRATION_ADD_NEW_CLOSE);
         }}
         onSave={save}
       />

src/integrations/components/IntegrationAuthSelector.tsx

@@ -114,7 +114,7 @@ const IntegrationAuthSelector: React.FunctionComponent<{
       }
     }
 
-    reportEvent(Events.AUTH_WIDGET_SELECT, eventPayload);
+    reportEvent(Events.ACTIVATION_INTEGRATION_CONFIG_SELECT, eventPayload);
   };
 
   // `react-select` barfs on undefined component overrides

src/telemetry/events.ts

@@ -16,10 +16,10 @@
  */
 
 export const Events = {
-  AUTH_WIDGET_SELECT: "AuthWidgetSelect",
-  AUTH_WIDGET_REFRESH: "AuthWidgetRefresh",
-  AUTH_WIDGET_SHOW_ADD_NEW: "AuthWidgetShowAddNew",
-  AUTH_WIDGET_HIDE_ADD_NEW: "AuthWidgetHideAddNew",
+  ACTIVATION_INTEGRATION_CONFIG_SELECT: "AuthWidgetSelect",
+  ACTIVATION_INTEGRATION_REFRESH: "AuthWidgetRefresh",
+  ACTIVATION_INTEGRATION_ADD_NEW_CLICK: "AuthWidgetShowAddNew",
+  ACTIVATION_INTEGRATION_ADD_NEW_CLOSE: "AuthWidgetHideAddNew",
 
   BRICK_ADD: "BrickAdd",
   BRICK_COMMENTS_UPDATE: "BrickCommentsUpdate",

src/telemetry/lexicon.ts

@@ -21,6 +21,8 @@ import { type ValueOf } from "type-fest";
 
 const LexiconTags = {
   PAGE_EDITOR: "page editor",
+  MOD_ACTIVATION: "mod activation",
+  EXTENSION_CONSOLE: "extension console",
 } as const;
 
 type LexiconTag = ValueOf<typeof LexiconTags>;
@@ -42,12 +44,6 @@ interface LexiconEventEntry {
    * Tags to categorize the event in the Mixpanel interface. Typically used to group related events together.
    */
   tags?: LexiconTag[];
-  /**
-   * Per Mixpanel docs, the name for the event that displays in the Mixpanel interface. If not provided, the event name is used.
-   * Typically used to provide a more human-readable name for the event, or to accommodate legacy event names. (For context,
-   * event names cannot be changed once they are reported to Mixpanel, but display names can be changed at any time.)
-   */
-  displayName?: string;
 }
 
 /**
@@ -59,13 +55,70 @@ type LexiconMap = {
 
 // @ts-expect-error -- TODO: Remove this when the Lexicon is fully implemented https://github.com/pixiebrix/pixiebrix-extension/issues/9151
 export const lexicon: LexiconMap = {
+  ACTIVATION_INTEGRATION_CONFIG_SELECT: {
+    description:
+      "Reported on the mod activation page in the Extension Console when a user selects an option in the dropdown menu " +
+      "to configure an integration for the mod. This includes when a new integration is auto-filled after creating " +
+      "the integration via the '+ Add new' option.",
+    tags: [LexiconTags.MOD_ACTIVATION, LexiconTags.EXTENSION_CONSOLE],
+  },
+  ACTIVATION_INTEGRATION_REFRESH: {
+    description:
+      "Reported on the mod activation page in the Extension Console when a user clicks the integration 'Refresh' button to " +
+      "refresh the list of available integrations.",
+    tags: [LexiconTags.MOD_ACTIVATION, LexiconTags.EXTENSION_CONSOLE],
+  },
+  ACTIVATION_INTEGRATION_ADD_NEW_CLICK: {
+    description:
+      "Reported on the mod activation page in the Extension Console when a user selects the '+ Add new' option to " +
+      "create a new integration configuration for the mod. A modal should appear for the user to create the configuration, " +
+      "but this event is triggered specifically when '+ Add new' option is clicked.",
+    tags: [LexiconTags.MOD_ACTIVATION, LexiconTags.EXTENSION_CONSOLE],
+  },
+  ACTIVATION_INTEGRATION_ADD_NEW_CLOSE: {
+    description:
+      "Reported on the mod activation page in the Extension Console when a user closes the modal for creating a new " +
+      "integration configuration for the mod (either by clicking 'Cancel', 'Save' or 'X' in the modal).",
+    tags: [LexiconTags.MOD_ACTIVATION, LexiconTags.EXTENSION_CONSOLE],
+  },
   BRICK_ADD: {
     description:
       'Triggered when a user successfully adds a brick to a Mod in the Page Editor via clicking "Add" or "Add brick" in the Add Brick modal.',
     tags: [LexiconTags.PAGE_EDITOR],
   },
 };
 
+/**
+ * Converts an Events key to capitalized camel case, for use with updating the display name for events.
+ * @param key A valid key of the Events object
+ * @returns The key in capitalized camel case format
+ */
+function convertEventKeyToCapitalizedCamelCase(
+  key: keyof typeof Events,
+): string {
+  return key
+    .toLowerCase()
+    .split("_")
+    .map((word, index) =>
+      index === 0
+        ? word.charAt(0).toUpperCase() + word.slice(1)
+        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
+    )
+    .join("");
+}
+
+/**
+ * Returns a display name for the given event if needed (i.e. the new event name different from the original event name).
+ * @param key A valid key of the Events object
+ * @returns a capitalized camel case string representing the display name for the event, or null if
+ * a display name is not needed.
+ */
+function getDisplayName(key: keyof typeof Events) {
+  const newEventName = convertEventKeyToCapitalizedCamelCase(key);
+  // eslint-disable-next-line security/detect-object-injection -- eventKey is a constant
+  return newEventName === Events[key] ? null : newEventName;
+}
+
 /**
  * Transforms a LexiconMap into a JSON schema that can be used in the request body to upload the Lexicon to Mixpanel.
  * See expected shape here https://developer.mixpanel.com/reference/upload-schemas-for-project
@@ -85,7 +138,7 @@ export function transformLexiconMapToRequestSchema(
         metadata: {
           "com.mixpanel": {
             tags: entry.tags,
-            displayName: entry.displayName ?? null,
+            displayName: getDisplayName(eventKey),
             hidden: false,
             dropped: false,
           },