From 2dc324697c80d6eb5748a14ab17307430321ce8a Mon Sep 17 00:00:00 2001
From: Philippe Perrin <philippe.perrin@sonarsource.com>
Date: Tue, 15 Jun 2021 11:36:38 +0200
Subject: [PATCH] SONAR-14932 Improve design for non-admin users

---
 .../project/CreateProjectModeSelection.tsx    |  69 +--
 .../apps/create/project/CreateProjectPage.tsx |   2 +-
 .../CreateProjectModeSelection-test.tsx       |   8 +-
 .../CreateProjectModeSelection-test.tsx.snap  | 442 +++++++++---------
 .../CreateProjectPage-test.tsx.snap           |  12 +-
 .../src/main/js/apps/create/project/style.css |   4 +
 .../resources/org/sonar/l10n/core.properties  |  20 +-
 7 files changed, 275 insertions(+), 282 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 35a73fadf1a..3a9f25b81d8 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
@@ -22,11 +22,8 @@ import * as React from 'react';
 import ChevronsIcon from 'sonar-ui-common/components/icons/ChevronsIcon';
 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 {
@@ -57,28 +54,9 @@ function renderAlmOption(
   const count = isBitbucket
     ? almCounts[AlmKeys.BitbucketServer] + almCounts[AlmKeys.BitbucketCloud]
     : almCounts[alm];
-  const disabled = count !== 1 || loadingBindings;
-
-  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')
-        )
-      });
-    }
-
-    tooltipLinks.push({
-      href: ALM_DOCUMENTATION_PATHS[alm],
-      label: translateWithParameters(
-        'onboarding.create_project.help_set_up_x',
-        translate('alm', alm, 'short')
-      )
-    });
-  }
+  const hasConfig = count > 0;
+  const hasTooManyConfig = count > 1;
+  const disabled = loadingBindings || hasTooManyConfig || (!hasConfig && !canAdmin);
 
   return (
     <div className="big-spacer-left display-flex-column">
@@ -111,22 +89,14 @@ function renderAlmOption(
         )}
 
         {!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>
+          <p className="text-muted small spacer-top" style={{ lineHeight: 1.5 }}>
+            {!hasConfig && translate('onboarding.create_project.alm_not_configured')}
+            {hasTooManyConfig &&
+              translateWithParameters(
+                'onboarding.create_project.too_many_alm_instances_X',
+                translate('alm', alm)
+              )}
+          </p>
         )}
       </button>
     </div>
