SONAR-13742 Add link to GitHub project on import screen

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;
 }

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>

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

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
   };
 }

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