Capture telemetry for response headers copy action

src/app/views/common/copy.ts

@@ -1,3 +1,6 @@
+import { telemetry } from '../../../telemetry';
+import { IQuery } from '../../../types/query-runner';
+
 export function genericCopy(text: string) {
   const element = document.createElement('textarea');
   element.value = text;
@@ -6,7 +9,7 @@ export function genericCopy(text: string) {
 
   document.execCommand('copy');
   document.body.removeChild(element);
-  
+
   return Promise.resolve('copied');
 }
 
@@ -21,4 +24,14 @@ export function copy(id: string) {
   textArea.blur();
 
   return Promise.resolve('copied');
-}
+}
+
+export function trackedGenericCopy(
+  text: string,
+  componentName: string,
+  sampleQuery?: IQuery,
+  properties?: { [key: string]: string }
+) {
+  genericCopy(text);
+  telemetry.trackCopyButtonClickEvent(componentName, sampleQuery, properties);
+}

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -5,16 +5,15 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import { componentNames, telemetry } from '../../../../telemetry';
 import { IAdaptiveCardProps } from '../../../../types/adaptivecard';
 import { IQuery } from '../../../../types/query-runner';
 import { IRootState } from '../../../../types/root';
 import { getAdaptiveCard } from '../../../services/actions/adaptive-cards-action-creator';
-import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { Monaco } from '../../common';
-import { genericCopy } from '../../common/copy';
+import { trackedGenericCopy } from '../../common/copy';
 import { queryResponseStyles } from './../queryResponse.styles';
 
 class AdaptiveCard extends Component<IAdaptiveCardProps> {
@@ -150,10 +149,11 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
                 iconProps={{
                   iconName: 'copy',
                 }}
-                onClick={async () => {
-                  genericCopy(JSON.stringify(data.template, null, 4));
-                  trackJsonSchemaCopyEvent(sampleQuery)
-                }}
+                onClick={async () =>
+                  trackedGenericCopy(
+                    JSON.stringify(data.template, null, 4),
+                    componentNames.JSON_SCHEMA_COPY_BUTTON,
+                    sampleQuery)}
               />
               <Monaco
                 language='json'
@@ -178,18 +178,6 @@ function onPivotItemClick(query: IQuery | undefined, item?: PivotItem) {
   }
 }
 
