SONAR-14290 Improve first time visit to project create screen

10 files changed, 692 insertions, 325 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 4c6ef70ab93..eed5cd5fa56 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -348,6 +348,10 @@ th.huge-spacer-right {
   width: 600px !important;
 }
 
+.abs-height-50 {
+  height: 50px !important;
+}
+
 .abs-height-100 {
   height: 100% !important;
 }
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
index 6524aad672a..9a1a6557f2d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
@@ -19,14 +19,18 @@
  */
 import * as classNames from 'classnames';
 import * as React from 'react';
-import HelpTooltip from 'sonar-ui-common/components/controls/HelpTooltip';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
+import { withAppState } from '../../../components/hoc/withAppState';
+import { ALM_DOCUMENTATION_PATHS } from '../../../helpers/constants';
 import { AlmKeys } from '../../../types/alm-settings';
+import { ALM_INTEGRATION } from '../../settings/components/AdditionalCategoryKeys';
 import { CreateProjectModes } from './types';
 
 export interface CreateProjectModeSelectionProps {
   almCounts: { [key in AlmKeys]: number };
+  appState: Pick<T.AppState, 'canAdmin'>;
   loadingBindings: boolean;
   onSelectMode: (mode: CreateProjectModes) => void;
 }
@@ -36,58 +40,86 @@ function renderAlmOption(
   alm: AlmKeys,
   mode: CreateProjectModes
 ) {
-  const { almCounts, loadingBindings } = props;
+  const {
+    almCounts,
+    appState: { canAdmin },
+    loadingBindings
+  } = props;
 
   const count = almCounts[alm];
   const disabled = count !== 1 || loadingBindings;
 
-  return (
-    <button
-      className={classNames(
-        'button button-huge big-spacer-left display-flex-column create-project-mode-type-alm',
-        { disabled }
-      )}
-      disabled={disabled}
-      onClick={() => props.onSelectMode(mode)}
-      type="button">
-      <img
-        alt="" // Should be ignored by screen readers
-        height={80}
-        src={`${getBaseUrl()}/images/alm/${alm}.svg`}
-      />
-      <div className="medium big-spacer-top">
-        {translate('onboarding.create_project.select_method', alm)}
-      </div>
+  const tooltipLinks = [];
+  if (count === 0) {
+    if (canAdmin) {
+      tooltipLinks.push({
+        href: `/admin/settings?category=${ALM_INTEGRATION}&alm=${alm}`,
+        label: translateWithParameters(
+          'onboarding.create_project.set_up_x',
+          translate('alm', alm, 'short')
+        )
+      });
+    }
 
-      {loadingBindings && (
-        <span>
-          {translate('onboarding.create_project.check_alm_supported')}
-          <i className="little-spacer-left spinner" />
-        </span>
-      )}
+    tooltipLinks.push({
+      href: ALM_DOCUMENTATION_PATHS[alm],
+      label: translateWithParameters(
+        'onboarding.create_project.help_set_up_x',
+        translate('alm', alm, 'short')
+      )
+    });
+  }
 
-      {!loadingBindings && disabled && (
-        <div className="text-muted small spacer-top" style={{ lineHeight: 1.5 }}>
-          {translate('onboarding.create_project.alm_not_configured')}
-          <HelpTooltip
-            className="little-spacer-left"
-            overlay={
-              count === 0
-                ? translate('onboarding.create_project.zero_alm_instances', alm)
-                : `${translate('onboarding.create_project.too_many_alm_instances', alm)} 
-                  ${translateWithParameters(
-                    'onboarding.create_project.alm_instances_count_X',
-                    count
-                  )}`
-            }
-          />
+  return (
+    <div className="big-spacer-left display-flex-column">
+      <button
+        className={classNames(
+          'button button-huge display-flex-column create-project-mode-type-alm',
+          { disabled }
+        )}
+        disabled={disabled}
+        onClick={() => props.onSelectMode(mode)}
+        type="button">
+        <img
+          alt="" // Should be ignored by screen readers
+          height={80}
+          src={`${getBaseUrl()}/images/alm/${alm}.svg`}
+        />
+        <div className="medium big-spacer-top abs-height-50 display-flex-center">
+          {translate('onboarding.create_project.select_method', alm)}
         </div>
-      )}
-    </button>
+
+        {loadingBindings && (
+          <span>
+            {translate('onboarding.create_project.check_alm_supported')}
+            <i className="little-spacer-left spinner" />
+          </span>
+        )}
+
+        {!loadingBindings && disabled && (
+          <div className="text-muted small spacer-top" style={{ lineHeight: 1.5 }}>
+            {translate('onboarding.create_project.alm_not_configured')}
+            <DocumentationTooltip
+              className="little-spacer-left"
+              content={
+                count === 0
+                  ? translate('onboarding.create_project.zero_alm_instances', alm)
+                  : `${translate('onboarding.create_project.too_many_alm_instances', alm)} 
+                ${translateWithParameters(
+                  'onboarding.create_project.alm_instances_count_X',
+                  count
+                )}`
+              }
+              links={count === 0 ? tooltipLinks : undefined}
+            />
+          </div>
+        )}
+      </button>
+    </div>
   );
 }
 
-export default function CreateProjectModeSelection(props: CreateProjectModeSelectionProps) {
+export function CreateProjectModeSelection(props: CreateProjectModeSelectionProps) {
   return (
     <>
       <header className="huge-spacer-top big-spacer-bottom padded">
@@ -120,3 +152,5 @@ export default function CreateProjectModeSelection(props: CreateProjectModeSelec
     </>
   );
 }
+
+export default withAppState(CreateProjectModeSelection);
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/CreateProjectModeSelection-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/CreateProjectModeSelection-test.tsx
index 2cfeddd296e..c53809d2cb5 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/CreateProjectModeSelection-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/CreateProjectModeSelection-test.tsx
@@ -22,7 +22,8 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { click } from 'sonar-ui-common/helpers/testUtils';
 import { AlmKeys } from '../../../../types/alm-settings';
-import CreateProjectModeSelection, {
+import {
+  CreateProjectModeSelection,
   CreateProjectModeSelectionProps
 } from '../CreateProjectModeSelection';
 import { CreateProjectModes } from '../types';
@@ -31,8 +32,11 @@ it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
   expect(shallowRender({ loadingBindings: true })).toMatchSnapshot('loading instances');
   expect(shallowRender({}, { [AlmKeys.Bitbucket]: 0, [AlmKeys.GitHub]: 2 })).toMatchSnapshot(
-    'invalid configs'
+    'invalid configs, not admin'
   );
+  expect(
+    shallowRender({ appState: { canAdmin: true } }, { [AlmKeys.Bitbucket]: 0, [AlmKeys.GitHub]: 2 })
+  ).toMatchSnapshot('invalid configs, admin');
 });
 
 it('should correctly pass the selected mode up', () => {
@@ -76,6 +80,7 @@ function shallowRender(
   return shallow<CreateProjectModeSelectionProps>(
     <CreateProjectModeSelection
       almCounts={almCounts}
+      appState={{ canAdmin: false }}
       loadingBindings={false}
       onSelectMode={jest.fn()}
       {...props}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectModeSelection-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectModeSelection-test.tsx.snap
index cb6db4d27f5..4b84b1a5b58 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectModeSelection-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectModeSelection-test.tsx.snap
@@ -35,121 +35,161 @@ exports[`should render correctly: default 1`] = `
         onboarding.create_project.select_method.manual
       </div>
     </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/azure.svg"
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.azure
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
-          }
-        }
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.azure"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/azure.svg"
         />
-      </div>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/bitbucket.svg"
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.bitbucket
-      </div>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
-    >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/github.svg"
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.github
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.azure"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/azuredevops-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.azure.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.github"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/bitbucket.svg"
         />
-      </div>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.bitbucket
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/gitlab.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.gitlab
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/github.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.github"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/github-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.github.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.gitlab"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/gitlab.svg"
         />
-      </div>
-    </button>
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.gitlab
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.gitlab"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/gitlab-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.gitlab.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
   </div>
 </Fragment>
 `;
 
-exports[`should render correctly: invalid configs 1`] = `
+exports[`should render correctly: invalid configs, admin 1`] = `
 <Fragment>
   <header
     className="huge-spacer-top big-spacer-bottom padded"
@@ -184,131 +224,387 @@ exports[`should render correctly: invalid configs 1`] = `
         onboarding.create_project.select_method.manual
       </div>
     </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/azure.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.azure
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/azure.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.azure"
+            links={
+              Array [
+                Object {
+                  "href": "/admin/settings?category=almintegration&alm=azure",
+                  "label": "onboarding.create_project.set_up_x.alm.azure.short",
+                },
+                Object {
+                  "href": "/documentation/analysis/azuredevops-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.azure.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.azure"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/bitbucket.svg"
         />
-      </div>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.bitbucket
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.bitbucket"
+            links={
+              Array [
+                Object {
+                  "href": "/admin/settings?category=almintegration&alm=bitbucket",
+                  "label": "onboarding.create_project.set_up_x.alm.bitbucket.short",
+                },
+                Object {
+                  "href": "/documentation/analysis/bitbucket-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.bitbucket.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/bitbucket.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.bitbucket
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/github.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.too_many_alm_instances.github 
+                onboarding.create_project.alm_instances_count_X.2"
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.bitbucket"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/gitlab.svg"
         />
-      </div>
-    </button>
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.gitlab
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.gitlab"
+            links={
+              Array [
+                Object {
+                  "href": "/admin/settings?category=almintegration&alm=gitlab",
+                  "label": "onboarding.create_project.set_up_x.alm.gitlab.short",
+                },
+                Object {
+                  "href": "/documentation/analysis/gitlab-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.gitlab.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</Fragment>
+`;
+
+exports[`should render correctly: invalid configs, not admin 1`] = `
+<Fragment>
+  <header
+    className="huge-spacer-top big-spacer-bottom padded"
+  >
+    <h1
+      className="text-center huge big-spacer-bottom"
+    >
+      my_account.create_new.TRK
+    </h1>
+    <p
+      className="text-center big"
+    >
+      onboarding.create_project.select_method
+    </p>
+  </header>
+  <div
+    className="create-project-modes huge-spacer-top display-flex-justify-center"
+  >
     <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
+      className="button button-huge display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
       <img
         alt=""
         height={80}
-        src="/images/alm/github.svg"
+        src="/images/sonarcloud/analysis/manual.svg"
       />
       <div
         className="medium big-spacer-top"
       >
-        onboarding.create_project.select_method.github
+        onboarding.create_project.select_method.manual
       </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+    </button>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/azure.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.azure"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/azuredevops-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.azure.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.too_many_alm_instances.github 
-                  onboarding.create_project.alm_instances_count_X.2"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/bitbucket.svg"
         />
-      </div>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.bitbucket
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.bitbucket"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/bitbucket-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.bitbucket.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/gitlab.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.gitlab
-      </div>
-      <div
-        className="text-muted small spacer-top"
-        style={
-          Object {
-            "lineHeight": 1.5,
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/github.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
           }
-        }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.too_many_alm_instances.github 
+                onboarding.create_project.alm_instances_count_X.2"
+          />
+        </div>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
+    >
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.alm_not_configured
-        <HelpTooltip
-          className="little-spacer-left"
-          overlay="onboarding.create_project.zero_alm_instances.gitlab"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/gitlab.svg"
         />
-      </div>
-    </button>
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.gitlab
+        </div>
+        <div
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured
+          <DocumentationTooltip
+            className="little-spacer-left"
+            content="onboarding.create_project.zero_alm_instances.gitlab"
+            links={
+              Array [
+                Object {
+                  "href": "/documentation/analysis/gitlab-integration/",
+                  "label": "onboarding.create_project.help_set_up_x.alm.gitlab.short",
+                },
+              ]
+            }
+          />
+        </div>
+      </button>
+    </div>
   </div>
 </Fragment>
 `;
@@ -348,98 +644,114 @@ exports[`should render correctly: loading instances 1`] = `
         onboarding.create_project.select_method.manual
       </div>
     </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/azure.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.azure
-      </div>
-      <span>
-        onboarding.create_project.check_alm_supported
-        <i
-          className="little-spacer-left spinner"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/azure.svg"
         />
-      </span>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
+        </div>
+        <span>
+          onboarding.create_project.check_alm_supported
+          <i
+            className="little-spacer-left spinner"
+          />
+        </span>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/bitbucket.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.bitbucket
-      </div>
-      <span>
-        onboarding.create_project.check_alm_supported
-        <i
-          className="little-spacer-left spinner"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/bitbucket.svg"
         />
-      </span>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.bitbucket
+        </div>
+        <span>
+          onboarding.create_project.check_alm_supported
+          <i
+            className="little-spacer-left spinner"
+          />
+        </span>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/github.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.github
-      </div>
-      <span>
-        onboarding.create_project.check_alm_supported
-        <i
-          className="little-spacer-left spinner"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/github.svg"
         />
-      </span>
-    </button>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-alm disabled"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
+        </div>
+        <span>
+          onboarding.create_project.check_alm_supported
+          <i
+            className="little-spacer-left spinner"
+          />
+        </span>
+      </button>
+    </div>
+    <div
+      className="big-spacer-left display-flex-column"
     >
-      <img
-        alt=""
-        height={80}
-        src="/images/alm/gitlab.svg"
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.gitlab
-      </div>
-      <span>
-        onboarding.create_project.check_alm_supported
-        <i
-          className="little-spacer-left spinner"
+        <img
+          alt=""
+          height={80}
+          src="/images/alm/gitlab.svg"
         />
-      </span>
-    </button>
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.gitlab
+        </div>
+        <span>
+          onboarding.create_project.check_alm_supported
+          <i
+            className="little-spacer-left spinner"
+          />
+        </span>
+      </button>
+    </div>
   </div>
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
index 970ce4d6c59..475b40c6b49 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/CreateProjectPage-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`should render correctly 1`] = `
     className="page page-limited huge-spacer-bottom position-relative"
     id="create-project"
   >
-    <CreateProjectModeSelection
+    <Connect(withAppState(CreateProjectModeSelection))
       almCounts={
         Object {
           "azure": 0,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
index faa33fcca4b..04ffdb3e85c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AzureTab.tsx
@@ -22,6 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createAzureConfiguration, updateAzureConfiguration } from '../../../../api/alm-settings';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import {
   AlmKeys,
   AlmSettingsBindingStatus,
@@ -65,7 +66,7 @@ export default function AzureTab(props: AzureTabProps) {
             id="settings.almintegration.azure.info"
             values={{
               link: (
-                <Link target="_blank" to="/documentation/analysis/azuredevops-integration/">
+                <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
                   {translate('learn_more')}
                 </Link>
               )
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
index 6c9b91c075e..c42eacee532 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/BitbucketTab.tsx
@@ -24,6 +24,7 @@ import {
   createBitbucketConfiguration,
   updateBitbucketConfiguration
 } from '../../../../api/alm-settings';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import {
   AlmKeys,
   AlmSettingsBindingStatus,
@@ -75,7 +76,7 @@ export default function BitbucketTab(props: BitbucketTabProps) {
             </ul>
 
             <p className="big-spacer-top big-spacer-bottom">
-              <Link target="_blank" to="/documentation/analysis/bitbucket-integration/">
+              <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.Bitbucket]}>
                 {translate('learn_more')}
               </Link>
             </p>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
index b1e869b4b60..2e41d6c1e13 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GithubTab.tsx
@@ -22,6 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createGithubConfiguration, updateGithubConfiguration } from '../../../../api/alm-settings';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import {
   AlmKeys,
   AlmSettingsBindingStatus,
@@ -80,7 +81,7 @@ export default function GithubTab(props: GithubTabProps) {
                 id="settings.almintegration.github.info"
                 values={{
                   link: (
-                    <Link target="_blank" to="/documentation/analysis/github-integration/">
+                    <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.GitHub]}>
                       {translate('learn_more')}
                     </Link>
                   )
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
index 4277260ec36..0a593c43d5a 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/GitlabTab.tsx
@@ -22,6 +22,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createGitlabConfiguration, updateGitlabConfiguration } from '../../../../api/alm-settings';
+import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
 import {
   AlmKeys,
   AlmSettingsBindingStatus,
@@ -73,7 +74,7 @@ export default function GitlabTab(props: GitlabTabProps) {
                 id="settings.almintegration.gitlab.info"
                 values={{
                   link: (
-                    <Link target="_blank" to="/documentation/analysis/gitlab-integration/">
+                    <Link target="_blank" to={ALM_DOCUMENTATION_PATHS[AlmKeys.GitLab]}>
                       {translate('learn_more')}
                     </Link>
                   )
diff --git a/server/sonar-web/src/main/js/helpers/constants.ts b/server/sonar-web/src/main/js/helpers/constants.ts
index 5bf81e56973..c081f428ff2 100644
--- a/server/sonar-web/src/main/js/helpers/constants.ts
+++ b/server/sonar-web/src/main/js/helpers/constants.ts
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { colors } from '../app/theme';
+import { AlmKeys } from '../types/alm-settings';
 import { ComponentQualifier } from '../types/component';
 import { IssueScope, IssueType } from '../types/issues';
 
@@ -61,3 +62,10 @@ export const RATING_COLORS = [
 ];
 
 export const PROJECT_KEY_MAX_LEN = 400;
+
+export const ALM_DOCUMENTATION_PATHS = {
+  [AlmKeys.Azure]: '/documentation/analysis/azuredevops-integration/',
+  [AlmKeys.Bitbucket]: '/documentation/analysis/bitbucket-integration/',
+  [AlmKeys.GitHub]: '/documentation/analysis/github-integration/',
+  [AlmKeys.GitLab]: '/documentation/analysis/gitlab-integration/'
+};