SONAR-15120 Ease project creation page comprehension for admin

2 files changed, 186 insertions, 119 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 980c1c677eb..6d3fc17a105 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
@@ -75,6 +75,19 @@ function renderAlmOption(
     );
   };
 
+  let errorMessage = '';
+
+  if (hasTooManyConfig) {
+    errorMessage = translateWithParameters(
+      'onboarding.create_project.too_many_alm_instances_X',
+      translate('alm', alm)
+    );
+  } else if (!hasConfig) {
+    errorMessage = canAdmin
+      ? translate('onboarding.create_project.alm_not_configured.admin')
+      : translate('onboarding.create_project.alm_not_configured');
+  }
+
   return (
     <div className="display-flex-column">
       <button
@@ -101,14 +114,9 @@ function renderAlmOption(
           </span>
         )}
 
-        {!loadingBindings && disabled && (
+        {!loadingBindings && errorMessage && (
           <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)
-              )}
+            {errorMessage}
           </p>
         )}
       </button>
@@ -139,30 +147,29 @@ export function CreateProjectModeSelection(props: CreateProjectModeSelectionProp
         </div>
       </header>
 
-      <div className="create-project-modes huge-spacer-top display-flex-justify-center">
-        <button
-          className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-          onClick={() => 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>
-
+      <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>
-          {almTotalCount === 0 && canAdmin && (
-            <Alert variant="info" className="big-spacer-top">
-              {translate('onboarding.create_project.select_method.no_alm_yet.admin')}
-            </Alert>
-          )}
         </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>
       </div>
     </>
   );
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 e7a39f01fcd..5e8b5ef245a 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
@@ -26,22 +26,8 @@ exports[`should render correctly: default 1`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
@@ -134,6 +120,20 @@ exports[`should render correctly: default 1`] = `
         </div>
       </div>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;
@@ -164,22 +164,8 @@ exports[`should render correctly: invalid configs, admin 1`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
@@ -226,6 +212,16 @@ exports[`should render correctly: invalid configs, admin 1`] = `
             >
               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
@@ -282,6 +278,20 @@ exports[`should render correctly: invalid configs, admin 1`] = `
         </div>
       </div>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;
@@ -312,22 +322,8 @@ exports[`should render correctly: invalid configs, admin 2`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
@@ -374,6 +370,16 @@ exports[`should render correctly: invalid configs, admin 2`] = `
             >
               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
@@ -430,6 +436,20 @@ exports[`should render correctly: invalid configs, admin 2`] = `
         </div>
       </div>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;
@@ -460,22 +480,8 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
@@ -588,6 +594,20 @@ exports[`should render correctly: invalid configs, not admin 1`] = `
         </div>
       </div>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;
@@ -618,22 +638,8 @@ exports[`should render correctly: loading instances 1`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
@@ -750,6 +756,20 @@ exports[`should render correctly: loading instances 1`] = `
         </div>
       </div>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;
@@ -780,25 +800,17 @@ exports[`should render correctly: no alm conf yet, admin 1`] = `
     </div>
   </header>
   <div
-    className="create-project-modes huge-spacer-top display-flex-justify-center"
+    className="create-project-modes huge-spacer-top display-flex-end display-flex-justify-center"
   >
-    <button
-      className="button button-huge big-spacer-right display-flex-column create-project-mode-type-manual"
-      onClick={[Function]}
-      type="button"
-    >
-      <ChevronsIcon
-        size={80}
-      />
-      <div
-        className="medium big-spacer-top"
-      >
-        onboarding.create_project.select_method.manual
-      </div>
-    </button>
     <div
       className="display-flex-column"
     >
+      <Alert
+        className="big-spacer-bottom"
+        variant="info"
+      >
+        onboarding.create_project.select_method.no_alm_yet.admin
+      </Alert>
       <div
         className="display-flex-center display-flex-space-between"
       >
@@ -821,6 +833,16 @@ exports[`should render correctly: no alm conf yet, admin 1`] = `
             >
               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
@@ -842,6 +864,16 @@ exports[`should render correctly: no alm conf yet, admin 1`] = `
             >
               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
@@ -863,6 +895,16 @@ exports[`should render correctly: no alm conf yet, admin 1`] = `
             >
               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>
         </div>
         <div
@@ -884,16 +926,34 @@ exports[`should render correctly: no alm conf yet, admin 1`] = `
             >
               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>
-      <Alert
-        className="big-spacer-top"
-        variant="info"
-      >
-        onboarding.create_project.select_method.no_alm_yet.admin
-      </Alert>
     </div>
+    <button
+      className="button button-huge big-spacer-left 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>
 </Fragment>
 `;