From 3de1516432a1201af5611c133388f537bba0f130 Mon Sep 17 00:00:00 2001 From: Elinor Date: Wed, 9 Aug 2023 16:51:45 +0300 Subject: [PATCH 1/5] Add extra comments as part of the snippets --- src/app/views/common/monaco/Monaco.tsx | 5 +-- .../snippets/Snippets.styles.ts | 16 -------- .../snippets/snippets-helper.tsx | 37 +++++-------------- 3 files changed, 11 insertions(+), 47 deletions(-) delete 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 9e1bf36708..a87a1b421a 100644 --- a/src/app/views/common/monaco/Monaco.tsx +++ b/src/app/views/common/monaco/Monaco.tsx @@ -14,7 +14,6 @@ interface IMonaco { language?: string; readOnly?: boolean; height?: string; - extraInfoElement?: JSX.Element; } export function Monaco(props: IMonaco) { @@ -41,9 +40,9 @@ export function Monaco(props: IMonaco) { }, [monaco]); return ( - +
- {props.extraInfoElement} + {/* {props.extraInfoElement} */} {(theme) => ( { - 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 54ca4f57d1..ec7c7fdd99 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 { getTheme, ITheme, Label, Link, PivotItem } from '@fluentui/react'; +import { Label, PivotItem } from '@fluentui/react'; import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; @@ -13,7 +13,6 @@ import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names import { translateMessage } from '../../../utils/translate-messages'; import { CopyButton } from '../../common/copy/CopyButton'; import { convertVhToPx, getResponseHeight } from '../../common/dimensions/dimensions-adjustment'; -import { getSnippetStyles } from './Snippets.styles'; interface ISnippetProps { language: string; @@ -85,7 +84,7 @@ function Snippet(props: ISnippetProps) { }, [sampleQuery.sampleUrl]); const setCommentSymbol = (): string => { - return language.trim() === 'powershell' ? '#' : '//'; + return (language.trim() === 'powershell' || language.trim() === 'python') ? '#' : '//'; } const trackLinkClickedEvent = (link: string, e:any) => { @@ -102,29 +101,12 @@ function Snippet(props: ISnippetProps) { return componentName || '' ; } - const addExtraSnippetInformation = () : JSX.Element => { - const currentTheme: ITheme = getTheme(); - const snippetLinkStyles = getSnippetStyles(currentTheme); - const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments; - return ( -
- - {setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')} - - trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'> - {sdkDownloadLink} - -
- - {setCommentSymbol()} {translateMessage('SDKs documentation')} - - trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener'> - {sdkDocLink} - -
- ); + const addExtraSnippetInformation = () : string => { + const clientLibraryLink = + // eslint-disable-next-line max-len + `\n${setCommentSymbol()} ${translateMessage('Leverage libraries')} ${language} ${translateMessage('Client library')} ${sdkDownloadLink}\n` + const sdkLink = `${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\n` + return clientLibraryLink + sdkLink ; } const displayError = (): JSX.Element | null => { @@ -165,11 +147,10 @@ function Snippet(props: ISnippetProps) { <> } From 42e18349c638d85e26e3ffa8ef3181cfb8585990 Mon Sep 17 00:00:00 2001 From: Elinor Date: Wed, 9 Aug 2023 17:15:03 +0300 Subject: [PATCH 2/5] remove unused code --- src/app/views/common/monaco/Monaco.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/views/common/monaco/Monaco.tsx b/src/app/views/common/monaco/Monaco.tsx index a87a1b421a..e9a10fc991 100644 --- a/src/app/views/common/monaco/Monaco.tsx +++ b/src/app/views/common/monaco/Monaco.tsx @@ -42,7 +42,6 @@ export function Monaco(props: IMonaco) { return (
- {/* {props.extraInfoElement} */} {(theme) => ( Date: Wed, 9 Aug 2023 17:22:12 +0300 Subject: [PATCH 3/5] add php tag --- src/app/views/query-response/snippets/snippets-helper.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index ec7c7fdd99..50da0a94f5 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -106,6 +106,9 @@ function Snippet(props: ISnippetProps) { // eslint-disable-next-line max-len `\n${setCommentSymbol()} ${translateMessage('Leverage libraries')} ${language} ${translateMessage('Client library')} ${sdkDownloadLink}\n` const sdkLink = `${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\n` + if (language === 'php') { + return ' Date: Tue, 15 Aug 2023 11:01:54 +0300 Subject: [PATCH 4/5] return extra info element --- src/app/views/common/monaco/Monaco.tsx | 4 +- .../snippets/snippets-helper.tsx | 38 +++++++++++++------ 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/app/views/common/monaco/Monaco.tsx b/src/app/views/common/monaco/Monaco.tsx index e9a10fc991..34f6333c4f 100644 --- a/src/app/views/common/monaco/Monaco.tsx +++ b/src/app/views/common/monaco/Monaco.tsx @@ -14,6 +14,7 @@ interface IMonaco { language?: string; readOnly?: boolean; height?: string; + extraInfoElement?: JSX.Element; } export function Monaco(props: IMonaco) { @@ -40,8 +41,9 @@ export function Monaco(props: IMonaco) { }, [monaco]); return ( - +
+ {props.extraInfoElement} {(theme) => ( { - const clientLibraryLink = - // eslint-disable-next-line max-len - `\n${setCommentSymbol()} ${translateMessage('Leverage libraries')} ${language} ${translateMessage('Client library')} ${sdkDownloadLink}\n` - const sdkLink = `${setCommentSymbol()} ${translateMessage('SDKs documentation')} ${sdkDocLink}\n` - if (language === 'php') { - return ' { + const currentTheme: ITheme = getTheme(); + const snippetLinkStyles = getSnippetStyles(currentTheme); + const snippetCommentStyles = getSnippetStyles(currentTheme).snippetComments; + return ( +
+ + {setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')} + + trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'> + {sdkDownloadLink} + +
+ + {setCommentSymbol()} {translateMessage('SDKs documentation')} + + trackLinkClickedEvent(sdkDocLink, e)} target={'_blank'} rel='noreferrer noopener'> + {sdkDocLink} + +
+ ); } const displayError = (): JSX.Element | null => { @@ -150,10 +165,11 @@ function Snippet(props: ISnippetProps) { <> } From 8c3874d4a17645a01eaf49a5af887100d1380e93 Mon Sep 17 00:00:00 2001 From: Elinor Date: Tue, 15 Aug 2023 11:02:03 +0300 Subject: [PATCH 5/5] change font size --- .../query-response/snippets/Snippets.styles.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/app/views/query-response/snippets/Snippets.styles.ts 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 0000000000..3dfb919104 --- /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,"Courier new", monospace', + fontSize: '14px', + lineHeight: '1.5' + } + } +} \ No newline at end of file