@@ -136,11 +106,18 @@ function renderAlmOption(
 export function CreateProjectModeSelection(props: CreateProjectModeSelectionProps) {
   return (
     <>
-      <header className="huge-spacer-top big-spacer-bottom padded">
-        <h1 className="text-center huge big-spacer-bottom">
-          {translate('my_account.create_new.TRK')}
-        </h1>
-        <p className="text-center big">{translate('onboarding.create_project.select_method')}</p>
+      <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">
+            {translate('onboarding.create_project.select_method')}
+          </h1>
+          <p className="text-center spacer-bottom">
+            {translate('onboarding.create_project.select_method.description1')}
+          </p>
+          <p className="text-center">
+            {translate('onboarding.create_project.select_method.description2')}
+          </p>
+        </div>
       </header>
 
       <div className="create-project-modes huge-spacer-top display-flex-justify-center">
diff --git a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
index 37ec6bd4ef2..ee9704aad80 100644
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectPage.tsx
@@ -211,7 +211,7 @@ export class CreateProjectPage extends React.PureComponent<Props, State> {
 
     return (
       <>
-        <Helmet title={translate('my_account.create_new.TRK')} titleTemplate="%s" />
+        <Helmet title={translate('onboarding.create_project.select_method')} titleTemplate="%s" />
         <A11ySkipTarget anchor="create_project_main" />
         <div className="page page-limited huge-spacer-bottom position-relative" id="create-project">
           {this.renderForm(mode)}
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 5af2ea20fab..ecd184e7b0b 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
@@ -28,8 +28,8 @@ import {
 import { CreateProjectModes } from '../types';
 
 it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot('default');
   expect(shallowRender({ loadingBindings: true })).toMatchSnapshot('loading instances');
+  expect(shallowRender()).toMatchSnapshot('default');
   expect(shallowRender({}, { [AlmKeys.BitbucketServer]: 0, [AlmKeys.GitHub]: 2 })).toMatchSnapshot(
     'invalid configs, not admin'
   );
@@ -39,6 +39,12 @@ it('should render correctly', () => {
       { [AlmKeys.BitbucketServer]: 0, [AlmKeys.GitHub]: 2 }
     )
   ).toMatchSnapshot('invalid configs, admin');
+  expect(
+    shallowRender(
+      { appState: { canAdmin: true } },
+      { [AlmKeys.BitbucketServer]: 0, [AlmKeys.BitbucketCloud]: 0, [AlmKeys.GitHub]: 2 }
+    )
+  ).toMatchSnapshot('invalid configs, 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 7ecb4dff98e..aec9f4cc947 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
@@ -3,18 +3,27 @@
 exports[`should render correctly: default 1`] = `
 <Fragment>
   <header
-    className="huge-spacer-top big-spacer-bottom padded"
+    className="padded huge-spacer-top display-flex-column display-flex-center"
   >
-    <h1
-      className="text-center huge big-spacer-bottom"
-    >
-      my_account.create_new.TRK
-    </h1>
-    <p
-      className="text-center big"
+    <div
+      className="abs-width-800 huge-spacer-bottom"
     >
-      onboarding.create_project.select_method
-    </p>
+      <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"
@@ -52,7 +61,7 @@ exports[`should render correctly: default 1`] = `
         >
           onboarding.create_project.select_method.azure
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -61,19 +70,7 @@ exports[`should render correctly: default 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
     <div
@@ -116,7 +113,7 @@ exports[`should render correctly: default 1`] = `
         >
           onboarding.create_project.select_method.github
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -125,19 +122,7 @@ exports[`should render correctly: default 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
     <div
@@ -159,7 +144,7 @@ exports[`should render correctly: default 1`] = `
         >
           onboarding.create_project.select_method.gitlab
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -168,19 +153,7 @@ exports[`should render correctly: default 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
   </div>
@@ -190,18 +163,27 @@ exports[`should render correctly: default 1`] = `
 exports[`should render correctly: invalid configs, admin 1`] = `
 <Fragment>
   <header
-    className="huge-spacer-top big-spacer-bottom padded"
+    className="padded huge-spacer-top display-flex-column display-flex-center"
   >
-    <h1
-      className="text-center huge big-spacer-bottom"
-    >
-      my_account.create_new.TRK
-    </h1>
-    <p
-      className="text-center big"
+    <div
+      className="abs-width-800 huge-spacer-bottom"
     >
-      onboarding.create_project.select_method
-    </p>
+      <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"
@@ -224,8 +206,8 @@ exports[`should render correctly: invalid configs, admin 1`] = `
       className="big-spacer-left display-flex-column"
     >
       <button
-        className="button button-huge display-flex-column create-project-mode-type-alm disabled"
-        disabled={true}
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
         onClick={[Function]}
         type="button"
       >
@@ -239,31 +221,26 @@ exports[`should render correctly: invalid configs, admin 1`] = `
         >
           onboarding.create_project.select_method.azure
         </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="text-muted small spacer-top"
-          style={
-            Object {
-              "lineHeight": 1.5,
-            }
-          }
+          className="medium big-spacer-top abs-height-50 display-flex-center"
         >
-          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",
-                },
-              ]
-            }
-          />
+          onboarding.create_project.select_method.bitbucket
         </div>
       </button>
     </div>
@@ -279,14 +256,14 @@ exports[`should render correctly: invalid configs, admin 1`] = `
         <img
           alt=""
           height={80}
-          src="/images/alm/bitbucket.svg"
+          src="/images/alm/github.svg"
         />
         <div
           className="medium big-spacer-top abs-height-50 display-flex-center"
         >
-          onboarding.create_project.select_method.bitbucket
+          onboarding.create_project.select_method.github
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -294,23 +271,116 @@ exports[`should render correctly: invalid configs, admin 1`] = `
             }
           }
         >
-          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",
-                },
-              ]
-            }
-          />
+          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"
+        >
+          onboarding.create_project.select_method.gitlab
+        </div>
+      </button>
+    </div>
+  </div>
+</Fragment>
+`;
+
+exports[`should render correctly: invalid configs, admin 2`] = `
+<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 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"
+    >
+      <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/azure.svg"
+        />
+        <div
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
+        </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"
+        >
+          onboarding.create_project.select_method.bitbucket
         </div>
       </button>
     </div>
@@ -333,7 +403,7 @@ exports[`should render correctly: invalid configs, admin 1`] = `
         >
           onboarding.create_project.select_method.github
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -341,21 +411,16 @@ exports[`should render correctly: invalid configs, admin 1`] = `
             }
           }
         >
-          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>
+          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}
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
         onClick={[Function]}
         type="button"
       >
@@ -369,32 +434,6 @@ exports[`should render correctly: invalid configs, admin 1`] = `
         >
           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>
@@ -404,18 +443,27 @@ exports[`should render correctly: invalid configs, admin 1`] = `
 exports[`should render correctly: invalid configs, not admin 1`] = `
 <Fragment>
   <header
-    className="huge-spacer-top big-spacer-bottom padded"
+    className="padded huge-spacer-top display-flex-column display-flex-center"
   >
-    <h1
-      className="text-center huge big-spacer-bottom"
-    >
-      my_account.create_new.TRK
-    </h1>
-    <p
-      className="text-center big"
+    <div
+      className="abs-width-800 huge-spacer-bottom"
     >
-      onboarding.create_project.select_method
-    </p>
+      <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"
@@ -453,7 +501,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
         >
           onboarding.create_project.select_method.azure
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -462,19 +510,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
     <div
@@ -496,7 +532,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
         >
           onboarding.create_project.select_method.bitbucket
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -505,19 +541,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
     <div
@@ -539,7 +563,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
         >
           onboarding.create_project.select_method.github
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -547,13 +571,8 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
             }
           }
         >
-          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>
+          onboarding.create_project.too_many_alm_instances_X.alm.github
+        </p>
       </button>
     </div>
     <div
@@ -575,7 +594,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
         >
           onboarding.create_project.select_method.gitlab
         </div>
-        <div
+        <p
           className="text-muted small spacer-top"
           style={
             Object {
@@ -584,19 +603,7 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
           }
         >
           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>
+        </p>
       </button>
     </div>
   </div>
@@ -606,18 +613,27 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
 exports[`should render correctly: loading instances 1`] = `
 <Fragment>
   <header
-    className="huge-spacer-top big-spacer-bottom padded"
+    className="padded huge-spacer-top display-flex-column display-flex-center"
   >
-    <h1
-      className="text-center huge big-spacer-bottom"
-    >
-      my_account.create_new.TRK
-    </h1>
-    <p
-      className="text-center big"
+    <div
+      className="abs-width-800 huge-spacer-bottom"
     >
-      onboarding.create_project.select_method
-    </p>
+      <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"
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 6f0a6562a1a..6b0d29262e6 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
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
@@ -37,7 +37,7 @@ exports[`should render correctly if the Azure method is selected 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
@@ -88,7 +88,7 @@ exports[`should render correctly if the BBS method is selected 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
@@ -139,7 +139,7 @@ exports[`should render correctly if the GitHub method is selected 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
@@ -190,7 +190,7 @@ exports[`should render correctly if the GitLab method is selected 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
@@ -241,7 +241,7 @@ exports[`should render correctly if the manual method is selected 1`] = `
   <Helmet
     defer={true}
     encodeSpecialCharacters={true}
-    title="my_account.create_new.TRK"
+    title="onboarding.create_project.select_method"
     titleTemplate="%s"
   />
   <A11ySkipTarget
diff --git a/server/sonar-web/src/main/js/apps/create/project/style.css b/server/sonar-web/src/main/js/apps/create/project/style.css
index 54d5d4220fa..764b02c2571 100644
--- a/server/sonar-web/src/main/js/apps/create/project/style.css
+++ b/server/sonar-web/src/main/js/apps/create/project/style.css
@@ -29,6 +29,10 @@
   z-index: var(--pageMainZIndex);
 }
 
+.create-project-mode-type-alm.disabled img {
+  filter: grayscale(100%);
+}
+
 .create-project-manual {
   display: flex !important;
   justify-content: space-between;
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 457c2322fe4..f289417b065 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -1934,8 +1934,6 @@ my_account.search_project=Search Project
 my_account.set_notifications_for=Search a project by name
 my_account.set_notifications_for.title=Add a project
 my_account.create_new.TRK=Add a project
-my_account.create_new.VW=Create Portfolio
-my_account.create_new.APP=Create Application
 my_account.add_project=Add Project
 my_account.add_project.manual=Manually
 my_account.add_project.azure=Azure DevOps
@@ -3241,16 +3239,16 @@ onboarding.project_analysis.header=Analyze your project
 onboarding.project_analysis.description=We initialized your project on {instance}, now it's up to you to launch analyses!
 onboarding.project_analysis.guide_to_integrate_pipelines=follow the guide to integrating with Pipelines
 
-onboarding.create_project.set_up_x=Set up {0}
-onboarding.create_project.help_set_up_x=Learn more on how to set up {0}
-
 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.manual=Manually
 onboarding.create_project.select_method.azure=From Azure DevOps
 onboarding.create_project.select_method.bitbucket=From Bitbucket
 onboarding.create_project.select_method.github=From GitHub
 onboarding.create_project.select_method.gitlab=From GitLab
-onboarding.create_project.alm_not_configured=Currently not active
+onboarding.create_project.alm_not_configured=Contact admin for global configuration
 onboarding.create_project.check_alm_supported=Checking if available
 onboarding.create_project.project_key=Project key
 onboarding.create_project.project_key.description=Up to 400 characters. Allowed characters are alphanumeric, '-' (dash), '_' (underscore), '.' (period) and ':' (colon), with at least one non-digit.
@@ -3287,15 +3285,7 @@ onboarding.create_project.pat_form.help.gitlab=SonarQube needs a personal access
 onboarding.create_project.pat_form.pat_required=Please enter a personal access token
 onboarding.create_project.pat_form.list_repositories=List repositories
 onboarding.create_project.select_method=How do you want to create your project?
-onboarding.create_project.too_many_alm_instances.azure=You must have exactly 1 Azure DevOps instance configured in order to use this method.
-onboarding.create_project.too_many_alm_instances.bitbucket=You must have exactly 1 Bitbucket instance configured in order to use this method.
-onboarding.create_project.too_many_alm_instances.github=You must have exactly 1 GitHub instance configured in order to use this method.
-onboarding.create_project.too_many_alm_instances.gitlab=You must have exactly 1 GitLab instance configured in order to use this method.
-onboarding.create_project.alm_instances_count_X=You currently have {0}.
-onboarding.create_project.zero_alm_instances.azure=You must first configure an Azure DevOps instance.
-onboarding.create_project.zero_alm_instances.bitbucket=You must first configure a Bitbucket instance.
-onboarding.create_project.zero_alm_instances.github=You must first configure a GitHub instance.
-onboarding.create_project.zero_alm_instances.gitlab=You must first configure a GitLab instance.
+onboarding.create_project.too_many_alm_instances_X=This method requires exactly one {0} configuration.
 onboarding.create_project.wrong_binding_count=You must have exactly 1 {alm} instance configured in order to use this method, but none were found. Either create the project manually, or contact your system administrator.
 onboarding.create_project.wrong_binding_count.admin=You must have exactly 1 {alm} instance configured in order to use this method. You can configure instances under {url}.
 onboarding.create_project.enter_pat=Enter personal access token
-- 
2.39.5