Merge pull request #9814 from rohitpaulk/rohitpaulk/fix-query-builder-tut-formatting

Fix raw HTML strings in QueryBuilderTutorial

frontend/src/metabase/tutorial/QueryBuilderTutorial.jsx

 /* eslint-disable react/display-name */
 
 import React, { Component } from "react";
-import { t } from "ttag";
+import { t, jt } from "ttag";
 import MetabaseSettings from "metabase/lib/settings";
 import Tutorial, { qs, qsWithContent } from "./Tutorial.jsx";
 
@@ -111,7 +111,11 @@ const QUERY_BUILDER_STEPS = [
           width={115}
         />
         <h3>{t`Here's where you can choose to add or average your data, count the number of rows in the table, or just view the raw data.`}</h3>
-        <p>{t`Try it: click on <strong>Raw Data</strong> to change it to <strong>Count of rows</strong> so we can count how many orders there are in this table.`}</p>
+        <p>{jt`Try it: click on ${(
+          <strong>{t`Raw Data`}</strong>
+        )} to change it to ${(
+          <strong>{t`Count of rows`}</strong>
+        )} so we can count how many orders there are in this table.`}</p>
       </div>
     ),
     shouldAllowEvent: e => qs(".View-section-aggregation").contains(e.target),
@@ -135,7 +139,9 @@ const QUERY_BUILDER_STEPS = [
           width={232}
         />
         <h3>{t`Add a grouping to break out your results by category, day, month, and more.`}</h3>
-        <p>{t`Let's do it: click on <strong>Add a grouping</strong>, and choose <strong>Created At: by Week</strong>.`}</p>
+        <p>{jt`Let's do it: click on ${(
+          <strong>{t`Add a grouping`}</strong>
+        )}, and choose ${<strong>{t`Created At: by Week`}</strong>}.`}</p>
       </div>
     ),
     shouldAllowEvent: e => qs(".Query-section-breakout").contains(e.target),
@@ -165,7 +171,9 @@ const QUERY_BUILDER_STEPS = [
           width={217}
         />
         <h3>{t`Run Your Query.`}</h3>
-        <p>{t`You're doing so well! Click <strong>Run query</strong> to get your results!`}</p>
+        <p>{jt`You're doing so well! Click ${(
+          <strong>{t`Run query`}</strong>
+        )} to get your results!`}</p>
       </div>
     ),
     shouldAllowEvent: e => qs(".RunButton").contains(e.target),
@@ -183,7 +191,9 @@ const QUERY_BUILDER_STEPS = [
           width={160}
         />
         <h3>{t`You can view your results as a chart instead of a table.`}</h3>
-        <p>{t`Everbody likes charts! Click the <strong>Visualization</strong> dropdown and select <strong>Line</strong>.`}</p>
+        <p>{jt`Everbody likes charts! Click the ${(
+          <strong>{t`Visualization`}</strong>
+        )} dropdown and select ${<strong>{t`Line`}</strong>}.`}</p>
       </div>
     ),
     shouldAllowEvent: e => qs(".VisualizationSettings a").contains(e.target),