"eslint-plugin-local-rules": "1.3.2",
"eslint-plugin-typescript-sort-keys": "2.3.0",
"highlight.js": "11.7.0",
+ "highlightjs-apex": "1.2.0",
+ "highlightjs-cobol": "0.3.3",
+ "highlightjs-sap-abap": "0.2.0",
"history": "5.3.0",
"jest": "29.5.0",
"postcss": "8.4.21",
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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.
+ */
+declare module 'highlightjs-apex' {
+ import { LanguageFn } from 'highlight.js';
+
+ const defineLanguage: LanguageFn;
+ // eslint-disable-next-line import/no-default-export
+ export default defineLanguage;
+}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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.
+ */
+declare module 'highlightjs-sap-abap' {
+ import { LanguageFn } from 'highlight.js';
+
+ const defineLanguage: LanguageFn;
+ // eslint-disable-next-line import/no-default-export
+ export default defineLanguage;
+}
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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 styled from '@emotion/styled';
-import classNames from 'classnames';
-import tw from 'twin.macro';
-import { themeBorder, themeColor } from '../helpers/theme';
-import { isDefined } from '../helpers/types';
-import { Highlighter, RegisteredLanguages } from './Highlighter';
-import { ClipboardButton } from './clipboard';
-
-interface Props {
- className?: string;
- highlight?: boolean;
- isOneLine?: boolean;
- join?: string;
- language?: RegisteredLanguages;
- noCopy?: boolean;
- render?: string;
- snippet: string | Array<string | undefined>;
- toggleEdit?: VoidFunction;
- wrap?: boolean;
-}
-
-// keep this "useless" concatenation for the readability reason
-// eslint-disable-next-line no-useless-concat
-const s = ' \\' + '\n ';
-
-export function CodeSnippet(props: Props) {
- const {
- className,
- isOneLine,
- highlight,
- join = s,
- language,
- noCopy,
- render,
- snippet,
- toggleEdit,
- wrap,
- } = props;
- const snippetArray = Array.isArray(snippet) ? snippet.filter(isDefined) : [snippet];
- const finalSnippet = isOneLine ? snippetArray.join(' ') : snippetArray.join(join);
-
- const isSimpleOneLine = isOneLine && noCopy;
-
- const copyButton = isOneLine ? (
- <StyledSingleLineClipboardButton copyValue={finalSnippet} />
- ) : (
- <StyledClipboardButton copyValue={finalSnippet} />
- );
-
- return (
- <Wrapper
- className={classNames(
- {
- 'code-snippet-highlighted-oneline': isOneLine,
- 'code-snippet-simple-oneline': isSimpleOneLine,
- },
- className,
- 'fs-mask'
- )}
- >
- {!noCopy && copyButton}
- <Highlighter
- code={render ?? finalSnippet}
- highlight={highlight}
- isSimpleOneLine={isSimpleOneLine}
- language={language}
- toggleEdit={isOneLine ? toggleEdit : undefined}
- wrap={wrap}
- />
- </Wrapper>
- );
-}
-
-const Wrapper = styled.div`
- background-color: ${themeColor('codeSnippetBackground')};
- border: ${themeBorder('default', 'codeSnippetBorder')};
-
- ${tw`sw-rounded-2`}
- ${tw`sw-relative`}
- ${tw`sw-my-2`}
-
- &.code-snippet-simple-oneline {
- ${tw`sw-my-0`}
- ${tw`sw-rounded-1`}
- }
-`;
-
-const StyledClipboardButton = styled(ClipboardButton)`
- ${tw`sw-select-none`}
- ${tw`sw-body-sm`}
- ${tw`sw-top-6 sw-right-6`}
- ${tw`sw-absolute`}
-
- .code-snippet-highlighted-oneline & {
- ${tw`sw-bottom-2`}
- }
-`;
-
-const StyledSingleLineClipboardButton = styled(StyledClipboardButton)`
- ${tw`sw-top-6 sw-bottom-6`}
-`;
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 styled from '@emotion/styled';
+import hljs from 'highlight.js';
+import apex from 'highlightjs-apex';
+import cobol from 'highlightjs-cobol';
+import abap from 'highlightjs-sap-abap';
+import tw from 'twin.macro';
+import { themeColor, themeContrast } from '../helpers/theme';
+
+hljs.registerLanguage('abap', abap);
+hljs.registerLanguage('apex', apex);
+hljs.registerLanguage('cobol', cobol);
+
+hljs.registerAliases('azureresourcemanager', { languageName: 'json' });
+hljs.registerAliases('flex', { languageName: 'actionscript' });
+hljs.registerAliases('objc', { languageName: 'objectivec' });
+hljs.registerAliases('plsql', { languageName: 'pgsql' });
+hljs.registerAliases('secrets', { languageName: 'markdown' });
+hljs.registerAliases('web', { languageName: 'xml' });
+hljs.registerAliases(['cloudformation', 'kubernetes'], { languageName: 'yaml' });
+
+interface Props {
+ className?: string;
+ htmlAsString: string;
+ language?: string;
+}
+
+const CODE_REGEXP = '<(code|pre)\\b([^>]*?)>(.+?)<\\/\\1>';
+const GLOBAL_REGEXP = new RegExp(CODE_REGEXP, 'gs');
+const SINGLE_REGEXP = new RegExp(CODE_REGEXP, 's');
+
+const htmlDecode = (escapedCode: string) => {
+ const doc = new DOMParser().parseFromString(escapedCode, 'text/html');
+
+ return doc.documentElement.textContent ?? '';
+};
+
+export function CodeSyntaxHighlighter({ className, htmlAsString, language }: Props) {
+ let highlightedHtmlAsString = htmlAsString;
+
+ htmlAsString.match(GLOBAL_REGEXP)?.forEach((codeBlock) => {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const [, tag, attributes, code] = SINGLE_REGEXP.exec(codeBlock)!;
+
+ const unescapedCode = htmlDecode(code);
+
+ let highlightedCode;
+
+ try {
+ highlightedCode = hljs.highlight(unescapedCode, {
+ ignoreIllegals: true,
+ language: language ?? 'plaintext',
+ });
+ } catch {
+ highlightedCode = hljs.highlight(unescapedCode, {
+ ignoreIllegals: true,
+ language: 'plaintext',
+ });
+ }
+
+ highlightedHtmlAsString = highlightedHtmlAsString.replace(
+ codeBlock,
+ `<${tag}${attributes}>${highlightedCode.value}</${tag}>`
+ );
+ });
+
+ return (
+ <StyledSpan
+ className={`hljs ${className ?? ''}`}
+ // Safe: value is escaped by highlight.js
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: highlightedHtmlAsString }}
+ />
+ );
+}
+
+const StyledSpan = styled.span`
+ code {
+ ${tw`sw-code`};
+
+ background: ${themeColor('codeSnippetBackground')};
+ color: ${themeColor('codeSnippetBody')};
+
+ &.hljs {
+ padding: unset;
+ }
+ }
+
+ .hljs-meta,
+ .hljs-variable {
+ color: ${themeColor('codeSnippetBody')};
+ }
+
+ .hljs-doctag,
+ .hljs-title,
+ .hljs-title.class_,
+ .hljs-title.function_ {
+ color: ${themeColor('codeSnippetAnnotations')};
+ }
+
+ .hljs-comment {
+ ${tw`sw-code-comment`}
+
+ color: ${themeColor('codeSnippetComments')};
+ }
+
+ .hljs-keyword,
+ .hljs-tag,
+ .hljs-type {
+ color: ${themeColor('codeSnippetKeyword')};
+ }
+
+ .hljs-literal,
+ .hljs-number {
+ color: ${themeColor('codeSnippetConstants')};
+ }
+
+ .hljs-string {
+ color: ${themeColor('codeSnippetString')};
+ }
+
+ .hljs-meta .hljs-keyword {
+ color: ${themeColor('codeSnippetPreprocessingDirective')};
+ }
+
+ mark {
+ ${tw`sw-font-regular`}
+ ${tw`sw-p-1`}
+ ${tw`sw-rounded-1`}
+
+ background-color: ${themeColor('codeSnippetHighlight')};
+ color: ${themeContrast('codeSnippetHighlight')};
+ }
+`;
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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 styled from '@emotion/styled';
-import classNames from 'classnames';
-import hljs from 'highlight.js/lib/core';
-import bash from 'highlight.js/lib/languages/bash';
-import gradle from 'highlight.js/lib/languages/gradle';
-import plaintext from 'highlight.js/lib/languages/plaintext';
-import powershell from 'highlight.js/lib/languages/powershell';
-import properties from 'highlight.js/lib/languages/properties';
-import shell from 'highlight.js/lib/languages/shell';
-import xml from 'highlight.js/lib/languages/xml';
-import yaml from 'highlight.js/lib/languages/yaml';
-import { useMemo } from 'react';
-import tw from 'twin.macro';
-import { translate } from '../helpers/l10n';
-import { themeColor, themeContrast } from '../helpers/theme';
-import { InteractiveIcon } from './InteractiveIcon';
-import { PencilIcon } from './icons';
-
-hljs.registerLanguage('yaml', yaml);
-hljs.registerLanguage('gradle', gradle);
-hljs.registerLanguage('properties', properties);
-hljs.registerLanguage('xml', xml);
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('powershell', powershell);
-hljs.registerLanguage('shell', shell);
-hljs.registerLanguage('plaintext', plaintext);
-
-hljs.addPlugin({
- 'after:highlight': (data) => {
- data.value = data.value
- .replace(/<mark>/g, '<mark>')
- .replace(/<\/mark>/g, '</mark>');
- },
-});
-
-export type RegisteredLanguages =
- | 'bash'
- | 'gradle'
- | 'plaintext'
- | 'powershell'
- | 'properties'
- | 'shell'
- | 'xml'
- | 'yaml';
-
-interface Props {
- className?: string;
- code: string;
- highlight?: boolean;
- isSimpleOneLine?: boolean;
- language?: RegisteredLanguages;
- toggleEdit?: VoidFunction;
- wrap?: boolean;
-}
-
-export function Highlighter({
- className,
- code,
- highlight = true,
- isSimpleOneLine = false,
- language = 'yaml',
- toggleEdit,
- wrap,
-}: Props) {
- const highlighted = useMemo(
- () => hljs.highlight(code, { language: highlight ? language : 'plaintext' }),
- [code, highlight, language]
- );
-
- return (
- <StyledPre
- className={classNames({ 'code-wrap': wrap, 'simple-one-line': isSimpleOneLine }, className)}
- >
- <code
- className={classNames('hljs', { 'sw-inline': toggleEdit })}
- // Safe: value is escaped by highlight.js
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{ __html: highlighted.value }}
- />
- {toggleEdit && (
- <InteractiveIcon
- Icon={PencilIcon}
- aria-label={translate('edit')}
- className="sw-ml-2"
- onClick={toggleEdit}
- />
- )}
- </StyledPre>
- );
-}
-
-const StyledPre = styled.pre`
- ${tw`sw-flex sw-items-center`}
- ${tw`sw-overflow-x-auto`}
- ${tw`sw-p-6`}
-
- code {
- color: ${themeColor('codeSnippetBody')};
- background: ${themeColor('codeSnippetBackground')};
- ${tw`sw-code`};
-
- &.hljs {
- padding: unset;
- }
- }
-
- .hljs-variable,
- .hljs-meta {
- color: ${themeColor('codeSnippetBody')};
- }
-
- .hljs-doctag,
- .hljs-title,
- .hljs-title.class_,
- .hljs-title.function_ {
- color: ${themeColor('codeSnippetAnnotations')};
- }
-
- .hljs-comment {
- color: ${themeColor('codeSnippetComments')};
-
- ${tw`sw-code-comment`}
- }
-
- .hljs-tag,
- .hljs-type,
- .hljs-keyword {
- color: ${themeColor('codeSnippetKeyword')};
-
- ${tw`sw-code-highlight`}
- }
-
- .hljs-literal,
- .hljs-number {
- color: ${themeColor('codeSnippetConstants')};
- }
-
- .hljs-string {
- color: ${themeColor('codeSnippetString')};
- }
-
- .hljs-meta .hljs-keyword {
- color: ${themeColor('codeSnippetPreprocessingDirective')};
- }
-
- &.code-wrap {
- ${tw`sw-whitespace-pre-wrap`}
- ${tw`sw-break-all`}
- }
-
- mark {
- color: ${themeContrast('codeSnippetHighlight')};
- background-color: ${themeColor('codeSnippetHighlight')};
- ${tw`sw-font-regular`}
- ${tw`sw-rounded-1`}
- ${tw`sw-p-1`}
- }
-
- &.simple-one-line {
- ${tw`sw-min-h-[1.25rem]`}
- ${tw`sw-py-0 sw-px-1`}
- }
-`;
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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 { screen } from '@testing-library/react';
-import { HelmetProvider } from 'react-helmet-async';
-import { renderWithContext } from '../../helpers/testUtils';
-import { FCProps } from '../../types/misc';
-import { CodeSnippet } from '../CodeSnippet';
-
-it('should show full size when multiline with no editting', () => {
- const { container } = setupWithProps();
- const copyButton = screen.getByRole('button', { name: 'Copy' });
- expect(copyButton).toHaveStyle('top: 1.5rem');
- expect(container).toMatchSnapshot();
-});
-
-it('should show reduced size when single line with no editting', () => {
- const { container } = setupWithProps({ isOneLine: true, snippet: 'foobar' });
- const copyButton = screen.getByRole('button', { name: 'Copy' });
- expect(copyButton).toHaveStyle('top: 1.5rem');
- expect(container).toMatchSnapshot();
-});
-
-function setupWithProps(props: Partial<FCProps<typeof CodeSnippet>> = {}) {
- return renderWithContext(
- <HelmetProvider>
- <CodeSnippet snippet={'foo\nbar'} {...props} />
- </HelmetProvider>
- );
-}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 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 { render } from '../../helpers/testUtils';
+import { CodeSyntaxHighlighter } from '../CodeSyntaxHighlighter';
+
+it('renders correctly with no code', () => {
+ const { container } = render(
+ <CodeSyntaxHighlighter
+ htmlAsString={`
+ <p>Hello there!</p>
+
+ <p>There's no code here.</p>
+ `}
+ />
+ );
+
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.getElementsByClassName('hljs-string').length).toBe(0);
+});
+
+it('renders correctly with code', () => {
+ const { container } = render(
+ <CodeSyntaxHighlighter
+ htmlAsString={`
+ <p>Hello there!</p>
+
+ <p>There's some <code>"code"</code> here.</p>
+ `}
+ language="typescript"
+ />
+ );
+
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.getElementsByClassName('hljs-string').length).toBe(1);
+});
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2023 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 { renderWithContext } from '../../helpers/testUtils';
-import { FCProps } from '../../types/misc';
-import { Highlighter } from '../Highlighter';
-
-it('renders correctly', () => {
- expect(setupWithProps().container).toMatchSnapshot();
-});
-
-it('should handle multiple lines of code', () => {
- expect(
- setupWithProps({
- code: `foo: bar
- pleh: help
- stuff:
- foo: bar
- bar: foo`,
- language: 'yaml',
- }).container
- ).toMatchSnapshot();
-});
-
-it('should display edit functions', () => {
- expect(
- setupWithProps({ code: 'One line command', toggleEdit: jest.fn() }).container
- ).toMatchSnapshot();
-});
-
-function setupWithProps(props: Partial<FCProps<typeof Highlighter>> = {}) {
- return renderWithContext(<Highlighter code="foo\nbar" {...props} />);
-}
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should show full size when multiline with no editting 1`] = `
-.emotion-0 {
- background-color: rgb(252,252,253);
- border: 1px solid rgb(225,230,243);
- border-radius: 0.5rem;
- position: relative;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.emotion-0.code-snippet-simple-oneline {
- margin-top: 0;
- margin-bottom: 0;
- border-radius: 0.25rem;
-}
-
-.emotion-4 {
- box-sizing: border-box;
- -webkit-text-decoration: none;
- text-decoration: none;
- outline: none;
- border: var(--border);
- color: var(--color);
- background-color: var(--background);
- -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
- transition: background-color 0.2s ease,outline 0.2s ease;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 2.25rem;
- font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
- font-size: 0.875rem;
- line-height: 1.25rem;
- font-weight: 600;
- padding-left: 1rem;
- padding-right: 1rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- border-radius: 0.5rem;
- cursor: pointer;
- --background: rgb(255,255,255);
- --backgroundHover: rgb(239,242,249);
- --color: rgb(62,67,87);
- --focus: rgba(197,205,223,0.2);
- --border: 1px solid rgb(197,205,223);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
- font-size: 0.875rem;
- line-height: 1.25rem;
- font-weight: 400;
- right: 1.5rem;
- top: 1.5rem;
- position: absolute;
-}
-
-.emotion-4:hover {
- color: var(--color);
- background-color: var(--backgroundHover);
-}
-
-.emotion-4:focus,
-.emotion-4:active {
- color: var(--color);
- outline: 4px solid var(--focus);
-}
-
-.emotion-4:disabled,
-.emotion-4:disabled:hover {
- color: rgb(166,173,194);
- background-color: rgb(239,242,249);
- border: 1px solid rgb(197,205,223);
- cursor: not-allowed;
-}
-
-.emotion-4>svg {
- margin-right: 0.25rem;
-}
-
-.emotion-4 [disabled] {
- pointer-events: none;
-}
-
-.code-snippet-highlighted-oneline .emotion-4 {
- bottom: 0.5rem;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-x: auto;
- padding: 1.5rem;
-}
-
-.emotion-6 code {
- color: rgb(51,53,60);
- background: rgb(252,252,253);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 400;
-}
-
-.emotion-6 code.hljs {
- padding: unset;
-}
-
-.emotion-6 .hljs-variable,
-.emotion-6 .hljs-meta {
- color: rgb(51,53,60);
-}
-
-.emotion-6 .hljs-doctag,
-.emotion-6 .hljs-title,
-.emotion-6 .hljs-title.class_,
-.emotion-6 .hljs-title.function_ {
- color: rgb(34,84,192);
-}
-
-.emotion-6 .hljs-comment {
- color: rgb(109,111,119);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-style: italic;
-}
-
-.emotion-6 .hljs-tag,
-.emotion-6 .hljs-type,
-.emotion-6 .hljs-keyword {
- color: rgb(152,29,150);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 700;
-}
-
-.emotion-6 .hljs-literal,
-.emotion-6 .hljs-number {
- color: rgb(126,83,5);
-}
-
-.emotion-6 .hljs-string {
- color: rgb(32,105,31);
-}
-
-.emotion-6 .hljs-meta .hljs-keyword {
- color: rgb(47,103,48);
-}
-
-.emotion-6.code-wrap {
- white-space: pre-wrap;
- word-break: break-all;
-}
-
-.emotion-6 mark {
- color: rgb(217,45,32);
- background-color: rgb(197,205,223);
- font-weight: 400;
- border-radius: 0.25rem;
- padding: 0.25rem;
-}
-
-.emotion-6.simple-one-line {
- min-height: 1.25rem;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-<div>
- <div
- class="fs-mask emotion-0 emotion-1"
- >
- <button
- aria-describedby="tooltip-1"
- class="sw-select-none emotion-2 emotion-3 emotion-4 emotion-5"
- data-clipboard-text="foo
-bar"
- type="button"
- >
- <svg
- aria-hidden="true"
- class="octicon octicon-copy"
- fill="currentColor"
- focusable="false"
- height="16"
- role="img"
- style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"
- viewBox="0 0 16 16"
- width="16"
- >
- <path
- d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
- />
- <path
- d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
- />
- </svg>
- Copy
- </button>
- <pre
- class=" emotion-6 emotion-7"
- >
- <code
- class="hljs"
- >
- <span
- class="hljs-string"
- >
- foo
- </span>
-
-
- <span
- class="hljs-string"
- >
- bar
- </span>
- </code>
- </pre>
- </div>
-</div>
-`;
-
-exports[`should show reduced size when single line with no editting 1`] = `
-.emotion-0 {
- background-color: rgb(252,252,253);
- border: 1px solid rgb(225,230,243);
- border-radius: 0.5rem;
- position: relative;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.emotion-0.code-snippet-simple-oneline {
- margin-top: 0;
- margin-bottom: 0;
- border-radius: 0.25rem;
-}
-
-.emotion-4 {
- box-sizing: border-box;
- -webkit-text-decoration: none;
- text-decoration: none;
- outline: none;
- border: var(--border);
- color: var(--color);
- background-color: var(--background);
- -webkit-transition: background-color 0.2s ease,outline 0.2s ease;
- transition: background-color 0.2s ease,outline 0.2s ease;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- height: 2.25rem;
- font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
- font-size: 0.875rem;
- line-height: 1.25rem;
- font-weight: 600;
- padding-left: 1rem;
- padding-right: 1rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- border-radius: 0.5rem;
- cursor: pointer;
- --background: rgb(255,255,255);
- --backgroundHover: rgb(239,242,249);
- --color: rgb(62,67,87);
- --focus: rgba(197,205,223,0.2);
- --border: 1px solid rgb(197,205,223);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
- font-size: 0.875rem;
- line-height: 1.25rem;
- font-weight: 400;
- right: 1.5rem;
- top: 1.5rem;
- position: absolute;
- bottom: 1.5rem;
- top: 1.5rem;
-}
-
-.emotion-4:hover {
- color: var(--color);
- background-color: var(--backgroundHover);
-}
-
-.emotion-4:focus,
-.emotion-4:active {
- color: var(--color);
- outline: 4px solid var(--focus);
-}
-
-.emotion-4:disabled,
-.emotion-4:disabled:hover {
- color: rgb(166,173,194);
- background-color: rgb(239,242,249);
- border: 1px solid rgb(197,205,223);
- cursor: not-allowed;
-}
-
-.emotion-4>svg {
- margin-right: 0.25rem;
-}
-
-.emotion-4 [disabled] {
- pointer-events: none;
-}
-
-.code-snippet-highlighted-oneline .emotion-4 {
- bottom: 0.5rem;
-}
-
-.emotion-6 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-x: auto;
- padding: 1.5rem;
-}
-
-.emotion-6 code {
- color: rgb(51,53,60);
- background: rgb(252,252,253);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 400;
-}
-
-.emotion-6 code.hljs {
- padding: unset;
-}
-
-.emotion-6 .hljs-variable,
-.emotion-6 .hljs-meta {
- color: rgb(51,53,60);
-}
-
-.emotion-6 .hljs-doctag,
-.emotion-6 .hljs-title,
-.emotion-6 .hljs-title.class_,
-.emotion-6 .hljs-title.function_ {
- color: rgb(34,84,192);
-}
-
-.emotion-6 .hljs-comment {
- color: rgb(109,111,119);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-style: italic;
-}
-
-.emotion-6 .hljs-tag,
-.emotion-6 .hljs-type,
-.emotion-6 .hljs-keyword {
- color: rgb(152,29,150);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 700;
-}
-
-.emotion-6 .hljs-literal,
-.emotion-6 .hljs-number {
- color: rgb(126,83,5);
-}
-
-.emotion-6 .hljs-string {
- color: rgb(32,105,31);
-}
-
-.emotion-6 .hljs-meta .hljs-keyword {
- color: rgb(47,103,48);
-}
-
-.emotion-6.code-wrap {
- white-space: pre-wrap;
- word-break: break-all;
-}
-
-.emotion-6 mark {
- color: rgb(217,45,32);
- background-color: rgb(197,205,223);
- font-weight: 400;
- border-radius: 0.25rem;
- padding: 0.25rem;
-}
-
-.emotion-6.simple-one-line {
- min-height: 1.25rem;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-<div>
- <div
- class="code-snippet-highlighted-oneline fs-mask emotion-0 emotion-1"
- >
- <button
- aria-describedby="tooltip-2"
- class="sw-select-none emotion-2 emotion-3 emotion-4 emotion-5"
- data-clipboard-text="foobar"
- type="button"
- >
- <svg
- aria-hidden="true"
- class="octicon octicon-copy"
- fill="currentColor"
- focusable="false"
- height="16"
- role="img"
- style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"
- viewBox="0 0 16 16"
- width="16"
- >
- <path
- d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
- />
- <path
- d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
- />
- </svg>
- Copy
- </button>
- <pre
- class=" emotion-6 emotion-7"
- >
- <code
- class="hljs"
- >
- <span
- class="hljs-string"
- >
- foobar
- </span>
- </code>
- </pre>
- </div>
-</div>
-`;
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-.emotion-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-x: auto;
- padding: 1.5rem;
-}
-
-.emotion-0 code {
- color: rgb(51,53,60);
- background: rgb(252,252,253);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 400;
-}
-
-.emotion-0 code.hljs {
- padding: unset;
-}
-
-.emotion-0 .hljs-variable,
-.emotion-0 .hljs-meta {
- color: rgb(51,53,60);
-}
-
-.emotion-0 .hljs-doctag,
-.emotion-0 .hljs-title,
-.emotion-0 .hljs-title.class_,
-.emotion-0 .hljs-title.function_ {
- color: rgb(34,84,192);
-}
-
-.emotion-0 .hljs-comment {
- color: rgb(109,111,119);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-style: italic;
-}
-
-.emotion-0 .hljs-tag,
-.emotion-0 .hljs-type,
-.emotion-0 .hljs-keyword {
- color: rgb(152,29,150);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 700;
-}
-
-.emotion-0 .hljs-literal,
-.emotion-0 .hljs-number {
- color: rgb(126,83,5);
-}
-
-.emotion-0 .hljs-string {
- color: rgb(32,105,31);
-}
-
-.emotion-0 .hljs-meta .hljs-keyword {
- color: rgb(47,103,48);
-}
-
-.emotion-0.code-wrap {
- white-space: pre-wrap;
- word-break: break-all;
-}
-
-.emotion-0 mark {
- color: rgb(217,45,32);
- background-color: rgb(197,205,223);
- font-weight: 400;
- border-radius: 0.25rem;
- padding: 0.25rem;
-}
-
-.emotion-0.simple-one-line {
- min-height: 1.25rem;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-<div>
- <pre
- class=" emotion-0 emotion-1"
- >
- <code
- class="hljs"
- >
- <span
- class="hljs-string"
- >
- foo\\nbar
- </span>
- </code>
- </pre>
-</div>
-`;
-
-exports[`should display edit functions 1`] = `
-.emotion-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-x: auto;
- padding: 1.5rem;
-}
-
-.emotion-0 code {
- color: rgb(51,53,60);
- background: rgb(252,252,253);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 400;
-}
-
-.emotion-0 code.hljs {
- padding: unset;
-}
-
-.emotion-0 .hljs-variable,
-.emotion-0 .hljs-meta {
- color: rgb(51,53,60);
-}
-
-.emotion-0 .hljs-doctag,
-.emotion-0 .hljs-title,
-.emotion-0 .hljs-title.class_,
-.emotion-0 .hljs-title.function_ {
- color: rgb(34,84,192);
-}
-
-.emotion-0 .hljs-comment {
- color: rgb(109,111,119);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-style: italic;
-}
-
-.emotion-0 .hljs-tag,
-.emotion-0 .hljs-type,
-.emotion-0 .hljs-keyword {
- color: rgb(152,29,150);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 700;
-}
-
-.emotion-0 .hljs-literal,
-.emotion-0 .hljs-number {
- color: rgb(126,83,5);
-}
-
-.emotion-0 .hljs-string {
- color: rgb(32,105,31);
-}
-
-.emotion-0 .hljs-meta .hljs-keyword {
- color: rgb(47,103,48);
-}
-
-.emotion-0.code-wrap {
- white-space: pre-wrap;
- word-break: break-all;
-}
-
-.emotion-0 mark {
- color: rgb(217,45,32);
- background-color: rgb(197,205,223);
- font-weight: 400;
- border-radius: 0.25rem;
- padding: 0.25rem;
-}
-
-.emotion-0.simple-one-line {
- min-height: 1.25rem;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.emotion-3 {
- box-sizing: border-box;
- border: none;
- outline: none;
- -webkit-text-decoration: none;
- text-decoration: none;
- color: var(--color);
- background-color: var(--background);
- -webkit-transition: background-color 0.2s ease,outline 0.2s ease,color 0.2s ease;
- transition: background-color 0.2s ease,outline 0.2s ease,color 0.2s ease;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- cursor: pointer;
- height: 2.25rem;
- border-radius: 0.5rem;
- padding-left: 0.625rem;
- padding-right: 0.625rem;
- --background: transparent;
- --backgroundHover: rgb(232,235,255);
- --color: rgb(75,86,187);
- --colorHover: rgb(43,51,104);
- --focus: rgba(93,108,208,0.2);
-}
-
-.emotion-3:hover,
-.emotion-3:focus,
-.emotion-3:active {
- color: var(--colorHover);
- background-color: var(--backgroundHover);
-}
-
-.emotion-3:focus,
-.emotion-3:active {
- outline: 4px solid var(--focus);
-}
-
-.emotion-3:disabled,
-.emotion-3:disabled:hover {
- color: rgb(166,173,194);
- background-color: var(--background);
- cursor: not-allowed;
-}
-
-<div>
- <pre
- class=" emotion-0 emotion-1"
- >
- <code
- class="hljs sw-inline"
- >
- <span
- class="hljs-string"
- >
- One
- </span>
-
- <span
- class="hljs-string"
- >
- line
- </span>
-
- <span
- class="hljs-string"
- >
- command
- </span>
- </code>
- <button
- aria-label="edit"
- class="sw-ml-2 emotion-2 emotion-3 emotion-4"
- type="button"
- >
- <svg
- aria-hidden="true"
- class=""
- fill="currentColor"
- focusable="false"
- height="16"
- role="img"
- style="display: inline-block; user-select: none; vertical-align: middle; overflow: visible;"
- viewBox="0 0 16 16"
- width="16"
- >
- <path
- d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"
- />
- </svg>
- </button>
- </pre>
-</div>
-`;
-
-exports[`should handle multiple lines of code 1`] = `
-.emotion-0 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- overflow-x: auto;
- padding: 1.5rem;
-}
-
-.emotion-0 code {
- color: rgb(51,53,60);
- background: rgb(252,252,253);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 400;
-}
-
-.emotion-0 code.hljs {
- padding: unset;
-}
-
-.emotion-0 .hljs-variable,
-.emotion-0 .hljs-meta {
- color: rgb(51,53,60);
-}
-
-.emotion-0 .hljs-doctag,
-.emotion-0 .hljs-title,
-.emotion-0 .hljs-title.class_,
-.emotion-0 .hljs-title.function_ {
- color: rgb(34,84,192);
-}
-
-.emotion-0 .hljs-comment {
- color: rgb(109,111,119);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-style: italic;
-}
-
-.emotion-0 .hljs-tag,
-.emotion-0 .hljs-type,
-.emotion-0 .hljs-keyword {
- color: rgb(152,29,150);
- font-family: Ubuntu Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
- font-size: 0.875rem;
- line-height: 1.125rem;
- font-weight: 700;
-}
-
-.emotion-0 .hljs-literal,
-.emotion-0 .hljs-number {
- color: rgb(126,83,5);
-}
-
-.emotion-0 .hljs-string {
- color: rgb(32,105,31);
-}
-
-.emotion-0 .hljs-meta .hljs-keyword {
- color: rgb(47,103,48);
-}
-
-.emotion-0.code-wrap {
- white-space: pre-wrap;
- word-break: break-all;
-}
-
-.emotion-0 mark {
- color: rgb(217,45,32);
- background-color: rgb(197,205,223);
- font-weight: 400;
- border-radius: 0.25rem;
- padding: 0.25rem;
-}
-
-.emotion-0.simple-one-line {
- min-height: 1.25rem;
- padding-left: 0.25rem;
- padding-right: 0.25rem;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-<div>
- <pre
- class=" emotion-0 emotion-1"
- >
- <code
- class="hljs"
- >
- <span
- class="hljs-attr"
- >
- foo:
- </span>
-
- <span
- class="hljs-string"
- >
- bar
- </span>
-
-
- <span
- class="hljs-attr"
- >
- pleh:
- </span>
-
- <span
- class="hljs-string"
- >
- help
- </span>
-
-
- <span
- class="hljs-attr"
- >
- stuff:
- </span>
-
-
- <span
- class="hljs-attr"
- >
- foo:
- </span>
-
- <span
- class="hljs-string"
- >
- bar
- </span>
-
-
- <span
- class="hljs-attr"
- >
- bar:
- </span>
-
- <span
- class="hljs-string"
- >
- foo
- </span>
- </code>
- </pre>
-</div>
-`;
export * from './BubbleChart';
export * from './Card';
export * from './Checkbox';
-export * from './CodeSnippet';
+export * from './CodeSyntaxHighlighter';
export * from './ColorsLegend';
export * from './CoverageIndicator';
export * from './DatePicker';
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
+import { CodeSyntaxHighlighter } from 'design-system';
import * as React from 'react';
import { updateRule } from '../../../api/rules';
import FormattingTips from '../../../components/common/FormattingTips';
state: State = {
description: '',
descriptionForm: false,
- submitting: false,
removeDescriptionModal: false,
+ submitting: false,
};
componentDidMount() {
}).then(
(ruleDetails) => {
this.props.onChange(ruleDetails);
+
if (this.mounted) {
this.setState({ submitting: false, descriptionForm: false });
}
handleExtendDescriptionClick = () => {
this.setState({
// set description` to the current `mdNote` each time the form is open
- description: this.props.ruleDetails.mdNote || '',
+ description: this.props.ruleDetails.mdNote ?? '',
descriptionForm: true,
});
};
renderExtendedDescription = () => (
<div id="coding-rules-detail-description-extra">
{this.props.ruleDetails.htmlNote !== undefined && (
- <div
- className="rule-desc spacer-bottom markdown"
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{
- __html: sanitizeUserInput(this.props.ruleDetails.htmlNote),
- }}
+ <CodeSyntaxHighlighter
+ className="rule-desc markdown sw-mb-2"
+ htmlAsString={sanitizeUserInput(this.props.ruleDetails.htmlNote)}
+ language={this.props.ruleDetails.lang}
/>
)}
+
{this.props.canWrite && (
<Button
id="coding-rules-detail-extend-description"
/>
</td>
</tr>
+
<tr>
<td>
<Button
>
{translate('save')}
</Button>
+
{this.props.ruleDetails.mdNote !== undefined && (
<>
<Button
)}
</>
)}
+
<ResetButtonLink
className="spacer-left"
disabled={this.state.submitting}
</ResetButtonLink>
{this.state.submitting && <i className="spinner spacer-left" />}
</td>
+
<td className="text-right">
<FormattingTips />
</td>
return (
<div className="js-rule-description">
{defaultSection && (
- <section
+ <CodeSyntaxHighlighter
className="coding-rules-detail-description markdown"
key={defaultSection.key}
- /* eslint-disable-next-line react/no-danger */
- dangerouslySetInnerHTML={{ __html: sanitizeString(defaultSection.content) }}
+ htmlAsString={sanitizeString(defaultSection.content)}
+ language={ruleDetails.lang}
/>
)}
{hasDescriptionSection && !defaultSection && (
<>
{introductionSection && (
- <div
+ <CodeSyntaxHighlighter
className="rule-desc"
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{ __html: sanitizeString(introductionSection) }}
+ htmlAsString={sanitizeString(introductionSection)}
+ language={ruleDetails.lang}
/>
)}
+
<RuleTabViewer ruleDetails={ruleDetails} />
</>
)}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import * as React from 'react';
import { getRuleDetails } from '../../../api/rules';
import { getSecurityHotspotDetails } from '../../../api/security-hotspots';
interface Props {
component: Component;
hotspotKey: string;
- onSwitchStatusFilter: (option: HotspotStatusFilter) => void;
hotspotsReviewedMeasure?: string;
- onUpdateHotspot: (hotspotKey: string) => Promise<void>;
onLocationClick: (index: number) => void;
+ onSwitchStatusFilter: (option: HotspotStatusFilter) => void;
+ onUpdateHotspot: (hotspotKey: string) => Promise<void>;
selectedHotspotLocation?: number;
standards?: Standards;
}
interface State {
hotspot?: Hotspot;
- ruleDescriptionSections?: RuleDescriptionSection[];
lastStatusChangedTo?: HotspotStatusOption;
loading: boolean;
+ ruleDescriptionSections?: RuleDescriptionSection[];
+ ruleLanguage?: string;
showStatusUpdateSuccessModal: boolean;
}
fetchHotspot = async () => {
this.setState({ loading: true });
+
try {
const hotspot = await getSecurityHotspotDetails(this.props.hotspotKey);
const ruleDetails = await getRuleDetails({ key: hotspot.rule.key }).then((r) => r.rule);
this.setState({
hotspot,
loading: false,
+ ruleLanguage: ruleDetails.lang,
ruleDescriptionSections: ruleDetails.descriptionSections,
});
}
handleSwitchFilterToStatusOfUpdatedHotspot = () => {
const { lastStatusChangedTo } = this.state;
+
if (lastStatusChangedTo) {
this.props.onSwitchStatusFilter(getStatusFilterFromStatusOption(lastStatusChangedTo));
}
};
render() {
- const { component, selectedHotspotLocation, standards, hotspotsReviewedMeasure } = this.props;
+ const { component, hotspotsReviewedMeasure, selectedHotspotLocation, standards } = this.props;
+
const {
hotspot,
ruleDescriptionSections,
+ ruleLanguage,
loading,
showStatusUpdateSuccessModal,
lastStatusChangedTo,
return (
<HotspotViewerRenderer
+ component={component}
+ hotspot={hotspot}
hotspotsReviewedMeasure={hotspotsReviewedMeasure}
lastStatusChangedTo={lastStatusChangedTo}
+ loading={loading}
onCloseStatusUpdateSuccessModal={this.handleCloseStatusUpdateSuccessModal}
+ onLocationClick={this.props.onLocationClick}
onSwitchFilterToStatusOfUpdatedHotspot={this.handleSwitchFilterToStatusOfUpdatedHotspot}
- showStatusUpdateSuccessModal={showStatusUpdateSuccessModal}
- standards={standards}
- component={component}
- hotspot={hotspot}
- ruleDescriptionSections={ruleDescriptionSections}
- loading={loading}
onUpdateHotspot={this.handleHotspotUpdate}
- onLocationClick={this.props.onLocationClick}
+ ruleDescriptionSections={ruleDescriptionSections}
+ ruleLanguage={ruleLanguage}
selectedHotspotLocation={selectedHotspotLocation}
+ showStatusUpdateSuccessModal={showStatusUpdateSuccessModal}
+ standards={standards}
/>
);
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import * as React from 'react';
import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
import DeferredSpinner from '../../../components/ui/DeferredSpinner';
component: Component;
currentUser: CurrentUser;
hotspot?: Hotspot;
- ruleDescriptionSections?: RuleDescriptionSection[];
hotspotsReviewedMeasure?: string;
- onSwitchFilterToStatusOfUpdatedHotspot: () => void;
lastStatusChangedTo?: HotspotStatusOption;
- onCloseStatusUpdateSuccessModal: () => void;
- showStatusUpdateSuccessModal: boolean;
-
loading: boolean;
- onUpdateHotspot: (statusUpdate?: boolean, statusOption?: HotspotStatusOption) => Promise<void>;
+ onCloseStatusUpdateSuccessModal: () => void;
onLocationClick: (index: number) => void;
+ onSwitchFilterToStatusOfUpdatedHotspot: () => void;
+ onUpdateHotspot: (statusUpdate?: boolean, statusOption?: HotspotStatusOption) => Promise<void>;
+ ruleDescriptionSections?: RuleDescriptionSection[];
+ ruleLanguage?: string;
selectedHotspotLocation?: number;
+ showStatusUpdateSuccessModal: boolean;
standards?: Standards;
}
component,
currentUser,
hotspot,
+ hotspotsReviewedMeasure,
+ lastStatusChangedTo,
loading,
- selectedHotspotLocation,
ruleDescriptionSections,
+ ruleLanguage,
+ selectedHotspotLocation,
showStatusUpdateSuccessModal,
- hotspotsReviewedMeasure,
- lastStatusChangedTo,
standards,
} = props;
onCommentUpdate={props.onUpdateHotspot}
/>
}
+ branchLike={branchLike}
codeTabContent={
<HotspotSnippetContainer
branchLike={branchLike}
/>
}
component={component}
- standards={standards}
- onUpdateHotspot={props.onUpdateHotspot}
- branchLike={branchLike}
hotspot={hotspot}
+ onUpdateHotspot={props.onUpdateHotspot}
ruleDescriptionSections={ruleDescriptionSections}
+ ruleLanguage={ruleLanguage}
+ standards={standards}
/>
</div>
)}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import { ToggleButton, getTabId, getTabPanelId } from 'design-system';
import { groupBy, omit } from 'lodash';
import * as React from 'react';
interface Props {
activityTabContent: React.ReactNode;
+ branchLike?: BranchLike;
codeTabContent: React.ReactNode;
- hotspot: Hotspot;
- ruleDescriptionSections?: RuleDescriptionSection[];
component: Component;
- branchLike?: BranchLike;
+ hotspot: Hotspot;
onUpdateHotspot: (statusUpdate?: boolean, statusOption?: HotspotStatusOption) => Promise<void>;
+ ruleDescriptionSections?: RuleDescriptionSection[];
+ ruleLanguage?: string;
standards?: Standards;
}
+
interface Tab {
- value: TabKeys;
- label: string;
counter?: number;
+ label: string;
+ value: TabKeys;
}
export enum TabKeys {
export default function HotspotViewerTabs(props: Props) {
const {
- ruleDescriptionSections,
- codeTabContent,
activityTabContent,
- hotspot,
+ branchLike,
+ codeTabContent,
component,
+ hotspot,
+ ruleDescriptionSections,
+ ruleLanguage,
standards,
- branchLike,
} = props;
const { isScrolled, isCompressed, resetScrollDownCompress } = useScrollDownCompress(
if (isInput(event) || isShortcut(event)) {
return true;
}
+
if (event.key === KeyboardKeys.LeftArrow) {
event.preventDefault();
selectNeighboringTab(-1);
const handleSelectTabs = (tabKey: TabKeys) => {
const currentTab = tabs.find((tab) => tab.value === tabKey);
+
if (currentTab) {
setCurrentTab(currentTab);
}
document.addEventListener('keydown', handleKeyboardNavigation);
return () => document.removeEventListener('keydown', handleKeyboardNavigation);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
setCurrentTab(tabs[0]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [hotspot.key]);
React.useEffect(() => {
window.scrollTo({ top: 0 });
}
resetScrollDownCompress();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentTab]);
const descriptionSectionsByKey = groupBy(ruleDescriptionSections, (section) => section.key);
+
const rootCauseDescriptionSections =
descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE];
return (
<>
<HotspotHeader
- hotspot={hotspot}
- component={component}
- standards={standards}
- onUpdateHotspot={props.onUpdateHotspot}
branchLike={branchLike}
- isScrolled={isScrolled}
+ component={component}
+ hotspot={hotspot}
isCompressed={isCompressed}
+ isScrolled={isScrolled}
+ onUpdateHotspot={props.onUpdateHotspot}
+ standards={standards}
tabs={
<ToggleButton
role="tablist"
{currentTab.value === TabKeys.Code && codeTabContent}
{currentTab.value === TabKeys.RiskDescription && rootCauseDescriptionSections && (
- <RuleDescription sections={rootCauseDescriptionSections} />
+ <RuleDescription language={ruleLanguage} sections={rootCauseDescriptionSections} />
)}
{currentTab.value === TabKeys.VulnerabilityDescription &&
descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
<RuleDescription
+ language={ruleLanguage}
sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
/>
)}
{currentTab.value === TabKeys.FixRecommendation &&
descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
<RuleDescription
+ language={ruleLanguage}
sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
/>
)}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { shallow } from 'enzyme';
+
+import { screen, waitFor } from '@testing-library/react';
import * as React from 'react';
import { getTask } from '../../../api/ce';
import { mockTaskWarning } from '../../../helpers/mocks/tasks';
import { mockCurrentUser } from '../../../helpers/testMocks';
-import { waitAndUpdate } from '../../../helpers/testUtils';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
import { AnalysisWarningsModal } from '../AnalysisWarningsModal';
jest.mock('../../../api/ce', () => ({
beforeEach(jest.clearAllMocks);
-it('should render correctly', () => {
- expect(shallowRender()).toMatchSnapshot('default');
- expect(shallowRender({ warnings: [mockTaskWarning({ dismissable: true })] })).toMatchSnapshot(
- 'with dismissable warnings'
- );
- expect(
- shallowRender({
+describe('should render correctly', () => {
+ it('should not show dismiss buttons for non-dismissable warnings', () => {
+ renderAnalysisWarningsModal();
+
+ expect(screen.getByText('warning 1')).toBeInTheDocument();
+ expect(screen.getByText('warning 2')).toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'dismiss_permanently' })).not.toBeInTheDocument();
+ });
+
+ it('should show a dismiss button for dismissable warnings', () => {
+ renderAnalysisWarningsModal({ warnings: [mockTaskWarning({ dismissable: true })] });
+
+ expect(screen.getByRole('button', { name: 'dismiss_permanently' })).toBeInTheDocument();
+ });
+
+ it('should not show dismiss buttons if not logged in', () => {
+ renderAnalysisWarningsModal({
currentUser: mockCurrentUser({ isLoggedIn: false }),
warnings: [mockTaskWarning({ dismissable: true })],
- })
- ).toMatchSnapshot('do not show dismissable links for anonymous');
+ });
+
+ expect(screen.queryByRole('button', { name: 'dismiss_permanently' })).not.toBeInTheDocument();
+ });
});
it('should not fetch task warnings if it does not have to', () => {
- shallowRender();
+ renderAnalysisWarningsModal();
+
expect(getTask).not.toHaveBeenCalled();
});
it('should fetch task warnings if it has to', async () => {
- const wrapper = shallowRender({ taskId: 'abcd1234', warnings: undefined });
- await waitAndUpdate(wrapper);
- expect(wrapper).toMatchSnapshot();
- expect(getTask).toHaveBeenCalledWith('abcd1234', ['warnings']);
-});
+ renderAnalysisWarningsModal({ taskId: 'abcd1234', warnings: undefined });
-it('should correctly handle updates', async () => {
- const wrapper = shallowRender();
-
- await waitAndUpdate(wrapper);
- expect(getTask).not.toHaveBeenCalled();
-
- wrapper.setProps({ taskId: '1', warnings: undefined });
- await waitAndUpdate(wrapper);
- expect(getTask).toHaveBeenCalled();
+ expect(screen.queryByText('message foo')).not.toBeInTheDocument();
+ expect(getTask).toHaveBeenCalledWith('abcd1234', ['warnings']);
- (getTask as jest.Mock).mockClear();
- wrapper.setProps({ taskId: undefined, warnings: [mockTaskWarning()] });
- expect(getTask).not.toHaveBeenCalled();
+ await waitFor(() => {
+ expect(screen.getByText('message foo')).toBeInTheDocument();
+ });
});
-function
shallowRender(props: Partial<AnalysisWarningsModal['props']> = {}) {
- return shallow<AnalysisWarningsModal>(
+function
renderAnalysisWarningsModal(props: Partial<AnalysisWarningsModal['props']> = {}) {
+ return renderComponent(
<AnalysisWarningsModal
currentUser={mockCurrentUser({ isLoggedIn: true })}
onClose={jest.fn()}
+++ /dev/null
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should fetch task warnings if it has to 1`] = `
-<Gl
- body={
- <DeferredSpinner
- loading={false}
- >
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "message foo",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "message-bar",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "multiline message<br>secondline<br> third line",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- </DeferredSpinner>
- }
- headerTitle="warnings"
- onClose={[MockFunction]}
- primaryButton={null}
- secondaryButtonLabel="close"
-/>
-`;
-
-exports[`should render correctly: default 1`] = `
-<Gl
- body={
- <DeferredSpinner
- loading={false}
- >
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "warning 1",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "warning 2",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- </DeferredSpinner>
- }
- headerTitle="warnings"
- onClose={[MockFunction]}
- primaryButton={null}
- secondaryButtonLabel="close"
-/>
-`;
-
-exports[`should render correctly: do not show dismissable links for anonymous 1`] = `
-<Gl
- body={
- <DeferredSpinner
- loading={false}
- >
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "Lorem ipsum",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div />
- </React.Fragment>
- </DeferredSpinner>
- }
- headerTitle="warnings"
- onClose={[MockFunction]}
- primaryButton={null}
- secondaryButtonLabel="close"
-/>
-`;
-
-exports[`should render correctly: with dismissable warnings 1`] = `
-<Gl
- body={
- <DeferredSpinner
- loading={false}
- >
- <React.Fragment>
- <div
- className="sw-flex sw-items-center sw-mt-2"
- >
- <FlagMessage
- variant="warning"
- >
- <HtmlFormatter>
- <span
- dangerouslySetInnerHTML={
- {
- "__html": "Lorem ipsum",
- }
- }
- />
- </HtmlFormatter>
- </FlagMessage>
- </div>
- <div>
- <div
- className="sw-mt-4"
- >
- <DangerButtonSecondary
- disabled={false}
- onClick={[Function]}
- >
- dismiss_permanently
- </DangerButtonSecondary>
- <DeferredSpinner
- className="sw-ml-2"
- loading={false}
- />
- </div>
- </div>
- </React.Fragment>
- </DeferredSpinner>
- }
- headerTitle="warnings"
- onClose={[MockFunction]}
- primaryButton={null}
- secondaryButtonLabel="close"
-/>
-`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import classNames from 'classnames';
import { ToggleButton } from 'design-system';
import { cloneDeep, debounce, groupBy } from 'lodash';
constructor(props: IssueTabViewerProps) {
super(props);
+
this.educationPrinciplesRef = React.createRef();
+
this.checkIfEducationPrinciplesAreVisible = debounce(
this.checkIfEducationPrinciplesAreVisible,
DEBOUNCE_FOR_SCROLL
const tabs = this.computeTabs(Boolean(this.state.displayEducationalPrinciplesNotification));
const query = new URLSearchParams(this.props.location.search);
+
if (query.has('why')) {
this.setState({
selectedTab: tabs.find((tab) => tab.key === TabKeys.WhyIsThisAnIssue) || tabs[0],
selectedFlowIndex,
selectedLocationIndex,
} = this.props;
+
const { selectedTab } = this.state;
if (
ruleDetails.educationPrinciples.length > 0 &&
isLoggedIn &&
!dismissedNotices[NoticeType.EDUCATION_PRINCIPLES];
+
const tabs = this.computeTabs(displayEducationalPrinciplesNotification);
return {
computeTabs = (displayEducationalPrinciplesNotification: boolean) => {
const {
codeTabContent,
- ruleDetails: { descriptionSections, educationPrinciples, type: ruleType },
+ ruleDetails: { descriptionSections, educationPrinciples, lang: ruleLanguage, type: ruleType },
ruleDescriptionContextKey,
extendedDescription,
activityTabContent,
content: (descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE]) && (
<RuleDescription
+ defaultContextKey={ruleDescriptionContextKey}
+ language={ruleLanguage}
sections={
descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE]
}
- defaultContextKey={ruleDescriptionContextKey}
/>
),
},
label: translate('coding_rules.description_section.title', TabKeys.AssessTheIssue),
content: descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
<RuleDescription
+ language={ruleLanguage}
sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
/>
),
label: translate('coding_rules.description_section.title', TabKeys.HowToFixIt),
content: descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
<RuleDescription
- sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
defaultContextKey={ruleDescriptionContextKey}
+ language={ruleLanguage}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
/>
),
},
content: ((educationPrinciples && educationPrinciples.length > 0) ||
descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]) && (
<MoreInfoRuleDescription
- educationPrinciples={educationPrinciples}
- sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
displayEducationalPrinciplesNotification={displayEducationalPrinciplesNotification}
+ educationPrinciples={educationPrinciples}
educationPrinciplesRef={this.educationPrinciplesRef}
+ language={ruleLanguage}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
/>
),
counter: displayEducationalPrinciplesNotification ? 1 : undefined,
{({ top }) => (
<div
style={{
- // We substract the footer height with padding (80) and the main layout padding (20) and the tabs padding (20)
+ // We substract the footer height with padding (80) and the main layout padding (20)
+ // and the tabs padding (20)
maxHeight: scrollInTab ? `calc(100vh - ${top + 120}px)` : 'initial',
}}
className="sw-flex sw-flex-col"
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import * as React from 'react';
import { RuleDescriptionSection } from '../../apps/coding-rules/rule';
import { translate } from '../../helpers/l10n';
import { Dict } from '../../types/types';
import { ButtonLink } from '../controls/buttons';
import { Alert } from '../ui/Alert';
+import RuleDescription from './RuleDescription';
import DefenseInDepth from './educationPrinciples/DefenseInDepth';
import NeverTrustUserInput from './educationPrinciples/NeverTrustUserInput';
-import RuleDescription from './RuleDescription';
import './style.css';
interface Props {
- sections?: RuleDescriptionSection[];
- educationPrinciples?: string[];
displayEducationalPrinciplesNotification?: boolean;
+ educationPrinciples?: string[];
educationPrinciplesRef?: React.RefObject<HTMLDivElement>;
+ language?: string;
+ sections?: RuleDescriptionSection[];
}
const EDUCATION_PRINCIPLES_MAP: Dict<React.ComponentType> = {
defense_in_depth: DefenseInDepth,
never_trust_user_input: NeverTrustUserInput,
};
+
export default class MoreInfoRuleDescription extends React.PureComponent<Props, {}> {
handleNotificationScroll = () => {
const element = this.props.educationPrinciplesRef?.current;
+
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
}
render() {
const {
displayEducationalPrinciplesNotification,
+ language,
sections = [],
educationPrinciples = [],
educationPrinciplesRef,
} = this.props;
+
return (
<div className="padded rule-desc">
{displayEducationalPrinciplesNotification && (
<p className="little-spacer-bottom little-spacer-top">
{translate('coding_rules.more_info.notification_message')}
</p>
+
<ButtonLink
onClick={() => {
this.handleNotificationScroll();
</ButtonLink>
</Alert>
)}
+
{sections.length > 0 && (
<>
<h2>{translate('coding_rules.more_info.resources.title')}</h2>
- <RuleDescription sections={sections} />
+ <RuleDescription language={language} sections={sections} />
</>
)}
<h2 ref={educationPrinciplesRef}>
{translate('coding_rules.more_info.education_principles.title')}
</h2>
+
{educationPrinciples.map((key) => {
const Concept = EDUCATION_PRINCIPLES_MAP[key];
+
if (Concept === undefined) {
return null;
}
+
return (
<div key={key} className="education-principles big-spacer-top big-padded">
<Concept />
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import styled from '@emotion/styled';
-import { FlagMessage, HtmlFormatter, themeBorder, themeColor, ToggleButton } from 'design-system';
+import {
+ CodeSyntaxHighlighter,
+ FlagMessage,
+ HtmlFormatter,
+ ToggleButton,
+ themeBorder,
+ themeColor,
+} from 'design-system';
import * as React from 'react';
import { RuleDescriptionSection } from '../../apps/coding-rules/rule';
import applyCodeDifferences from '../../helpers/code-difference';
const OTHERS_KEY = 'others';
interface Props {
- sections: RuleDescriptionSection[];
- defaultContextKey?: string;
className?: string;
+ defaultContextKey?: string;
+ language?: string;
+ sections: RuleDescriptionSection[];
}
interface State {
const { contexts } = this.state;
const selected = contexts.find((ctxt) => ctxt.displayName === value);
+
if (selected) {
this.setState({ selectedContext: selected });
}
};
render() {
- const { className, sections } = this.props;
+ const { className, language, sections } = this.props;
const { contexts, defaultContext, selectedContext } = this.state;
const options = contexts.map((ctxt) => ({
<h2 className="sw-body-sm-highlight sw-mb-4">
{translate('coding_rules.description_context.title')}
</h2>
+
{defaultContext && (
<FlagMessage variant="info" className="sw-mb-4">
{translateWithParameters(
)}
</FlagMessage>
)}
+
<div className="sw-mb-4">
<ToggleButton
label={translate('coding_rules.description_context.title')}
options={options}
value={selectedContext.displayName}
/>
+
{selectedContext.key !== OTHERS_KEY && (
<h2>
{translateWithParameters(
</h2>
)}
</div>
+
{selectedContext.key === OTHERS_KEY ? (
<OtherContextOption />
) : (
- <div
- /* eslint-disable-next-line react/no-danger */
- dangerouslySetInnerHTML={{ __html: sanitizeString(selectedContext.content) }}
+ <CodeSyntaxHighlighter
+ htmlAsString={sanitizeString(selectedContext.content)}
+ language={language}
/>
)}
</StyledHtmlFormatter>
ref={(node: HTMLDivElement) => {
applyCodeDifferences(node);
}}
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{
- __html: sanitizeString(sections[0].content),
- }}
- />
+ >
+ <CodeSyntaxHighlighter
+ htmlAsString={sanitizeString(sections[0].content)}
+ language={language}
+ />
+ </StyledHtmlFormatter>
);
}
}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
import classNames from 'classnames';
import { cloneDeep, debounce, groupBy } from 'lodash';
import * as React from 'react';
constructor(props: RuleTabViewerProps) {
super(props);
+
this.educationPrinciplesRef = React.createRef();
+
this.checkIfEducationPrinciplesAreVisible = debounce(
this.checkIfEducationPrinciplesAreVisible,
DEBOUNCE_FOR_SCROLL
const tabs = this.computeTabs(Boolean(this.state.displayEducationalPrinciplesNotification));
const query = new URLSearchParams(this.props.location.search);
+
if (query.has('why')) {
this.setState({
selectedTab: tabs.find((tab) => tab.key === TabKeys.WhyIsThisAnIssue) ?? tabs[0],
selectedFlowIndex,
selectedLocationIndex,
} = this.props;
+
const { selectedTab } = this.state;
if (
ruleDetails.educationPrinciples.length > 0 &&
isLoggedIn &&
!dismissedNotices[NoticeType.EDUCATION_PRINCIPLES];
+
const tabs = this.computeTabs(displayEducationalPrinciplesNotification);
return {
computeTabs = (displayEducationalPrinciplesNotification: boolean) => {
const {
codeTabContent,
- ruleDetails: { descriptionSections, educationPrinciples, type: ruleType },
+ ruleDetails: { descriptionSections, educationPrinciples, lang: ruleLanguage, type: ruleType },
ruleDescriptionContextKey,
extendedDescription,
activityTabContent,
} else {
descriptionSectionsByKey[RuleDescriptionSections.RESOURCES] = [
{
- key: RuleDescriptionSections.RESOURCES,
content: extendedDescription,
+ key: RuleDescriptionSections.RESOURCES,
},
];
}
const tabs: Tab[] = [
{
- key: TabKeys.WhyIsThisAnIssue,
- label:
- ruleType === 'SECURITY_HOTSPOT'
- ? translate('coding_rules.description_section.title.root_cause.SECURITY_HOTSPOT')
- : translate('coding_rules.description_section.title.root_cause'),
content: (descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE]) && (
<RuleDescription
className="padded"
+ defaultContextKey={ruleDescriptionContextKey}
+ language={ruleLanguage}
sections={
descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE]
}
- defaultContextKey={ruleDescriptionContextKey}
/>
),
+ key: TabKeys.WhyIsThisAnIssue,
+ label:
+ ruleType === 'SECURITY_HOTSPOT'
+ ? translate('coding_rules.description_section.title.root_cause.SECURITY_HOTSPOT')
+ : translate('coding_rules.description_section.title.root_cause'),
},
{
- key: TabKeys.AssessTheIssue,
- label: translate('coding_rules.description_section.title', TabKeys.AssessTheIssue),
content: descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
<RuleDescription
className="padded"
+ language={ruleLanguage}
sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
/>
),
+ key: TabKeys.AssessTheIssue,
+ label: translate('coding_rules.description_section.title', TabKeys.AssessTheIssue),
},
{
- key: TabKeys.HowToFixIt,
- label: translate('coding_rules.description_section.title', TabKeys.HowToFixIt),
content: descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
<RuleDescription
className="padded"
- sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
defaultContextKey={ruleDescriptionContextKey}
+ language={ruleLanguage}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
/>
),
+ key: TabKeys.HowToFixIt,
+ label: translate('coding_rules.description_section.title', TabKeys.HowToFixIt),
},
{
+ content: activityTabContent,
key: TabKeys.Activity,
label: translate('coding_rules.description_section.title', TabKeys.Activity),
- content: activityTabContent,
},
{
- key: TabKeys.MoreInfo,
- label: (
- <>
- {translate('coding_rules.description_section.title', TabKeys.MoreInfo)}
- {displayEducationalPrinciplesNotification && <div className="notice-dot" />}
- </>
- ),
content: ((educationPrinciples && educationPrinciples.length > 0) ||
descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]) && (
<MoreInfoRuleDescription
- educationPrinciples={educationPrinciples}
- sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
displayEducationalPrinciplesNotification={displayEducationalPrinciplesNotification}
+ educationPrinciples={educationPrinciples}
educationPrinciplesRef={this.educationPrinciplesRef}
+ language={ruleLanguage}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
/>
),
+ key: TabKeys.MoreInfo,
+ label: (
+ <>
+ {translate('coding_rules.description_section.title', TabKeys.MoreInfo)}
+ {displayEducationalPrinciplesNotification && <div className="notice-dot" />}
+ </>
+ ),
},
];
if (codeTabContent !== undefined) {
tabs.unshift({
+ content: codeTabContent,
key: TabKeys.Code,
label: translate('issue.tabs', TabKeys.Code),
- content: codeTabContent,
});
}
<ScreenPositionHelper>
{({ top }) => (
<div
+ aria-labelledby={getTabId(selectedTab.key)}
+ className="bordered display-flex-column"
+ id={getTabPanelId(selectedTab.key)}
+ role="tabpanel"
style={{
// We substract the footer height with padding (80) and the main layout padding (20)
maxHeight: scrollInTab ? `calc(100vh - ${top + 100}px)` : 'initial',
}}
- className="bordered display-flex-column"
- role="tabpanel"
- aria-labelledby={getTabId(selectedTab.key)}
- id={getTabPanelId(selectedTab.key)}
>
{
// Preserve tabs state by always rendering all of them. Only hide them when not selected
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+
+import { uniqueId } from 'lodash';
import { ComponentQualifier } from '../../types/component';
import { Task, TaskStatuses, TaskTypes, TaskWarning } from '../../types/tasks';
export function mockTaskWarning(overrides: Partial<TaskWarning> = {}): TaskWarning {
return {
- key: 'foo',
+ key: uniqueId('foo'),
message: 'Lorem ipsum',
dismissable: false,
...overrides,
eslint-plugin-local-rules: 1.3.2
eslint-plugin-typescript-sort-keys: 2.3.0
highlight.js: 11.7.0
+ highlightjs-apex: 1.2.0
+ highlightjs-cobol: 0.3.3
+ highlightjs-sap-abap: 0.2.0
history: 5.3.0
jest: 29.5.0
postcss: 8.4.21
languageName: node
linkType: hard
+"highlightjs-apex@npm:1.2.0":
+ version: 1.2.0
+ resolution: "highlightjs-apex@npm:1.2.0"
+ checksum: d0e1543dbdfa156c0bb6da74afcb7aaf315fe211024246917c8f967075d6c239bcd408d6a667c324ea75b928a2d8495cb1b8d160b403894aea8c9a16c293f33a
+ languageName: node
+ linkType: hard
+
+"highlightjs-cobol@npm:0.3.3":
+ version: 0.3.3
+ resolution: "highlightjs-cobol@npm:0.3.3"
+ dependencies:
+ minimist: ">=1.2.6"
+ mkdirp: ^1.0.4
+ checksum: f59a694703f883ead2fbdf262f36eab583c8bbf64649e59d5de1e13a43e43979ad9030eab69e1cb08f7558ce60ca5cfd1fe42c7a38e34fd8b0baebf06df9118d
+ languageName: node
+ linkType: hard
+
+"highlightjs-sap-abap@npm:0.2.0":
+ version: 0.2.0
+ resolution: "highlightjs-sap-abap@npm:0.2.0"
+ checksum: 685293fc2de3b333d0166f7323d38b53b70a53a462851d075484826c7ee16fa09f4c24cda44c1c957525352e112ba0a83cefe37641ee65b62e1483be93c60019
+ languageName: node
+ linkType: hard
+
"history@npm:5.3.0":
version: 5.3.0
resolution: "history@npm:5.3.0"
languageName: node
linkType: hard
+"minimist@npm:>=1.2.6":
+ version: 1.2.8
+ resolution: "minimist@npm:1.2.8"
+ checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
+ languageName: node
+ linkType: hard
+
"minimist@npm:^1.2.0, minimist@npm:^1.2.5":
version: 1.2.5
resolution: "minimist@npm:1.2.5"
projects / sonarqube.git / commitdiff