SONAR-9830 Onboarding of C# projects is not working properly

10 files changed, 81 insertions, 51 deletions

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 2833ad4832c..025160b9c0b 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
@@ -67,8 +67,8 @@ export default function ClangGCC(props /*: Props */) {
           __html: translate('onboarding.analysis.sq_scanner.execute.text')
         }}
       />
-      <Command command={command1} />
-      <Command command={command2} />
+      <Command command={command1} isWindows={props.os === 'win'} />
+      <Command command={command2} isWindows={props.os === 'win'} />
       <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
index aa6ad03916e..d1ea81af9cf 100644
--- 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
@@ -20,12 +20,14 @@
 // @flow
 import React from 'react';
 import Clipboard from 'clipboard';
+import classNames from 'classnames';
 import Tooltip from '../../../../components/controls/Tooltip';
 import { translate } from '../../../../helpers/l10n';
 
 /*::
 type Props = {
-  command: string | Array<?string>
+  command: string | Array<?string>,
+  isWindows?: boolean
 };
 */
 
@@ -50,6 +52,12 @@ export default class Command extends React.PureComponent {
     this.clipboard.on('success', this.showTooltip);
   }
 
+  componentDidUpdate() {
+    this.clipboard.destroy();
+    this.clipboard = new Clipboard(this.copyButton);
+    this.clipboard.on('success', this.showTooltip);
+  }
+
   componentWillUnmount() {
     this.mounted = false;
     this.clipboard.destroy();
@@ -69,9 +77,9 @@ export default class Command extends React.PureComponent {
   };
 
   render() {
-    const { command } = this.props;
+    const { command, isWindows } = this.props;
     const commandArray = Array.isArray(command) ? command.filter(line => line != null) : [command];
-    const finalCommand = commandArray.join(s);
+    const finalCommand = isWindows ? commandArray.join(' ') : commandArray.join(s);
 
     const button = (
       <button data-clipboard-text={finalCommand} ref={node => (this.copyButton = node)}>
@@ -80,7 +88,8 @@ export default class Command extends React.PureComponent {
     );
 
     return (
-      <div className="onboarding-command">
+      <div
+        className={classNames('onboarding-command', { 'onboarding-command-windows': isWindows })}>
         <pre>{finalCommand}</pre>
         {this.state.tooltipShown ? (
           <Tooltip defaultVisible={true} placement="top" overlay="Copied!" trigger="manual">
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 22d42c83e47..f253b4bf92e 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
@@ -36,14 +36,14 @@ export default function DotNet(props /*: Props */) {
   const command1 = [
     'SonarQube.Scanner.MSBuild.exe begin',
     `/k:"${props.projectKey}"`,
-    props.organization && `/d:"sonar.organization=${props.organization}"`,
-    `/d:"sonar.host.url=${props.host}`,
-    `/d:"sonar.login=${props.token}"`
+    props.organization && `/d:sonar.organization="${props.organization}"`,
+    `/d:sonar.host.url="${props.host}"`,
+    `/d:sonar.login="${props.token}"`
   ];
 
   const command2 = 'MsBuild.exe /t:Rebuild';
 
-  const command3 = ['SonarQube.Scanner.MSBuild.exe end', `/d:"sonar.login=${props.token}"`];
+  const command3 = ['SonarQube.Scanner.MSBuild.exe end', `/d:sonar.login="${props.token}"`];
 
   return (
     <div>
@@ -58,9 +58,9 @@ export default function DotNet(props /*: Props */) {
           __html: translate('onboarding.analysis.msbuild.execute.text')
         }}
       />
-      <Command command={command1} />
-      <Command command={command2} />
-      <Command command={command3} />
+      <Command command={command1} isWindows={true} />
+      <Command command={command2} isWindows={true} />
+      <Command command={command3} isWindows={true} />
       <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/Msvc.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js
index b73c4b2a947..c47e5b2a4c3 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
@@ -37,15 +37,15 @@ export default function Msvc(props /*: Props */) {
   const command1 = [
     'SonarQube.Scanner.MSBuild.exe begin',
     `/k:"${props.projectKey}"`,
-    props.organization && `/d:"sonar.organization=${props.organization}"`,
-    '/d:"sonar.cfamily.build-wrapper-output=bw-output"',
-    `/d:"sonar.host.url=${props.host}`,
-    `/d:"sonar.login=${props.token}"`
+    props.organization && `/d:sonar.organization="${props.organization}"`,
+    '/d:sonar.cfamily.build-wrapper-output=bw-output',
+    `/d:sonar.host.url="${props.host}"`,
+    `/d:sonar.login="${props.token}"`
   ];
 
-  const command2 = ['build-wrapper-win-x86-64.exe', '--out-dir bw-output MsBuild.exe /t:Rebuild'];
+  const command2 = 'build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild';
 
-  const command3 = ['SonarQube.Scanner.MSBuild.exe end', `/d:"sonar.login=${props.token}"`];
+  const command3 = ['SonarQube.Scanner.MSBuild.exe end', `/d:sonar.login="${props.token}"`];
 
   return (
     <div>
@@ -61,9 +61,9 @@ export default function Msvc(props /*: Props */) {
           __html: translate('onboarding.analysis.msbuild.execute.text')
         }}
       />
-      <Command command={command1} />
-      <Command command={command2} />
-      <Command command={command3} />
+      <Command command={command1} isWindows={true} />
+      <Command command={command2} isWindows={true} />
+      <Command command={command3} isWindows={true} />
       <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 0bb64ab425c..36867f665f3 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
@@ -56,7 +56,7 @@ export default function Other(props /*: Props */) {
           __html: translate('onboarding.analysis.sq_scanner.execute.text')
         }}
       />
-      <Command command={command} />
+      <Command command={command} isWindows={props.os === 'win'} />
       <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 1ec053c4083..c462b767acf 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
@@ -24,6 +24,7 @@ exports[`renders correctly 1`] = `
   />
   <Command
     command="build-wrapper-win-x86-64.exe --out-dir bw-output make clean all"
+    isWindows={true}
   />
   <Command
     command={
@@ -37,6 +38,7 @@ exports[`renders correctly 1`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={true}
   />
   <p
     className="big-spacer-top markdown"
@@ -73,6 +75,7 @@ exports[`renders correctly 2`] = `
   />
   <Command
     command="build-wrapper-linux-x86-64 --out-dir bw-output make clean all"
+    isWindows={false}
   />
   <Command
     command={
@@ -86,6 +89,7 @@ exports[`renders correctly 2`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={false}
   />
   <p
     className="big-spacer-top markdown"
@@ -122,6 +126,7 @@ exports[`renders correctly 3`] = `
   />
   <Command
     command="build-wrapper-linux-x86-64 --out-dir bw-output make clean all"
+    isWindows={false}
   />
   <Command
     command={
@@ -135,6 +140,7 @@ exports[`renders correctly 3`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={false}
   />
   <p
     className="big-spacer-top markdown"
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 3672a2f4c8d..b82b31b3cc1 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
@@ -22,21 +22,24 @@ exports[`renders correctly 1`] = `
         "SonarQube.Scanner.MSBuild.exe begin",
         "/k:\\"projectKey\\"",
         undefined,
-        "/d:\\"sonar.host.url=host",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.host.url=\\"host\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <Command
     command="MsBuild.exe /t:Rebuild"
+    isWindows={true}
   />
   <Command
     command={
       Array [
         "SonarQube.Scanner.MSBuild.exe end",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <p
     className="big-spacer-top markdown"
@@ -70,22 +73,25 @@ exports[`renders correctly 2`] = `
       Array [
         "SonarQube.Scanner.MSBuild.exe begin",
         "/k:\\"projectKey\\"",
-        "/d:\\"sonar.organization=organization\\"",
-        "/d:\\"sonar.host.url=host",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.organization=\\"organization\\"",
+        "/d:sonar.host.url=\\"host\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <Command
     command="MsBuild.exe /t:Rebuild"
+    isWindows={true}
   />
   <Command
     command={
       Array [
         "SonarQube.Scanner.MSBuild.exe end",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <p
     className="big-spacer-top markdown"
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 564d75fb708..e27a0b48d83 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
@@ -26,27 +26,25 @@ exports[`renders correctly 1`] = `
         "SonarQube.Scanner.MSBuild.exe begin",
         "/k:\\"projectKey\\"",
         undefined,
-        "/d:\\"sonar.cfamily.build-wrapper-output=bw-output\\"",
-        "/d:\\"sonar.host.url=host",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.cfamily.build-wrapper-output=bw-output",
+        "/d:sonar.host.url=\\"host\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <Command
-    command={
-      Array [
-        "build-wrapper-win-x86-64.exe",
-        "--out-dir bw-output MsBuild.exe /t:Rebuild",
-      ]
-    }
+    command="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild"
+    isWindows={true}
   />
   <Command
     command={
       Array [
         "SonarQube.Scanner.MSBuild.exe end",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <p
     className="big-spacer-top markdown"
@@ -84,28 +82,26 @@ exports[`renders correctly 2`] = `
       Array [
         "SonarQube.Scanner.MSBuild.exe begin",
         "/k:\\"projectKey\\"",
-        "/d:\\"sonar.organization=organization\\"",
-        "/d:\\"sonar.cfamily.build-wrapper-output=bw-output\\"",
-        "/d:\\"sonar.host.url=host",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.organization=\\"organization\\"",
+        "/d:sonar.cfamily.build-wrapper-output=bw-output",
+        "/d:sonar.host.url=\\"host\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={true}
   />
   <Command
-    command={
-      Array [
-        "build-wrapper-win-x86-64.exe",
-        "--out-dir bw-output MsBuild.exe /t:Rebuild",
-      ]
-    }
+    command="build-wrapper-win-x86-64.exe --out-dir bw-output MsBuild.exe /t:Rebuild"
+    isWindows={true}
   />
   <Command
     command={
       Array [
         "SonarQube.Scanner.MSBuild.exe end",
-        "/d:\\"sonar.login=token\\"",
+        "/d:sonar.login=\\"token\\"",
       ]
     }
+    isWindows={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 699ff84d414..060600bb1bc 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
@@ -29,6 +29,7 @@ exports[`renders correctly 1`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={true}
   />
   <p
     className="big-spacer-top markdown"
@@ -70,6 +71,7 @@ exports[`renders correctly 2`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={false}
   />
   <p
     className="big-spacer-top markdown"
@@ -111,6 +113,7 @@ exports[`renders correctly 3`] = `
         "-Dsonar.login=token",
       ]
     }
+    isWindows={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 26f7f464cd2..fbfe0b4ba5c 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
@@ -62,6 +62,7 @@
   color: #fff;
   font-size: 11px;
   font-weight: normal;
+  user-select: none;
 }
 
 .onboarding-command button:hover,
@@ -71,6 +72,15 @@
   color: #404040;
 }
 
+.onboarding-command-windows pre {
+  padding-bottom: 40px;
+}
+
+.onboarding-command-windows button {
+  top: auto;
+  top: 40px;
+}
+
 .onboarding .page-actions {
   text-align: right;
   margin-bottom: 0;