SONAR-14943 Adjust project creation menu layout

8 files changed, 151 insertions, 64 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx
index 7ea8dbc5211..a2677ae4de8 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCreationMenu.tsx
@@ -18,13 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+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 { translate } from 'sonar-ui-common/helpers/l10n';
 import { getAlmSettings } from '../../../api/alm-settings';
 import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
-import { IMPORT_COMPATIBLE_ALMS } from '../../../helpers/constants';
+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';
 import { Permissions } from '../../../types/permissions';
@@ -117,10 +119,18 @@ export class ProjectCreationMenu extends React.PureComponent<Props, State> {
         overlay={
           <ul className="menu">
             {[...boundAlms, 'manual'].map(alm => (
-              <li key={alm}>
+              <li className="little-spacer-bottom" key={alm}>
                 <ProjectCreationMenuItem alm={alm} />
               </li>
             ))}
+            {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" />
+                  {translate('more')}
+                </Link>
+              </li>
+            )}
           </ul>
         }>
         <Button className="button-primary">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCreationMenu-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCreationMenu-test.tsx.snap
index 0316a62973c..f5ed0aa061f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCreationMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCreationMenu-test.tsx.snap
@@ -7,11 +7,33 @@ exports[`should render correctly: default 1`] = `
     <ul
       className="menu"
     >
-      <li>
+      <li
+        className="little-spacer-bottom"
+      >
         <ProjectCreationMenuItem
           alm="manual"
         />
       </li>
+      <li
+        className="bordered-top little-padded-top"
+      >
+        <Link
+          className="display-flex-center"
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/projects/create",
+            }
+          }
+        >
+          <EllipsisIcon
+            className="big spacer-right"
+            width={16}
+          />
+          more
+        </Link>
+      </li>
     </ul>
   }
 >
diff --git a/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx b/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx
new file mode 100644
index 00000000000..51455e17736
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons/EllipsisIcon.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/EllipsisIcon-test.tsx b/server/sonar-web/src/main/js/components/icons/__tests__/EllipsisIcon-test.tsx
new file mode 100644
index 00000000000..fbc28175276
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons/__tests__/EllipsisIcon-test.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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} />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/EllipsisIcon-test.tsx.snap b/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/EllipsisIcon-test.tsx.snap
new file mode 100644
index 00000000000..adaf939e627
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons/__tests__/__snapshots__/EllipsisIcon-test.tsx.snap
@@ -0,0 +1,16 @@
+// 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>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 46afc8cebfb..f2749fc9247 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 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';
@@ -177,12 +178,7 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
             {renderButton(
               TutorialModes.OtherCI,
               props.onSelectTutorial,
-              <span
-                aria-disabled={true}
-                className="display-flex-center gigantic"
-                style={{ height: DEFAULT_ICON_SIZE }}>
-                &hellip;
-              </span>
+              <EllipsisIcon className="gigantic" height={DEFAULT_ICON_SIZE} />
             )}
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
index 5cc2057e2d3..9e4c32dd8b2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
@@ -54,17 +54,10 @@ exports[`should render correctly for azure 1`] = `
         onClick={[Function]}
         type="button"
       >
-        <span
-          aria-disabled={true}
-          className="display-flex-center gigantic"
-          style={
-            Object {
-              "height": 80,
-            }
-          }
-        >
-          …
-        </span>
+        <EllipsisIcon
+          className="gigantic"
+          height={80}
+        />
         <div
           className="medium big-spacer-top"
         >
@@ -130,17 +123,10 @@ exports[`should render correctly for bitbucket server 1`] = `
         onClick={[Function]}
         type="button"
       >
-        <span
-          aria-disabled={true}
-          className="display-flex-center gigantic"
-          style={
-            Object {
-              "height": 80,
-            }
-          }
-        >
-          …
-        </span>
+        <EllipsisIcon
+          className="gigantic"
+          height={80}
+        />
         <div
           className="medium big-spacer-top"
         >
@@ -239,17 +225,10 @@ exports[`should render correctly for github 1`] = `
         onClick={[Function]}
         type="button"
       >
-        <span
-          aria-disabled={true}
-          className="display-flex-center gigantic"
-          style={
-            Object {
-              "height": 80,
-            }
-          }
-        >
-          …
-        </span>
+        <EllipsisIcon
+          className="gigantic"
+          height={80}
+        />
         <div
           className="medium big-spacer-top"
         >
@@ -331,17 +310,10 @@ exports[`should render correctly for gitlab 1`] = `
         onClick={[Function]}
         type="button"
       >
-        <span
-          aria-disabled={true}
-          className="display-flex-center gigantic"
-          style={
-            Object {
-              "height": 80,
-            }
-          }
-        >
-          …
-        </span>
+        <EllipsisIcon
+          className="gigantic"
+          height={80}
+        />
         <div
           className="medium big-spacer-top"
         >
@@ -693,17 +665,10 @@ exports[`should render correctly: selection 1`] = `
         onClick={[Function]}
         type="button"
       >
-        <span
-          aria-disabled={true}
-          className="display-flex-center gigantic"
-          style={
-            Object {
-              "height": 80,
-            }
-          }
-        >
-          …
-        </span>
+        <EllipsisIcon
+          className="gigantic"
+          height={80}
+        />
         <div
           className="medium big-spacer-top"
         >
diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts
index f59638d5ebe..96f776c6af8 100644
--- a/server/sonar-web/src/main/js/helpers/constants.ts
+++ b/server/sonar-web/src/main/js/helpers/constants.ts
@@ -78,3 +78,8 @@ export const IMPORT_COMPATIBLE_ALMS = [
   AlmKeys.GitHub,
   AlmKeys.GitLab
 ];
+
+// Count both Bitbuckets as a single ALM.
+export const IMPORT_COMPATIBLE_ALM_COUNT = IMPORT_COMPATIBLE_ALMS.filter(
+  a => a !== AlmKeys.BitbucketCloud
+).length;