-function trackJsonSchemaCopyEvent(query: IQuery | undefined) {
-  if (!query) {
-    return;
-  }
-  const sanitizedUrl = sanitizeQueryUrl(query.sampleUrl);
-  telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
-    {
-      ComponentName: componentNames.JSON_SCHEMA_COPY_BUTTON,
-      QuerySignature: `${query.selectedVerb} ${sanitizedUrl}`
-    });
-}
-
 function mapStateToProps({ adaptiveCard, sampleQuery, queryRunnerStatus }: IRootState) {
   return {
     card: adaptiveCard,

src/app/views/query-response/headers/ResponseHeaders.tsx

@@ -2,14 +2,15 @@
 import { IconButton } from 'office-ui-fabric-react';
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { RESPONSE_HEADERS_COPY_BUTTON } from '../../../../telemetry/component-names';
 import { IRootState } from '../../../../types/root';
 
 import { Monaco } from '../../common';
-import { genericCopy } from '../../common/copy';
+import { trackedGenericCopy } from '../../common/copy';
 import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
 
 const ResponseHeaders = () => {
-  const { dimensions: { response }, graphResponse, responseAreaExpanded } = useSelector((state: IRootState) => state);
+  const { dimensions: { response }, graphResponse, responseAreaExpanded, sampleQuery } = useSelector((state: IRootState) => state);
   const { headers } = graphResponse;
 
   const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
@@ -20,7 +21,12 @@ const ResponseHeaders = () => {
         <IconButton
           style={{ float: 'right', zIndex: 1 }}
           iconProps={{ iconName: 'copy' }}
-          onClick={async () => genericCopy(JSON.stringify(headers))}
+          onClick={
+            async () =>
+              trackedGenericCopy(
+                JSON.stringify(headers),
+                RESPONSE_HEADERS_COPY_BUTTON,
+                sampleQuery)}
         />
         <Monaco body={headers} height={height} />
       </div>

src/app/views/query-response/snippets/snippets-helper.tsx

@@ -5,13 +5,11 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { getSnippet } from '../../../services/actions/snippet-action-creator';
 import { Monaco } from '../../common';
-import { genericCopy } from '../../common/copy';
+import { trackedGenericCopy } from '../../common/copy';
 
-import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
-import { IQuery } from '../../../../types/query-runner';
-import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment';
 import { IRootState } from '../../../../types/root';
+import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
 
 interface ISnippetProps {
   language: string;
@@ -69,10 +67,12 @@ function Snippet(props: ISnippetProps) {
           <IconButton
             style={{ float: 'right', zIndex: 1 }}
             iconProps={copyIcon}
-            onClick={async () => {
-              genericCopy(snippet);
-              trackSnippetCopyEvent(sampleQuery, language);
-            }}
+            onClick={async () =>
+              trackedGenericCopy(
+                snippet,
+                CODE_SNIPPETS_COPY_BUTTON,
+                sampleQuery,
+                { Language: language })}
           />
           <Monaco
             body={snippet}
@@ -90,13 +90,3 @@ function Snippet(props: ISnippetProps) {
     </div>
   );
 }
-
-function trackSnippetCopyEvent(query: IQuery, language: string) {
-  const sanitizedUrl = sanitizeQueryUrl(query.sampleUrl);
-  telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
-    {
-      ComponentName: componentNames.CODE_SNIPPETS_COPY_BUTTON,
-      SelectedLanguage: language,
-      QuerySignature: `${query.selectedVerb} ${sanitizedUrl}`
-    });
-}

src/app/views/query-runner/request/auth/Auth.tsx

@@ -9,7 +9,7 @@ import { componentNames, eventTypes, telemetry } from '../../../../../telemetry'
 import { IRootState } from '../../../../../types/root';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { classNames } from '../../../classnames';
-import { genericCopy } from '../../../common/copy';
+import { trackedGenericCopy } from '../../../common/copy';
 import { convertVhToPx } from '../../../common/dimensions-adjustment';
 import { authStyles } from './Auth.styles';
 
@@ -20,8 +20,7 @@ export function Auth(props: any) {
   const [loading, setLoading] = useState(false);
 
   const handleCopy = async () => {
-    await genericCopy(accessToken!);
-    trackTokenCopyEvent();
+    trackedGenericCopy(accessToken || '', componentNames.ACCESS_TOKEN_COPY_BUTTON);
   };
 
   useEffect(() => {
@@ -71,14 +70,6 @@ export function Auth(props: any) {
   </div>);
 }
 
-function trackTokenCopyEvent() {
-  telemetry.trackEvent(
-    eventTypes.BUTTON_CLICK_EVENT,
-    {
-      ComponentName: componentNames.ACCESS_TOKEN_COPY_BUTTON
-    });
-}
-
 const trackedComponent = telemetry.trackReactComponent(Auth, componentNames.ACCESS_TOKEN_TAB);
 // @ts-ignore
 export default styled(trackedComponent, authStyles);

src/telemetry/component-names.ts

@@ -14,6 +14,7 @@ export const CODE_SNIPPETS_COPY_BUTTON = 'Code snippets copy button';
 export const VIEW_ALL_PERMISSIONS_BUTTON = 'View all permissions button';
 export const EXPORT_HISTORY_ITEM_BUTTON = 'Export history item button';
 export const DELETE_HISTORY_ITEM_BUTTON = 'Delete history item button';
+export const RESPONSE_HEADERS_COPY_BUTTON = 'Response headers copy button';
 
 // List items
 export const HISTORY_LIST_ITEM = 'History list item';

src/telemetry/telemetry.ts

@@ -13,7 +13,11 @@ import { version } from '../../package.json';
 import { validateExternalLink } from '../app/utils/external-link-validation';
 import { sanitizeQueryUrl } from '../app/utils/query-url-sanitization';
 import { IQuery } from '../types/query-runner';
-import { LINK_CLICK_EVENT, TAB_CLICK_EVENT } from './event-types';
+import {
+  BUTTON_CLICK_EVENT,
+  LINK_CLICK_EVENT,
+  TAB_CLICK_EVENT,
+} from './event-types';
 import {
   addCommonTelemetryItemProperties,
   filterRemoteDependencyData,
@@ -92,6 +96,20 @@ class Telemetry implements ITelemetry {
     validateExternalLink(url, componentName);
   }
 
+  public trackCopyButtonClickEvent(
+    componentName: string,
+    sampleQuery?: IQuery,
+    properties?: { [key: string]: string }
+  ) {
+    properties = properties || {};
+    properties.ComponentName = componentName;
+    if (sampleQuery) {
+      const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
+      properties.QuerySignature = `${sampleQuery.selectedVerb} ${sanitizedUrl}`;
+    }
+    telemetry.trackEvent(BUTTON_CLICK_EVENT, properties);
+  }
+
   private getInstrumentationKey() {
     return (
       (window as any).InstrumentationKey ||