SONAR-15301 Ease project creation page comprehension

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 6601bb02b5ed0d85997545280379339822d9eec3..9542a58b5c9c04327a7436d553559c718066b269 100644 (file)
--- a/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx
@@ -21,7 +21,6 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import { withAppState } from '../../../components/hoc/withAppState';
 import ChevronsIcon from '../../../components/icons/ChevronsIcon';
-import { Alert } from '../../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
 import { AlmKeys } from '../../../types/alm-settings';
@@ -37,7 +36,7 @@ export interface CreateProjectModeSelectionProps {
   onConfigMode: (mode: AlmKeys) => void;
 }
 
-const DEFAULT_ICON_SIZE = 80;
+const DEFAULT_ICON_SIZE = 50;
 
 function renderAlmOption(
   props: CreateProjectModeSelectionProps,
@@ -133,44 +132,35 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
 
   return (
     <>
-      <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-end display-flex-justify-center">
-        <div className="display-flex-column">
-          {almTotalCount === 0 && canAdmin && (
-            <Alert variant="info" className="big-spacer-bottom">
-              {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
-            </Alert>
-          )}
-          <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>
-        </div>
-        <button
-          className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-          onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
-          type="button">
-          <ChevronsIcon size={DEFAULT_ICON_SIZE} />
-          <div className="medium big-spacer-top">
-            {translate('onboarding.create_project.select_method.manual')}
-          </div>
-        </button>
+      <h1 className="huge-spacer-top huge-spacer-bottom">
+        {translate('onboarding.create_project.select_method')}
+      </h1>
+
+      <p>{translate('onboarding.create_project.select_method.devops_platform')}</p>
+      {almTotalCount === 0 && canAdmin && (
+        <p className="spacer-top">
+          {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
+        </p>
+      )}
+      <div className="big-spacer-top huge-spacer-bottom display-flex-center">
+        {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>
+
+      <p className="big-spacer-bottom">
+        {translate('onboarding.create_project.select_method.manually')}
+      </p>
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-manual"
+        onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
+        type="button">
+        <ChevronsIcon size={DEFAULT_ICON_SIZE} />
+        <div className="medium big-spacer-top">
+          {translate('onboarding.create_project.select_method.manual')}
+        </div>
+      </button>
     </>
   );
 }

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 5e8b5ef245ad3f9b6989111032208c5f4e0db7c1..6b8276ef22562f17e96a90756e6ddc6fa55d3de3 100644 (file)
--- 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
@@ -2,958 +2,849 @@
 
 exports[`should render correctly: default 1`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <div
-        className="display-flex-center display-flex-space-between"
+      <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={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-        <div
-          className="display-flex-column"
-        >
-          <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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
         </div>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.bitbucket
         </div>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </div>
+      </button>
     </div>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;
 
 exports[`should render correctly: invalid configs, admin 1`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <div
-        className="display-flex-center display-flex-space-between"
+      <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={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-        <div
-          className="display-flex-column"
-        >
-          <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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
         </div>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
+          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.admin
+        </p>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </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>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;
 
 exports[`should render correctly: invalid configs, admin 2`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <div
-        className="display-flex-center display-flex-space-between"
+      <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={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-        <div
-          className="display-flex-column"
-        >
-          <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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
         </div>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
+          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.admin
+        </p>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </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>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;
 
 exports[`should render correctly: invalid configs, not admin 1`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <div
-        className="display-flex-center display-flex-space-between"
+      <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={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-        <div
-          className="display-flex-column"
-        >
-          <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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.azure
         </div>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
+          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="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </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>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;
 
 exports[`should render correctly: loading instances 1`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <div
-        className="display-flex-center display-flex-space-between"
+      <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={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-        <div
-          className="display-flex-column"
-        >
-          <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>
+          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="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
+          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="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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"
-            >
-              onboarding.create_project.select_method.gitlab
-            </div>
-            <span>
-              onboarding.create_project.check_alm_supported
-              <i
-                className="little-spacer-left spinner"
-              />
-            </span>
-          </button>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </div>
+        <span>
+          onboarding.create_project.check_alm_supported
+          <i
+            className="little-spacer-left spinner"
+          />
+        </span>
+      </button>
     </div>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <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.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;
 
 exports[`should render correctly: no alm conf yet, admin 1`] = `
 <Fragment>
-  <header
-    className="padded huge-spacer-top display-flex-column display-flex-center"
+  <h1
+    className="huge-spacer-top huge-spacer-bottom"
   >
-    <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>
+    onboarding.create_project.select_method
+  </h1>
+  <p>
+    onboarding.create_project.select_method.devops_platform
+  </p>
+  <p
+    className="spacer-top"
+  >
+    onboarding.create_project.select_method.no_alm_yet.admin
+  </p>
   <div
-    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
+    className="big-spacer-top huge-spacer-bottom display-flex-center"
   >
     <div
       className="display-flex-column"
     >
-      <Alert
-        className="big-spacer-bottom"
-        variant="info"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm big-spacer-right"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.no_alm_yet.admin
-      </Alert>
-      <div
-        className="display-flex-center display-flex-space-between"
-      >
-        <div
-          className="display-flex-column"
-        >
-          <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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
-        </div>
+        <img
+          alt=""
+          height={50}
+          src="/images/alm/azure.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
+          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.admin
+        </p>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/bitbucket.svg"
+        />
         <div
-          className="display-flex-column"
-        >
-          <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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
+          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.admin
+        </p>
+      </button>
+    </div>
+    <div
+      className="display-flex-column"
+    >
+      <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={50}
+          src="/images/alm/github.svg"
+        />
         <div
-          className="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>
-            <p
-              className="text-muted small spacer-top"
-              style={
-                Object {
-                  "lineHeight": 1.5,
-                }
-              }
-            >
-              onboarding.create_project.alm_not_configured.admin
-            </p>
-          </button>
+          className="medium big-spacer-top abs-height-50 display-flex-center"
+        >
+          onboarding.create_project.select_method.github
         </div>
-      </div>
+        <p
+          className="text-muted small spacer-top"
+          style={
+            Object {
+              "lineHeight": 1.5,
+            }
+          }
+        >
+          onboarding.create_project.alm_not_configured.admin
+        </p>
+      </button>
     </div>
-    <button
-      className="button button-huge big-spacer-left display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="display-flex-column"
     >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
+      <button
+        className="button button-huge display-flex-column create-project-mode-type-alm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
+        <img
+          alt=""
+          height={50}
+          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.admin
+        </p>
+      </button>
+    </div>
   </div>
+  <p
+    className="big-spacer-bottom"
+  >
+    onboarding.create_project.select_method.manually
+  </p>
+  <button
+    className="button button-huge display-flex-column create-project-mode-type-manual"
+    onClick={[Function]}
+    type="button"
+  >
+    <ChevronsIcon
+      size={50}
+    />
+    <div
+      className="medium big-spacer-top"
+    >
+      onboarding.create_project.select_method.manual
+    </div>
+  </button>
 </Fragment>
 `;

diff --git a/server/sonar-web/src/main/js/components/controls/buttons.css b/server/sonar-web/src/main/js/components/controls/buttons.css
index 8a8f9447cb34eb330bc40a6bc76a68a3de55efc9..0b362f4077c114c26c772772471c71d0a8799200 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/buttons.css
+++ b/server/sonar-web/src/main/js/components/controls/buttons.css
@@ -180,9 +180,9 @@
 
 .button-huge {
   flex-direction: column;
-  padding: calc(2 * var(--gridSize));
-  width: 200px;
-  height: 200px;
+  padding: calc(2 * var(--gridSize)) var(--gridSize);
+  width: 180px;
+  height: 180px;
   background-color: var(--white);
   border: solid 1px var(--white);
   border-radius: 3px;

diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 795f1ffbdd10f81df9f94f7858549aa11f8a690b..09d4f3b590866897d21bfc9bd0196f3d01fc760e 100644 (file)
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -42,8 +42,8 @@ export interface TutorialSelectionRendererProps {
   willRefreshAutomatically?: boolean;
 }
 
-const DEFAULT_ICON_SIZE = 80;
-const GH_ACTION_ICON_SIZE = 64;
+const DEFAULT_ICON_SIZE = 60;
+const GH_ACTION_ICON_SIZE = 46;
 
 function renderButton(
   mode: TutorialModes,
@@ -52,7 +52,7 @@ function renderButton(
 ) {
   return (
     <button
-      className={`button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-${mode}`}
+      className={`button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-${mode}`}
       // Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone
       // tutorial in the future.
       onClick={() => onSelectTutorial(mode === TutorialModes.OtherCI ? TutorialModes.Manual : mode)}
@@ -103,87 +103,95 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
   return (
     <>
       {selectedTutorial === undefined && (
-        <div className="tutorial-selection">
-          <header className="spacer-top spacer-bottom padded">
-            <h1 className="text-center big-spacer-bottom">
-              {translate('onboarding.tutorial.choose_method')}
-            </h1>
-          </header>
-
-          <div className="display-flex-justify-center display-flex-wrap">
-            {renderButton(
-              TutorialModes.Manual,
-              props.onSelectTutorial,
-              <img
-                alt="" // Should be ignored by screen readers
-                height={DEFAULT_ICON_SIZE}
-                src={`${getBaseUrl()}/images/tutorials/manual.svg`}
-              />
-            )}
-
-            {showAzurePipelines &&
-              renderButton(
-                TutorialModes.AzurePipelines,
+        <>
+          <h1 className="spacer-top huge-spacer-bottom">
+            {translate('onboarding.tutorial.choose_method')}
+          </h1>
+
+          <div className="tutorial-selection">
+            <p className="big-spacer-bottom">
+              {translate('onboarding.tutorial.choose_method.devops_platform.description')}
+            </p>
+            <div className="display-flex-start display-flex-wrap">
+              {showJenkins &&
+                renderButton(
+                  TutorialModes.Jenkins,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/tutorials/jenkins.svg`}
+                  />
+                )}
+
+              {showGitHubActions &&
+                renderButton(
+                  TutorialModes.GitHubActions,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={GH_ACTION_ICON_SIZE}
+                    className="spacer-bottom spacer-top"
+                    src={`${getBaseUrl()}/images/tutorials/github-actions.svg`}
+                  />
+                )}
+
+              {showBitbucketPipelines &&
+                renderButton(
+                  TutorialModes.BitbucketPipelines,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
+                  />
+                )}
+
+              {showGitLabCICD &&
+                renderButton(
+                  TutorialModes.GitLabCI,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/alm/gitlab.svg`}
+                  />
+                )}
+
+              {showAzurePipelines &&
+                renderButton(
+                  TutorialModes.AzurePipelines,
+                  props.onSelectTutorial,
+                  <img
+                    alt="" // Should be ignored by screen readers
+                    height={DEFAULT_ICON_SIZE}
+                    src={`${getBaseUrl()}/images/tutorials/azure-pipelines.svg`}
+                  />
+                )}
+
+              {renderButton(
+                TutorialModes.OtherCI,
                 props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/tutorials/azure-pipelines.svg`}
-                />
-              )}
-
-            {showBitbucketPipelines &&
-              renderButton(
-                TutorialModes.BitbucketPipelines,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
-                />
-              )}
-
-            {showGitHubActions &&
-              renderButton(
-                TutorialModes.GitHubActions,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={GH_ACTION_ICON_SIZE}
-                  className="spacer-bottom spacer-top"
-                  src={`${getBaseUrl()}/images/tutorials/github-actions.svg`}
-                />
+                <EllipsisIcon size={DEFAULT_ICON_SIZE} />
               )}
-
-            {showGitLabCICD &&
-              renderButton(
-                TutorialModes.GitLabCI,
+            </div>
+
+            <p className="big-spacer-bottom spacer-top">
+              {translate('onboarding.tutorial.choose_method.locally.description')}
+            </p>
+            <div>
+              {renderButton(
+                TutorialModes.Manual,
                 props.onSelectTutorial,
                 <img
                   alt="" // Should be ignored by screen readers
                   height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/alm/gitlab.svg`}
+                  src={`${getBaseUrl()}/images/tutorials/manual.svg`}
                 />
               )}
-
-            {showJenkins &&
-              renderButton(
-                TutorialModes.Jenkins,
-                props.onSelectTutorial,
-                <img
-                  alt="" // Should be ignored by screen readers
-                  height={DEFAULT_ICON_SIZE}
-                  src={`${getBaseUrl()}/images/tutorials/jenkins.svg`}
-                />
-              )}
-
-            {renderButton(
-              TutorialModes.OtherCI,
-              props.onSelectTutorial,
-              <EllipsisIcon size={DEFAULT_ICON_SIZE / 2} />
-            )}
+            </div>
           </div>
-        </div>
+        </>
       )}
 
       {selectedTutorial === TutorialModes.Manual && (

diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
index f718c83a010eec1f4a82d02218ae8e89ca2782f9..e125022101102962a2e08b57b6c651af6eab9bb4 100644 (file)
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
@@ -2,65 +2,73 @@
 
 exports[`should render correctly for azure 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -70,65 +78,73 @@ exports[`should render correctly for azure 1`] = `
 
 exports[`should render correctly for bitbucket server 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -138,98 +154,106 @@ exports[`should render correctly for bitbucket server 1`] = `
 
 exports[`should render correctly for github 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-github-actions"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+          className="spacer-bottom spacer-top"
+          height={46}
+          src="/images/tutorials/github-actions.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.github-actions
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-github-actions"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          className="spacer-bottom spacer-top"
-          height={64}
-          src="/images/tutorials/github-actions.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.github-actions
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -239,45 +263,46 @@ exports[`should render correctly for github 1`] = `
 
 exports[`should render correctly for gitlab 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-gitlab-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-gitlab-ci"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
+          height={60}
           src="/images/alm/gitlab.svg"
         />
         <div
@@ -287,33 +312,40 @@ exports[`should render correctly for gitlab 1`] = `
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>
@@ -544,61 +576,63 @@ exports[`should render correctly: manual tutorial 1`] = `
 
 exports[`should render correctly: selection 1`] = `
 <Fragment>
+  <h1
+    className="spacer-top huge-spacer-bottom"
+  >
+    onboarding.tutorial.choose_method
+  </h1>
   <div
     className="tutorial-selection"
   >
-    <header
-      className="spacer-top spacer-bottom padded"
+    <p
+      className="big-spacer-bottom"
     >
-      <h1
-        className="text-center big-spacer-bottom"
-      >
-        onboarding.tutorial.choose_method
-      </h1>
-    </header>
+      onboarding.tutorial.choose_method.devops_platform.description
+    </p>
     <div
-      className="display-flex-justify-center display-flex-wrap"
+      className="display-flex-start display-flex-wrap"
     >
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-manual"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-jenkins"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/manual.svg"
+          height={60}
+          src="/images/tutorials/jenkins.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.manual
+          onboarding.tutorial.choose_method.jenkins
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-azure-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-github-actions"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/tutorials/azure-pipelines.svg"
+          className="spacer-bottom spacer-top"
+          height={46}
+          src="/images/tutorials/github-actions.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.azure-pipelines
+          onboarding.tutorial.choose_method.github-actions
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-bitbucket-pipelines"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-bitbucket-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
+          height={60}
           src="/images/alm/bitbucket.svg"
         />
         <div
@@ -608,66 +642,72 @@ exports[`should render correctly: selection 1`] = `
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-github-actions"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-gitlab-ci"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          className="spacer-bottom spacer-top"
-          height={64}
-          src="/images/tutorials/github-actions.svg"
+          height={60}
+          src="/images/alm/gitlab.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.github-actions
+          onboarding.tutorial.choose_method.gitlab-ci
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-gitlab-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-azure-pipelines"
         onClick={[Function]}
         type="button"
       >
         <img
           alt=""
-          height={80}
-          src="/images/alm/gitlab.svg"
+          height={60}
+          src="/images/tutorials/azure-pipelines.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.gitlab-ci
+          onboarding.tutorial.choose_method.azure-pipelines
         </div>
       </button>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-jenkins"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-other-ci"
         onClick={[Function]}
         type="button"
       >
-        <img
-          alt=""
-          height={80}
-          src="/images/tutorials/jenkins.svg"
+        <EllipsisIcon
+          size={60}
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.jenkins
+          onboarding.tutorial.choose_method.other-ci
         </div>
       </button>
+    </div>
+    <p
+      className="big-spacer-bottom spacer-top"
+    >
+      onboarding.tutorial.choose_method.locally.description
+    </p>
+    <div>
       <button
-        className="button button-huge display-flex-column spacer-left spacer-right huge-spacer-bottom tutorial-mode-other-ci"
+        className="button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-manual"
         onClick={[Function]}
         type="button"
       >
-        <EllipsisIcon
-          size={40}
+        <img
+          alt=""
+          height={60}
+          src="/images/tutorials/manual.svg"
         />
         <div
           className="medium big-spacer-top"
         >
-          onboarding.tutorial.choose_method.other-ci
+          onboarding.tutorial.choose_method.manual
         </div>
       </button>
     </div>

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 981be941d6d074c6bc584319a83800ee7bc7a27e..b0204ea54663b0aa62b64d7c2bd67d73bfb11190 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3291,16 +3291,16 @@ onboarding.project_analysis.guide_to_integrate_pipelines=follow the guide to int
 
 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.manually=Are you just testing or have an advanced use-case? Create a project manually.
+onboarding.create_project.select_method.devops_platform=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=First, you need to set up a DevOps platform configuration.
 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=Contact admin for global configuration
-onboarding.create_project.alm_not_configured.admin=Global configuration not set
+onboarding.create_project.alm_not_configured=Contact admin to set up global configuration
+onboarding.create_project.alm_not_configured.admin=Set up global configuration
 onboarding.create_project.check_alm_supported=Checking if available
 onboarding.create_project.project_key=Project key
 onboarding.create_project.project_key.description=The project key is a unique identifier for your project. It may contain up to 400 characters. Allowed characters are alphanumeric, '-' (dash), '_' (underscore), '.' (period) and ':' (colon), with at least one non-digit.
@@ -3522,6 +3522,8 @@ onboarding.tutorial.cfamilly.speed_caching=You can also speed up your analysis b
 onboarding.tutorial.cfamilly.speed_caching.link=multi-threading and caching
 
 onboarding.tutorial.choose_method=How do you want to analyze your repository?
+onboarding.tutorial.choose_method.devops_platform.description=Do you want to integrate with your favorite CI? Choose one of the following tutorials.
+onboarding.tutorial.choose_method.locally.description=Are you just testing or have an advanced use-case? Analyze your project locally.
 onboarding.tutorial.choose_method.manual=Locally
 onboarding.tutorial.choose_method.other-ci=Other CI
 onboarding.tutorial.choose_method.jenkins=With Jenkins