SONAR-21656 Migrate formattingHelp and GraphTooltips to the new UI

5 files changed, 156 insertions, 147 deletions

diff --git a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
index 473e6c59389..48b1869c56d 100644
--- a/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
+++ b/server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
@@ -17,126 +17,155 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { CenteredLayout } from 'design-system';
+import {
+  CellComponent,
+  ContentCell,
+  HtmlFormatter,
+  PageContentFontWrapper,
+  Table,
+  TableRow,
+  Title,
+} from 'design-system';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { translate } from '../../helpers/l10n';
 
+const COLUMNS = ['50%', '50%'];
+
 export default function FormattingHelp() {
   return (
-    <CenteredLayout className="sw-py-6 sw-h-screen">
+    <PageContentFontWrapper className="sw-body-md sw-p-6 sw-h-screen">
       <Helmet defer={false} title={translate('formatting.page')} />
-      <h2 className="spacer-bottom">Formatting Syntax</h2>
-      <table className="width-100 data zebra">
-        <thead>
-          <tr>
-            <th>Write:</th>
-            <th>To display:</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>*this text is bold*</td>
-            <td className="markdown">
+      <Title>Formatting Syntax</Title>
+      <Table
+        columnCount={COLUMNS.length}
+        columnWidths={COLUMNS}
+        header={
+          <TableRow>
+            <ContentCell>Write:</ContentCell>
+            <ContentCell>To display:</ContentCell>
+          </TableRow>
+        }
+      >
+        <TableRow>
+          <ContentCell>*this text is bold*</ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <strong>this text is bold</strong>
-            </td>
-          </tr>
-          <tr>
-            <td>https://www.sonarsource.com/products/sonarqube</td>
-            <td className="markdown">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>https://www.sonarsource.com/products/sonarqube</ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <a href="https://www.sonarsource.com/products/sonarqube">
                 https://www.sonarsource.com/products/sonarqube
               </a>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              [SonarQube™ Home Page](https://www.sonarsource.com/products/sonarqube)
-            </td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>
+            [SonarQube™ Home Page](https://www.sonarsource.com/products/sonarqube)
+          </ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <a href="https://www.sonarsource.com/products/sonarqube">SonarQube™ Home Page</a>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              * first item
-              <br />* second item
-            </td>
-            <td className="markdown">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>
+            * first item
+            <br />* second item
+          </ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <ul>
                 <li>first item</li>
                 <li>second item</li>
               </ul>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              1. first item
-              <br />
-              1. second item
-            </td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <CellComponent>
+            1. first item
+            <br />
+            1. second item
+          </CellComponent>
+          <ContentCell>
+            <HtmlFormatter>
               <ol>
                 <li>first item</li>
                 <li>second item</li>
               </ol>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              = Heading Level 1<br />
-              == Heading Level 2<br />
-              === Heading Level 3<br />
-              ==== Heading Level 4<br />
-              ===== Heading Level 5<br />
-              ====== Heading Level 6<br />
-            </td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>
+            = Heading Level 1<br />
+            == Heading Level 2<br />
+            === Heading Level 3<br />
+            ==== Heading Level 4<br />
+            ===== Heading Level 5<br />
+            ====== Heading Level 6<br />
+          </ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <h1>Heading Level 1</h1>
               <h2>Heading Level 2</h2>
               <h3>Heading Level 3</h3>
               <h4>Heading Level 4</h4>
               <h5>Heading Level 5</h5>
               <h6>Heading Level 6</h6>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">``Lists#newArrayList()``</td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>``Lists#newArrayList()``</ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <code>Lists#newArrayList()</code>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              ``
-              <br />
-              {'// code on multiple lines'}
-              <br />
-              {'public void foo() {'}
-              <br />
-              &nbsp;&nbsp;
-              {'// do some logic here'}
-              <br />
-              {'}'}
-              <br />
-              ``
-            </td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>
+            ``
+            <br />
+            {'// code on multiple lines'}
+            <br />
+            {'public void foo() {'}
+            <br />
+            &nbsp;&nbsp;
+            {'// do some logic here'}
+            <br />
+            {'}'}
+            <br />
+            ``
+          </ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <pre>
                 {'// code on multiple lines\npublic void foo() {\n  // do some logic here\n}'}
               </pre>
-            </td>
-          </tr>
-          <tr>
-            <td className="text-top">
-              Standard text
-              <br />
-              &gt; Blockquoted text
-              <br />
-              &gt; that spans multiple lines
-              <br />
-            </td>
-            <td className="markdown text-top">
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+        <TableRow>
+          <ContentCell>
+            Standard text
+            <br />
+            &gt; Blockquoted text
+            <br />
+            &gt; that spans multiple lines
+            <br />
+          </ContentCell>
+          <ContentCell>
+            <HtmlFormatter>
               <p>Standard text</p>
               <blockquote>
                 Blockquoted text
@@ -144,10 +173,10 @@ export default function FormattingHelp() {
                 that spans multiple lines
                 <br />
               </blockquote>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </CenteredLayout>
+            </HtmlFormatter>
+          </ContentCell>
+        </TableRow>
+      </Table>
+    </PageContentFontWrapper>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index 85bd5122726..45138350586 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { ThemeProp, themeColor, withTheme } from 'design-system';
+import { Table, TableSeparator, ThemeProp, themeColor, withTheme } from 'design-system';
 import * as React from 'react';
 import { Popup, PopupPlacement } from '../../components/ui/popups';
 import { isDefined } from '../../helpers/types';
@@ -46,6 +46,8 @@ const TOOLTIP_WIDTH = 280;
 const TOOLTIP_LEFT_MARGIN = 60;
 const TOOLTIP_LEFT_FLIP_THRESHOLD = 50;
 
+const COLUMNS = 3;
+
 export class GraphsTooltipsClass extends React.PureComponent<Props> {
   renderContent() {
     const { tooltipIdx, series } = this.props;
@@ -107,38 +109,31 @@ export class GraphsTooltipsClass extends React.PureComponent<Props> {
           >
             <DateTimeFormatter date={selectedDate} />
           </div>
-          <table
-            className="width-100"
+          <Table
+            columnCount={COLUMNS}
+            noHeaderTopBorder
             style={{ color: themeColor('dropdownMenuSubTitle')({ theme }) }}
           >
-            <tbody>
-              {addSeparator && (
-                <tr>
-                  <td colSpan={3}>
-                    <hr />
-                  </td>
-                </tr>
-              )}
-              {events?.length > 0 && (
-                <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />
-              )}
-              {tooltipContent}
-              {graph === GraphType.coverage && (
-                <GraphsTooltipsContentCoverage
-                  addSeparator={addSeparator}
-                  measuresHistory={measuresHistory}
-                  tooltipIdx={tooltipIdx}
-                />
-              )}
-              {graph === GraphType.duplications && (
-                <GraphsTooltipsContentDuplication
-                  addSeparator={addSeparator}
-                  measuresHistory={measuresHistory}
-                  tooltipIdx={tooltipIdx}
-                />
-              )}
-            </tbody>
-          </table>
+            {addSeparator && <TableSeparator />}
+            {events?.length > 0 && (
+              <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />
+            )}
+            {tooltipContent}
+            {graph === GraphType.coverage && (
+              <GraphsTooltipsContentCoverage
+                addSeparator={addSeparator}
+                measuresHistory={measuresHistory}
+                tooltipIdx={tooltipIdx}
+              />
+            )}
+            {graph === GraphType.duplications && (
+              <GraphsTooltipsContentDuplication
+                addSeparator={addSeparator}
+                measuresHistory={measuresHistory}
+                tooltipIdx={tooltipIdx}
+              />
+            )}
+          </Table>
         </div>
       </Popup>
     );
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
index 86a2d0b0291..8f289f9605a 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { TableSeparator } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
@@ -40,13 +41,7 @@ export default function GraphsTooltipsContentCoverage(props: GraphsTooltipsConte
   const coverageValue = coverage.history[tooltipIdx].value;
   return (
     <>
-      {addSeparator && (
-        <tr>
-          <td colSpan={3}>
-            <hr />
-          </td>
-        </tr>
-      )}
+      {addSeparator && <TableSeparator />}
       {uncoveredValue && (
         <tr className="sw-h-8">
           <td className="sw-font-bold sw-text-right sw-pr-2 thin" colSpan={2}>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
index ea3d4ec26a8..4c1a88bfe6c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { TableSeparator } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { formatMeasure } from '../../helpers/measures';
@@ -45,13 +46,7 @@ export default function GraphsTooltipsContentDuplication(
   }
   return (
     <>
-      {addSeparator && (
-        <tr>
-          <td colSpan={3}>
-            <hr />
-          </td>
-        </tr>
-      )}
+      {addSeparator && <TableSeparator />}
       <tr className="sw-h-8">
         <td className="sw-font-bold sw-text-right sw-pr-2 thin" colSpan={2}>
           {formatMeasure(duplicationDensityValue, MetricType.Percent)}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
index 69c19e6c02a..cd98c7e1ebc 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { TableSeparator } from 'design-system';
 import * as React from 'react';
 import { AnalysisEvent } from '../../types/project-activity';
 import EventInner from './EventInner';
@@ -38,13 +39,7 @@ export default function GraphsTooltipsContentEvents({ addSeparator, events }: Pr
           ))}
         </td>
       </tr>
-      {addSeparator && (
-        <tr>
-          <td colSpan={3}>
-            <hr />
-          </td>
-        </tr>
-      )}
+      {addSeparator && <TableSeparator />}
     </>
   );
 }