diff options
Diffstat (limited to 'server/sonar-web')
10 files changed, 602 insertions, 44 deletions
diff --git a/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx b/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx index 015b567447e..502cc4a9eae 100644 --- a/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx +++ b/server/sonar-web/design-system/src/components/CodeSyntaxHighlighter.tsx @@ -25,6 +25,7 @@ import cobol from 'highlightjs-cobol'; import abap from 'highlightjs-sap-abap'; import tw from 'twin.macro'; import { themeColor, themeContrast } from '../helpers/theme'; +import { hljsUnderlinePlugin } from '../sonar-aligned/hljs/HljsUnderlinePlugin'; hljs.registerLanguage('abap', abap); hljs.registerLanguage('apex', apex); @@ -38,6 +39,8 @@ hljs.registerAliases('secrets', { languageName: 'markdown' }); hljs.registerAliases('web', { languageName: 'xml' }); hljs.registerAliases(['cloudformation', 'kubernetes'], { languageName: 'yaml' }); +hljs.addPlugin(hljsUnderlinePlugin); + interface Props { className?: string; htmlAsString: string; @@ -153,6 +156,13 @@ const StyledSpan = styled.span` color: ${themeColor('codeSnippetPreprocessingDirective')}; } + .sonar-underline { + text-decoration: underline ${themeColor('codeLineIssueSquiggle')}; + text-decoration: underline ${themeColor('codeLineIssueSquiggle')} wavy; + text-decoration-thickness: 2px; + text-decoration-skip-ink: none; + } + &.code-wrap { ${tw`sw-whitespace-pre-wrap`} ${tw`sw-break-all`} diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap index 905780b769e..838e266cad2 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap @@ -147,6 +147,15 @@ exports[`should highlight code content correctly 1`] = ` color: rgb(47,103,48); } +.emotion-6 .sonar-underline { + -webkit-text-decoration: underline rgb(253,162,155); + text-decoration: underline rgb(253,162,155); + -webkit-text-decoration: underline rgb(253,162,155) wavy; + text-decoration: underline rgb(253,162,155) wavy; + text-decoration-thickness: 2px; + text-decoration-skip-ink: none; +} + .emotion-6.code-wrap { white-space: pre-wrap; word-break: break-all; @@ -352,6 +361,15 @@ exports[`should show full size when multiline with no editing 1`] = ` color: rgb(47,103,48); } +.emotion-6 .sonar-underline { + -webkit-text-decoration: underline rgb(253,162,155); + text-decoration: underline rgb(253,162,155); + -webkit-text-decoration: underline rgb(253,162,155) wavy; + text-decoration: underline rgb(253,162,155) wavy; + text-decoration-thickness: 2px; + text-decoration-skip-ink: none; +} + .emotion-6.code-wrap { white-space: pre-wrap; word-break: break-all; @@ -561,6 +579,15 @@ exports[`should show reduced size when single line with no editing 1`] = ` color: rgb(47,103,48); } +.emotion-6 .sonar-underline { + -webkit-text-decoration: underline rgb(253,162,155); + text-decoration: underline rgb(253,162,155); + -webkit-text-decoration: underline rgb(253,162,155) wavy; + text-decoration: underline rgb(253,162,155) wavy; + text-decoration-thickness: 2px; + text-decoration-skip-ink: none; +} + .emotion-6.code-wrap { white-space: pre-wrap; word-break: break-all; diff --git a/server/sonar-web/design-system/src/sonar-aligned/hljs/HljsUnderlinePlugin.ts b/server/sonar-web/design-system/src/sonar-aligned/hljs/HljsUnderlinePlugin.ts new file mode 100644 index 00000000000..e1aec179d9a --- /dev/null +++ b/server/sonar-web/design-system/src/sonar-aligned/hljs/HljsUnderlinePlugin.ts @@ -0,0 +1,203 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import { HighlightResult } from 'highlight.js'; + +interface UnderlineRangePosition { + cursorOffset: number; + line: number; +} + +interface UnderlineRange { + end: UnderlineRangePosition; + start: UnderlineRangePosition; +} + +export class HljsUnderlinePlugin { + static readonly SPAN_REGEX = '<\\/?span[^>]*>'; + + static readonly TOKEN_PREFIX = 'SNR_TGXRJVF'; // Random string to avoid conflicts with real code + + static readonly TOKEN_SUFFIX_START = '_START'; + + static readonly TOKEN_SUFFIX_END = '_END'; + + static readonly TOKEN_START = + HljsUnderlinePlugin.TOKEN_PREFIX + HljsUnderlinePlugin.TOKEN_SUFFIX_START; + + static readonly TOKEN_END = + HljsUnderlinePlugin.TOKEN_PREFIX + HljsUnderlinePlugin.TOKEN_SUFFIX_END; + + static readonly OPEN_TAG = '<span data-testid="hljs-sonar-underline" class="sonar-underline">'; + + static readonly CLOSE_TAG = '</span>'; + + /** + * Add a pair of tokens to the source code to mark the start and end of the content to be underlined. + */ + tokenize(source: string[], ranges: UnderlineRange[]): string[] { + // Order ranges by start position, ascending + ranges.sort((a, b) => { + if (a.start.line === b.start.line) { + return a.start.cursorOffset - b.start.cursorOffset; + } + return a.start.line - b.start.line; + }); + + // We want to merge overlapping ranges to ensure the underline markup doesn't intesect with itself in the after hook + const simplifiedRanges: UnderlineRange[] = []; + let currentRange = ranges[0]; + for (let i = 1; i < ranges.length; i++) { + const nextRange = ranges[i]; + + if ( + currentRange.start.line <= nextRange.start.line && + currentRange.start.cursorOffset <= nextRange.start.cursorOffset && + currentRange.end.line >= nextRange.end.line && + currentRange.end.cursorOffset >= nextRange.end.cursorOffset + ) { + // Range is contained in the current range. Do nothing + } else if ( + currentRange.end.line >= nextRange.start.line && + currentRange.end.cursorOffset >= nextRange.start.cursorOffset + ) { + // Ranges overlap + currentRange.end = nextRange.end; + } else { + simplifiedRanges.push(currentRange); + currentRange = nextRange; + } + } + simplifiedRanges.push(currentRange); + + // Add tokens to the source code, from the end to the start to avoid messing up the indices + for (let i = simplifiedRanges.length - 1; i >= 0; i--) { + const range = simplifiedRanges[i]; + + source[range.end.line] = [ + source[range.end.line].slice(0, range.end.cursorOffset), + HljsUnderlinePlugin.TOKEN_END, + source[range.end.line].slice(range.end.cursorOffset), + ].join(''); + + // If there are lines between the start and end, we re-tokenize each line + if (range.end.line !== range.start.line) { + source[range.end.line] = HljsUnderlinePlugin.TOKEN_START + source[range.end.line]; + for (let j = range.end.line - 1; j > range.start.line; j--) { + source[j] = [ + HljsUnderlinePlugin.TOKEN_START, + source[j], + HljsUnderlinePlugin.TOKEN_END, + ].join(''); + } + source[range.start.line] += HljsUnderlinePlugin.TOKEN_END; + } + + source[range.start.line] = [ + source[range.start.line].slice(0, range.start.cursorOffset), + HljsUnderlinePlugin.TOKEN_START, + source[range.start.line].slice(range.start.cursorOffset), + ].join(''); + } + + return source; + } + + 'after:highlight'(result: HighlightResult) { + const re = new RegExp(HljsUnderlinePlugin.TOKEN_START, 'g'); + re.lastIndex = 0; + let match = re.exec(result.value); + while (match) { + result.value = this.replaceTokens(result.value, match.index); + match = re.exec(result.value); + } + } + + /** + * Whether the content is intersecting with HTML <span> tags added by HLJS or this plugin. + */ + isIntersectingHtmlMarkup(content: string) { + const re = new RegExp(HljsUnderlinePlugin.SPAN_REGEX, 'g'); + let depth = 0; + let intersecting = false; + let tag = re.exec(content); + while (tag) { + if (tag[0].startsWith('</')) { + depth--; + } else { + depth++; + } + + // If at any point we're closing one-too-many tag, we're intersecting + if (depth < 0) { + intersecting = true; + break; + } + + tag = re.exec(content); + } + + // If at the end we're not at 0, we're intersecting + intersecting = intersecting || depth !== 0; + + return intersecting; + } + + /** + * Replace a pair of tokens and everything between with the appropriate HTML markup to underline the content. + */ + private replaceTokens(htmlMarkup: string, startTokenIndex: number) { + const endTagIndex = htmlMarkup.indexOf(HljsUnderlinePlugin.TOKEN_END); + + // Just in case the end tag is before the start tag (or the end tag isn't found) + if (endTagIndex <= startTokenIndex) { + return htmlMarkup; + } + + let content = htmlMarkup.slice( + startTokenIndex + HljsUnderlinePlugin.TOKEN_START.length, + endTagIndex, + ); + + // If intersecting, we highlight in a safe way + // We could always use this method, but this creates visual artifacts in the underline wave + if (this.isIntersectingHtmlMarkup(content)) { + content = content.replace( + new RegExp(HljsUnderlinePlugin.SPAN_REGEX, 'g'), + (tag) => `${HljsUnderlinePlugin.CLOSE_TAG}${tag}${HljsUnderlinePlugin.OPEN_TAG}`, + ); + } + + // If no intersection, it's safe to add the tags + const stringRegex = [ + HljsUnderlinePlugin.TOKEN_START, + '(.+?)', + HljsUnderlinePlugin.TOKEN_END, + ].join(''); + htmlMarkup = htmlMarkup.replace( + new RegExp(stringRegex, 's'), + `${HljsUnderlinePlugin.OPEN_TAG}${content}${HljsUnderlinePlugin.CLOSE_TAG}`, + ); + + return htmlMarkup; + } +} + +const hljsUnderlinePlugin = new HljsUnderlinePlugin(); +export { hljsUnderlinePlugin }; diff --git a/server/sonar-web/design-system/src/sonar-aligned/hljs/__tests__/HljsUnderlinePlugin-test.ts b/server/sonar-web/design-system/src/sonar-aligned/hljs/__tests__/HljsUnderlinePlugin-test.ts new file mode 100644 index 00000000000..5e3b0db0ff2 --- /dev/null +++ b/server/sonar-web/design-system/src/sonar-aligned/hljs/__tests__/HljsUnderlinePlugin-test.ts @@ -0,0 +1,187 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import { HighlightResult } from 'highlight.js'; +import { HljsUnderlinePlugin, hljsUnderlinePlugin } from '../HljsUnderlinePlugin'; + +const START_TOKEN = HljsUnderlinePlugin.TOKEN_START; +const END_TOKEN = HljsUnderlinePlugin.TOKEN_END; + +describe('should add tokens', () => { + it('with multiple overlapping ranges', () => { + expect( + hljsUnderlinePlugin.tokenize( + ['line1', 'line2', 'line3', 'line4', 'line5'], + [ + { + start: { line: 1, cursorOffset: 2 }, + end: { line: 2, cursorOffset: 2 }, + }, + { + start: { line: 3, cursorOffset: 2 }, + end: { line: 3, cursorOffset: 4 }, + }, + { + start: { line: 1, cursorOffset: 1 }, + end: { line: 1, cursorOffset: 3 }, + }, + ], + ), + ).toEqual([ + 'line1', + `l${START_TOKEN}ine2${END_TOKEN}`, + `${START_TOKEN}li${END_TOKEN}ne3`, + `li${START_TOKEN}ne${END_TOKEN}4`, + 'line5', + ]); + }); + + it('highlight multiple issues on the same line', () => { + expect( + hljsUnderlinePlugin.tokenize( + ['line1', 'line2', 'line3', 'line4', 'line5'], + [ + { + start: { line: 1, cursorOffset: 1 }, + end: { line: 1, cursorOffset: 2 }, + }, + { + start: { line: 1, cursorOffset: 3 }, + end: { line: 1, cursorOffset: 4 }, + }, + ], + ), + ).toEqual([ + 'line1', + `l${START_TOKEN}i${END_TOKEN}n${START_TOKEN}e${END_TOKEN}2`, + 'line3', + 'line4', + 'line5', + ]); + }); + + it('highlight multiple successive lines', () => { + expect( + hljsUnderlinePlugin.tokenize( + ['line1', 'line2', 'line3', 'line4', 'line5'], + [ + { + start: { line: 1, cursorOffset: 2 }, + end: { line: 4, cursorOffset: 4 }, + }, + ], + ), + ).toEqual([ + 'line1', + `li${START_TOKEN}ne2${END_TOKEN}`, + `${START_TOKEN}line3${END_TOKEN}`, + `${START_TOKEN}line4${END_TOKEN}`, + `${START_TOKEN}line${END_TOKEN}5`, + ]); + }); +}); + +describe('should detect html markup intersection', () => { + it.each([ + '... <span a="b"> ....', + '... </span> ...', + '<span> ...', + '... </span>', + '... </span> ... <span a="b"> ...', + '... <span><span a="b"> ... </span> ...', + '... <span> ... <span a="b"> ... </span> ... </span> ... </span> ...', + ])('should detect intersection (%s)', (code) => { + expect(hljsUnderlinePlugin.isIntersectingHtmlMarkup(code)).toBe(true); + }); + + it.each([ + '... <span a="b"> ... </span> ...', + '<span> ... </span> ... <span> ... <span class="abc"><span> ... </span></span> ... </span>', + ])('should not detect intersection (%s)', (code) => { + expect(hljsUnderlinePlugin.isIntersectingHtmlMarkup(code)).toBe(false); + }); +}); + +describe('underline plugin should work', () => { + it('should underline on different lines', () => { + const result = { + value: ['line1', `l${START_TOKEN}ine2`, 'line3', `lin${END_TOKEN}e4`, 'line5'].join('\n'), + } as HighlightResult; + + hljsUnderlinePlugin['after:highlight'](result); + + expect(result.value).toEqual( + [ + 'line1', + `l${HljsUnderlinePlugin.OPEN_TAG}ine2`, + 'line3', + `lin${HljsUnderlinePlugin.CLOSE_TAG}e4`, + 'line5', + ].join('\n'), + ); + }); + + it('should underline on same lines', () => { + const result = { + value: ['line1', `l${START_TOKEN}ine${END_TOKEN}2`, 'line3'].join('\n'), + } as HighlightResult; + + hljsUnderlinePlugin['after:highlight'](result); + + expect(result.value).toEqual( + [ + 'line1', + `l${HljsUnderlinePlugin.OPEN_TAG}ine${HljsUnderlinePlugin.CLOSE_TAG}2`, + 'line3', + ].join('\n'), + ); + }); + + it('should not underline if end tag is before start tag', () => { + const result = { + value: ['line1', `l${END_TOKEN}ine${START_TOKEN}2`, 'line3'].join('\n'), + } as HighlightResult; + + hljsUnderlinePlugin['after:highlight'](result); + + expect(result.value).toEqual(['line1', `l${END_TOKEN}ine${START_TOKEN}2`, 'line3'].join('\n')); + }); + + it('should not underline if there is no end tag', () => { + const result = { + value: ['line1', `l${START_TOKEN}ine2`, 'line3'].join('\n'), + } as HighlightResult; + + hljsUnderlinePlugin['after:highlight'](result); + + expect(result.value).toEqual(['line1', `l${START_TOKEN}ine2`, 'line3'].join('\n')); + }); + + it('should underline even when intersecting html markup', () => { + const result = { + value: `.. <span class="hljs-keyword"> .${START_TOKEN}. <span class="hljs-keyword"> .. </span> .. </span> .. ${END_TOKEN} ..`, + } as HighlightResult; + + hljsUnderlinePlugin['after:highlight'](result); + + expect(result.value).toEqual( + `.. <span class="hljs-keyword"> .${HljsUnderlinePlugin.OPEN_TAG}. ${HljsUnderlinePlugin.CLOSE_TAG}<span class="hljs-keyword">${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG}</span>${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG}</span>${HljsUnderlinePlugin.OPEN_TAG} .. ${HljsUnderlinePlugin.CLOSE_TAG} ..`, + ); + }); +}); diff --git a/server/sonar-web/design-system/src/sonar-aligned/hljs/index.ts b/server/sonar-web/design-system/src/sonar-aligned/hljs/index.ts new file mode 100644 index 00000000000..b7394666777 --- /dev/null +++ b/server/sonar-web/design-system/src/sonar-aligned/hljs/index.ts @@ -0,0 +1,20 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +export { hljsUnderlinePlugin } from './HljsUnderlinePlugin'; diff --git a/server/sonar-web/design-system/src/sonar-aligned/index.ts b/server/sonar-web/design-system/src/sonar-aligned/index.ts index 380e82087fb..2a116ed0d06 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/index.ts +++ b/server/sonar-web/design-system/src/sonar-aligned/index.ts @@ -20,4 +20,5 @@ export * from './components'; export * from './helpers'; +export * from './hljs'; export * from './types'; diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx index 6481815bebf..6b220276678 100644 --- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx +++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesSourceViewer-it.tsx @@ -71,8 +71,8 @@ const JUPYTER_ISSUE = { textRange: { startLine: 1, endLine: 1, - startOffset: 1142, - endOffset: 1144, + startOffset: 1148, + endOffset: 1159, }, ruleDescriptionContextKey: 'spring', ruleStatus: 'DEPRECATED', @@ -185,6 +185,35 @@ describe('issues source viewer', () => { expect(screen.getByText('issue.preview.jupyter_notebook.error')).toBeInTheDocument(); }); + it('should render error when jupyter issue can not be found', async () => { + issuesHandler.setIssueList([ + { + ...JUPYTER_ISSUE, + issue: { + ...JUPYTER_ISSUE.issue, + textRange: { + startLine: 2, + endLine: 2, + startOffset: 1, + endOffset: 1, + }, + }, + }, + ]); + renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject'); + await waitOnDataLoaded(); + + // Preview tab should be shown + expect(ui.preview.get()).toBeChecked(); + expect(ui.code.get()).toBeInTheDocument(); + + expect( + await screen.findByRole('button', { name: 'Issue on Jupyter Notebook' }), + ).toBeInTheDocument(); + + expect(screen.getByText('issue.preview.jupyter_notebook.error')).toBeInTheDocument(); + }); + it('should show preview tab when jupyter notebook issue', async () => { issuesHandler.setIssueList([JUPYTER_ISSUE]); renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject'); @@ -199,6 +228,44 @@ describe('issues source viewer', () => { ).toBeInTheDocument(); expect(screen.queryByText('issue.preview.jupyter_notebook.error')).not.toBeInTheDocument(); + expect(screen.getByTestId('hljs-sonar-underline')).toHaveTextContent('matplotlib'); + expect(screen.getByText(/pylab/, { exact: false })).toBeInTheDocument(); + }); + + it('should render issue in jupyter notebook spanning over multiple cells', async () => { + issuesHandler.setIssueList([ + { + ...JUPYTER_ISSUE, + issue: { + ...JUPYTER_ISSUE.issue, + textRange: { + startLine: 1, + endLine: 1, + startOffset: 571, + endOffset: JUPYTER_ISSUE.issue.textRange!.endOffset, + }, + }, + }, + ]); + renderProjectIssuesApp('project/issues?issues=some-issue&open=some-issue&id=myproject'); + await waitOnDataLoaded(); + + // Preview tab should be shown + expect(ui.preview.get()).toBeChecked(); + expect(ui.code.get()).toBeInTheDocument(); + + expect( + await screen.findByRole('button', { name: 'Issue on Jupyter Notebook' }), + ).toBeInTheDocument(); + + expect(screen.queryByText('issue.preview.jupyter_notebook.error')).not.toBeInTheDocument(); + + const underlined = screen.getAllByTestId('hljs-sonar-underline'); + expect(underlined).toHaveLength(4); + expect(underlined[0]).toHaveTextContent('print train.shape'); + expect(underlined[1]).toHaveTextContent('print test.shap'); + expect(underlined[2]).toHaveTextContent('import pylab as pl'); + expect(underlined[3]).toHaveTextContent('%matplotlib'); }); }); }); diff --git a/server/sonar-web/src/main/js/apps/issues/jupyter-notebook/JupyterNotebookIssueViewer.tsx b/server/sonar-web/src/main/js/apps/issues/jupyter-notebook/JupyterNotebookIssueViewer.tsx index 2bf80cdd209..66e5f7bd168 100644 --- a/server/sonar-web/src/main/js/apps/issues/jupyter-notebook/JupyterNotebookIssueViewer.tsx +++ b/server/sonar-web/src/main/js/apps/issues/jupyter-notebook/JupyterNotebookIssueViewer.tsx @@ -17,10 +17,15 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { INotebookContent } from '@jupyterlab/nbformat'; +import { ICell, INotebookContent } from '@jupyterlab/nbformat'; import { Spinner } from '@sonarsource/echoes-react'; -import { FlagMessage, IssueMessageHighlighting, LineFinding } from 'design-system'; -import React, { useMemo } from 'react'; +import { + FlagMessage, + hljsUnderlinePlugin, + IssueMessageHighlighting, + LineFinding, +} from 'design-system'; +import React from 'react'; import { JupyterCell } from '~sonar-aligned/components/SourceViewer/JupyterNotebookViewer'; import { getBranchLikeQuery } from '~sonar-aligned/helpers/branch-like'; import { JsonIssueMapper } from '~sonar-aligned/helpers/json-issue-mapper'; @@ -28,7 +33,6 @@ import { translate } from '../../../helpers/l10n'; import { useRawSourceQuery } from '../../../queries/sources'; import { BranchLike } from '../../../types/branch-like'; import { Issue } from '../../../types/types'; -import { JupyterNotebookCursorPath } from './types'; import { pathToCursorInCell } from './utils'; export interface JupyterNotebookIssueViewerProps { @@ -42,26 +46,18 @@ export function JupyterNotebookIssueViewer(props: Readonly<JupyterNotebookIssueV key: issue.component, ...getBranchLikeQuery(branchLike), }); - const [startOffset, setStartOffset] = React.useState<JupyterNotebookCursorPath | null>(null); - const [endPath, setEndPath] = React.useState<JupyterNotebookCursorPath | null>(null); - - const jupyterNotebook = useMemo(() => { - if (typeof data !== 'string') { - return null; - } - try { - return JSON.parse(data) as INotebookContent; - } catch (error) { - return null; - } - }, [data]); + const [renderedCells, setRenderedCells] = React.useState<ICell[] | null>(null); React.useEffect(() => { - if (typeof data !== 'string') { + if (!issue.textRange || typeof data !== 'string') { return; } - if (!issue.textRange) { + let jupyterNotebook: INotebookContent; + try { + jupyterNotebook = JSON.parse(data); + } catch (error) { + setRenderedCells(null); return; } @@ -76,22 +72,56 @@ export function JupyterNotebookIssueViewer(props: Readonly<JupyterNotebookIssueV ); const startOffset = pathToCursorInCell(mapper.get(start)); const endOffset = pathToCursorInCell(mapper.get(end)); - if ( - startOffset && - endOffset && - startOffset.cell === endOffset.cell && - startOffset.line === endOffset.line - ) { - setStartOffset(startOffset); - setEndPath(endOffset); + if (!startOffset || !endOffset) { + setRenderedCells(null); + return; } + + if (startOffset.cell === endOffset.cell) { + const startCell = jupyterNotebook.cells[startOffset.cell]; + startCell.source = Array.isArray(startCell.source) ? startCell.source : [startCell.source]; + startCell.source = hljsUnderlinePlugin.tokenize(startCell.source, [ + { + start: startOffset, + end: endOffset, + }, + ]); + } else { + // Each cell is a separate code block, so we have to underline them separately + // We underilne the first cell from the start offset to the end of the cell, and the last cell from the start of the cell to the end offset + const startCell = jupyterNotebook.cells[startOffset.cell]; + startCell.source = Array.isArray(startCell.source) ? startCell.source : [startCell.source]; + startCell.source = hljsUnderlinePlugin.tokenize(startCell.source, [ + { + start: startOffset, + end: { + line: startCell.source.length - 1, + cursorOffset: startCell.source[startCell.source.length - 1].length, + }, + }, + ]); + const endCell = jupyterNotebook.cells[endOffset.cell]; + endCell.source = Array.isArray(endCell.source) ? endCell.source : [endCell.source]; + endCell.source = hljsUnderlinePlugin.tokenize(endCell.source, [ + { + start: { line: 0, cursorOffset: 0 }, + end: endOffset, + }, + ]); + } + + const cells = Array.from(new Set([startOffset.cell, endOffset.cell])).map( + (cellIndex) => jupyterNotebook.cells[cellIndex], + ); + + setRenderedCells(cells); }, [issue, data]); if (isLoading) { return <Spinner />; } - if (!jupyterNotebook || !startOffset || !endPath) { + if (!renderedCells) { return ( <FlagMessage className="sw-mt-2" variant="warning"> {translate('issue.preview.jupyter_notebook.error')} @@ -99,11 +129,6 @@ export function JupyterNotebookIssueViewer(props: Readonly<JupyterNotebookIssueV ); } - // Cells to display - const cells = Array.from(new Set([startOffset.cell, endPath.cell])).map( - (cellIndex) => jupyterNotebook.cells[cellIndex], - ); - return ( <> <LineFinding @@ -116,7 +141,7 @@ export function JupyterNotebookIssueViewer(props: Readonly<JupyterNotebookIssueV } selected /> - {cells.map((cell, index) => ( + {renderedCells.map((cell, index) => ( <JupyterCell key={'cell-' + index} cell={cell} /> ))} </> diff --git a/server/sonar-web/src/main/js/sonar-aligned/helpers/__tests__/json-issue-mapper-test.ts b/server/sonar-web/src/main/js/sonar-aligned/helpers/__tests__/json-issue-mapper-test.ts index 3bfd497964a..83cbddda97f 100644 --- a/server/sonar-web/src/main/js/sonar-aligned/helpers/__tests__/json-issue-mapper-test.ts +++ b/server/sonar-web/src/main/js/sonar-aligned/helpers/__tests__/json-issue-mapper-test.ts @@ -107,7 +107,7 @@ describe('JsonIssueMapper', () => { { type: 'array', index: 1 }, { type: 'object', key: 'data' }, { type: 'object', key: 'image/png' }, - { type: 'string', index: 23 }, + { type: 'string', index: 24 }, ]); }); @@ -119,7 +119,7 @@ describe('JsonIssueMapper', () => { { type: 'array', index: 1 }, { type: 'object', key: 'source' }, { type: 'array', index: 8 }, - { type: 'string', index: 14 }, + { type: 'string', index: 15 }, ]); }); }); diff --git a/server/sonar-web/src/main/js/sonar-aligned/helpers/json-issue-mapper.ts b/server/sonar-web/src/main/js/sonar-aligned/helpers/json-issue-mapper.ts index c80d074f19d..adb16a3756a 100644 --- a/server/sonar-web/src/main/js/sonar-aligned/helpers/json-issue-mapper.ts +++ b/server/sonar-web/src/main/js/sonar-aligned/helpers/json-issue-mapper.ts @@ -234,6 +234,29 @@ export class JsonIssueMapper { }; } + private getStringCursorIndex(firstQuoteIndex: number, endQuoteIndex: number): number { + const index = this.cursorPosition - firstQuoteIndex; + + // We make it such that if the cursor is on a quote, it is considered to be within the string + if (index <= 0) { + return 0; + } + + let count = 0; + let i = 0; + while (i < index) { + // Ignore escaped quotes + if (this.code[firstQuoteIndex + i] === '\\' && this.code[firstQuoteIndex + i + 1] === '"') { + i += 2; + } else { + i += 1; + } + count++; + } + + return Math.min(count, endQuoteIndex - firstQuoteIndex - 2); + } + /** * Parse a string value. Place the cursor at the end quote. */ @@ -243,14 +266,9 @@ export class JsonIssueMapper { // Cursor within string value if (this.cursorWithin(firstQuoteIndex, endQuoteIndex)) { if (endQuoteIndex - firstQuoteIndex > 1) { - // We make it such that if the cursor is on a quote, it is considered to be within the string - let index = this.cursorPosition - firstQuoteIndex - 1; - index = Math.min(index, endQuoteIndex - firstQuoteIndex - 2); - index = Math.max(0, index); - this.path.push({ type: 'string', - index, + index: this.getStringCursorIndex(firstQuoteIndex, endQuoteIndex), }); } |