SONAR-12603 Fix and clean file measures view layout

server/sonar-web/src/main/js/components/SourceViewer/SourceViewerHeader.tsx

@@ -124,7 +124,7 @@ export default class SourceViewerHeader extends React.PureComponent<Props, State
     // TODO favorite
     return (
       <div className="source-viewer-header display-flex-center">
-        <div className="source-viewer-header-component flex-1">
+        <div className="flex-1 little-spacer-top">
           <div className="component-name">
             <div className="component-name-parent">
               <a

server/sonar-web/src/main/js/components/SourceViewer/__tests__/__snapshots__/SourceViewerHeader-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`should render correctly for a regular file 1`] = `
   className="source-viewer-header display-flex-center"
 >
   <div
-    className="source-viewer-header-component flex-1"
+    className="flex-1 little-spacer-top"
   >
     <div
       className="component-name"
@@ -125,7 +125,7 @@ exports[`should render correctly for a unit test 1`] = `
   className="source-viewer-header display-flex-center"
 >
   <div
-    className="source-viewer-header-component flex-1"
+    className="flex-1 little-spacer-top"
   >
     <div
       className="component-name"
@@ -263,7 +263,7 @@ exports[`should render correctly if issue details are passed 1`] = `
   className="source-viewer-header display-flex-center"
 >
   <div
-    className="source-viewer-header-component flex-1"
+    className="flex-1 little-spacer-top"
   >
     <div
       className="component-name"

server/sonar-web/src/main/js/components/SourceViewer/components/MeasuresOverlay.tsx

@@ -139,23 +139,19 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
     const { measures } = this.state;
 
     return (
-      <div className="source-viewer-measures-section">
-        <div className="source-viewer-measures-card">
+      <div className="measures-viewer-section">
+        <div className="measures-viewer-card">
           <div className="measures">
-            <div className="measures-list">
-              {this.renderMeasure(measures.lines)}
-              {this.renderMeasure(measures.ncloc)}
-              {this.renderMeasure(measures.comment_lines)}
-              {this.renderMeasure(measures.comment_lines_density)}
-            </div>
+            {this.renderMeasure(measures.lines)}
+            {this.renderMeasure(measures.ncloc)}
+            {this.renderMeasure(measures.comment_lines)}
+            {this.renderMeasure(measures.comment_lines_density)}
           </div>
 
           <div className="measures">
-            <div className="measures-list">
-              {this.renderMeasure(measures.cognitive_complexity)}
-              {this.renderMeasure(measures.complexity)}
-              {this.renderMeasure(measures.function_complexity)}
-            </div>
+            {this.renderMeasure(measures.cognitive_complexity)}
+            {this.renderMeasure(measures.complexity)}
+            {this.renderMeasure(measures.function_complexity)}
           </div>
         </div>
       </div>
@@ -180,8 +176,8 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
   renderIssues = () => {
     const { measures, severitiesFacet, tagsFacet, typesFacet } = this.state;
     return (
-      <div className="source-viewer-measures-section">
-        <div className="source-viewer-measures-card">
+      <div className="measures-viewer-section">
+        <div className="measures-viewer-card">
           <div className="measures">
             {this.renderBigMeasure(measures.violations)}
             {this.renderBigMeasure(measures.sqale_index)}
@@ -190,46 +186,40 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
             <>
               {typesFacet && (
                 <div className="measures">
-                  <div className="measures-list">
-                    {sortBy(typesFacet, f => ISSUE_TYPES.indexOf(f.val)).map(f => (
-                      <div className="measure measure-one-line" key={f.val}>
-                        <span className="measure-name">
-                          <IssueTypeIcon className="little-spacer-right" query={f.val} />
-                          {translate('issue.type', f.val)}
-                        </span>
-                        <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
-                      </div>
-                    ))}
-                  </div>
+                  {sortBy(typesFacet, f => ISSUE_TYPES.indexOf(f.val)).map(f => (
+                    <div className="measure measure-one-line" key={f.val}>
+                      <span className="measure-name">
+                        <IssueTypeIcon className="little-spacer-right" query={f.val} />
+                        {translate('issue.type', f.val)}
+                      </span>
+                      <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
+                    </div>
+                  ))}
                 </div>
               )}
               {severitiesFacet && (
                 <div className="measures">
-                  <div className="measures-list">
-                    {sortBy(severitiesFacet, f => SEVERITIES.indexOf(f.val)).map(f => (
-                      <div className="measure measure-one-line" key={f.val}>
-                        <span className="measure-name">
-                          <SeverityHelper severity={f.val} />
-                        </span>
-                        <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
-                      </div>
-                    ))}
-                  </div>
+                  {sortBy(severitiesFacet, f => SEVERITIES.indexOf(f.val)).map(f => (
+                    <div className="measure measure-one-line" key={f.val}>
+                      <span className="measure-name">
+                        <SeverityHelper severity={f.val} />
+                      </span>
+                      <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
+                    </div>
+                  ))}
                 </div>
               )}
               {tagsFacet && (
                 <div className="measures">
-                  <div className="measures-list">
-                    {tagsFacet.map(f => (
-                      <div className="measure measure-one-line" key={f.val}>
-                        <span className="measure-name">
-                          <TagsIcon className="little-spacer-right" />
-                          {f.val}
-                        </span>
-                        <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
-                      </div>
-                    ))}
-                  </div>
+                  {tagsFacet.map(f => (
+                    <div className="measure measure-one-line" key={f.val}>
+                      <span className="measure-name">
+                        <TagsIcon className="little-spacer-right" />
+                        {f.val}
+                      </span>
+                      <span className="measure-value">{formatMeasure(f.count, 'SHORT_INT')}</span>
+                    </div>
+                  ))}
                 </div>
               )}
             </>
@@ -245,8 +235,8 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
       return null;
     }
     return (
-      <div className="source-viewer-measures-section">
-        <div className="source-viewer-measures-card">
+      <div className="measures-viewer-section">
+        <div className="measures-viewer-card">
           <div className="measures">
             <div className="measures-chart">
               <CoverageRating size="big" value={coverage.value} />
@@ -264,12 +254,10 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
           </div>
 
           <div className="measures">
-            <div className="measures-list">
-              {this.renderMeasure(this.state.measures.uncovered_lines)}
-              {this.renderMeasure(this.state.measures.lines_to_cover)}
-              {this.renderMeasure(this.state.measures.uncovered_conditions)}
-              {this.renderMeasure(this.state.measures.conditions_to_cover)}
-            </div>
+            {this.renderMeasure(this.state.measures.uncovered_lines)}
+            {this.renderMeasure(this.state.measures.lines_to_cover)}
+            {this.renderMeasure(this.state.measures.uncovered_conditions)}
+            {this.renderMeasure(this.state.measures.conditions_to_cover)}
           </div>
         </div>
       </div>
@@ -282,8 +270,8 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
       return null;
     }
     return (
-      <div className="source-viewer-measures-section">
-        <div className="source-viewer-measures-card">
+      <div className="measures-viewer-section">
+        <div className="measures-viewer-card">
           <div className="measures">
             <div className="measures-chart">
               <DuplicationsRating
@@ -307,10 +295,8 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
           </div>
 
           <div className="measures">
-            <div className="measures-list">
-              {this.renderMeasure(this.state.measures.duplicated_blocks)}
-              {this.renderMeasure(this.state.measures.duplicated_lines)}
-            </div>
+            {this.renderMeasure(this.state.measures.duplicated_blocks)}
+            {this.renderMeasure(this.state.measures.duplicated_lines)}
           </div>
         </div>
       </div>
@@ -320,18 +306,16 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
   renderTests = () => {
     const { measures } = this.state;
     return (
-      <div className="source-viewer-measures">
-        <div className="source-viewer-measures-section">
-          <div className="source-viewer-measures-card">
+      <div className="measures-viewer">
+        <div className="measures-viewer-section measures-viewer-section-limited">
+          <div className="measures-viewer-card">
             <div className="measures">
-              <div className="measures-list">
-                {this.renderMeasure(measures.tests)}
-                {this.renderMeasure(measures.test_success_density)}
-                {this.renderMeasure(measures.test_failures)}
-                {this.renderMeasure(measures.test_errors)}
-                {this.renderMeasure(measures.skipped_tests)}
-                {this.renderMeasure(measures.test_execution_time)}
-              </div>
+              {this.renderMeasure(measures.tests)}
+              {this.renderMeasure(measures.test_success_density)}
+              {this.renderMeasure(measures.test_failures)}
+              {this.renderMeasure(measures.test_errors)}
+              {this.renderMeasure(measures.skipped_tests)}
+              {this.renderMeasure(measures.test_execution_time)}
             </div>
           </div>
         </div>
@@ -341,16 +325,14 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
 
   renderDomain = (domain: string, measures: T.MeasureEnhanced[]) => {
     return (
-      <div className="source-viewer-measures-card" key={domain}>
+      <div className="measures-viewer-card" key={domain}>
         <div className="measures">
-          <div className="measures-list">
-            <div className="measure measure-one-line measure-big">
-              <span className="measure-name">{domain}</span>
-            </div>
-            {sortBy(measures.filter(measure => measure.value !== undefined), measure =>
-              getLocalizedMetricName(measure.metric)
-            ).map(measure => this.renderMeasure(measure))}
+          <div className="measure measure-big">
+            <span className="measure-name">{domain}</span>
           </div>
+          {sortBy(measures.filter(measure => measure.value !== undefined), measure =>
+            getLocalizedMetricName(measure.metric)
+          ).map(measure => this.renderMeasure(measure))}
         </div>
       </div>
     );
@@ -362,11 +344,11 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
     const odd = domainKeys.filter((_, index) => index % 2 === 1);
     const even = domainKeys.filter((_, index) => index % 2 === 0);
     return (
-      <div className="source-viewer-measures source-viewer-measures-secondary js-all-measures">
-        <div className="source-viewer-measures-section source-viewer-measures-section-big">
+      <div className="measures-viewer measures-viewer-secondary">
+        <div className="measures-viewer-section">
           {odd.map(domain => this.renderDomain(domain, domains[domain]))}
         </div>
-        <div className="source-viewer-measures-section source-viewer-measures-section-big">
+        <div className="measures-viewer-section">
           {even.map(domain => this.renderDomain(domain, domains[domain]))}
         </div>
       </div>
@@ -377,11 +359,15 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
     const { branchLike, sourceViewerFile } = this.props;
     const { loading } = this.state;
 
+    const header = translate('component_viewer.file_measures');
     return (
-      <Modal contentLabel="" onRequestClose={this.props.onClose} size="large">
-        <div className="modal-container source-viewer-measures-modal">
-          <div className="source-viewer-header-component source-viewer-measures-component">
-            <div className="source-viewer-header-component-project">
+      <Modal contentLabel={header} onRequestClose={this.props.onClose} size="large">
+        <div className="modal-head">
+          <h2>{header}</h2>
+        </div>
+        <div className="modal-body modal-container">
+          <div className="measures-viewer-header big-spacer-bottom">
+            <div>
               <QualifierIcon className="little-spacer-right" qualifier="TRK" />
               <Link to={getBranchLikeUrl(sourceViewerFile.project, branchLike)}>
                 {sourceViewerFile.projectName}
@@ -395,7 +381,7 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
               )}
             </div>
 
-            <div className="source-viewer-header-component-name display-flex-center little-spacer-top">
+            <div className="display-flex-center little-spacer-top">
               <QualifierIcon className="little-spacer-right" qualifier={sourceViewerFile.q} />
               {sourceViewerFile.path}
             </div>
@@ -408,7 +394,7 @@ export default class MeasuresOverlay extends React.PureComponent<Props, State> {
               {sourceViewerFile.q === 'UTS' ? (
                 this.renderTests()
               ) : (
-                <div className="source-viewer-measures">
+                <div className="measures-viewer">
                   {this.renderLines()}
                   {this.renderIssues()}
                   {this.renderCoverage()}

server/sonar-web/src/main/js/components/SourceViewer/styles.css

@@ -39,45 +39,6 @@
   background-color: var(--barBackgroundColor);
 }
 
-.source-viewer-header:before,
-.source-viewer-header:after {
-  display: table;
-  content: '';
-  line-height: 0;
-}
-
-.source-viewer-header:after {
-  clear: both;
-}
-
-.source-viewer-header-bar + .source-viewer-header-bar {
-  border-top: 1px solid var(--barBorderColor);
-}
-
-.source-viewer-header-component {
-  padding-top: 4px;
-}
-
-.source-viewer-header-component-project {
-  font-size: var(--smallFontSize);
-}
-
-.source-viewer-header-component-name {
-  font-size: var(--smallFontSize);
-}
-
-.source-viewer-header-favorite {
-  position: relative;
-  top: -2px;
-  margin-left: 4px;
-  border-bottom: none;
-}
-
-.source-viewer-header-measures-scope {
-  position: relative;
-  float: left;
-}
-
 .source-viewer-header-measure {
   vertical-align: middle;
   font-size: var(--baseFontSize);
@@ -138,138 +99,6 @@
   overflow-x: auto;
 }
 
-.source-viewer-measures-overlay {
-  width: 1100px;
-  left: 50%;
-  right: auto;
-  margin-left: -550px;
-  padding: 20px 10px;
-  background-color: var(--barBackgroundColor);
-}
-
-.source-viewer-measures-overlay .modal-foot {
-  width: 1100px;
-  left: 50%;
-  right: auto;
-  margin-left: -550px;
-}
-
-.source-viewer-measures-component {
-  float: none;
-  margin: 0 10px 30px;
-}
-
-.source-viewer-measures-modal {
-  background-color: var(--barBackgroundColor);
-}
-
-.source-viewer-measures {
-  margin: 0 -10px;
-  background-color: var(--barBackgroundColor);
-}
-
-.source-viewer-measures:before,
-.source-viewer-measures:after {
-  display: table;
-  content: '';
-  line-height: 0;
-}
-
-.source-viewer-measures:after {
-  clear: both;
-}
-
-.source-viewer-measures + .source-viewer-measures {
-  margin-top: 40px;
-}
-
-.source-viewer-measures-secondary .source-viewer-measures-card {
-  background-color: rgba(255, 255, 255, 0.6);
-}
-
-.source-viewer-measures-section {
-  float: left;
-  width: 25%;
-  margin: -20px 0;
-}
-
-.source-viewer-measures-section-big {
-  width: 50%;
-}
-
-.source-viewer-measures-section-full {
-  width: 100%;
-}
-
-.source-viewer-measures-section + .source-viewer-measures-section-full {
-  margin-top: 20px;
-}
-
-.source-viewer-measures-card {
-  margin: 20px 10px;
-  padding: 10px;
-  border: 1px solid var(--barBorderColor);
-  background-color: #fff;
-}
-
-.source-viewer-measures-card-overflow {
-  overflow: auto;
-}
-
-.source-viewer-measures-card-fixed-height {
-  max-height: 36vh;
-  overflow-y: scroll;
-}
-
-.source-viewer-tests-list {
-  width: 100%;
-  font-size: var(--baseFontSize);
-}
-
-.source-viewer-test-status,
-.source-viewer-test-duration,
-.source-viewer-test-covered-lines {
-  width: 1px;
-}
-
-.source-viewer-test-status,
-.source-viewer-test-duration,
-.source-viewer-test-covered-lines,
-.source-viewer-test-covered-name {
-  vertical-align: middle;
-  padding: 3px;
-}
-
-.source-viewer-test-name {
-  padding-left: 10px;
-  word-break: break-all;
-}
-
-.source-viewer-test-covered-lines {
-  text-align: right;
-}
-
-.source-viewer-issue-location {
-  max-width: 200px;
-  margin-right: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-viewer-flow-location + .source-viewer-flow-location {
-  z-index: 504;
-}
-
-.source-line-issue-locations {
-  float: right;
-  margin-right: -10px;
-}
-
-.source-line-issue-locations:empty {
-  display: none;
-}
-
 .source-viewer-more-code {
   padding: 40px 0;
   border-bottom: 1px solid var(--barBorderColor);
@@ -303,26 +132,63 @@
   background-color: var(--issueLocationSelected);
 }
 
+.measures-viewer {
+  display: flex;
+  margin: 0 calc(-1 * var(--gridSize));
+}
+
+.measures-viewer + .measures-viewer {
+  margin-top: var(--gridSize);
+}
+
+.measures-viewer-header {
+  font-size: var(--smallFontSize);
+}
+
+.measures-viewer-secondary .measures-viewer-card {
+  background-color: var(--barBackgroundColor);
+}
+
+.measures-viewer-section {
+  flex: 1;
+}
+
+.measures-viewer-section-limited {
+  max-width: 25%;
+}
+
+.measures-viewer-card {
+  margin: calc(2 * var(--gridSize)) var(--gridSize);
+  padding: var(--gridSize);
+  border: 1px solid var(--barBorderColor);
+  background-color: #fff;
+}
+
 .measures + .measures {
-  margin-top: 15px;
-  padding-top: 15px;
+  margin-top: calc(2 * var(--gridSize));
+  padding-top: calc(2 * var(--gridSize));
   border-top: 1px solid var(--barBorderColor);
 }
 
 .measures-chart {
   display: inline-block;
   vertical-align: middle;
-  width: 70px;
-  margin-right: 20px;
+  width: calc(var(--gridSize) * 10);
+  margin-right: calc(var(--gridSize) * 3);
   text-align: center;
 }
 
-.measures-chart .rating {
-  font-size: 32px;
+.measure {
+  line-height: 1.34;
 }
 
-.measure {
-  line-height: 1.3333333333333;
+.measure-one-line {
+  display: flex;
+  justify-content: space-between;
+}
+
+.measure-one-line .measure-name {
+  display: inline;
 }
 
 .measure-name {
@@ -342,38 +208,16 @@
 }
 
 .measure-big .measure-name {
-  margin-top: 2px;
-  font-size: 15px;
-  font-weight: 400;
-}
-
-.measure-big .measure-value {
-  font-size: 22px;
+  margin-top: calc(var(--gridSize) / 2);
+  margin-bottom: var(--gridSize);
+  font-size: var(--bigFontSize);
 }
 
+.measure-big .measure-value,
 .measure-big .rating {
-  font-size: 22px;
+  font-size: var(--hugeFontSize);
 }
 
 .measure-big + .measure-big {
-  margin-left: 20px;
-}
-
-.measure-one-line:before,
-.measure-one-line:after {
-  display: table;
-  content: '';
-  line-height: 0;
-}
-
-.measure-one-line:after {
-  clear: both;
-}
-
-.measure-one-line .measure-name {
-  float: left;
-}
-
-.measure-one-line .measure-value {
-  float: right;
+  margin-left: calc(var(--gridSize) * 3);
 }

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -2270,6 +2270,7 @@ component_viewer.open_in_workspace=Pin This File
 component_viewer.get_permalink=Get Permalink
 component_viewer.covered_lines=Covered Lines
 component_viewer.show_details=Show Measures
+component_viewer.file_measures=File measures
 component_viewer.show_all_measures=Show all measures
 component_viewer.no_component=The component has been removed or never existed.