From 0863e93ba1f4d9d20acb6b4ef3934fbc53e8d615 Mon Sep 17 00:00:00 2001
From: Philippe Perrin <philippe.perrin@sonarsource.com>
Date: Wed, 16 Jun 2021 16:19:45 +0200
Subject: [PATCH] SONAR-14932 Add message for sys admin when no alm are
 configured yet

---
 .../project/CreateProjectModeSelection.tsx    |   33 +-
 .../CreateProjectModeSelection-test.tsx       |    3 +
 .../CreateProjectModeSelection-test.tsx.snap  | 1088 ++++++++++-------
 .../resources/org/sonar/l10n/core.properties  |    1 +
 4 files changed, 665 insertions(+), 460 deletions(-)

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 3a9f25b81d8..0fa039eb003 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
@@ -20,6 +20,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import ChevronsIcon from 'sonar-ui-common/components/icons/ChevronsIcon';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { withAppState } from '../../../components/hoc/withAppState';
@@ -40,7 +41,8 @@ const DEFAULT_ICON_SIZE = 80;
 function renderAlmOption(
   props: CreateProjectModeSelectionProps,
   alm: AlmKeys.Azure | AlmKeys.BitbucketServer | AlmKeys.GitHub | AlmKeys.GitLab,
-  mode: CreateProjectModes
+  mode: CreateProjectModes,
+  last = false
 ) {
   const {
     almCounts,
@@ -59,11 +61,11 @@ function renderAlmOption(
   const disabled = loadingBindings || hasTooManyConfig || (!hasConfig && !canAdmin);
 
   return (
-    <div className="big-spacer-left display-flex-column">
+    <div className="display-flex-column">
       <button
         className={classNames(
           'button button-huge display-flex-column create-project-mode-type-alm',
-          { disabled }
+          { disabled, 'big-spacer-right': !last }
         )}
         disabled={disabled}
         onClick={() =>
@@ -104,6 +106,12 @@ function renderAlmOption(
 }
 
 export function CreateProjectModeSelection(props: CreateProjectModeSelectionProps) {
+  const {
+    appState: { canAdmin },
+    almCounts
+  } = props;
+  const almTotalCount = Object.values(almCounts).reduce((prev, cur) => prev + cur);
+
   return (
     <>
       <header className="padded huge-spacer-top display-flex-column display-flex-center">
@@ -122,7 +130,7 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
 
       <div className="create-project-modes huge-spacer-top display-flex-justify-center">
         <button
-          className="button button-huge display-flex-column create-project-mode-type-manual"
+          className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
           onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
           type="button">
           <ChevronsIcon size={DEFAULT_ICON_SIZE} />
@@ -131,10 +139,19 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
           </div>
         </button>
 
-        {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
-        {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
-        {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
-        {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab)}
+        <div className="display-flex-column">
+          <div className="display-flex-center display-flex-space-between">
+            {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
+            {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
+            {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
+            {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab, true)}
+          </div>
+          {almTotalCount === 0 && canAdmin && (
+            <Alert variant="info" className="big-spacer-top">
+              {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
+            </Alert>
+          )}
+        </div>
       </div>
     </>
   );
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 ecd184e7b0b..509bb889374 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
@@ -45,6 +45,9 @@ it('should render correctly', () => {
       { [AlmKeys.BitbucketServer]: 0, [AlmKeys.BitbucketCloud]: 0, [AlmKeys.GitHub]: 2 }
     )
   ).toMatchSnapshot('invalid configs, admin');
+  expect(
+    shallowRender({ appState: { canAdmin: true } }, { [AlmKeys.BitbucketServer]: 0 })
+  ).toMatchSnapshot('no alm conf yet, admin');
 });
 
 it('should correctly pass the selected mode up', () => {
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 aec9f4cc947..8dcb5b96696 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
@@ -29,7 +29,7 @@ exports[`should render correctly: default 1`] = `
     className="create-project-modes huge-spacer-top display-flex-justify-center"
   >
     <button
-      className="button button-huge display-flex-column create-project-mode-type-manual"
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
@@ -43,118 +43,126 @@ exports[`should render correctly: default 1`] = `
       </div>
     </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/azure.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.azure
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
-        >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/bitbucket.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.bitbucket
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.bitbucket
+            </div>
+          </button>
         </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/github.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.github
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
-        >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.gitlab
+          <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/gitlab.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.gitlab
+            </div>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
-        >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </button>
+      </div>
     </div>
   </div>
 </Fragment>
@@ -189,7 +197,7 @@ exports[`should render correctly: invalid configs, admin 1`] = `
     className="create-project-modes huge-spacer-top display-flex-justify-center"
   >
     <button
-      className="button button-huge display-flex-column create-project-mode-type-manual"
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
@@ -203,98 +211,106 @@ exports[`should render correctly: invalid configs, admin 1`] = `
       </div>
     </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/azure.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.azure
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            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>
+          </button>
         </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/bitbucket.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.bitbucket
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.bitbucket
+            </div>
+          </button>
         </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/github.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.github
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.too_many_alm_instances_X.alm.github
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
-        >
-          onboarding.create_project.too_many_alm_instances_X.alm.github
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.gitlab
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/gitlab.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.gitlab
+            </div>
+          </button>
         </div>
-      </button>
+      </div>
     </div>
   </div>
 </Fragment>
@@ -329,7 +345,7 @@ exports[`should render correctly: invalid configs, admin 2`] = `
     className="create-project-modes huge-spacer-top display-flex-justify-center"
   >
     <button
-      className="button button-huge display-flex-column create-project-mode-type-manual"
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
@@ -343,98 +359,106 @@ exports[`should render correctly: invalid configs, admin 2`] = `
       </div>
     </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/azure.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.azure
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            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>
+          </button>
         </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/bitbucket.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.bitbucket
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.bitbucket
+            </div>
+          </button>
         </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/github.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.github
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.too_many_alm_instances_X.alm.github
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
-        >
-          onboarding.create_project.too_many_alm_instances_X.alm.github
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.gitlab
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/gitlab.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.gitlab
+            </div>
+          </button>
         </div>
-      </button>
+      </div>
     </div>
   </div>
 </Fragment>
@@ -469,7 +493,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
     className="create-project-modes huge-spacer-top display-flex-justify-center"
   >
     <button
-      className="button button-huge display-flex-column create-project-mode-type-manual"
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
@@ -483,134 +507,304 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
       </div>
     </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/azure.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.azure
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
+        <div
+          className="display-flex-column"
         >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/bitbucket.svg"
-        />
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.bitbucket
+            </div>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
+        </div>
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.bitbucket
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.too_many_alm_instances_X.alm.github
+            </p>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
+        <div
+          className="display-flex-column"
         >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </button>
+          <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/gitlab.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.gitlab
+            </div>
+            <p
+              className="text-muted small spacer-top"
+              style={
+                Object {
+                  "lineHeight": 1.5,
+                }
+              }
+            >
+              onboarding.create_project.alm_not_configured
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Fragment>
+`;
+
+exports[`should render correctly: loading instances 1`] = `
+<Fragment>
+  <header
+    className="padded huge-spacer-top display-flex-column display-flex-center"
+  >
+    <div
+      className="abs-width-800 huge-spacer-bottom"
+    >
+      <h1
+        className="text-center big-spacer-bottom"
+      >
+        onboarding.create_project.select_method
+      </h1>
+      <p
+        className="text-center spacer-bottom"
+      >
+        onboarding.create_project.select_method.description1
+      </p>
+      <p
+        className="text-center"
+      >
+        onboarding.create_project.select_method.description2
+      </p>
     </div>
+  </header>
+  <div
+    className="create-project-modes huge-spacer-top display-flex-justify-center"
+  >
+    <button
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
+      onClick={[Function]}
+      type="button"
+    >
+      <ChevronsIcon
+        size={80}
+      />
+      <div
+        className="medium big-spacer-top"
+      >
+        onboarding.create_project.select_method.manual
+      </div>
+    </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/github.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.github
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            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>
+            <span>
+              onboarding.create_project.check_alm_supported
+              <i
+                className="little-spacer-left spinner"
+              />
+            </span>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
+        <div
+          className="display-flex-column"
         >
-          onboarding.create_project.too_many_alm_instances_X.alm.github
-        </p>
-      </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"
-      >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
-        />
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <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="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.gitlab
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm disabled big-spacer-right"
+            disabled={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+            <span>
+              onboarding.create_project.check_alm_supported
+              <i
+                className="little-spacer-left spinner"
+              />
+            </span>
+          </button>
         </div>
-        <p
-          className="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
+        <div
+          className="display-flex-column"
         >
-          onboarding.create_project.alm_not_configured
-        </p>
-      </button>
+          <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/gitlab.svg"
+            />
+            <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>
     </div>
   </div>
 </Fragment>
 `;
 
-exports[`should render correctly: loading instances 1`] = `
+exports[`should render correctly: no alm conf yet, admin 1`] = `
 <Fragment>
   <header
     className="padded huge-spacer-top display-flex-column display-flex-center"
@@ -639,7 +833,7 @@ exports[`should render correctly: loading instances 1`] = `
     className="create-project-modes huge-spacer-top display-flex-justify-center"
   >
     <button
-      className="button button-huge display-flex-column create-project-mode-type-manual"
+      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
       onClick={[Function]}
       type="button"
     >
@@ -653,112 +847,102 @@ exports[`should render correctly: loading instances 1`] = `
       </div>
     </button>
     <div
-      className="big-spacer-left display-flex-column"
+      className="display-flex-column"
     >
-      <button
-        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <div
+        className="display-flex-center display-flex-space-between"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/alm/azure.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.azure
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            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>
+          </button>
         </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"
-    >
-      <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/bitbucket.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.bitbucket
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/bitbucket.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.bitbucket
+            </div>
+          </button>
         </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"
-    >
-      <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/github.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.github
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <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>
+          </button>
         </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"
-    >
-      <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/gitlab.svg"
-        />
         <div
-          className="medium big-spacer-top abs-height-50 display-flex-center"
+          className="display-flex-column"
         >
-          onboarding.create_project.select_method.gitlab
+          <button
+            className="button button-huge display-flex-column create-project-mode-type-alm"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <img
+              alt=""
+              height={80}
+              src="/images/alm/gitlab.svg"
+            />
+            <div
+              className="medium big-spacer-top abs-height-50 display-flex-center"
+            >
+              onboarding.create_project.select_method.gitlab
+            </div>
+          </button>
         </div>
-        <span>
-          onboarding.create_project.check_alm_supported
-          <i
-            className="little-spacer-left spinner"
-          />
-        </span>
-      </button>
+      </div>
+      <Alert
+        className="big-spacer-top"
+        variant="info"
+      >
+        onboarding.create_project.select_method.no_alm_yet.admin
+      </Alert>
     </div>
   </div>
 </Fragment>
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index f289417b065..d48356c261b 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3243,6 +3243,7 @@ onboarding.create_project.setup_manually=Create a project
 onboarding.create_project.select_method=How do you want to create your project?
 onboarding.create_project.select_method.description1=Are you just testing or have an advanced use-case? Create a project manually.
 onboarding.create_project.select_method.description2=Do you want to benefit from all of SonarQube's features (like repository import and Pull Request decoration)? Create your project from your favorite DevOps platform.
+onboarding.create_project.select_method.no_alm_yet.admin=We recommend setting up a DevOps platform configuration so you and your team can benefit from more SonarQube features.
 onboarding.create_project.select_method.manual=Manually
 onboarding.create_project.select_method.azure=From Azure DevOps
 onboarding.create_project.select_method.bitbucket=From Bitbucket
-- 
2.39.5