From 91fe807305e89ecd9df3b6f4f221540fd451659e Mon Sep 17 00:00:00 2001
From: Grégoire Aubert <gregoire.aubert@sonarsource.com>
Date: Thu, 8 Feb 2018 17:43:32 +0100
Subject: SONAR-10347 Create a CodeSnippet component and use it in project
 badges and onboarding tutorial

---
 .../main/js/apps/overview/badges/BadgeSnippet.tsx  |  34 -------
 .../main/js/apps/overview/badges/BadgesModal.tsx   |   4 +-
 .../__snapshots__/BadgesModal-test.tsx.snap        |   3 +-
 .../src/main/js/apps/overview/badges/styles.css    |  35 -------
 .../apps/tutorials/onboarding/commands/ClangGCC.js |   6 +-
 .../apps/tutorials/onboarding/commands/Command.js  |  53 ----------
 .../apps/tutorials/onboarding/commands/DotNet.js   |   8 +-
 .../tutorials/onboarding/commands/JavaGradle.js    |   6 +-
 .../tutorials/onboarding/commands/JavaMaven.js     |   4 +-
 .../js/apps/tutorials/onboarding/commands/Msvc.js  |   8 +-
 .../js/apps/tutorials/onboarding/commands/Other.js |   4 +-
 .../onboarding/commands/__tests__/Command-test.js  |  27 -----
 .../__tests__/__snapshots__/ClangGCC-test.js.snap  |  30 +++---
 .../__tests__/__snapshots__/Command-test.js.snap   |  39 --------
 .../__tests__/__snapshots__/DotNet-test.js.snap    |  32 +++---
 .../__snapshots__/JavaGradle-test.js.snap          |  16 +--
 .../__tests__/__snapshots__/JavaMaven-test.js.snap |   8 +-
 .../__tests__/__snapshots__/Msvc-test.js.snap      |  32 +++---
 .../__tests__/__snapshots__/Other-test.js.snap     |  18 ++--
 .../main/js/apps/tutorials/onboarding/styles.css   |  42 --------
 .../src/main/js/components/common/CodeSnippet.css  |  59 +++++++++++
 .../src/main/js/components/common/CodeSnippet.tsx  |  47 +++++++++
 .../common/__tests__/CodeSnippet-test.tsx          |  32 ++++++
 .../__snapshots__/CodeSnippet-test.tsx.snap        | 111 +++++++++++++++++++++
 24 files changed, 339 insertions(+), 319 deletions(-)
 delete mode 100644 server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js
 delete mode 100644 server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Command-test.js.snap
 create mode 100644 server/sonar-web/src/main/js/components/common/CodeSnippet.css
 create mode 100644 server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
 create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
 create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/CodeSnippet-test.tsx.snap

diff --git a/server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx b/server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx
deleted file mode 100644
index 5deaf71cbbd..00000000000
--- a/server/sonar-web/src/main/js/apps/overview/badges/BadgeSnippet.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 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 * as React from 'react';
-import ClipboardButton from '../../../components/controls/ClipboardButton';
-
-interface Props {
-  snippet: string;
-}
-
-export default function BadgeSnippet({ snippet }: Props) {
-  return (
-    <div className="badge-snippet">
-      <pre>{snippet}</pre>
-      <ClipboardButton copyValue={snippet} tooltipPlacement="top" />
-    </div>
-  );
-}
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/Command.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js
deleted file mode 100644
index 5e3706585f2..00000000000
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Command.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 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.
- */
-// @flow
-import React from 'react';
-import classNames from 'classnames';
-import ClipboardButton from '../../../../components/controls/ClipboardButton';
-import { translate } from '../../../../helpers/l10n';
-
-/*::
-type Props = {
-  command: string | Array<?string>,
-  isOneLine?: boolean
-};
-*/
-
-// 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>
-    );
-  }
-}
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__/Command-test.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js
deleted file mode 100644
index f4aa51cd5c8..00000000000
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/Command-test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2018 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.
- */
-// @flow
-import React from 'react';
-import { mount } from 'enzyme';
-import Command from '../Command';
-
-it('renders correctly', () => {
-  expect(mount(<Command command={'foo\nbar'} />)).toMatchSnapshot();
-});
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/components/common/CodeSnippet.css b/server/sonar-web/src/main/js/components/common/CodeSnippet.css
new file mode 100644
index 00000000000..18232d67b36
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.css
@@ -0,0 +1,59 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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.
+ */
+.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);
+}
+
+.code-snippet-oneline pre {
+  padding-bottom: 40px;
+}
+
+.code-snippet-oneline button {
+  top: auto;
+  top: 40px;
+}
diff --git a/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
new file mode 100644
index 00000000000..6e2469597bc
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/CodeSnippet.tsx
@@ -0,0 +1,47 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 * as React from 'react';
+import * as classNames from 'classnames';
+import ClipboardButton from '../controls/ClipboardButton';
+import './CodeSnippet.css';
+
+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 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/components/common/__tests__/CodeSnippet-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
new file mode 100644
index 00000000000..8956e411a50
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/__tests__/CodeSnippet-test.tsx
@@ -0,0 +1,32 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 * as React from 'react';
+import { mount } from 'enzyme';
+import CodeSnippet from '../CodeSnippet';
+
+it('renders correctly', () => {
+  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>
+`;
-- 
cgit v1.2.3