From 47e63855d5b17ee17837e45a2ab77aa6b37e0b7d Mon Sep 17 00:00:00 2001
From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Tue, 10 Aug 2021 13:49:44 +0200
Subject: [PATCH] SONAR-13742 Add link to GitHub project on import screen

---
 .../src/main/js/app/styles/init/misc.css      |   4 +
 .../project/GitHubProjectCreateRenderer.tsx   |  43 ++++---
 .../GitHubProjectCreateRenderer-test.tsx.snap | 106 ++++++++++++------
 .../main/js/helpers/mocks/alm-integrations.ts |   2 +-
 .../resources/org/sonar/l10n/core.properties  |   1 +
 5 files changed, 108 insertions(+), 48 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 846bcbc807e..047066b05db 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -306,6 +306,10 @@ th.huge-spacer-right {
   max-width: 80% !important;
 }
 
+.max-width-60 {
+  max-width: 60% !important;
+}
+
 .width-100 {
   width: 100% !important;
 }
diff --git a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
index 045c6176e4e..35e82d7322a 100644
--- a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
@@ -30,6 +30,7 @@ import QualifierIcon from 'sonar-ui-common/components/icons/QualifierIcon';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { colors } from '../../../app/theme';
 import { getBaseUrl } from '../../../helpers/system';
 import { getProjectUrl } from '../../../helpers/urls';
 import { GithubOrganization, GithubRepository } from '../../../types/alm-integration';
