Task: Add copy telemetry (#2419)

microsoftgraph · Feb 22, 2023 · 2bfdc6e · 2bfdc6e
1 parent b579207
commit 2bfdc6e
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 10 deletions.
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -35,6 +35,7 @@ import { parse } from './query-runner/util/iframe-message-parser';
 import { Sidebar } from './sidebar/Sidebar';
 import { MainHeader } from './main-header/MainHeader';
 import { removeSpinners } from '../..';
+import { KeyboardCopyEvent } from './common/copy/KeyboardCopyEvent';
 
 export interface IAppProps {
   theme?: ITheme;
@@ -87,6 +88,7 @@ class App extends Component<IAppProps, IAppState> {
 
   public componentDidMount = async () => {
     removeSpinners();
+    KeyboardCopyEvent();
     this.displayToggleButton(this.mediaQueryList);
     this.mediaQueryList.addListener(this.displayToggleButton);
 

diff --git a/src/app/views/common/copy/KeyboardCopyEvent.ts b/src/app/views/common/copy/KeyboardCopyEvent.ts
@@ -0,0 +1,40 @@
+import { eventTypes, telemetry } from '../../../../telemetry';
+import { KEYBOARD_COPY_TABS } from '../../../../telemetry/component-names';
+
+interface IComponentList {
+  [key: string]: string;
+}
+export const KeyboardCopyEvent = () => {
+  const componentList: IComponentList = KEYBOARD_COPY_TABS;
+  document.addEventListener('keydown', (event: KeyboardEvent) => {
+    if (event && (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+      const targets = event.composedPath();
+      const componentName = getComponentName(targets);
+      trackCopyEvent(componentName);
+    }
+  });
+
+  const getComponentName = (targets: EventTarget[]): string => {
+    const targetIds = targets.map((target: EventTarget) => {
+      return getTargetId(target);
+    });
+    const filteredTargetIds = targetIds.filter((value) => value !== null)!;
+    const componentName = Object.keys(componentList).find(key => filteredTargetIds.includes(key));
+    return componentName || '';
+  }
+
+  const getTargetId = (target: EventTarget) => {
+    if(target && target instanceof Element) {
+      return target.getAttribute('id');
+    }
+  }
+
+  const trackCopyEvent = (componentName: string) => {
+    if(!componentName) { return; }
+    telemetry.trackEvent(eventTypes.KEYBOARD_COPY_EVENT,
+      {
+        ComponentName: (KEYBOARD_COPY_TABS as IComponentList)[componentName],
+        trigger: 'Keyboard'
+      });
+  }
+}
diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -157,7 +157,7 @@ const AdaptiveCard = (props: any) => {
               'aria-controls': 'json-schema-tab'
             }}
           >
-            <div id={'json-schema-tab'}>
+            <div id={'JSON-schema-tab'} tabIndex={0}>
               <MessageBar messageBarType={MessageBarType.info}>
                 <FormattedMessage id='Get started with adaptive cards on' />
                 <Link href={'https://learn.microsoft.com/en-us/adaptive-cards/templating/sdk'}

diff --git a/src/app/views/query-response/headers/ResponseHeaders.tsx b/src/app/views/query-response/headers/ResponseHeaders.tsx
@@ -18,14 +18,14 @@ const ResponseHeaders = () => {
 
   if (headers) {
     return (
-      <>
+      <div id='response-headers-tab'>
         <CopyButton
           handleOnClick={handleCopy}
           isIconButton={true}
           style={{ float: 'right', zIndex: 1 }}
         />
         <Monaco body={headers} height={height} />
-      </>
+      </div>
     );
   }
 

diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -73,7 +73,7 @@ export const GetPivotItems = () => {
         'aria-controls': 'response-tab'
       }}
     >
-      <div id={'response-tab'}><Response /></div>
+      <div id={'response-tab'} tabIndex={0}><Response /></div>
     </PivotItem>,
     <PivotItem
       key='response-headers'
@@ -86,7 +86,7 @@ export const GetPivotItems = () => {
         'aria-controls': 'response-headers-tab'
       }}
     >
-      <div id={'response-headers-tab'}><ResponseHeaders /></div>
+      <div id={'response-headers-tab'} tabIndex={0}><ResponseHeaders /></div>
     </PivotItem>
   ];
   if (mode === Mode.Complete) {
@@ -102,7 +102,7 @@ export const GetPivotItems = () => {
           'aria-controls': 'code-snippets-tab'
         }}
       >
-        <div id={'code-snippets-tab'}><Snippets /></div>
+        <div id={'code-snippets-tab'} tabIndex={0}><Snippets /></div>
       </PivotItem>,
       <PivotItem
         key='graph-toolkit'
@@ -116,7 +116,7 @@ export const GetPivotItems = () => {
           'aria-controls': 'toolkit-tab'
         }}
       >
-        <div id={'toolkit-tab'}><GraphToolkit /></div>
+        <div id={'toolkit-tab'} tabIndex={0}><GraphToolkit /></div>
       </PivotItem>,
       <PivotItem
         key='adaptive-cards'
@@ -133,7 +133,7 @@ export const GetPivotItems = () => {
         <ThemeContext.Consumer >
           {(theme) => (
             // @ts-ignore
-            <div id={'adaptive-cards-tab'}>
+            <div id={'adaptive-cards-tab'} tabIndex={0}>
               <AdaptiveCard
                 body={body}
                 hostConfig={theme === 'light' ? lightThemeHostConfig : darkThemeHostConfig}

diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx
@@ -36,6 +36,8 @@ export function renderSnippets(supportedLanguages: ISupportedLanguages) {
         'aria-controls': `${language}-tab`
       }}
       itemKey={language}
+      tabIndex={0}
+      id={`${language}-tab`}
     >
       <Snippet language={language} snippetInfo={supportedLanguages} />
     </PivotItem>

diff --git a/src/app/views/query-runner/request/auth/Auth.tsx b/src/app/views/query-runner/request/auth/Auth.tsx
@@ -62,7 +62,7 @@ export function Auth(props: any) {
             target='_blank'
           />
         </div>
-        <Label className={classes.accessToken} >{accessToken}</Label>
+        <Label className={classes.accessToken} id='access-tokens-tab' tabIndex={0}>{accessToken}</Label>
       </div>
       :
       <Label className={classes.emptyStateLabel}>

diff --git a/src/app/views/query-runner/request/body/RequestBody.tsx b/src/app/views/query-runner/request/body/RequestBody.tsx
@@ -8,7 +8,7 @@ const RequestBody = ({ handleOnEditorChange }: any) => {
   const { dimensions: { request: { height } }, sampleQuery } = useAppSelector((state) => state);
 
   return (
-    <FocusZone>
+    <FocusZone id='request-body-tab'>
       <Monaco
         body={sampleQuery.sampleBody}
         height={convertVhToPx(height, 60)}

diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts
@@ -47,6 +47,18 @@ export const RESPONSE_PREVIEW_TAB = 'Response preview tab';
 export const RESPONSE_HEADERS_TAB = 'Response headers tab';
 export const TOOLKIT_COMPONENT_TAB = 'Toolkit component tab';
 export const MODIFY_PERMISSIONS_TAB = 'Modify permissions tab';
+export const KEYBOARD_COPY_TABS = {
+  'access-tokens-tab': 'Access token tab',
+  'response-tab': 'Response preview tab',
+  'response-headers-tab': 'Response headers tab',
+  'csharp-tab': 'Csharp tab',
+  'java-tab': 'Java tab',
+  'javascript-tab': 'Javascript tab',
+  'go-tab': 'Go tab',
+  'powershell-tab': 'Powershell tab',
+  'JSON-schema-tab': 'JSON schema tab',
+  'request-body-tab': 'Request body tab'
+}
 
 // Dropdowns
 export const VERSION_CHANGE_DROPDOWN = 'Version change dropdown';

diff --git a/src/telemetry/event-types.ts b/src/telemetry/event-types.ts
@@ -6,3 +6,4 @@ export const LINK_CLICK_EVENT = 'LINK_CLICK_EVENT';
 export const LISTITEM_CLICK_EVENT = 'LISTITEM_CLICK_EVENT';
 export const DROPDOWN_CHANGE_EVENT = 'DROPDOWN_CHANGE_EVENT';
 export const WINDOW_OPEN_EVENT = 'WINDOW_OPEN_EVENT';
+export const KEYBOARD_COPY_EVENT = 'KEYBOARD_COPY_EVENT';