[BD-46] refactor: segment events refactoring

www/segment-events/constants.js

@@ -0,0 +1,25 @@
+/**
+ * Events are identified by the following structured pattern:
+ * openedx.paragon.event_environment.event_name.event_action
+ */
+
+export const ICON_COPIED = 'openedx.paragon.docs.icons-table.selected-icon.copied';
+export const LEAVE_FEEDBACK_CLICKED = 'openedx.paragon.docs.leave_feedback.clicked';
+export const PLAYGROUND_CLICKED = 'openedx.paragon.docs.menu.playground.visit_playground.clicked';
+export const CONTRAST_CHECKER_CLICKED = 'openedx.paragon.docs.menu.tools.visit_contrast_checker.clicked';
+export const PLAYGROUND_URL_COPIED = 'openedx.paragon.docs.playground.copy-url.copied';
+export const PAGE_EDIT_BTN_CLICKED = 'openedx.paragon.docs.page_edit.clicked';
+export const SHADOW_GENERATOR_LAYER_ENABLED = 'openedx.paragon.docs.elevation.shadow-generator.layer.enabled';
+export const SHADOW_GENERATOR_LAYER_DISABLED = 'openedx.paragon.docs.elevation.shadow-generator.layer.disabled';
+export const SHADOW_GENERATOR_LAYER_REMOVED = 'openedx.paragon.docs.elevation.shadow-generator.layer.removed';
+export const SHADOW_GENERATOR_LAYER_ADDED = 'openedx.paragon.docs.elevation.shadow-generator.layer.added';
+export const SHADOW_GENERATOR_LAYER_UPDATED = 'openedx.paragon.docs.elevation.shadow-generator.layer.updated';
+export const COMPONENT_USAGE_LINK_CLICKED = 'openedx.paragon.docs.usage-insights.component-usage-link.clicked';
+export const INSIGHTS_TAB_CLICKED = 'openedx.paragon.docs.insights.tab.clicked';
+export const SETTINGS_OPENED = 'openedx.paragon.docs.settings.opened';
+export const SETTINGS_CLOSED = 'openedx.paragon.docs.settings.closed';
+export const SETTINGS_CHANGED = 'openedx.paragon.docs.setting.changed';
+export const EXAMPLE_CODE_BLOCK_WITH_HEADING_CLOSED = 'openedx.paragon.docs.ui.example-code-block.closed';
+export const EXAMPLE_CODE_BLOCK_WITH_HEADING_OPENED = 'openedx.paragon.docs.ui.example-code-block.opened';
+export const EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_CLOSED = 'openedx.paragon.docs.ui.example-code-block.without-heading.closed';
+export const EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_OPENED = 'openedx.paragon.docs.ui.example-code-block.without-heading.opened';

www/segment-events/index.js

@@ -0,0 +1,24 @@
+export {
+  ICON_COPIED,
+  LEAVE_FEEDBACK_CLICKED,
+  PLAYGROUND_CLICKED,
+  CONTRAST_CHECKER_CLICKED,
+  PLAYGROUND_URL_COPIED,
+  PAGE_EDIT_BTN_CLICKED,
+  SHADOW_GENERATOR_LAYER_ENABLED,
+  SHADOW_GENERATOR_LAYER_DISABLED,
+  SHADOW_GENERATOR_LAYER_REMOVED,
+  SHADOW_GENERATOR_LAYER_ADDED,
+  SHADOW_GENERATOR_LAYER_UPDATED,
+  COMPONENT_USAGE_LINK_CLICKED,
+  INSIGHTS_TAB_CLICKED,
+  SETTINGS_OPENED,
+  SETTINGS_CLOSED,
+  SETTINGS_CHANGED,
+  EXAMPLE_CODE_BLOCK_WITH_HEADING_CLOSED,
+  EXAMPLE_CODE_BLOCK_WITH_HEADING_OPENED,
+  EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_CLOSED,
+  EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_OPENED,
+} from './constants';
+
+export { sendUserAnalyticsEvent } from './utils';

www/segment-events/utils.js

