Enhancement: Add more info to code snippets

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 (
     <FocusZone disabled={true}>
       <div className='monaco-editor'>
+        {props.extraInfoElement}
         <ThemeContext.Consumer >
           {(theme) => (<Editor
             width='800 !important'

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

@@ -5,14 +5,32 @@ import { componentNames, telemetry } from '../../../../telemetry';
 import { renderSnippets } from './snippets-helper';
 
 function GetSnippets() {
-  const supportedLanguages = [
-    'CSharp',
-    'JavaScript',
-    'Java',
-    'Objective-C',
-    'Go',
-    'PowerShell'
-  ];
+  const supportedLanguages = {
+    '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 <Pivot>{renderSnippets(supportedLanguages)}</Pivot>;
 }

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

@@ -11,27 +11,38 @@ 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';
+import { componentNames, telemetry } from '../../../../telemetry';
 
 interface ISnippetProps {
   language: string;
+  snippetInfo: ISupportedLanguages;
 }
 
-export function renderSnippets(supportedLanguages: string[]) {
-  return supportedLanguages.map((language: string) => (
+interface ISupportedLanguages {
+  [language: string]: {
+    sdkDownloadLink: string;
+    sdkDocLink: string;
+  };
+}
+
+export function renderSnippets(supportedLanguages: ISupportedLanguages) {
+  return Object.keys(supportedLanguages).map((language: string) => (
     <PivotItem
       key={language}
       headerText={language}
       headerButtonProps={{
         'aria-controls': `${language}-tab`
       }}
     >
-      <Snippet language={language} />
+      <Snippet language={language} snippetInfo={supportedLanguages} />
     </PivotItem>
   ));
 }
 
 function Snippet(props: ISnippetProps) {
   let { language } = props;
+  const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
 
   /**
    * Converting language lowercase so that we won't have to call toLowerCase() in multiple places.
@@ -59,6 +70,42 @@ function Snippet(props: ISnippetProps) {
     dispatch(getSnippet(language));
   }, [sampleQuery.sampleUrl]);
 
+  const setCommentSymbol = (): string => {
+    return language.trim() === 'powershell' ? '#' : '//';
+  }
+
+  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 (
+      <div style={{marginLeft: '28px', color: '#008000',
+        fontFamily: 'Consolas, monospace', font: '11px', lineHeight: '1.5'}}>
+
+        {setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')}
+
+        <a style={{color: '#008000'}} href={sdkDownloadLink}
+          onClick={(e) => trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'}
+          rel='noreferrer noopener'>
+          {sdkDownloadLink}
+        </a>
+        <br />
+
+        {setCommentSymbol()} {translateMessage('SDKs documentation')}
+
+        <a style={{color: '#008000'}} href={sdkDocLink}
+          onClick={(e) => trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener' >
+          {sdkDocLink}
+        </a>
+
+      </div>
+    )
+  }
+
   return (
     <div style={{ display: 'block' }} id={`${language}-tab`}>
       {loadingState &&
@@ -74,6 +121,7 @@ function Snippet(props: ISnippetProps) {
             language={language}
             readOnly={true}
             height={height}
+            extraInfoElement={extraSnippetInformation()}
           />
         </>
       }

src/messages/GE.json

@@ -431,5 +431,8 @@
   "Invalid version in URL": "Invalid version in URL",
   "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"
+  "Failed to get profile information": "Failed to get profile information",
+  "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 "
 }

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';