SONAR-12040 Drop duplicated css classes

server/sonar-web/src/main/js/api/ce.ts

@@ -43,7 +43,7 @@ export function getActivity(data: RequestData): Promise<{ tasks: T.Task[] }> {
 
 export function getStatus(
   componentId?: string
-): Promise<{ failing: number; inProgress: number; pending: number }> {
+): Promise<{ failing: number; inProgress: number; pending: number; pendingTime?: number }> {
   const data = {};
   if (componentId) {
     Object.assign(data, { componentId });

server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx

@@ -156,7 +156,7 @@ export class ComponentNavBranch extends React.PureComponent<Props, State> {
           <span className="note">{displayName}</span>
           {configuration && configuration.showSettings && (
             <HelpTooltip className="spacer-left" overlay={this.renderOverlay()}>
-              <PlusCircleIcon className="vertical-middle" fill={theme.blue} size={12} />
+              <PlusCircleIcon className="text-middle" fill={theme.blue} size={12} />
             </HelpTooltip>
           )}
         </div>

server/sonar-web/src/main/js/app/components/notifications/NotificationsSidebar.tsx

@@ -72,7 +72,7 @@ export default function NotificationsSidebar(props: Props) {
                 {translate('show_more')}
               </a>
               {loadingMore && (
-                <DeferredSpinner className="vertical-bottom spacer-left position-absolute" />
+                <DeferredSpinner className="text-bottom spacer-left position-absolute" />
               )}
             </div>
           </div>

server/sonar-web/src/main/js/app/styles/init/misc.css

@@ -17,25 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.vertical-top {
-  vertical-align: top !important;
-}
-
-.vertical-bottom {
-  vertical-align: bottom !important;
-}
-
-.vertical-middle {
-  vertical-align: middle !important;
-}
-
-.vertical-text-top {
-  vertical-align: text-top !important;
-}
-
-.vertical-baseline {
-  vertical-align: baseline !important;
-}
 
 .nowrap {
   white-space: nowrap !important;

server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx

@@ -223,9 +223,7 @@ export default class RuleDetailsMeta extends React.PureComponent<Props> {
     return (
       <Tooltip overlay={translateWithParameters('coding_rules.external_rule.engine', engine)}>
         <li className="coding-rules-detail-property">
-          <div className="outline-badge badge-tiny-height spacer-left vertical-text-top">
-            {engine}
-          </div>
+          <div className="outline-badge badge-tiny-height spacer-left text-text-top">{engine}</div>
         </li>
       </Tooltip>
     );

server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/RuleDetailsMeta-test.tsx.snap

@@ -265,7 +265,7 @@ exports[`should display right meta info 3`] = `
         className="coding-rules-detail-property"
       >
         <div
-          className="outline-badge badge-tiny-height spacer-left vertical-text-top"
+          className="outline-badge badge-tiny-height spacer-left text-text-top"
         >
           xoo
         </div>

server/sonar-web/src/main/js/apps/issues/components/App.tsx

@@ -888,7 +888,7 @@ export class App extends React.PureComponent<Props, State> {
       <div className="pull-left">
         <Checkbox
           checked={isChecked}
-          className="spacer-right vertical-middle"
+          className="spacer-right text-middle"
           disabled={issues.length === 0}
           id="issues-selection"
           onCheck={this.handleCheckAll}

server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx

@@ -44,7 +44,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
             <Rating value={measures['new_reliability_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <BugIcon className="little-spacer-right vertical-bottom" />
+            <BugIcon className="little-spacer-right text-bottom" />
             {translate('metric.bugs.name')}
           </div>
         </div>
@@ -62,7 +62,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
             <Rating value={measures['new_security_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <VulnerabilityIcon className="little-spacer-right vertical-bottom" />
+            <VulnerabilityIcon className="little-spacer-right text-bottom" />
             {translate('metric.vulnerabilities.name')}
           </div>
         </div>
@@ -80,7 +80,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
             <Rating value={measures['new_maintainability_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <CodeSmellIcon className="little-spacer-right vertical-bottom" />
+            <CodeSmellIcon className="little-spacer-right text-bottom" />
             {translate('metric.code_smells.name')}
           </div>
         </div>

server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx

@@ -57,7 +57,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
             <Rating value={measures['reliability_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <BugIcon className="little-spacer-right vertical-bottom" />
+            <BugIcon className="little-spacer-right text-bottom" />
             {translate('metric.bugs.name')}
           </div>
         </div>
@@ -75,7 +75,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
             <Rating value={measures['security_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <VulnerabilityIcon className="little-spacer-right vertical-bottom" />
+            <VulnerabilityIcon className="little-spacer-right text-bottom" />
             {translate('metric.vulnerabilities.name')}
           </div>
         </div>
@@ -93,7 +93,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
             <Rating value={measures['sqale_rating']} />
           </div>
           <div className="project-card-measure-label-with-icon">
-            <CodeSmellIcon className="little-spacer-right vertical-bottom" />
+            <CodeSmellIcon className="little-spacer-right text-bottom" />
             {translate('metric.code_smells.name')}
           </div>
         </div>

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap

@@ -28,7 +28,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <BugIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.bugs.name
       </div>
@@ -58,7 +58,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <VulnerabilityIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.vulnerabilities.name
       </div>
@@ -88,7 +88,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <CodeSmellIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.code_smells.name
       </div>
@@ -194,7 +194,7 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-label-with-icon"
       >
         <BugIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.bugs.name
       </div>
@@ -224,7 +224,7 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-label-with-icon"
       >
         <VulnerabilityIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.vulnerabilities.name
       </div>
@@ -254,7 +254,7 @@ exports[`should render no data style new coverage, new duplications and new line
         className="project-card-measure-label-with-icon"
       >
         <CodeSmellIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.code_smells.name
       </div>

server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap

@@ -78,7 +78,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <BugIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.bugs.name
       </div>
@@ -108,7 +108,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <VulnerabilityIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.vulnerabilities.name
       </div>
@@ -138,7 +138,7 @@ exports[`should render correctly with all data 1`] = `
         className="project-card-measure-label-with-icon"
       >
         <CodeSmellIcon
-          className="little-spacer-right vertical-bottom"
+          className="little-spacer-right text-bottom"
         />
         metric.code_smells.name
       </div>

server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx

@@ -33,7 +33,7 @@ export default class ChangelogSearch extends React.PureComponent<Props> {
     return (
       <div className="display-inline-block" id="quality-profile-changelog-form">
         <DateRangeInput onChange={this.props.onDateRangeChange} value={this.props.dateRange} />
-        <Button className="spacer-left vertical-top" onClick={this.props.onReset}>
+        <Button className="spacer-left text-top" onClick={this.props.onReset}>
           {translate('reset_verb')}
         </Button>
       </div>

server/sonar-web/src/main/js/apps/quality-profiles/changelog/__tests__/__snapshots__/ChangelogSearch-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`should render 1`] = `
     }
   />
   <Button
-    className="spacer-left vertical-top"
+    className="spacer-left text-top"
     onClick={[MockFunction]}
   >
     reset_verb

server/sonar-web/src/main/js/components/controls/ListFooter.tsx

@@ -61,9 +61,7 @@ export default function ListFooter({ ready = true, ...props }: Props) {
         formatMeasure(props.total, 'INT', null)
       )}
       {props.loadMore != null && hasMore ? loadMoreLink : null}
-      {props.loading && (
-        <DeferredSpinner className="vertical-bottom spacer-left position-absolute" />
-      )}
+      {props.loading && <DeferredSpinner className="text-bottom spacer-left position-absolute" />}
     </footer>
   );
 }

server/sonar-web/src/main/js/components/docs/DocCollapsibleBlock.tsx

@@ -41,7 +41,7 @@ export default class DocCollapsibleBlock extends React.PureComponent<{}, State>
         className="link-no-underline"
         href="#"
         onClick={this.handleClick}>
-        <OpenCloseIcon className="vertical-middle little-spacer-right" open={this.state.open} />
+        <OpenCloseIcon className="text-middle little-spacer-right" open={this.state.open} />
         {children.props ? children.props.children : children}
       </a>
     );

server/sonar-web/src/main/js/components/docs/DocLink.tsx

@@ -81,7 +81,7 @@ export class DocLink extends React.PureComponent<Props> {
           {children}
         </a>
         <DetachIcon
-          className="text-muted little-spacer-left little-spacer-right vertical-baseline"
+          className="text-muted little-spacer-left little-spacer-right text-baseline"
           size={12}
         />
       </>

server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx

@@ -58,7 +58,7 @@ export default function DocTooltipLink({ children, customProps, href, ...other }
       <a href={href} rel="noopener noreferrer" target="_blank" {...other}>
         {children}
       </a>
-      <DetachIcon className="little-spacer-left little-spacer-right vertical-baseline" size={12} />
+      <DetachIcon className="little-spacer-left little-spacer-right text-baseline" size={12} />
     </>
   );
 }

server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocCollapsibleBlock-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`should render a collapsible block 1`] = `
     onClick={[Function]}
   >
     <OpenCloseIcon
-      className="vertical-middle little-spacer-right"
+      className="text-middle little-spacer-right"
       open={false}
     />
     Foo
@@ -34,7 +34,7 @@ exports[`should render a collapsible block 2`] = `
     onClick={[Function]}
   >
     <OpenCloseIcon
-      className="vertical-middle little-spacer-right"
+      className="text-middle little-spacer-right"
       open={true}
     />
     Foo

server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap

@@ -54,7 +54,7 @@ exports[`should render simple link 1`] = `
     link text
   </a>
   <DetachIcon
-    className="text-muted little-spacer-left little-spacer-right vertical-baseline"
+    className="text-muted little-spacer-left little-spacer-right text-baseline"
     size={12}
   />
 </Fragment>

server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap

@@ -28,7 +28,7 @@ exports[`should render simple link 1`] = `
     target="_blank"
   />
   <DetachIcon
-    className="little-spacer-left little-spacer-right vertical-baseline"
+    className="little-spacer-left little-spacer-right text-baseline"
     size={12}
   />
 </Fragment>

server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx

@@ -46,21 +46,21 @@ export default class IssueMessage extends React.PureComponent<Props> {
         <span className="little-spacer-right">{this.props.message}</span>
         <Button
           aria-label={translate('issue.rule_details')}
-          className="button button-grey button-tiny spacer-right vertical-top"
+          className="button button-grey button-tiny spacer-right text-top"
           onClick={this.handleClick}>
           {translate('issue.see_rule')}
         </Button>
         {this.props.engine && (
           <Tooltip
             overlay={translateWithParameters('issue.from_external_rule_engine', this.props.engine)}>
-            <div className="outline-badge badge-tiny-height spacer-right vertical-top">
+            <div className="outline-badge badge-tiny-height spacer-right text-top">
               {this.props.engine}
             </div>
           </Tooltip>
         )}
         {this.props.manualVulnerability && (
           <Tooltip overlay={translate('issue.manual_vulnerability.description')}>
-            <div className="outline-badge badge-tiny-height spacer-right vertical-top">
+            <div className="outline-badge badge-tiny-height spacer-right text-top">
               {translate('issue.manual_vulnerability')}
             </div>
           </Tooltip>

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap

@@ -11,7 +11,7 @@ exports[`should render with the message and a link to open the rule 1`] = `
   </span>
   <Button
     aria-label="issue.rule_details"
-    className="button button-grey button-tiny spacer-right vertical-top"
+    className="button button-grey button-tiny spacer-right text-top"
     onClick={[Function]}
   >
     issue.see_rule

server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.tsx

@@ -130,9 +130,7 @@ class SetAssigneePopup extends React.PureComponent<Props, State> {
                 {!!user.login && (
                   <Avatar className="spacer-right" hash={user.avatar} name={user.name} size={16} />
                 )}
-                <span
-                  className="vertical-middle"
-                  style={{ marginLeft: !user.login ? 24 : undefined }}>
+                <span className="text-middle" style={{ marginLeft: !user.login ? 24 : undefined }}>
                   {user.name}
                 </span>
               </SelectListItem>