@@ -0,0 +1,9 @@
+function sendUserAnalyticsEvent(eventName, context) {
+  if (context) {
+    return global.analytics.track(eventName, context);
+  }
+
+  return global.analytics.track(eventName);
+}
+
+module.exports = { sendUserAnalyticsEvent };

www/src/components/CodeBlock.tsx

@@ -21,6 +21,13 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import * as ParagonReact from '~paragon-react';
 import * as ParagonIcons from '~paragon-icons';
 import { ContentCopy } from '~paragon-icons';
+import {
+  EXAMPLE_CODE_BLOCK_WITH_HEADING_CLOSED,
+  EXAMPLE_CODE_BLOCK_WITH_HEADING_OPENED,
+  EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_CLOSED,
+  EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_OPENED,
+  sendUserAnalyticsEvent,
+} from '../../segment-events';
 import MiyazakiCard from './exampleComponents/MiyazakiCard';
 import HipsterIpsum from './exampleComponents/HipsterIpsum';
 import ExamplePropsForm from './exampleComponents/ExamplePropsForm';
@@ -64,14 +71,16 @@ function CollapsibleLiveEditor({ children, clickToCopy, handleCodeChange }: Coll
     const headingElement = getCodeBlockHeading(e.target);
 
     if (!headingElement) {
-      global.analytics.track(`openedx.paragon.docs.ui.example-code-block.${collapseIsOpen ? 'closed' : 'opened'}`, {
+      sendUserAnalyticsEvent(collapseIsOpen
+        ? EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_CLOSED : EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_OPENED, {
         value: `${componentNameAndCategory}id-not-generated`,
       });
 
       return;
     }
 
-    global.analytics.track(`openedx.paragon.docs.ui.example-code-block.${collapseIsOpen ? 'closed' : 'opened'}`, {
+    sendUserAnalyticsEvent(collapseIsOpen
+      ? EXAMPLE_CODE_BLOCK_WITH_HEADING_CLOSED : EXAMPLE_CODE_BLOCK_WITH_HEADING_OPENED, {
       value: `${componentNameAndCategory}${headingElement.id}`,
     });
   };

www/src/components/IconsTable.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
 import { Icon, SearchField, Toast } from '~paragon-react';
 import * as IconComponents from '~paragon-icons';
+import { ICON_COPIED, sendUserAnalyticsEvent } from '../../segment-events';
 
 const WINDOW_HEIGHT = 2400;
 const ROW_HEIGHT = 100;
@@ -75,7 +76,7 @@ function IconsTable({ iconNames }) {
   const copyToClipboard = (content) => {
     navigator.clipboard.writeText(content);
     setShowToast(true);
-    global.analytics.track('openedx.paragon.docs.icons-table.selected-icon.copied', { name: currentIcon });
+    sendUserAnalyticsEvent(ICON_COPIED, { name: currentIcon });
   };
 
   const handleChangeSearchValue = useMemo(() => debounce(setSearchValue, 500, { leading: false }), []);

www/src/components/LeaveFeedback.tsx

@@ -2,6 +2,7 @@ import React, { AnchorHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Nav, Button, Hyperlink } from '~paragon-react';
 import { useLocation } from '@reach/router';
+import { LEAVE_FEEDBACK_CLICKED, sendUserAnalyticsEvent } from '../../segment-events';
 
 export interface LeaveFeedbackProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
   isNavLink?: boolean;
@@ -12,9 +13,7 @@ function LeaveFeedback({ isNavLink, ...props }: LeaveFeedbackProps) {
   const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&amp;labels=docs&template=feedback_template.md`;
   const leaveFeedbackLinkTitle = 'Leave feedback';
 
-  const handleLinkFeedbackClick = () => {
-    global.analytics.track('openedx.paragon.docs.leave_feedback.clicked');
-  };
+  const handleLinkFeedbackClick = () => sendUserAnalyticsEvent(LEAVE_FEEDBACK_CLICKED);
 
   if (isNavLink) {
     return (

www/src/components/Menu.tsx

@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import Search from './Search';
 import { SettingsContext } from '../context/SettingsContext';
 import { THEMES } from '../../theme-config';
+import { PLAYGROUND_CLICKED, sendUserAnalyticsEvent, CONTRAST_CHECKER_CLICKED } from '../../segment-events';
 import { FOUNDATION_PAGES } from '../config';
 
 // MDX transforms markdown generated by gatsby-transformer-react-docgen
@@ -145,13 +146,9 @@ function MenuComponentListCategory({ children, title }: IMenuComponentListCatego
   );
 }
 
-const handlePlaygroundClick = () => {
-  global.analytics.track('openedx.paragon.docs.menu.playground.visit_playground.clicked');
-};
+const handlePlaygroundClick = () => sendUserAnalyticsEvent(PLAYGROUND_CLICKED);
 
-const handleContrastCheckerClick = () => {
-  global.analytics.track('openedx.paragon.docs.menu.tools.visit_contrast_checker.clicked');
-};
+const handleContrastCheckerClick = () => sendUserAnalyticsEvent(CONTRAST_CHECKER_CLICKED);
 
 MenuComponentListCategory.propTypes = {
   children: PropTypes.node.isRequired,

www/src/components/PageEditBtn/index.tsx

@@ -1,6 +1,7 @@
 import React, { AnchorHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Hyperlink, Nav } from '~paragon-react';
+import { PAGE_EDIT_BTN_CLICKED, sendUserAnalyticsEvent } from '../../../segment-events';
 
 export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
   githubEditPath?: string,
@@ -10,9 +11,7 @@ export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAncho
 function PageEditBtn({ githubEditPath, isNavLink, ...props }: PageEditBtnProps) {
   const pageEditLinkTitle = 'Edit this page';
 
-  const handlePageEditBtnClick = () => {
-    global.analytics.track('openedx.paragon.docs.page_edit.clicked');
-  };
+  const handlePageEditBtnClick = () => sendUserAnalyticsEvent(PAGE_EDIT_BTN_CLICKED);
 
   if (isNavLink) {
     return (

www/src/components/insights/UsagesList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '~paragon-react';
+import { COMPONENT_USAGE_LINK_CLICKED, sendUserAnalyticsEvent } from '../../../segment-events';
 
 type UsagesType = {
   filePath: string,
@@ -21,10 +22,9 @@ export default function UsagesList({
   projectName,
 } : UsagesListPropTypes) {
   const handleUsageLinkClick = (linkToUsage) => {
-    global.analytics.track(
-      'openedx.paragon.docs.usage-insights.component-usage-link.clicked',
-      { project: projectName, component: componentName, linkToUsage },
-    );
+    sendUserAnalyticsEvent(COMPONENT_USAGE_LINK_CLICKED, {
+      project: projectName, component: componentName, linkToUsage,
+    });
   };
 
   return (

www/src/context/SettingsContext.tsx

@@ -5,6 +5,9 @@ import { IntlProvider } from 'react-intl';
 import { messages } from '~paragon-react';
 
 import { THEMES, DEFAULT_THEME } from '../../theme-config';
+import {
+  SETTINGS_OPENED, SETTINGS_CLOSED, SETTINGS_CHANGED, sendUserAnalyticsEvent,
+} from '../../segment-events';
 
 export interface IDefaultValue {
   settings: {
@@ -44,12 +47,12 @@ function SettingsContextProvider({ children }) {
     }
     setSettings(prevState => ({ ...prevState, [key]: value }));
     global.localStorage.setItem('pgn__settings', JSON.stringify({ ...settings, [key]: value }));
-    global.analytics.track(`openedx.paragon.docs.settings.${key}.changed`, { [key]: value });
+    sendUserAnalyticsEvent(SETTINGS_CHANGED, { [key]: value });
   };
 
   const toggleSettings = (value: boolean) => {
     setShowSettings(value);
-    global.analytics.track(`openedx.paragon.docs.settings.${value ? 'opened' : 'closed'}`);
+    sendUserAnalyticsEvent(value ? SETTINGS_OPENED : SETTINGS_CLOSED);
   };
 
   // this hook will be called after the first render, so we can safely access localStorage

www/src/pages/foundations/elevation.jsx

@@ -13,6 +13,14 @@ import { Close, WbSunny, DoDisturb } from '~paragon-icons';
 import SEO from '../../components/SEO';
 import Layout from '../../components/PageLayout';
 import { SettingsContext } from '../../context/SettingsContext';
+import {
+  sendUserAnalyticsEvent,
+  SHADOW_GENERATOR_LAYER_DISABLED,
+  SHADOW_GENERATOR_LAYER_ENABLED,
+  SHADOW_GENERATOR_LAYER_REMOVED,
+  SHADOW_GENERATOR_LAYER_ADDED,
+  SHADOW_GENERATOR_LAYER_UPDATED,
+} from '../../../segment-events';
 
 const boxShadowSides = ['down', 'up', 'right', 'left', 'centered'];
 const boxShadowLevels = [1, 2, 3, 4, 5];
@@ -86,7 +94,7 @@ function BoxShadowToolkit({
   });
 
   const updateBoxShadowModel = (property, value) => {
-    global.analytics.track('openedx.paragon.docs.elevation.generator.updated', { property, value });
+    sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_UPDATED, { property, value });
 
     const newBoxShadowModel = {
       ...boxShadowModel,
@@ -196,20 +204,20 @@ function BoxShadowGenerator() {
   };
 
   const addNewBoxShadowLayer = () => {
-    global.analytics.track('openedx.paragon.elevation.generator.layer.added');
+    sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_ADDED);
     setBoxShadows([
       ...boxShadows,
       { id: boxShadows[boxShadows.length - 1].id + 1, enabled: true, style: DEFAULT_BOX_SHADOW },
     ]);
   };
 
   const removeBoxShadowLayer = (toolkitId) => {
-    global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.removed');
+    sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_REMOVED);
     setBoxShadows(boxShadows.filter((shadow) => shadow.id !== toolkitId));
   };
 
   const disableBoxShadowLayer = (toolkitId) => {
-    global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.disabled');
+    sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_DISABLED);
     const updatedBoxShadows = boxShadows
       .map((shadow) => {
         if (shadow.id === toolkitId) {
@@ -221,7 +229,7 @@ function BoxShadowGenerator() {
   };
 
   const enableBoxShadowLayer = (toolkitId) => {
-    global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.enabled');
+    sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_ENABLED);
     const updatedBoxShadows = boxShadows
       .map((shadow) => {
         if (shadow.id === toolkitId) {

www/src/pages/insights.tsx

@@ -18,6 +18,7 @@ import ComponentsUsage from '../components/insights/ComponentsUsage';
 
 // @ts-ignore
 import dependentProjectsAnalysis from '../../../dependent-usage.json'; // eslint-disable-line
+import { sendUserAnalyticsEvent, INSIGHTS_TAB_CLICKED } from '../../segment-events';
 import { INSIGHTS_TABS, INSIGHTS_PAGES } from '../config';
 import componentsUsage from '../utils/componentsUsage';
 import { IInsightsContext } from '../types/types';
@@ -63,7 +64,7 @@ export default function InsightsPage({ pageContext: { tab, githubEditPath } }: I
 
   const handleOnSelect = (value: string) => {
     if (value !== tab) {
-      global.analytics.track(`openedx.paragon.docs.insights.tabs.${value.toLowerCase().trim()}.clicked`);
+      sendUserAnalyticsEvent(INSIGHTS_TAB_CLICKED, { tabName: value });
       navigate(INSIGHTS_PAGES.find(item => item.tab === value).path);
     }
   };

www/src/pages/playground.tsx

@@ -14,6 +14,7 @@ import localforage from 'localforage';
 import SEO from '../components/SEO';
 import { SiteTitle } from '../components/header';
 import { storageKey } from '../../playroom/constants';
+import { PLAYGROUND_URL_COPIED, sendUserAnalyticsEvent } from '../../segment-events';
 
 const FEEDBACK_URL = 'https://github.com/openedx/paragon/issues/new?assignees=&labels=playground&template=feedback_template.md&title=[Playground]';
 
@@ -73,7 +74,7 @@ export default function Playground({ location }) {
             onClick={() => {
               setCopyUrlState('copied');
               navigator.clipboard.writeText(location.href);
-              global.analytics.track('openedx.paragon.docs.playground.url-copied');
+              sendUserAnalyticsEvent(PLAYGROUND_URL_COPIED);
             }}
             labels={{
               default: 'Copy URL',