mirrors
/
sonarqube
mirror of https://github.com/SonarSource/sonarqube.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 237 Wiki Activity
Browse Source

SONAR-21656 Migrate formattingHelp and GraphTooltips to the new UI

tags/10.5.0.89998
Jeremy Davis 2 months ago
parent
238317635b
commit
4479c8025c
5 changed files with 156 additions and 147 deletions
Split View Show Diff Stats
  1. 124
    95
      server/sonar-web/src/main/js/app/components/FormattingHelp.tsx
  2. 26
    31
      server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
  3. 2
    7
      server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx
  4. 2
    7
      server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx
  5. 2
    7
      server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx

+ 124
- 95
server/sonar-web/src/main/js/app/components/FormattingHelp.tsx View File

@@ -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>
);
}

+ 26
- 31
server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx View File

@@ -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>
);

+ 2
- 7
server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx View File

@@ -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}>

+ 2
- 7
server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx View File

@@ -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)}

+ 2
- 7
server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx View File

@@ -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 />}
</>
);
}

Write Preview
Loading…
Cancel
Save