SONAR-15882 warning align text and tooltip

8 files changed, 108 insertions, 75 deletions

diff --git a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
index 3f1d6d48ce7..c1d88989529 100644
--- a/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
+++ b/server/sonar-web/src/main/js/apps/code/components/CodeApp.tsx
@@ -298,12 +298,14 @@ export class CodeApp extends React.Component<Props, State> {
       <div className="page page-limited">
         {!canBrowseAllChildProjects && isPortfolioLike(qualifier) && (
           <StyledAlert variant="warning">
-            {translate('component_measures.not_all_measures_are_shown')}
-            <HelpTooltip
-              className="spacer-left"
-              ariaLabel={translate('component_measures.not_all_measures_are_shown.help')}
-              overlay={translate('component_measures.not_all_measures_are_shown.help')}
-            />
+            <AlertContent>
+              {translate('component_measures.not_all_measures_are_shown')}
+              <HelpTooltip
+                className="spacer-left"
+                ariaLabel={translate('component_measures.not_all_measures_are_shown.help')}
+                overlay={translate('component_measures.not_all_measures_are_shown.help')}
+              />
+            </AlertContent>
           </StyledAlert>
         )}
         <Suggestions suggestions="code" />
@@ -401,6 +403,11 @@ const StyledAlert = styled(Alert)`
   margin-bottom: 15px;
 `;
 
+const AlertContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const mapStateToProps = (state: any): StateToProps => ({
   metrics: getMetrics(state)
 });
diff --git a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap
index ad7f2051d1c..04fb66277ed 100644
--- a/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/code/components/__tests__/__snapshots__/CodeApp-test.tsx.snap
@@ -175,12 +175,14 @@ exports[`should render a warning message when user does not have access to all p
   <Styled(Alert)
     variant="warning"
   >
-    component_measures.not_all_measures_are_shown
-    <HelpTooltip
-      ariaLabel="component_measures.not_all_measures_are_shown.help"
-      className="spacer-left"
-      overlay="component_measures.not_all_measures_are_shown.help"
-    />
+    <Styled(div)>
+      component_measures.not_all_measures_are_shown
+      <HelpTooltip
+        ariaLabel="component_measures.not_all_measures_are_shown.help"
+        className="spacer-left"
+        overlay="component_measures.not_all_measures_are_shown.help"
+      />
+    </Styled(div)>
   </Styled(Alert)>
   <Suggestions
     suggestions="code"
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx
index 003a23da05b..079f77ed1fb 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/App.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 styled from '@emotion/styled';
 import key from 'keymaster';
 import { debounce, keyBy } from 'lodash';
 import * as React from 'react';
@@ -308,14 +309,18 @@ export class App extends React.PureComponent<Props, State> {
                       <Alert
                         className="big-spacer-top big-spacer-right big-spacer-left"
                         variant="warning">
-                        {translate('component_measures.not_all_measures_are_shown')}
-                        <HelpTooltip
-                          className="spacer-left"
-                          ariaLabel={translate(
-                            'component_measures.not_all_measures_are_shown.help'
-                          )}
-                          overlay={translate('component_measures.not_all_measures_are_shown.help')}
-                        />
+                        <AlertContent>
+                          {translate('component_measures.not_all_measures_are_shown')}
+                          <HelpTooltip
+                            className="spacer-left"
+                            ariaLabel={translate(
+                              'component_measures.not_all_measures_are_shown.help'
+                            )}
+                            overlay={translate(
+                              'component_measures.not_all_measures_are_shown.help'
+                            )}
+                          />
+                        </AlertContent>
                       </Alert>
                     )}
                     <div className="layout-page-filters">
@@ -342,4 +347,9 @@ export class App extends React.PureComponent<Props, State> {
 
 const mapDispatchToProps = { fetchBranchStatus: fetchBranchStatus as any };
 
+const AlertContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export default withRouter(connect(null, mapDispatchToProps)(App));
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
index 14b96b76b6c..68daeb9cdb4 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/App-test.tsx.snap
@@ -72,12 +72,14 @@ exports[`should render a warning message when user does not have access to all p
         className="big-spacer-top big-spacer-right big-spacer-left"
         variant="warning"
       >
-        component_measures.not_all_measures_are_shown
-        <HelpTooltip
-          ariaLabel="component_measures.not_all_measures_are_shown.help"
-          className="spacer-left"
-          overlay="component_measures.not_all_measures_are_shown.help"
-        />
+        <Styled(div)>
+          component_measures.not_all_measures_are_shown
+          <HelpTooltip
+            ariaLabel="component_measures.not_all_measures_are_shown.help"
+            className="spacer-left"
+            overlay="component_measures.not_all_measures_are_shown.help"
+          />
+        </Styled(div)>
       </Alert>
       <div
         className="layout-page-filters"
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 8c9a0b0c73e..62d45cd1d01 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.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 styled from '@emotion/styled';
 import key from 'keymaster';
 import { debounce, keyBy, omit, without } from 'lodash';
 import * as React from 'react';
@@ -42,6 +43,7 @@ import {
   isSameBranchLike
 } from '../../../helpers/branch-like';
 import handleRequiredAuthentication from '../../../helpers/handleRequiredAuthentication';
+import { KeyCodes } from '../../../helpers/keycodes';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import {
   addSideBarClass,
@@ -129,6 +131,7 @@ export interface State {
 
 const DEFAULT_QUERY = { resolved: 'false' };
 const MAX_INITAL_FETCH = 1000;
+const BRANCH_STATUS_REFRESH_INTERVAL = 1000;
 
 export default class App extends React.PureComponent<Props, State> {
   mounted = false;
@@ -162,7 +165,7 @@ export default class App extends React.PureComponent<Props, State> {
       referencedUsers: {},
       selected: getOpen(props.location.query)
     };
-    this.refreshBranchStatus = debounce(this.refreshBranchStatus, 1000);
+    this.refreshBranchStatus = debounce(this.refreshBranchStatus, BRANCH_STATUS_REFRESH_INTERVAL);
   }
 
   componentDidMount() {
@@ -265,24 +268,19 @@ export default class App extends React.PureComponent<Props, State> {
     if (key.getScope() !== 'issues') {
       return;
     }
-    if (event.keyCode === 18) {
-      // alt
+    if (event.keyCode === KeyCodes.Alt) {
       event.preventDefault();
       this.setState(actions.enableLocationsNavigator);
-    } else if (event.keyCode === 40 && event.altKey) {
-      // alt + down
+    } else if (event.keyCode === KeyCodes.DownArrow && event.altKey) {
       event.preventDefault();
       this.selectNextLocation();
-    } else if (event.keyCode === 38 && event.altKey) {
-      // alt + up
+    } else if (event.keyCode === KeyCodes.UpArrow && event.altKey) {
       event.preventDefault();
       this.selectPreviousLocation();
-    } else if (event.keyCode === 37 && event.altKey) {
-      // alt + left
+    } else if (event.keyCode === KeyCodes.LeftArrow && event.altKey) {
       event.preventDefault();
       this.selectPreviousFlow();
-    } else if (event.keyCode === 39 && event.altKey) {
-      // alt + right
+    } else if (event.keyCode === KeyCodes.RightArrow && event.altKey) {
       event.preventDefault();
       this.selectNextFlow();
     }
@@ -292,7 +290,7 @@ export default class App extends React.PureComponent<Props, State> {
     if (key.getScope() !== 'issues') {
       return;
     }
-    if (event.keyCode === 18) {
+    if (event.keyCode === KeyCodes.Alt) {
       // alt
       this.setState(actions.disableLocationsNavigator);
     }
@@ -499,7 +497,7 @@ export default class App extends React.PureComponent<Props, State> {
   };
 
   fetchIssuesUntil = (
-    p: number,
+    page: number,
     done: (pageIssues: T.Issue[], paging: T.Paging) => boolean
   ): Promise<FetchIssuesPromise> => {
     const recursiveFetch = (p: number, prevIssues: T.Issue[]): Promise<FetchIssuesPromise> => {
@@ -511,7 +509,7 @@ export default class App extends React.PureComponent<Props, State> {
       });
     };
 
-    return recursiveFetch(p, []);
+    return recursiveFetch(page, []);
   };
 
   fetchMoreIssues = () => {
@@ -551,9 +549,9 @@ export default class App extends React.PureComponent<Props, State> {
 
     const isSameComponent = (issue: T.Issue) => issue.component === openIssue.component;
 
-    const done = (pageIssues: T.Issue[], paging: T.Paging) => {
+    const done = (pageIssues: T.Issue[], p: T.Paging) => {
       const lastIssue = pageIssues[pageIssues.length - 1];
-      if (paging.total <= paging.pageIndex * paging.pageSize) {
+      if (p.total <= p.pageIndex * p.pageSize) {
         return true;
       }
       if (lastIssue.component !== openIssue.component) {
@@ -631,19 +629,19 @@ export default class App extends React.PureComponent<Props, State> {
     return Promise.resolve({ issues, paging });
   };
 
-  getButtonLabel = (checked: string[], checkAll?: boolean, paging?: T.Paging) => {
-    if (checked.length > 0) {
-      let count;
-      if (checkAll && paging) {
-        count = paging.total > MAX_PAGE_SIZE ? MAX_PAGE_SIZE : paging.total;
-      } else {
-        count = Math.min(checked.length, MAX_PAGE_SIZE);
-      }
+  getButtonLabel = (checked: string[], checkAll = false, paging?: T.Paging) => {
+    if (checked.length === 0) {
+      return translate('bulk_change');
+    }
 
-      return translateWithParameters('issues.bulk_change_X_issues', count);
+    let count;
+    if (checkAll && paging) {
+      count = paging.total > MAX_PAGE_SIZE ? MAX_PAGE_SIZE : paging.total;
     } else {
-      return translate('bulk_change');
+      count = Math.min(checked.length, MAX_PAGE_SIZE);
     }
+
+    return translateWithParameters('issues.bulk_change_X_issues', count);
   };
 
   handleFilterChange = (changes: Partial<Query>) => {
@@ -747,7 +745,7 @@ export default class App extends React.PureComponent<Props, State> {
     });
   };
 
-  handlePopupToggle = (issue: string, popupName: string, open?: boolean) => {
+  handlePopupToggle = (issue: string, popupName: string, open: boolean | undefined = undefined) => {
     this.setState((state: State) => {
       const { openPopup } = state;
       const samePopup = openPopup && openPopup.name === popupName && openPopup.issue === issue;
@@ -962,12 +960,14 @@ export default class App extends React.PureComponent<Props, State> {
                 <Alert
                   className="big-spacer-top big-spacer-right big-spacer-left"
                   variant="warning">
-                  {translate('issues.not_all_issue_show')}
-                  <HelpTooltip
-                    className="spacer-left"
-                    ariaLabel={translate('issues.not_all_issue_show_why')}
-                    overlay={translate('issues.not_all_issue_show_why')}
-                  />
+                  <AlertContent>
+                    {translate('issues.not_all_issue_show')}
+                    <HelpTooltip
+                      className="spacer-left"
+                      ariaLabel={translate('issues.not_all_issue_show_why')}
+                      overlay={translate('issues.not_all_issue_show_why')}
+                    />
+                  </AlertContent>
                 </Alert>
               )}
               <A11ySkipTarget
@@ -1133,3 +1133,8 @@ export default class App extends React.PureComponent<Props, State> {
     );
   }
 }
+
+const AlertContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
index 99ba1657dab..01994952a65 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/__snapshots__/IssuesApp-test.tsx.snap
@@ -40,12 +40,14 @@ exports[`should show warnning when not all projects are accessible 1`] = `
         className="big-spacer-top big-spacer-right big-spacer-left"
         variant="warning"
       >
-        issues.not_all_issue_show
-        <HelpTooltip
-          ariaLabel="issues.not_all_issue_show_why"
-          className="spacer-left"
-          overlay="issues.not_all_issue_show_why"
-        />
+        <Styled(div)>
+          issues.not_all_issue_show
+          <HelpTooltip
+            ariaLabel="issues.not_all_issue_show_why"
+            className="spacer-left"
+            overlay="issues.not_all_issue_show_why"
+          />
+        </Styled(div)>
       </Alert>
       <A11ySkipTarget
         anchor="issues_sidebar"
diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
index b669d4fb2b6..40bd43d0d35 100644
--- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx
@@ -35,7 +35,14 @@ interface Props extends Pick<IconProps, 'size'> {
   ariaLabelledby?: string;
 }
 
-export default function HelpTooltip({ size = 12, ariaLabel, ariaLabelledby, ...props }: Props) {
+const DEFAULT_SIZE = 12;
+
+export default function HelpTooltip({
+  size = DEFAULT_SIZE,
+  ariaLabel,
+  ariaLabelledby,
+  ...props
+}: Props) {
   const role = ariaLabel || ariaLabelledby ? 'note' : undefined;
   return (
     <div
@@ -56,7 +63,7 @@ export default function HelpTooltip({ size = 12, ariaLabel, ariaLabelledby, ...p
   );
 }
 
-export function DarkHelpTooltip({ size = 12, ...props }: Omit<Props, 'children'>) {
+export function DarkHelpTooltip({ size = DEFAULT_SIZE, ...props }: Omit<Props, 'children'>) {
   return (
     <HelpTooltip {...props}>
       <HelpIcon fill={colors.transparentBlack} fillInner={colors.white} size={size} />
diff --git a/server/sonar-web/src/main/js/components/issue/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
index 6d93c734417..30b4e9d5ed8 100644
--- a/server/sonar-web/src/main/js/components/issue/IssueView.tsx
+++ b/server/sonar-web/src/main/js/components/issue/IssueView.tsx
@@ -108,14 +108,12 @@ export default class IssueView extends React.PureComponent<Props> {
           </div>
         )}
         {hasCheckbox && (
-          <>
-            <Checkbox
-              checked={this.props.checked || false}
-              className="issue-checkbox-container"
-              onCheck={this.handleCheck}
-              title={translate('issues.action_select')}
-            />
-          </>
+          <Checkbox
+            checked={this.props.checked || false}
+            className="issue-checkbox-container"
+            onCheck={this.handleCheck}
+            title={translate('issues.action_select')}
+          />
         )}
       </div>
     );