diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx index 196d97599..6a2c001ad 100644 --- a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx +++ b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx @@ -5,9 +5,11 @@ import { FormattedMessage, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { componentNames, telemetry } from '../../../../telemetry'; +import { componentNames, eventTypes, telemetry } from '../../../../telemetry'; import { IAdaptiveCardProps } from '../../../../types/adaptivecard'; +import { IQuery } from '../../../../types/query-runner'; 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'; @@ -59,7 +61,7 @@ class AdaptiveCard extends Component { public render() { const { data, pending } = this.props.card; - const { body, queryStatus } = this.props; + const { body, queryStatus, sampleQuery } = this.props; const classes = classNames(this.props); if (!body) { @@ -99,9 +101,9 @@ class AdaptiveCard extends Component { this.adaptiveCard!.parse(data); const renderedCard = this.adaptiveCard!.render(); return ( - + onPivotItemClick(sampleQuery, pivotItem)}> { /> @@ -138,7 +140,10 @@ class AdaptiveCard extends Component { iconProps={{ iconName: 'copy', }} - onClick={async () => genericCopy(JSON.stringify(data, null, 4))} + onClick={async () => { + genericCopy(JSON.stringify(data, null, 4)); + trackJsonSchemaCopyEvent(sampleQuery) + }} /> { } } +function onPivotItemClick(query: IQuery | undefined, item?: PivotItem) { + if (!item) { return; } + const key = item.props.itemKey; + if (key) { + telemetry.trackTabClickEvent(key, query); + } +} + +function trackJsonSchemaCopyEvent(query: IQuery | undefined) { + if (!query) { + return; + } + const sanitizedUrl = sanitizeQueryUrl(query.sampleUrl); + telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, + { + ComponentName: componentNames.CODE_SNIPPETS_COPY_BUTTON, + QuerySignature: `${query.selectedVerb} ${sanitizedUrl}` + }); +} + function mapStateToProps(state: any) { return { card: state.adaptiveCard, diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx index 55fcc1dba..97cc5b5ec 100644 --- a/src/app/views/sidebar/Sidebar.tsx +++ b/src/app/views/sidebar/Sidebar.tsx @@ -1,12 +1,12 @@ import { Pivot, PivotItem } from 'office-ui-fabric-react'; import React from 'react'; -import { componentNames, eventTypes, telemetry } from '../../../telemetry'; +import { telemetry } from '../../../telemetry'; import History from './history/History'; import SampleQueries from './sample-queries/SampleQueries'; -export const Sidebar = ({sampleHeaderText, historyHeaderText}: any) => { +export const Sidebar = ({ sampleHeaderText, historyHeaderText }: any) => { return (
@@ -21,26 +21,10 @@ export const Sidebar = ({sampleHeaderText, historyHeaderText}: any) => { ); }; -function onPivotItemClick (item?: PivotItem) { +function onPivotItemClick(item?: PivotItem) { if (!item) { return; } const key = item.props.itemKey; if (key) { - trackTabClickEvent(key); - } -} - -function trackTabClickEvent(tabKey: string) { - switch (tabKey) { - case 'history': { - telemetry.trackEvent( - eventTypes.TAB_CLICK_EVENT, - { - ComponentName: componentNames.HISTORY_TAB - }); - break; - } - default: { - break; - } + telemetry.trackTabClickEvent(key); } } diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts index 820193001..8d6de61e8 100644 --- a/src/telemetry/component-names.ts +++ b/src/telemetry/component-names.ts @@ -13,6 +13,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 JSON_SCHEMA_COPY_BUTTON = 'JSON schema copy button'; // List items export const SAMPLE_QUERY_LIST_ITEM = 'Sample query list item'; @@ -25,12 +26,13 @@ export const ACCESS_TOKEN_TAB = 'Access token tab'; export const REQUEST_BODY_TAB = 'Request body tab'; export const CODE_SNIPPETS_TAB = 'Code snippets tab'; export const ADAPTIVE_CARDS_TAB = 'Adaptive cards tab'; -export const REQUEST_HEADERS_TAB= 'Request headers tab'; +export const REQUEST_HEADERS_TAB = 'Request headers tab'; export const EXPAND_RESPONSE_TAB = 'Expand response tab'; 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 JSON_SCHEMA_TAB = 'JSON schema tab'; // Dropdowns export const VERSION_CHANGE_DROPDOWN = 'Version change dropdown'; diff --git a/src/telemetry/telemetry.ts b/src/telemetry/telemetry.ts index 6d1fd5193..e25bccec2 100644 --- a/src/telemetry/telemetry.ts +++ b/src/telemetry/telemetry.ts @@ -47,18 +47,20 @@ class Telemetry implements ITelemetry { return withAITracking(this.reactPlugin, ComponentToTrack, componentName); } - public trackTabClickEvent(tabKey: string, sampleQuery: IQuery) { - const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl); + public trackTabClickEvent(tabKey: string, sampleQuery: IQuery | null = null) { let componentName = tabKey.replace('-', ' '); componentName = `${componentName.charAt(0).toUpperCase()}${componentName.slice(1)} tab`; - telemetry.trackEvent(TAB_CLICK_EVENT, - { - ComponentName: componentName, - QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}` - }); + const properties: { [key: string]: any } = { + ComponentName: componentName + } + if (sampleQuery) { + const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl); + properties.QuerySignature = `${sampleQuery.selectedVerb} ${sanitizedUrl}`; + } + telemetry.trackEvent(TAB_CLICK_EVENT, properties); } - public trackLinkClickEvent(url: string, componentName: string) { + public trackLinkClickEvent(url: string, componentName: string) { telemetry.trackEvent(LINK_CLICK_EVENT, { ComponentName: componentName }); validateExternalLink(url, componentName); }