From 4479c8025c7e92e1d6f1eba2d48d845011e39599 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Fri, 8 Mar 2024 10:13:32 +0100 Subject: [PATCH] SONAR-21656 Migrate formattingHelp and GraphTooltips to the new UI --- .../main/js/app/components/FormattingHelp.tsx | 219 ++++++++++-------- .../activity-graph/GraphsTooltips.tsx | 57 +++-- .../GraphsTooltipsContentCoverage.tsx | 9 +- .../GraphsTooltipsContentDuplication.tsx | 9 +- .../GraphsTooltipsContentEvents.tsx | 9 +- 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 ( - + -

Formatting Syntax

- - - - - - - - - - -
Write:To display:
*this text is bold* + Formatting Syntax + + Write: + To display: + + } + > + + *this text is bold* + + this text is bold - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
https://www.sonarsource.com/products/sonarqube + + + + + https://www.sonarsource.com/products/sonarqube + + https://www.sonarsource.com/products/sonarqube -
- [SonarQube™ Home Page](https://www.sonarsource.com/products/sonarqube) - + + + + + + [SonarQube™ Home Page](https://www.sonarsource.com/products/sonarqube) + + + SonarQube™ Home Page -
- * first item -
* second item - 		+ + + + + + * first item +
* second item + + +
  • first item
  • second item
-
- 1. first item -
- 1. second item - 		+ + + + + + 1. first item +
+ 1. second item + + +
  1. first item
  2. second item
-
- = Heading Level 1
- == Heading Level 2
- === Heading Level 3
- ==== Heading Level 4
- ===== Heading Level 5
- ====== Heading Level 6
- 		+ + + + + + = Heading Level 1
+ == Heading Level 2
+ === Heading Level 3
+ ==== Heading Level 4
+ ===== Heading Level 5
+ ====== Heading Level 6
+ + +

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
-
``Lists#newArrayList()`` + + + + + ``Lists#newArrayList()`` + + Lists#newArrayList() -
- `` -
- {'// code on multiple lines'} -
- {'public void foo() {'} -
-    - {'// do some logic here'} -
- {'}'} -
- `` - 		+ + + + + + `` +
+ {'// code on multiple lines'} +
+ {'public void foo() {'} +
+    + {'// do some logic here'} +
+ {'}'} +
+ `` + + + 
                 {'// code on multiple lines\npublic void foo() {\n  // do some logic here\n}'}
-
- Standard text -
- > Blockquoted text -
- > that spans multiple lines -
- 		+ + + + + + Standard text +
+ > Blockquoted text +
+ > that spans multiple lines +
+ + +

Standard text

Blockquoted text @@ -144,10 +173,10 @@ export default function FormattingHelp() { that spans multiple lines
-
- + + + +
+ ); } 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 { renderContent() { const { tooltipIdx, series } = this.props; @@ -107,38 +109,31 @@ export class GraphsTooltipsClass extends React.PureComponent { > - - - {addSeparator && ( - - - - )} - {events?.length > 0 && ( - - )} - {tooltipContent} - {graph === GraphType.coverage && ( - - )} - {graph === GraphType.duplications && ( - - )} - -
-
-
+ {addSeparator && } + {events?.length > 0 && ( + + )} + {tooltipContent} + {graph === GraphType.coverage && ( + + )} + {graph === GraphType.duplications && ( + + )} + ); 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 && ( - - -
- - - )} + {addSeparator && } {uncoveredValue && ( 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 && ( - - -
- - - )} + {addSeparator && } {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 ))} - {addSeparator && ( - - -
- - - )} + {addSeparator && } ); } -- 2.39.5