[WNMGDS-3205] Adds analytics tracking to theme & version dialogs

packages/docs/src/components/layout/SideNav/ThemeDialog.tsx

@@ -3,17 +3,26 @@ import { Button, Dropdown } from '@cmsgov/design-system';
 import { FilterDialog } from '../FilterDialog/index';
 import { getThemeOptions } from './themeVersionData';
 import { setQueryParam } from '../../../helpers/urlUtils';
+import { sendFilterAppliedEvent } from '../../../helpers/analytics';
+import { getVersionEquivalent } from './themeVersionData';
 
 export interface ThemeVersionDialogProps {
   theme: string;
   isOpen?: boolean;
+  version: string;
   onExit(...args: any[]): void;
 }
 
 export const ThemeVersionDialog = (props: ThemeVersionDialogProps) => {
   const [theme, setTheme] = useState(props.theme);
 
   function handleUpdate() {
+    const currentVersion = getVersionEquivalent(theme, props.theme, props.version);
+    const filterCategoriesUsed = { theme: theme, version: currentVersion };
+    const filterCategoriesUsedString = JSON.stringify(filterCategoriesUsed);
+
+    sendFilterAppliedEvent({ filterCategoriesUsedString });
+
     if (theme !== props.theme) {
       setQueryParam('theme', theme, true);
     }

packages/docs/src/components/layout/SideNav/ThemeVersionSection.tsx

@@ -30,6 +30,7 @@ export const ThemeVersionSection = () => {
         </button>
         <ThemeDialog
           theme={theme}
+          version={version}
           isOpen={themeDialogProps.isOpen}
           onExit={() => {
             themeDialogProps.closeClick();

packages/docs/src/components/layout/SideNav/VersionDialog.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Button, Dropdown } from '@cmsgov/design-system';
 import { FilterDialog } from '../FilterDialog';
 import { getVersionOptions, getVersionEquivalent } from './themeVersionData';
+import { sendFilterAppliedEvent } from '../../../helpers/analytics';
 
 export interface ThemeVersionDialogProps {
   theme: string;
@@ -14,6 +15,11 @@ export const ThemeVersionDialog = (props: ThemeVersionDialogProps) => {
   const [version, setVersion] = useState(props.version);
 
   function handleUpdate() {
+    const filterCategoriesUsed = { theme: props.theme, version: version };
+    const filterCategoriesUsedString = JSON.stringify(filterCategoriesUsed);
+
+    sendFilterAppliedEvent({ filterCategoriesUsedString });
+
     if (version !== props.version) {
       // Since the version changed, we need to navigate to that version of the
       // doc site, which is archived under design.cms.gov/v/

packages/docs/src/helpers/analytics.ts

@@ -7,3 +7,14 @@ export function sendSearchInitiatedEvent(searchTerm: string) {
     search_term_type: 'user_initiated',
   } as any);
 }
+
+export function sendFilterAppliedEvent({
+  filterCategoriesUsedString,
+}: {
+  filterCategoriesUsedString: string;
+}) {
+  sendLinkEvent({
+    event_name: 'filters_applied',
+    filter_categories_used: filterCategoriesUsedString,
+  } as any);
+}