diff options
21 files changed, 267 insertions, 247 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx index fc98e4eb71a..3592c4daea3 100644 --- a/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx +++ b/server/sonar-web/src/main/js/apps/overview/badges/BadgesModal.tsx @@ -19,10 +19,10 @@ */ import * as React from 'react'; import BadgeButton from './BadgeButton'; -import BadgeSnippet from './BadgeSnippet'; import BadgeParams from './BadgeParams'; import { BadgeType, BadgeOptions, getBadgeUrl } from './utils'; import { Metric } from '../../../app/types'; +import CodeSnippet from '../../../components/common/CodeSnippet'; import Modal from '../../../components/controls/Modal'; import { translate } from '../../../helpers/l10n'; import './styles.css'; @@ -101,7 +101,7 @@ export default class BadgesModal extends React.PureComponent<Props, State> { type={selectedType} updateOptions={this.handleUpdateOptions} /> - <BadgeSnippet snippet={getBadgeUrl(selectedType, fullBadgeOptions)} /> + <CodeSnippet isOneLine={true} snippet={getBadgeUrl(selectedType, fullBadgeOptions)} /> </div> <footer className="modal-foot"> <ResetButtonLink className="js-modal-close" onClick={this.handleClose}> diff --git a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap index 8366543e432..00776343f26 100644 --- a/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/overview/badges/__tests__/__snapshots__/BadgesModal-test.tsx.snap @@ -75,7 +75,8 @@ exports[`should display the modal after click 2`] = ` type="measure" updateOptions={[Function]} /> - <BadgeSnippet + <CodeSnippet + isOneLine={true} snippet="host/api/project_badges/measure?branch=branch-6.6&project=foo&metric=alert_status" /> </div> diff --git a/server/sonar-web/src/main/js/apps/overview/badges/styles.css b/server/sonar-web/src/main/js/apps/overview/badges/styles.css index 3fe0529fe4c..f3866498378 100644 --- a/server/sonar-web/src/main/js/apps/overview/badges/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/badges/styles.css @@ -48,38 +48,3 @@ background-color: var(--lightBlue); border-color: var(--darkBlue); } - -.badge-snippet { - position: relative; - margin: var(--gridSize) 0; - background: var(--gray40); - color: var(--snippetFontColor); - border-radius: 3px; -} - -.badge-snippet pre { - padding: calc(2 * var(--gridSize)); - padding-bottom: 40px; - overflow: auto; -} - -.badge-snippet button { - position: absolute; - top: auto; - top: 40px; - right: calc(2 * var(--gridSize)); - height: var(--smallControlHeight); - line-height: 18px; - border: 1px solid #fff; - color: #fff; - font-size: 11px; - font-weight: normal; - user-select: none; -} - -.badge-snippet button:hover, -.badge-snippet button:focus, -.badge-snippet button:active { - background-color: #fff; - color: var(--gray40); -} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/ClangGCC.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/ClangGCC.js index 249c8cc2976..26d3596d2e9 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/ClangGCC.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/ClangGCC.js @@ -19,9 +19,9 @@ */ // @flow import React from 'react'; -import Command from './Command'; import SQScanner from './SQScanner'; import BuildWrapper from './BuildWrapper'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -67,8 +67,8 @@ export default function ClangGCC(props /*: Props */) { __html: translate('onboarding.analysis.sq_scanner.execute.text') }} /> - <Command command={command1} isOneLine={true} /> - <Command command={command2} isOneLine={props.os === 'win'} /> + <CodeSnippet isOneLine={true} snippet={command1} /> + <CodeSnippet isOneLine={props.os === 'win'} snippet={command2} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.sq_scanner.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/DotNet.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/DotNet.js index 493eb4f690b..7e5fd4f24e0 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/DotNet.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/DotNet.js @@ -19,8 +19,8 @@ */ // @flow import React from 'react'; -import Command from './Command'; import MSBuildScanner from './MSBuildScanner'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -58,9 +58,9 @@ export default function DotNet(props /*: Props */) { __html: translate('onboarding.analysis.msbuild.execute.text') }} /> - <Command command={command1} isOneLine={true} /> - <Command command={command2} isOneLine={true} /> - <Command command={command3} isOneLine={true} /> + <CodeSnippet isOneLine={true} snippet={command1} /> + <CodeSnippet isOneLine={true} snippet={command2} /> + <CodeSnippet isOneLine={true} snippet={command3} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.msbuild.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaGradle.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaGradle.js index 83f34e622e3..41913848279 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaGradle.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaGradle.js @@ -19,7 +19,7 @@ */ // @flow import React from 'react'; -import Command from './Command'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -47,11 +47,11 @@ export default function JavaGradle(props /*: Props */) { className="spacer-bottom markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.java.gradle.text.1') }} /> - <Command command={config} /> + <CodeSnippet snippet={config} /> <p className="spacer-top spacer-bottom markdown"> {translate('onboarding.analysis.java.gradle.text.2')} </p> - <Command command={command} /> + <CodeSnippet snippet={command} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.java.gradle.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaMaven.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaMaven.js index 1c7f56e137d..a54a97e1443 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaMaven.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/JavaMaven.js @@ -19,7 +19,7 @@ */ // @flow import React from 'react'; -import Command from './Command'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -42,7 +42,7 @@ export default function JavaMaven(props /*: Props */) { <div> <h4 className="spacer-bottom">{translate('onboarding.analysis.java.maven.header')}</h4> <p className="spacer-bottom markdown">{translate('onboarding.analysis.java.maven.text')}</p> - <Command command={command} /> + <CodeSnippet snippet={command} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.java.maven.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js index c8fc8106595..756c2daea31 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js @@ -19,9 +19,9 @@ */ // @flow import React from 'react'; -import Command from './Command'; import MSBuildScanner from './MSBuildScanner'; import BuildWrapper from './BuildWrapper'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -61,9 +61,9 @@ export default function Msvc(props /*: Props */) { __html: translate('onboarding.analysis.msbuild.execute.text') }} /> - <Command command={command1} isOneLine={true} /> - <Command command={command2} isOneLine={true} /> - <Command command={command3} isOneLine={true} /> + <CodeSnippet isOneLine={true} snippet={command1} /> + <CodeSnippet isOneLine={true} snippet={command2} /> + <CodeSnippet isOneLine={true} snippet={command3} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.msbuild.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Other.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Other.js index 2698d23cd09..47be65b1952 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Other.js +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Other.js @@ -19,8 +19,8 @@ */ // @flow import React from 'react'; -import Command from './Command'; import SQScanner from './SQScanner'; +import CodeSnippet from '../../../../components/common/CodeSnippet'; import { translate } from '../../../../helpers/l10n'; /*:: @@ -56,7 +56,7 @@ export default function Other(props /*: Props */) { __html: translate('onboarding.analysis.sq_scanner.execute.text') }} /> - <Command command={command} isOneLine={props.os === 'win'} /> + <CodeSnippet isOneLine={props.os === 'win'} snippet={command} /> <p className="big-spacer-top markdown" dangerouslySetInnerHTML={{ __html: translate('onboarding.analysis.sq_scanner.docs') }} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/ClangGCC-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/ClangGCC-test.js.snap index 42680367bee..4375df814f3 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/ClangGCC-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/ClangGCC-test.js.snap @@ -22,12 +22,13 @@ exports[`renders correctly 1`] = ` } } /> - <Command - command="build-wrapper-win-x86-64.exe --out-dir bw-output make clean all" + <CodeSnippet isOneLine={true} + snippet="build-wrapper-win-x86-64.exe --out-dir bw-output make clean all" /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "sonar-scanner.bat", "-Dsonar.projectKey=projectKey", @@ -38,7 +39,6 @@ exports[`renders correctly 1`] = ` "-Dsonar.login=token", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" @@ -73,12 +73,13 @@ exports[`renders correctly 2`] = ` } } /> - <Command - command="build-wrapper-linux-x86-64 --out-dir bw-output make clean all" + <CodeSnippet isOneLine={true} + snippet="build-wrapper-linux-x86-64 --out-dir bw-output make clean all" /> - <Command - command={ + <CodeSnippet + isOneLine={false} + snippet={ Array [ "sonar-scanner", "-Dsonar.projectKey=projectKey", @@ -89,7 +90,6 @@ exports[`renders correctly 2`] = ` "-Dsonar.login=token", ] } - isOneLine={false} /> <p className="big-spacer-top markdown" @@ -124,12 +124,13 @@ exports[`renders correctly 3`] = ` } } /> - <Command - command="build-wrapper-linux-x86-64 --out-dir bw-output make clean all" + <CodeSnippet isOneLine={true} + snippet="build-wrapper-linux-x86-64 --out-dir bw-output make clean all" /> - <Command - command={ + <CodeSnippet + isOneLine={false} + snippet={ Array [ "sonar-scanner", "-Dsonar.projectKey=projectKey", @@ -140,7 +141,6 @@ exports[`renders correctly 3`] = ` "-Dsonar.login=token", ] } - isOneLine={false} /> <p className="big-spacer-top markdown" diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Command-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Command-test.js.snap deleted file mode 100644 index a7a6a001caa..00000000000 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Command-test.js.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` -<Command - command="foo -bar" -> - <div - className="onboarding-command" - > - <pre> - foo -bar - </pre> - <ClipboardButton - copyValue="foo -bar" - tooltipPlacement="top" - > - <Button - className="js-copy-to-clipboard no-select" - data-clipboard-text="foo -bar" - innerRef={[Function]} - > - <button - className="button js-copy-to-clipboard no-select" - data-clipboard-text="foo -bar" - onClick={[Function]} - type="button" - > - copy - </button> - </Button> - </ClipboardButton> - </div> -</Command> -`; diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/DotNet-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/DotNet-test.js.snap index 56d2150cae2..e21df31e564 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/DotNet-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/DotNet-test.js.snap @@ -16,8 +16,9 @@ exports[`renders correctly 1`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe begin", "/k:\\"projectKey\\"", @@ -26,20 +27,19 @@ exports[`renders correctly 1`] = ` "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> - <Command - command="MsBuild.exe /t:Rebuild" + <CodeSnippet isOneLine={true} + snippet="MsBuild.exe /t:Rebuild" /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe end", "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" @@ -68,8 +68,9 @@ exports[`renders correctly 2`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe begin", "/k:\\"projectKey\\"", @@ -78,20 +79,19 @@ exports[`renders correctly 2`] = ` "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> - <Command - command="MsBuild.exe /t:Rebuild" + <CodeSnippet isOneLine={true} + snippet="MsBuild.exe /t:Rebuild" /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe end", "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaGradle-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaGradle-test.js.snap index 264de313eac..fe46b14fff4 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaGradle-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaGradle-test.js.snap @@ -15,8 +15,8 @@ exports[`renders correctly 1`] = ` } } /> - <Command - command="plugins { + <CodeSnippet + snippet="plugins { id \\"org.sonarqube\\" version \\"2.6\\" }" /> @@ -25,8 +25,8 @@ exports[`renders correctly 1`] = ` > onboarding.analysis.java.gradle.text.2 </p> - <Command - command={ + <CodeSnippet + snippet={ Array [ "./gradlew sonarqube", undefined, @@ -69,8 +69,8 @@ exports[`renders correctly 2`] = ` } } /> - <Command - command="plugins { + <CodeSnippet + snippet="plugins { id \\"org.sonarqube\\" version \\"2.6\\" }" /> @@ -79,8 +79,8 @@ exports[`renders correctly 2`] = ` > onboarding.analysis.java.gradle.text.2 </p> - <Command - command={ + <CodeSnippet + snippet={ Array [ "./gradlew sonarqube", "-Dsonar.organization=organization", diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaMaven-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaMaven-test.js.snap index 60d6f6c8dfb..00a5d783eb5 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaMaven-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/JavaMaven-test.js.snap @@ -12,8 +12,8 @@ exports[`renders correctly 1`] = ` > onboarding.analysis.java.maven.text </p> - <Command - command={ + <CodeSnippet + snippet={ Array [ "mvn sonar:sonar", undefined, @@ -53,8 +53,8 @@ exports[`renders correctly 2`] = ` > onboarding.analysis.java.maven.text </p> - <Command - command={ + <CodeSnippet + snippet={ Array [ "mvn sonar:sonar", "-Dsonar.organization=organization", diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Msvc-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Msvc-test.js.snap index c5260a8f2e7..a5e4f91b4e3 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Msvc-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Msvc-test.js.snap @@ -20,8 +20,9 @@ exports[`renders correctly 1`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe begin", "/k:\\"projectKey\\"", @@ -31,20 +32,19 @@ exports[`renders correctly 1`] = ` "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> - <Command - command="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild" + <CodeSnippet isOneLine={true} + snippet="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild" /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe end", "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" @@ -77,8 +77,9 @@ exports[`renders correctly 2`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe begin", "/k:\\"projectKey\\"", @@ -88,20 +89,19 @@ exports[`renders correctly 2`] = ` "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> - <Command - command="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild" + <CodeSnippet isOneLine={true} + snippet="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild" /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "SonarQube.Scanner.MSBuild.exe end", "/d:sonar.login=\\"token\\"", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Other-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Other-test.js.snap index ba21667f2f5..7c7ae719489 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Other-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Other-test.js.snap @@ -18,8 +18,9 @@ exports[`renders correctly 1`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={true} + snippet={ Array [ "sonar-scanner.bat", "-Dsonar.projectKey=projectKey", @@ -29,7 +30,6 @@ exports[`renders correctly 1`] = ` "-Dsonar.login=token", ] } - isOneLine={true} /> <p className="big-spacer-top markdown" @@ -60,8 +60,9 @@ exports[`renders correctly 2`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={false} + snippet={ Array [ "sonar-scanner", "-Dsonar.projectKey=projectKey", @@ -71,7 +72,6 @@ exports[`renders correctly 2`] = ` "-Dsonar.login=token", ] } - isOneLine={false} /> <p className="big-spacer-top markdown" @@ -102,8 +102,9 @@ exports[`renders correctly 3`] = ` } } /> - <Command - command={ + <CodeSnippet + isOneLine={false} + snippet={ Array [ "sonar-scanner", "-Dsonar.projectKey=projectKey", @@ -113,7 +114,6 @@ exports[`renders correctly 3`] = ` "-Dsonar.login=token", ] } - isOneLine={false} /> <p className="big-spacer-top markdown" diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css b/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css index e12fb2dde86..9c8dfc093fc 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css @@ -58,48 +58,6 @@ outline: none; } -.onboarding-command { - position: relative; - margin: 8px 0; -} - -.onboarding-command pre { - padding: 15px; - border-radius: 2px; - background: var(--gray40); - color: var(--snippetFontColor); - overflow: auto; -} - -.onboarding-command button { - position: absolute; - top: 15px; - right: 15px; - height: 20px; - line-height: 18px; - border: 1px solid #fff; - color: #fff; - font-size: 11px; - font-weight: normal; - user-select: none; -} - -.onboarding-command button:hover, -.onboarding-command button:focus, -.onboarding-command button:active { - background-color: #fff; - color: var(--gray40); -} - -.onboarding-command-oneline pre { - padding-bottom: 40px; -} - -.onboarding-command-oneline button { - top: auto; - top: 40px; -} - .onboarding .page-actions { text-align: right; margin-bottom: 0; diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx b/server/sonar-web/src/main/js/components/common/CodeSnippet.css index 5deaf71cbbd..18232d67b36 100644 --- a/server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx +++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.css @@ -17,18 +17,43 @@ * 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 ClipboardButton from '../../../components/controls/ClipboardButton'; +.code-snippet { + position: relative; + margin: var(--gridSize) 0; + background: var(--gray40); + color: var(--snippetFontColor); + border-radius: 3px; +} + +.code-snippet pre { + padding: calc(2 * var(--gridSize)); + overflow: auto; +} + +.code-snippet button { + position: absolute; + top: calc(2 * var(--gridSize)); + right: calc(2 * var(--gridSize)); + line-height: 18px; + border: 1px solid #fff; + color: #fff; + font-size: 11px; + font-weight: normal; + user-select: none; +} + +.code-snippet button:hover, +.code-snippet button:focus, +.code-snippet button:active { + background-color: #fff; + color: var(--gray40); +} -interface Props { - snippet: string; +.code-snippet-oneline pre { + padding-bottom: 40px; } -export default function BadgeSnippet({ snippet }: Props) { - return ( - <div className="badge-snippet"> - <pre>{snippet}</pre> - <ClipboardButton copyValue={snippet} tooltipPlacement="top" /> - </div> - ); +.code-snippet-oneline button { + top: auto; + top: 40px; } diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx index 5e3706585f2..6e2469597bc 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js +++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx @@ -17,37 +17,31 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -// @flow -import React from 'react'; -import classNames from 'classnames'; -import ClipboardButton from '../../../../components/controls/ClipboardButton'; -import { translate } from '../../../../helpers/l10n'; +import * as React from 'react'; +import * as classNames from 'classnames'; +import ClipboardButton from '../controls/ClipboardButton'; +import './CodeSnippet.css'; -/*:: -type Props = { - command: string | Array<?string>, - isOneLine?: boolean -}; -*/ +interface Props { + className?: string; + isOneLine?: boolean; + noCopy?: boolean; + snippet: string | (string | undefined)[]; +} // keep this "useless" concatentation for the readability reason // eslint-disable-next-line no-useless-concat const s = ' \\' + '\n '; -export default class Command extends React.PureComponent { - /*:: props: Props; */ - - render() { - const { command, isOneLine } = this.props; - const commandArray = Array.isArray(command) ? command.filter(line => line != null) : [command]; - const finalCommand = isOneLine ? commandArray.join(' ') : commandArray.join(s); - - return ( - <div - className={classNames('onboarding-command', { 'onboarding-command-oneline': isOneLine })}> - <pre>{finalCommand}</pre> - <ClipboardButton copyValue={finalCommand} tooltipPlacement="top" /> - </div> - ); - } +export default function CodeSnippet({ className, isOneLine, noCopy, snippet }: Props) { + const snippetArray = Array.isArray(snippet) + ? snippet.filter(line => line !== undefined) + : [snippet]; + const finalSnippet = isOneLine ? snippetArray.join(' ') : snippetArray.join(s); + return ( + <div className={classNames('code-snippet', { 'code-snippet-oneline': isOneLine }, className)}> + <pre>{finalSnippet}</pre> + {!noCopy && <ClipboardButton copyValue={finalSnippet} tooltipPlacement="top" />} + </div> + ); } diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx index f4aa51cd5c8..8956e411a50 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js +++ b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx @@ -17,11 +17,16 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -// @flow -import React from 'react'; +import * as React from 'react'; import { mount } from 'enzyme'; -import Command from '../Command'; +import CodeSnippet from '../CodeSnippet'; it('renders correctly', () => { - expect(mount(<Command command={'foo\nbar'} />)).toMatchSnapshot(); + expect(mount(<CodeSnippet snippet={'foo\nbar'} />)).toMatchSnapshot(); + expect(mount(<CodeSnippet snippet={'foo\nbar'} noCopy={true} />)).toMatchSnapshot(); +}); + +it('renders correctly with array snippet', () => { + expect(mount(<CodeSnippet snippet={['foo', 'bar']} />)).toMatchSnapshot(); + expect(mount(<CodeSnippet snippet={['foo', 'bar']} isOneLine={true} />)).toMatchSnapshot(); }); diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap new file mode 100644 index 00000000000..5e330d13abe --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap @@ -0,0 +1,111 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +<CodeSnippet + snippet="foo +bar" +> + <div + className="code-snippet" + > + <pre> + foo +bar + </pre> + <ClipboardButton + copyValue="foo +bar" + tooltipPlacement="top" + > + <button + className="js-copy-to-clipboard no-select" + data-clipboard-text="foo +bar" + > + copy + </button> + </ClipboardButton> + </div> +</CodeSnippet> +`; + +exports[`renders correctly 2`] = ` +<CodeSnippet + noCopy={true} + snippet="foo +bar" +> + <div + className="code-snippet" + > + <pre> + foo +bar + </pre> + </div> +</CodeSnippet> +`; + +exports[`renders correctly with array snippet 1`] = ` +<CodeSnippet + snippet={ + Array [ + "foo", + "bar", + ] + } +> + <div + className="code-snippet" + > + <pre> + foo \\ + bar + </pre> + <ClipboardButton + copyValue="foo \\\\ + bar" + tooltipPlacement="top" + > + <button + className="js-copy-to-clipboard no-select" + data-clipboard-text="foo \\\\ + bar" + > + copy + </button> + </ClipboardButton> + </div> +</CodeSnippet> +`; + +exports[`renders correctly with array snippet 2`] = ` +<CodeSnippet + isOneLine={true} + snippet={ + Array [ + "foo", + "bar", + ] + } +> + <div + className="code-snippet code-snippet-oneline" + > + <pre> + foo bar + </pre> + <ClipboardButton + copyValue="foo bar" + tooltipPlacement="top" + > + <button + className="js-copy-to-clipboard no-select" + data-clipboard-text="foo bar" + > + copy + </button> + </ClipboardButton> + </div> +</CodeSnippet> +`; |