SONAR-14932 Add message for sys admin when no alm are configured yet

server/sonar-web/src/main/js/apps/create/project/CreateProjectModeSelection.tsx

@@ -20,6 +20,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import ChevronsIcon from 'sonar-ui-common/components/icons/ChevronsIcon';
+import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { withAppState } from '../../../components/hoc/withAppState';
@@ -40,7 +41,8 @@ const DEFAULT_ICON_SIZE = 80;
 function renderAlmOption(
   props: CreateProjectModeSelectionProps,
   alm: AlmKeys.Azure | AlmKeys.BitbucketServer | AlmKeys.GitHub | AlmKeys.GitLab,
-  mode: CreateProjectModes
+  mode: CreateProjectModes,
+  last = false
 ) {
   const {
     almCounts,
@@ -59,11 +61,11 @@ function renderAlmOption(
   const disabled = loadingBindings || hasTooManyConfig || (!hasConfig && !canAdmin);
 
   return (
-    <div className="big-spacer-left display-flex-column">
+    <div className="display-flex-column">
       <button
         className={classNames(
           'button button-huge display-flex-column create-project-mode-type-alm',
-          { disabled }
+          { disabled, 'big-spacer-right': !last }
         )}
         disabled={disabled}
         onClick={() =>
@@ -104,6 +106,12 @@ function renderAlmOption(
 }
 
 export function CreateProjectModeSelection(props: CreateProjectModeSelectionProps) {
+  const {
+    appState: { canAdmin },
+    almCounts
+  } = props;
+  const almTotalCount = Object.values(almCounts).reduce((prev, cur) => prev + cur);
+
   return (
     <>
       <header className="padded huge-spacer-top display-flex-column display-flex-center">
@@ -122,7 +130,7 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
 
       <div className="create-project-modes huge-spacer-top display-flex-justify-center">
         <button
-          className="button button-huge display-flex-column create-project-mode-type-manual"
+          className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
           onClick={() => props.onSelectMode(CreateProjectModes.Manual)}
           type="button">
           <ChevronsIcon size={DEFAULT_ICON_SIZE} />
@@ -131,10 +139,19 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
           </div>
         </button>
 
-        {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
-        {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
-        {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
-        {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab)}
+        <div className="display-flex-column">
+          <div className="display-flex-center display-flex-space-between">
+            {renderAlmOption(props, AlmKeys.Azure, CreateProjectModes.AzureDevOps)}
+            {renderAlmOption(props, AlmKeys.BitbucketServer, CreateProjectModes.BitbucketServer)}
+            {renderAlmOption(props, AlmKeys.GitHub, CreateProjectModes.GitHub)}
+            {renderAlmOption(props, AlmKeys.GitLab, CreateProjectModes.GitLab, true)}
+          </div>
+          {almTotalCount === 0 && canAdmin && (
+            <Alert variant="info" className="big-spacer-top">
+              {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
+            </Alert>
+          )}
+        </div>
       </div>
     </>
   );

server/sonar-web/src/main/js/apps/create/project/__tests__/CreateProjectModeSelection-test.tsx

@@ -45,6 +45,9 @@ it('should render correctly', () => {
       { [AlmKeys.BitbucketServer]: 0, [AlmKeys.BitbucketCloud]: 0, [AlmKeys.GitHub]: 2 }
     )
   ).toMatchSnapshot('invalid configs, admin');
+  expect(
+    shallowRender({ appState: { canAdmin: true } }, { [AlmKeys.BitbucketServer]: 0 })
+  ).toMatchSnapshot('no alm conf yet, admin');
 });
 
 it('should correctly pass the selected mode up', () => {

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -3243,6 +3243,7 @@ onboarding.create_project.setup_manually=Create a project
 onboarding.create_project.select_method=How do you want to create your project?
 onboarding.create_project.select_method.description1=Are you just testing or have an advanced use-case? Create a project manually.
 onboarding.create_project.select_method.description2=Do you want to benefit from all of SonarQube's features (like repository import and Pull Request decoration)? Create your project from your favorite DevOps platform.
+onboarding.create_project.select_method.no_alm_yet.admin=We recommend setting up a DevOps platform configuration so you and your team can benefit from more SonarQube features.
 onboarding.create_project.select_method.manual=Manually
 onboarding.create_project.select_method.azure=From Azure DevOps
 onboarding.create_project.select_method.bitbucket=From Bitbucket