@@ -109,25 +110,39 @@ function renderRepositoryList(props: GitHubProjectCreateRendererProps) {
               disabled={isDisabled(r)}
               value={r.key}
               onCheck={props.onSelectRepository}>
-              <div className="big overflow-hidden" title={r.name}>
-                <div className="display-flex-start text-ellipsis">
+              <div className="big overflow-hidden max-width-100" title={r.name}>
+                <div className="text-ellipsis">
                   {r.sqProjectKey ? (
-                    <Link className="display-flex-center" to={getProjectUrl(r.sqProjectKey)}>
-                      <QualifierIcon
-                        className="spacer-right"
-                        qualifier={ComponentQualifier.Project}
-                      />
-                      {r.name}
-                    </Link>
+                    <div className="display-flex-center max-width-100">
+                      <Link
+                        className="display-flex-center max-width-60"
+                        to={getProjectUrl(r.sqProjectKey)}>
+                        <QualifierIcon
+                          className="spacer-right"
+                          qualifier={ComponentQualifier.Project}
+                        />
+                        <span className="text-ellipsis">{r.name}</span>
+                      </Link>
+                      <em className="display-flex-center small big-spacer-left flex-0">
+                        <span className="text-muted-2">
+                          {translate('onboarding.create_project.repository_imported')}
+                        </span>
+                        <CheckIcon className="little-spacer-left" size={12} fill={colors.green} />
+                      </em>
+                    </div>
                   ) : (
                     r.name
                   )}
                 </div>
-                {r.sqProjectKey && (
-                  <em className="notice text-muted-2 small display-flex-center">
-                    {translate('onboarding.create_project.repository_imported')}
-                    <CheckIcon className="little-spacer-left" size={12} />
-                  </em>
+                {r.url && (
+                  <a
+                    className="notice small display-flex-center little-spacer-top"
+                    onClick={e => e.stopPropagation()}
+                    target="_blank"
+                    href={r.url}
+                    rel="noopener noreferrer">
+                    {translate('onboarding.create_project.see_on_github')}
+                  </a>
                 )}
               </div>
             </Radio>
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap
index afc04e93bee..ea876a7498e 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/GitHubProjectCreateRenderer-test.tsx.snap
@@ -338,14 +338,23 @@ exports[`should render correctly: repositories 1`] = `
       value="repo1"
     >
       <div
-        className="big overflow-hidden"
+        className="big overflow-hidden max-width-100"
         title="repository 1"
       >
         <div
-          className="display-flex-start text-ellipsis"
+          className="text-ellipsis"
         >
           repository 1
         </div>
+        <a
+          className="notice small display-flex-center little-spacer-top"
+          href="https://github.com/owner/repo1"
+          onClick={[Function]}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          onboarding.create_project.see_on_github
+        </a>
       </div>
     </Radio>
     <Radio
@@ -357,42 +366,64 @@ exports[`should render correctly: repositories 1`] = `
       value="repo2"
     >
       <div
-        className="big overflow-hidden"
+        className="big overflow-hidden max-width-100"
         title="repository 1"
       >
         <div
-          className="display-flex-start text-ellipsis"
+          className="text-ellipsis"
         >
-          <Link
-            className="display-flex-center"
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            to={
-              Object {
-                "pathname": "/dashboard",
-                "query": Object {
-                  "branch": undefined,
-                  "id": "repo2",
-                },
-              }
-            }
+          <div
+            className="display-flex-center max-width-100"
           >
-            <QualifierIcon
-              className="spacer-right"
-              qualifier="TRK"
-            />
-            repository 1
-          </Link>
+            <Link
+              className="display-flex-center max-width-60"
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to={
+                Object {
+                  "pathname": "/dashboard",
+                  "query": Object {
+                    "branch": undefined,
+                    "id": "repo2",
+                  },
+                }
+              }
+            >
+              <QualifierIcon
+                className="spacer-right"
+                qualifier="TRK"
+              />
+              <span
+                className="text-ellipsis"
+              >
+                repository 1
+              </span>
+            </Link>
+            <em
+              className="display-flex-center small big-spacer-left flex-0"
+            >
+              <span
+                className="text-muted-2"
+              >
+                onboarding.create_project.repository_imported
+              </span>
+              <CheckIcon
+                className="little-spacer-left"
+                fill="#00aa00"
+                size={12}
+              />
+            </em>
+          </div>
         </div>
-        <em
-          className="notice text-muted-2 small display-flex-center"
+        <a
+          className="notice small display-flex-center little-spacer-top"
+          href="https://github.com/owner/repo1"
+          onClick={[Function]}
+          rel="noopener noreferrer"
+          target="_blank"
         >
-          onboarding.create_project.repository_imported
-          <CheckIcon
-            className="little-spacer-left"
-            size={12}
-          />
-        </em>
+          onboarding.create_project.see_on_github
+        </a>
       </div>
     </Radio>
     <Radio
@@ -404,14 +435,23 @@ exports[`should render correctly: repositories 1`] = `
       value="repo3"
     >
       <div
-        className="big overflow-hidden"
+        className="big overflow-hidden max-width-100"
         title="repository 1"
       >
         <div
-          className="display-flex-start text-ellipsis"
+          className="text-ellipsis"
         >
           repository 1
         </div>
+        <a
+          className="notice small display-flex-center little-spacer-top"
+          href="https://github.com/owner/repo1"
+          onClick={[Function]}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          onboarding.create_project.see_on_github
+        </a>
       </div>
     </Radio>
     <div
diff --git a/server/sonar-web/src/main/js/helpers/mocks/alm-integrations.ts b/server/sonar-web/src/main/js/helpers/mocks/alm-integrations.ts
index 3a9cac1ea7e..28f046a99ee 100644
--- a/server/sonar-web/src/main/js/helpers/mocks/alm-integrations.ts
+++ b/server/sonar-web/src/main/js/helpers/mocks/alm-integrations.ts
@@ -83,7 +83,7 @@ export function mockGitHubRepository(overrides: Partial<GithubRepository> = {}):
     key: 'key3456',
     name: 'repository 1',
     sqProjectKey: '',
-    url: 'owner/repo1',
+    url: 'https://github.com/owner/repo1',
     ...overrides
   };
 }
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 152d00ca6f4..eb9027897b1 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3366,6 +3366,7 @@ onboarding.create_project.no_bbs_repos.filter=No repositories match your filter.
 onboarding.create_project.only_showing_X_first_repos=We're only displaying the first {0} repositories. If you're looking for a repository that's not in this list, use the search above.
 onboarding.create_project.import_selected_repo=Set up selected repository
 onboarding.create_project.go_to_project=Go to project
+onboarding.create_project.see_on_github=See project on GitHub
 
 onboarding.create_project.search_prompt=Search for projects
 onboarding.create_project.set_up=Set up
-- 
2.39.5