SONAR-14943 Vertical center the ellipsis icon

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

@@ -22,10 +22,10 @@ import { Link } from 'react-router';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import Dropdown from 'sonar-ui-common/components/controls/Dropdown';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
+import EllipsisIcon from 'sonar-ui-common/components/icons/EllipsisIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getAlmSettings } from '../../../api/alm-settings';
 import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
-import EllipsisIcon from '../../../components/icons/EllipsisIcon';
 import { IMPORT_COMPATIBLE_ALMS, IMPORT_COMPATIBLE_ALM_COUNT } from '../../../helpers/constants';
 import { hasGlobalPermission } from '../../../helpers/users';
 import { AlmKeys, AlmSettingsInstance } from '../../../types/alm-settings';
@@ -126,7 +126,7 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
             {boundAlms.length < IMPORT_COMPATIBLE_ALM_COUNT && (
               <li className="bordered-top little-padded-top">
                 <Link className="display-flex-center" to={{ pathname: '/projects/create' }}>
-                  <EllipsisIcon width={16} className="big spacer-right" />
+                  <EllipsisIcon className="spacer-right" size={16} />
                   {translate('more')}
                 </Link>
               </li>

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

@@ -28,8 +28,8 @@ exports[`should render correctly: default 1`] = `
           }
         >
           <EllipsisIcon
-            className="big spacer-right"
-            width={16}
+            className="spacer-right"
+            size={16}
           />
           more
         </Link>

server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx

@@ -1,39 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import * as classNames from 'classnames';
-import * as React from 'react';
-
-export interface EllipsisIconProps {
-  className?: string;
-  height?: number;
-  width?: number;
-}
-
-export default function EllipsisIcon({ className, height, width }: EllipsisIconProps) {
-  return (
-    <span
-      aria-disabled={true}
-      className={classNames('display-flex-center display-flex-justify-center', className)}
-      style={{ height, width }}>
-      &hellip;
-    </span>
-  );
-}

server/sonar-web/src/main/js/components/icons/__tests__/EllipsisIcon-test.tsx

@@ -1,34 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import EllipsisIcon, { EllipsisIconProps } from '../EllipsisIcon';
-
-it('should render correctly', () => {
-  const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot();
-});
-
-function shallowRender(props: Partial<EllipsisIconProps> = {}) {
-  return shallow<EllipsisIconProps>(
-    <EllipsisIcon height={16} width={16} className="test-class-name" {...props} />
-  );
-}

server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/EllipsisIcon-test.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<span
-  aria-disabled={true}
-  className="display-flex-center display-flex-justify-center test-class-name"
-  style={
-    Object {
-      "height": 16,
-      "width": 16,
-    }
-  }
->
-  …
-</span>
-`;

server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx

@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import EllipsisIcon from 'sonar-ui-common/components/icons/EllipsisIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { AlmKeys, AlmSettingsInstance, ProjectAlmBindingResponse } from '../../types/alm-settings';
-import EllipsisIcon from '../icons/EllipsisIcon';
 import AzurePipelinesTutorial from './azure-pipelines/AzurePipelinesTutorial';
 import BitbucketPipelinesTutorial from './bitbucket-pipelines/BitbucketPipelinesTutorial';
 import GitHubActionTutorial from './github-action/GitHubActionTutorial';
@@ -178,7 +178,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
             {renderButton(
               TutorialModes.OtherCI,
               props.onSelectTutorial,
-              <EllipsisIcon className="gigantic" height={DEFAULT_ICON_SIZE} />
+              <EllipsisIcon size={DEFAULT_ICON_SIZE / 2} />
             )}
           </div>
         </div>

server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap

@@ -55,8 +55,7 @@ exports[`should render correctly for azure 1`] = `
         type="button"
       >
         <EllipsisIcon
-          className="gigantic"
-          height={80}
+          size={40}
         />
         <div
           className="medium big-spacer-top"
@@ -124,8 +123,7 @@ exports[`should render correctly for bitbucket server 1`] = `
         type="button"
       >
         <EllipsisIcon
-          className="gigantic"
-          height={80}
+          size={40}
         />
         <div
           className="medium big-spacer-top"
@@ -226,8 +224,7 @@ exports[`should render correctly for github 1`] = `
         type="button"
       >
         <EllipsisIcon
-          className="gigantic"
-          height={80}
+          size={40}
         />
         <div
           className="medium big-spacer-top"
@@ -311,8 +308,7 @@ exports[`should render correctly for gitlab 1`] = `
         type="button"
       >
         <EllipsisIcon
-          className="gigantic"
-          height={80}
+          size={40}
         />
         <div
           className="medium big-spacer-top"
@@ -666,8 +662,7 @@ exports[`should render correctly: selection 1`] = `
         type="button"
       >
         <EllipsisIcon
-          className="gigantic"
-          height={80}
+          size={40}
         />
         <div
           className="medium big-spacer-top"