SONAR-10656 Fix {instance} messages in onboarding page

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/ClangGCC.js

@@ -22,6 +22,7 @@ import React from 'react';
 import SQScanner from './SQScanner';
 import BuildWrapper from './BuildWrapper';
 import CodeSnippet from '../../../../components/common/CodeSnippet';
+import InstanceMessage from '../../../../components/common/InstanceMessage';
 import { translate } from '../../../../helpers/l10n';
 
 /*::
@@ -61,12 +62,14 @@ export default function ClangGCC(props /*: Props */) {
       <h4 className="huge-spacer-top spacer-bottom">
         {translate('onboarding.analysis.sq_scanner.execute')}
       </h4>
-      <p
-        className="spacer-bottom markdown"
-        dangerouslySetInnerHTML={{
-          __html: translate('onboarding.analysis.sq_scanner.execute.text')
-        }}
-      />
+      <InstanceMessage message={translate('onboarding.analysis.sq_scanner.execute.text')}>
+        {transformedMessage => (
+          <p
+            className="spacer-bottom markdown"
+            dangerouslySetInnerHTML={{ __html: transformedMessage }}
+          />
+        )}
+      </InstanceMessage>
       <CodeSnippet isOneLine={true} snippet={command1} />
       <CodeSnippet isOneLine={props.os === 'win'} snippet={command2} />
       <p

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/DotNet.js

@@ -21,6 +21,7 @@
 import React from 'react';
 import MSBuildScanner from './MSBuildScanner';
 import CodeSnippet from '../../../../components/common/CodeSnippet';
+import InstanceMessage from '../../../../components/common/InstanceMessage';
 import { translate } from '../../../../helpers/l10n';
 
 /*::
@@ -52,12 +53,14 @@ export default function DotNet(props /*: Props */) {
       <h4 className="huge-spacer-top spacer-bottom">
         {translate('onboarding.analysis.msbuild.execute')}
       </h4>
-      <p
-        className="spacer-bottom markdown"
-        dangerouslySetInnerHTML={{
-          __html: translate('onboarding.analysis.msbuild.execute.text')
-        }}
-      />
+      <InstanceMessage message={translate('onboarding.analysis.msbuild.execute.text')}>
+        {transformedMessage => (
+          <p
+            className="spacer-bottom markdown"
+            dangerouslySetInnerHTML={{ __html: transformedMessage }}
+          />
+        )}
+      </InstanceMessage>
       <CodeSnippet isOneLine={true} snippet={command1} />
       <CodeSnippet isOneLine={true} snippet={command2} />
       <CodeSnippet isOneLine={true} snippet={command3} />

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Msvc.js

@@ -22,6 +22,7 @@ import React from 'react';
 import MSBuildScanner from './MSBuildScanner';
 import BuildWrapper from './BuildWrapper';
 import CodeSnippet from '../../../../components/common/CodeSnippet';
+import InstanceMessage from '../../../../components/common/InstanceMessage';
 import { translate } from '../../../../helpers/l10n';
 
 /*::
@@ -55,12 +56,14 @@ export default function Msvc(props /*: Props */) {
       <h4 className="huge-spacer-top spacer-bottom">
         {translate('onboarding.analysis.msbuild.execute')}
       </h4>
-      <p
-        className="spacer-bottom markdown"
-        dangerouslySetInnerHTML={{
-          __html: translate('onboarding.analysis.msbuild.execute.text')
-        }}
-      />
+      <InstanceMessage message={translate('onboarding.analysis.msbuild.execute.text')}>
+        {transformedMessage => (
+          <p
+            className="spacer-bottom markdown"
+            dangerouslySetInnerHTML={{ __html: transformedMessage }}
+          />
+        )}
+      </InstanceMessage>
       <CodeSnippet isOneLine={true} snippet={command1} />
       <CodeSnippet isOneLine={true} snippet={command2} />
       <CodeSnippet isOneLine={true} snippet={command3} />

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/Other.js

@@ -21,6 +21,7 @@
 import React from 'react';
 import SQScanner from './SQScanner';
 import CodeSnippet from '../../../../components/common/CodeSnippet';
+import InstanceMessage from '../../../../components/common/InstanceMessage';
 import { translate } from '../../../../helpers/l10n';
 
 /*::
@@ -50,12 +51,14 @@ export default function Other(props /*: Props */) {
       <h4 className="huge-spacer-top spacer-bottom">
         {translate('onboarding.analysis.sq_scanner.execute')}
       </h4>
-      <p
-        className="spacer-bottom markdown"
-        dangerouslySetInnerHTML={{
-          __html: translate('onboarding.analysis.sq_scanner.execute.text')
-        }}
-      />
+      <InstanceMessage message={translate('onboarding.analysis.sq_scanner.execute.text')}>
+        {transformedMessage => (
+          <p
+            className="spacer-bottom markdown"
+            dangerouslySetInnerHTML={{ __html: transformedMessage }}
+          />
+        )}
+      </InstanceMessage>
       <CodeSnippet isOneLine={props.os === 'win'} snippet={command} />
       <p
         className="big-spacer-top markdown"

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/ClangGCC-test.js.snap

@@ -14,13 +14,8 @@ exports[`renders correctly 1`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={true}
@@ -65,13 +60,8 @@ exports[`renders correctly 2`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={true}
@@ -116,13 +106,8 @@ exports[`renders correctly 3`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={true}

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/DotNet-test.js.snap

@@ -8,13 +8,8 @@ exports[`renders correctly 1`] = `
   >
     onboarding.analysis.msbuild.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.msbuild.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.msbuild.execute.text"
   />
   <CodeSnippet
     isOneLine={true}
@@ -60,13 +55,8 @@ exports[`renders correctly 2`] = `
   >
     onboarding.analysis.msbuild.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.msbuild.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.msbuild.execute.text"
   />
   <CodeSnippet
     isOneLine={true}

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Msvc-test.js.snap

@@ -12,13 +12,8 @@ exports[`renders correctly 1`] = `
   >
     onboarding.analysis.msbuild.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.msbuild.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.msbuild.execute.text"
   />
   <CodeSnippet
     isOneLine={true}
@@ -69,13 +64,8 @@ exports[`renders correctly 2`] = `
   >
     onboarding.analysis.msbuild.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.msbuild.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.msbuild.execute.text"
   />
   <CodeSnippet
     isOneLine={true}

server/sonar-web/src/main/js/apps/tutorials/onboarding/commands/__tests__/__snapshots__/Other-test.js.snap

@@ -10,13 +10,8 @@ exports[`renders correctly 1`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={true}
@@ -52,13 +47,8 @@ exports[`renders correctly 2`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={false}
@@ -94,13 +84,8 @@ exports[`renders correctly 3`] = `
   >
     onboarding.analysis.sq_scanner.execute
   </h4>
-  <p
-    className="spacer-bottom markdown"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "onboarding.analysis.sq_scanner.execute.text",
-      }
-    }
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
   />
   <CodeSnippet
     isOneLine={false}