From 953c1ae69b01aaf40c30d0ea1b7303172768824f Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Fri, 4 Mar 2022 08:38:02 +0300 Subject: [PATCH 01/15] add more information to code snippets --- .../query-response/snippets/Snippets.tsx | 18 +++++++------ .../snippets/snippets-helper.tsx | 26 ++++++++++++++++--- src/messages/GE.json | 5 +++- 3 files changed, 36 insertions(+), 13 deletions(-) diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx index 7374bcce8..b635edb7a 100644 --- a/src/app/views/query-response/snippets/Snippets.tsx +++ b/src/app/views/query-response/snippets/Snippets.tsx @@ -5,14 +5,16 @@ import { componentNames, telemetry } from '../../../../telemetry'; import { renderSnippets } from './snippets-helper'; function GetSnippets() { - const supportedLanguages = [ - 'CSharp', - 'JavaScript', - 'Java', - 'Objective-C', - 'Go', - 'PowerShell' - ]; + const supportedLanguages = { + 'CSharp': 'https://www.nuget.org/packages/Microsoft.Graph/', + 'JavaScript': 'https://www.npmjs.com/package/@microsoft/microsoft-graph-client', + 'Java': 'https://search.maven.org/artifact/com.microsoft.graph/microsoft-graph-core', + // eslint-disable-next-line max-len + 'Objective-C': 'https://docs.microsoft.com/en-us/graph/sdks/sdk-installation#install-the-microsoft-graph-objective-c-sdk-using-cocoapods', + 'Go': 'go', + // eslint-disable-next-line max-len + 'PowerShell': 'https://docs.microsoft.com/en-us/graph/powershell/installation#:~:text=Install%20the%20Microsoft%20Graph%20PowerShell%20SDK' + }; return {renderSnippets(supportedLanguages)}; } diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index bc7d9b40d..90eb355c8 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -11,13 +11,19 @@ import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimens import { IRootState } from '../../../../types/root'; import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names'; import { CopyButton } from '../../common/copy/CopyButton'; +import { translateMessage } from '../../../utils/translate-messages'; interface ISnippetProps { language: string; + sdkLink: string; } -export function renderSnippets(supportedLanguages: string[]) { - return supportedLanguages.map((language: string) => ( +interface ISupportedLanguages{ + [key: string]: string; +} + +export function renderSnippets(supportedLanguages: ISupportedLanguages) { + return Object.keys(supportedLanguages).map((language: string) => ( - + )); } function Snippet(props: ISnippetProps) { let { language } = props; + const { sdkLink } = props; /** * Converting language lowercase so that we won't have to call toLowerCase() in multiple places. @@ -59,6 +66,17 @@ function Snippet(props: ISnippetProps) { dispatch(getSnippet(language)); }, [sampleQuery.sampleUrl]); + const setCommentSymbol = (): string => { + console.log(language) + return language.trim() === 'powershell' ? '#' : '//'; + } + + const setSnippetText = (): string => { + // eslint-disable-next-line max-len + return (`${setCommentSymbol()} ${translateMessage('Leverage our libraries')} ${language} ${translateMessage('Client library')}${sdkLink}\r +${setCommentSymbol()} ${translateMessage('SDKs documentation')}\r\r${snippet}`); + } + return (
{loadingState && @@ -70,7 +88,7 @@ function Snippet(props: ISnippetProps) { <> Date: Mon, 7 Mar 2022 21:59:41 +0300 Subject: [PATCH 02/15] add shortened links to code snippets --- src/app/views/query-response/snippets/Snippets.tsx | 14 ++++++-------- .../query-response/snippets/snippets-helper.tsx | 1 - 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx index b635edb7a..0a57686fc 100644 --- a/src/app/views/query-response/snippets/Snippets.tsx +++ b/src/app/views/query-response/snippets/Snippets.tsx @@ -6,14 +6,12 @@ import { renderSnippets } from './snippets-helper'; function GetSnippets() { const supportedLanguages = { - 'CSharp': 'https://www.nuget.org/packages/Microsoft.Graph/', - 'JavaScript': 'https://www.npmjs.com/package/@microsoft/microsoft-graph-client', - 'Java': 'https://search.maven.org/artifact/com.microsoft.graph/microsoft-graph-core', - // eslint-disable-next-line max-len - 'Objective-C': 'https://docs.microsoft.com/en-us/graph/sdks/sdk-installation#install-the-microsoft-graph-objective-c-sdk-using-cocoapods', - 'Go': 'go', - // eslint-disable-next-line max-len - 'PowerShell': 'https://docs.microsoft.com/en-us/graph/powershell/installation#:~:text=Install%20the%20Microsoft%20Graph%20PowerShell%20SDK' + 'CSharp': 'https://aka.ms/csharpsdk', + 'JavaScript': 'https://aka.ms/graphjssdk', + 'Java': 'https://aka.ms/graphjavasdk', + 'Objective-C': 'https://aka.ms/objective-c-sdk', + 'Go': 'https://aka.ms/graphgosdk', + 'PowerShell': 'https://aka.ms/pshellsdk' }; return {renderSnippets(supportedLanguages)}; diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 90eb355c8..587f1cb2b 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -67,7 +67,6 @@ function Snippet(props: ISnippetProps) { }, [sampleQuery.sampleUrl]); const setCommentSymbol = (): string => { - console.log(language) return language.trim() === 'powershell' ? '#' : '//'; } From 6e070e9867d21a0c950ee039433367b4b90641b1 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 8 Mar 2022 09:16:00 +0300 Subject: [PATCH 03/15] update GE json file --- src/messages/GE.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/messages/GE.json b/src/messages/GE.json index 4765c2489..7c6abf096 100644 --- a/src/messages/GE.json +++ b/src/messages/GE.json @@ -434,5 +434,5 @@ "Failed to get profile information": "Failed to get profile information", "Leverage our libraries": "Leverage the power of our client libraries. Download the", "Client library": "client library here ", - "SDKs documentation": "To read more about our SDKs, go to the documentation page" + "SDKs documentation": "To read more about our SDKs, go to the documentation page at" } \ No newline at end of file From b94c9793f865bd6abe784d8c44ccf23e9180dede Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 8 Mar 2022 13:46:29 +0300 Subject: [PATCH 04/15] add shortened links to snippets --- .../query-response/snippets/Snippets.tsx | 30 +++++++++++++++---- .../snippets/snippets-helper.tsx | 15 ++++++---- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx index 0a57686fc..9aafe1fcd 100644 --- a/src/app/views/query-response/snippets/Snippets.tsx +++ b/src/app/views/query-response/snippets/Snippets.tsx @@ -6,12 +6,30 @@ import { renderSnippets } from './snippets-helper'; function GetSnippets() { const supportedLanguages = { - 'CSharp': 'https://aka.ms/csharpsdk', - 'JavaScript': 'https://aka.ms/graphjssdk', - 'Java': 'https://aka.ms/graphjavasdk', - 'Objective-C': 'https://aka.ms/objective-c-sdk', - 'Go': 'https://aka.ms/graphgosdk', - 'PowerShell': 'https://aka.ms/pshellsdk' + 'CSharp': { + sdkDownloadLink: 'https://aka.ms/csharpsdk', + sdkDocLink: 'https://aka.ms/sdk-doc' + }, + 'JavaScript': { + sdkDownloadLink: 'https://aka.ms/graphjssdk', + sdkDocLink: 'https://aka.ms/sdk-doc' + }, + 'Java': { + sdkDownloadLink: 'https://aka.ms/graphjavasdk', + sdkDocLink: 'https://aka.ms/sdk-doc' + }, + 'Objective-C': { + sdkDownloadLink: 'https://aka.ms/objective-c-sdk', + sdkDocLink: 'https://aka.ms/sdk-doc' + }, + 'Go': { + sdkDownloadLink: 'https://aka.ms/graphgosdk', + sdkDocLink: 'https://aka.ms/sdk-doc' + }, + 'PowerShell': { + sdkDownloadLink: 'https://aka.ms/pshellsdk', + sdkDocLink: 'https://aka.ms/pshellsdkdocs' + } }; return {renderSnippets(supportedLanguages)}; diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 587f1cb2b..c8841e8c9 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -15,11 +15,14 @@ import { translateMessage } from '../../../utils/translate-messages'; interface ISnippetProps { language: string; - sdkLink: string; + snippetInfo: ISupportedLanguages; } interface ISupportedLanguages{ - [key: string]: string; + [language: string]: { + sdkDownloadLink: string; + sdkDocLink: string; + }; } export function renderSnippets(supportedLanguages: ISupportedLanguages) { @@ -31,14 +34,14 @@ export function renderSnippets(supportedLanguages: ISupportedLanguages) { 'aria-controls': `${language}-tab` }} > - + )); } function Snippet(props: ISnippetProps) { let { language } = props; - const { sdkLink } = props; + const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language]; /** * Converting language lowercase so that we won't have to call toLowerCase() in multiple places. @@ -72,8 +75,8 @@ function Snippet(props: ISnippetProps) { const setSnippetText = (): string => { // eslint-disable-next-line max-len - return (`${setCommentSymbol()} ${translateMessage('Leverage our libraries')} ${language} ${translateMessage('Client library')}${sdkLink}\r -${setCommentSymbol()} ${translateMessage('SDKs documentation')}\r\r${snippet}`); + return (`${setCommentSymbol()} ${translateMessage('Leverage our libraries')} ${language} ${translateMessage('Client library')}${sdkDownloadLink}\r +${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\r\r${snippet}`); } return ( From ce48f6f95275f05e3c165b83a4eaa5a0d76c1822 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 14 Mar 2022 18:51:28 +0300 Subject: [PATCH 05/15] add telemetry to cnode snippet links --- src/app/views/common/monaco/Monaco.tsx | 2 ++ .../snippets/snippets-helper.tsx | 36 +++++++++++++++---- src/messages/GE.json | 4 +-- src/telemetry/component-names.ts | 2 ++ 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/app/views/common/monaco/Monaco.tsx b/src/app/views/common/monaco/Monaco.tsx index a1f656edc..b27bfd402 100644 --- a/src/app/views/common/monaco/Monaco.tsx +++ b/src/app/views/common/monaco/Monaco.tsx @@ -13,6 +13,7 @@ interface IMonaco { language?: string; readOnly?: boolean; height?: string; + extraInfoElement?: JSX.Element; } export function Monaco(props: IMonaco) { @@ -28,6 +29,7 @@ export function Monaco(props: IMonaco) { return (
+ {props.extraInfoElement} {(theme) => ( { - // eslint-disable-next-line max-len - return (`${setCommentSymbol()} ${translateMessage('Leverage our libraries')} ${language} ${translateMessage('Client library')}${sdkDownloadLink}\r -${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\r\r${snippet}`); + const trackLinkClickedEvent = (link: string, e:any) => { + const isDocumentationLink : boolean = link.includes('doc') + const componentName = isDocumentationLink ? componentNames.CODE_SNIPPET_DOCUMENTATION_LINK : + componentNames.CODE_SNIPPET_SDK_LIBRARY_LINK + telemetry.trackLinkClickEvent(e.currentTarget.href, componentName); + } + + const extraSnippetInformation = () : JSX.Element => { + return ( +
+ + {setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')} + + trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} + rel={'noreferrer'}>{sdkDownloadLink} +
+ + {setCommentSymbol()} {translateMessage('SDKs documentation')} + + trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel="noreferrer" >{sdkDocLink} + +
+ ) } return ( @@ -90,10 +113,11 @@ ${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\r\ <> } diff --git a/src/messages/GE.json b/src/messages/GE.json index 7c6abf096..54407cef1 100644 --- a/src/messages/GE.json +++ b/src/messages/GE.json @@ -432,7 +432,7 @@ "More info": "More info", "Could not connect to the sandbox": "Could not connect to the sandbox", "Failed to get profile information": "Failed to get profile information", - "Leverage our libraries": "Leverage the power of our client libraries. Download the", + "Leverage libraries": "Leverage the power of our client libraries. Download the", "Client library": "client library here ", - "SDKs documentation": "To read more about our SDKs, go to the documentation page at" + "SDKs documentation": "To read more about our SDKs, go to the documentation page at " } \ No newline at end of file diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts index 4b69ea496..f92485d42 100644 --- a/src/telemetry/component-names.ts +++ b/src/telemetry/component-names.ts @@ -53,6 +53,8 @@ export const GRAPH_TOOLKIT_PLAYGROUND_LINK = 'Graph toolkit playground link'; export const MICROSOFT_APIS_TERMS_OF_USE_LINK = 'Microsoft APIs terms of use link'; export const MICROSOFT_PRIVACY_STATEMENT_LINK = 'Microsoft privacy statement link'; export const MICROSOFT_GRAPH_API_REFERENCE_DOCS_LINK = 'Microsoft graph API reference docs link'; +export const CODE_SNIPPET_DOCUMENTATION_LINK = 'Code snippet documentation link'; +export const CODE_SNIPPET_SDK_LIBRARY_LINK = 'Code snippet SDK library link'; // Actions export const GET_SNIPPET_ACTION = 'Get snippet action'; From e19a2be6a21dd4248362999d473a33a7a411f90b Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 15 Mar 2022 09:05:18 +0300 Subject: [PATCH 06/15] fix console error --- src/app/views/app-sections/FeedbackButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/app-sections/FeedbackButton.tsx b/src/app/views/app-sections/FeedbackButton.tsx index cc8e0e183..0d0551c24 100644 --- a/src/app/views/app-sections/FeedbackButton.tsx +++ b/src/app/views/app-sections/FeedbackButton.tsx @@ -58,8 +58,8 @@ export const FeedbackButton = () => { /> - + {enableSurvey && }
}
From 860641a0ce4ab9a5c0f56148fd8b179d47b073ce Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 15 Mar 2022 09:14:17 +0300 Subject: [PATCH 07/15] add noopener property --- src/app/views/query-response/snippets/snippets-helper.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 915de255f..971013a99 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -90,13 +90,17 @@ function Snippet(props: ISnippetProps) { trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} - rel={'noreferrer'}>{sdkDownloadLink} + rel='noreferrer noopener'> + {sdkDownloadLink} +
{setCommentSymbol()} {translateMessage('SDKs documentation')} trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel="noreferrer" >{sdkDocLink} + onClick={(e) => trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener' > + {sdkDocLink} + ) From 091c8738f388a51926eea59c510ee0e19d813106 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 16 Mar 2022 11:09:02 +0300 Subject: [PATCH 08/15] fix code smell --- src/app/views/query-response/snippets/snippets-helper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 971013a99..83b77f63a 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -12,7 +12,7 @@ import { IRootState } from '../../../../types/root'; import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names'; import { CopyButton } from '../../common/copy/CopyButton'; import { translateMessage } from '../../../utils/translate-messages'; -import { componentNames, eventTypes, telemetry } from '../../../../telemetry'; +import { componentNames, telemetry } from '../../../../telemetry'; interface ISnippetProps { language: string; From 51fae852e98e17b55bd69e2dd344b8e049194948 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 16 Mar 2022 16:51:05 +0300 Subject: [PATCH 09/15] adjust left margin --- src/app/views/query-response/snippets/snippets-helper.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 83b77f63a..a836ed19e 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -83,12 +83,12 @@ function Snippet(props: ISnippetProps) { const extraSnippetInformation = () : JSX.Element => { return ( -
+
{setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')} - trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'> {sdkDownloadLink} @@ -97,7 +97,7 @@ function Snippet(props: ISnippetProps) { {setCommentSymbol()} {translateMessage('SDKs documentation')} - trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener' > {sdkDocLink} From 97f29eed62eb801c80dbf609411255affbb0f3f8 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 16 Mar 2022 18:11:51 +0300 Subject: [PATCH 10/15] remove condition --- src/app/views/app-sections/FeedbackButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/app-sections/FeedbackButton.tsx b/src/app/views/app-sections/FeedbackButton.tsx index 0d0551c24..cc8e0e183 100644 --- a/src/app/views/app-sections/FeedbackButton.tsx +++ b/src/app/views/app-sections/FeedbackButton.tsx @@ -58,8 +58,8 @@ export const FeedbackButton = () => { /> - {enableSurvey && } +
}
From 035dab129621423499dbfd52977e35b5012963e1 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 30 Mar 2022 14:19:47 +0300 Subject: [PATCH 11/15] add colors for different themes --- src/themes/dark.ts | 6 +++++- src/themes/high-contrast.ts | 3 ++- src/themes/light.ts | 3 ++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/themes/dark.ts b/src/themes/dark.ts index 5f5a149c1..f92e949c6 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -1,4 +1,7 @@ // Theme generated from https://developer.microsoft.com/en-us/fabric#/styles/themegenerator +// eslint-disable-next-line prefer-const +export let num = [1, 2, 3]; + export const dark = { palette: { themePrimary: '#2196f0', @@ -23,7 +26,8 @@ export const dark = { neutralDark: '#fefefe', black: '#ffffff', white: '#070707', - blueMid: '#6cb8f6' + blueMid: '#6cb8f6', + green: '#00a100' }, semanticColors: { messageText: '#f3f2f1', diff --git a/src/themes/high-contrast.ts b/src/themes/high-contrast.ts index acca86e5e..65dfb32db 100644 --- a/src/themes/high-contrast.ts +++ b/src/themes/high-contrast.ts @@ -22,7 +22,8 @@ export const highContrast = { neutralDark: '#f4f4f4', black: '#f8f8f8', white: '#000000', - blueMid: '#6cb8f6' + blueMid: '#6cb8f6', + green: '#92c353' }, semanticColors: { messageText: '#f4f4f4', diff --git a/src/themes/light.ts b/src/themes/light.ts index 8a8e6d021..bd95c82b2 100644 --- a/src/themes/light.ts +++ b/src/themes/light.ts @@ -24,6 +24,7 @@ export const light = { neutralDark: '#272727', black: '#1d1d1d', white: '#ffffff', - blueMid: '#00188F' + blueMid: '#00188F', + green: '#008000' } }; From 83dd42ffc422c88fb357c1d87a937feb244dc241 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 30 Mar 2022 14:20:25 +0300 Subject: [PATCH 12/15] add specific telemetry information for sdk links --- src/app/views/common/monaco/Monaco.tsx | 2 +- .../snippets/Snippets.styles.ts | 16 ++++++++ .../snippets/snippets-helper.tsx | 39 +++++++++++-------- .../query-input/share-query/ShareQuery.tsx | 2 + src/telemetry/component-names.ts | 8 ++++ 5 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 src/app/views/query-response/snippets/Snippets.styles.ts diff --git a/src/app/views/common/monaco/Monaco.tsx b/src/app/views/common/monaco/Monaco.tsx index b27bfd402..6cbe050ad 100644 --- a/src/app/views/common/monaco/Monaco.tsx +++ b/src/app/views/common/monaco/Monaco.tsx @@ -27,7 +27,7 @@ export function Monaco(props: IMonaco) { const itemHeight = height ? height : '300px'; return ( - +
{props.extraInfoElement} diff --git a/src/app/views/query-response/snippets/Snippets.styles.ts b/src/app/views/query-response/snippets/Snippets.styles.ts new file mode 100644 index 000000000..65f3a2ce8 --- /dev/null +++ b/src/app/views/query-response/snippets/Snippets.styles.ts @@ -0,0 +1,16 @@ +import { ITheme } from '@fluentui/react' + +export const getSnippetStyles = (theme: ITheme) => { + return { + root: { + color: theme.palette.green + }, + snippetComments: { + color: theme.palette.green, + marginLeft: '28px', + fontFamily: 'Consolas, monospace', + font: '9px', + lineHeight: '1.5' + } + } +} \ No newline at end of file diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index a836ed19e..6a5f55c72 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -1,4 +1,4 @@ -import { Label, PivotItem } from '@fluentui/react'; +import { getTheme, ITheme, Label, Link, PivotItem } from '@fluentui/react'; import React, { useEffect } from 'react'; import { shallowEqual, useDispatch, useSelector } from 'react-redux'; @@ -13,7 +13,7 @@ import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names import { CopyButton } from '../../common/copy/CopyButton'; import { translateMessage } from '../../../utils/translate-messages'; import { componentNames, telemetry } from '../../../../telemetry'; - +import { getSnippetStyles } from './Snippets.styles'; interface ISnippetProps { language: string; snippetInfo: ISupportedLanguages; @@ -77,33 +77,38 @@ function Snippet(props: ISnippetProps) { const trackLinkClickedEvent = (link: string, e:any) => { const isDocumentationLink : boolean = link.includes('doc') const componentName = isDocumentationLink ? componentNames.CODE_SNIPPET_DOCUMENTATION_LINK : - componentNames.CODE_SNIPPET_SDK_LIBRARY_LINK + getLanguageComponentName(); telemetry.trackLinkClickEvent(e.currentTarget.href, componentName); } + const getLanguageComponentName = () : string => { + return Object.entries(componentNames.CODE_SNIPPET_LANGUAGES).find( + ([key]) => language.toLowerCase() === key.toLowerCase() )?.[1] || + componentNames.CODE_SNIPPET_SDK_LIBRARY_LINK; + } - const extraSnippetInformation = () : JSX.Element => { + const addExtraSnippetInformation = () : JSX.Element => { + const currentTheme: ITheme = getTheme(); + const snippetLinkStyles = getSnippetStyles(currentTheme); + const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments; return ( -
+ - ) + ); } return ( @@ -121,7 +126,7 @@ function Snippet(props: ISnippetProps) { language={language} readOnly={true} height={height} - extraInfoElement={extraSnippetInformation()} + extraInfoElement={addExtraSnippetInformation()} /> } @@ -132,4 +137,4 @@ function Snippet(props: ISnippetProps) { }
); -} +} \ No newline at end of file diff --git a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx index 6414c2df5..af6c2c6f8 100644 --- a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx +++ b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx @@ -63,6 +63,8 @@ export const ShareQuery = () => { iconProps={iconProps} styles={shareButtonStyles} role={'button'} + ariaLabel={translateMessage('Share Query')} + title={translateMessage('Share Query')} /> Date: Thu, 31 Mar 2022 11:27:38 +0300 Subject: [PATCH 13/15] remove redundant code --- src/themes/dark.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/themes/dark.ts b/src/themes/dark.ts index f92e949c6..52294577c 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -1,6 +1,4 @@ // Theme generated from https://developer.microsoft.com/en-us/fabric#/styles/themegenerator -// eslint-disable-next-line prefer-const -export let num = [1, 2, 3]; export const dark = { palette: { From c1f12035a92b7165b68b0548bed4f5307c685fd7 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Mon, 4 Apr 2022 13:14:35 +0300 Subject: [PATCH 14/15] include telemetry for snippet doc links --- src/app/views/query-response/snippets/snippets-helper.tsx | 8 ++++---- src/telemetry/component-names.ts | 8 ++++++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index 6a5f55c72..f8431b42c 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -76,12 +76,12 @@ function Snippet(props: ISnippetProps) { const trackLinkClickedEvent = (link: string, e:any) => { const isDocumentationLink : boolean = link.includes('doc') - const componentName = isDocumentationLink ? componentNames.CODE_SNIPPET_DOCUMENTATION_LINK : - getLanguageComponentName(); + const componentName = isDocumentationLink ? getLanguageComponentName(componentNames.CODE_SNIPPET_DOCS_LINKS) : + getLanguageComponentName(componentNames.CODE_SNIPPET_LANGUAGES); telemetry.trackLinkClickEvent(e.currentTarget.href, componentName); } - const getLanguageComponentName = () : string => { - return Object.entries(componentNames.CODE_SNIPPET_LANGUAGES).find( + const getLanguageComponentName = (languageComponentNames : object) : string => { + return Object.entries(languageComponentNames).find( ([key]) => language.toLowerCase() === key.toLowerCase() )?.[1] || componentNames.CODE_SNIPPET_SDK_LIBRARY_LINK; } diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts index 41987ce09..34a3c8376 100644 --- a/src/telemetry/component-names.ts +++ b/src/telemetry/component-names.ts @@ -63,6 +63,14 @@ export const CODE_SNIPPET_LANGUAGES = { 'Objective-C': 'Objective-C sdk link', Powershell: 'Powershell sdk link' } +export const CODE_SNIPPET_DOCS_LINKS = { + CSharp: 'C# snippet docs link', + JavaScript: 'JavaScript snippet docs link', + Java: 'Java snippet docs link', + Go: 'Go snippet docs link', + 'Objective-C': 'Objective-C snippet docs link', + Powershell: 'Powershell snippet docs link' +} // Actions export const GET_SNIPPET_ACTION = 'Get snippet action'; From 415a8a4cce9e28979b9490eccecc1a9ef92a403e Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 5 Apr 2022 10:29:17 +0300 Subject: [PATCH 15/15] update PR --- src/app/views/query-response/snippets/snippets-helper.tsx | 3 +-- src/telemetry/component-names.ts | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index f8431b42c..e8192e39c 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -82,8 +82,7 @@ function Snippet(props: ISnippetProps) { } const getLanguageComponentName = (languageComponentNames : object) : string => { return Object.entries(languageComponentNames).find( - ([key]) => language.toLowerCase() === key.toLowerCase() )?.[1] || - componentNames.CODE_SNIPPET_SDK_LIBRARY_LINK; + ([key]) => language.toLowerCase() === key.toLowerCase() )?.[1] || ''; } const addExtraSnippetInformation = () : JSX.Element => { diff --git a/src/telemetry/component-names.ts b/src/telemetry/component-names.ts index 34a3c8376..afddd7019 100644 --- a/src/telemetry/component-names.ts +++ b/src/telemetry/component-names.ts @@ -53,8 +53,6 @@ export const GRAPH_TOOLKIT_PLAYGROUND_LINK = 'Graph toolkit playground link'; export const MICROSOFT_APIS_TERMS_OF_USE_LINK = 'Microsoft APIs terms of use link'; export const MICROSOFT_PRIVACY_STATEMENT_LINK = 'Microsoft privacy statement link'; export const MICROSOFT_GRAPH_API_REFERENCE_DOCS_LINK = 'Microsoft graph API reference docs link'; -export const CODE_SNIPPET_DOCUMENTATION_LINK = 'Code snippet documentation link'; -export const CODE_SNIPPET_SDK_LIBRARY_LINK = 'Code snippet SDK library link'; export const CODE_SNIPPET_LANGUAGES = { CSharp: 'C Sharp sdk link', JavaScript: 'Javascript sdk link',