diff options
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 |