diff options
9 files changed, 117 insertions, 154 deletions
diff --git a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreate.tsx index 364749c8c21..14dc303bc30 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreate.tsx @@ -55,7 +55,7 @@ interface State { selectedAlmInstance?: AlmSettingsInstance; } -const REPOSITORY_PAGE_SIZE = 30; +const REPOSITORY_PAGE_SIZE = 20; export default class GitHubProjectCreate extends React.Component<Props, State> { mounted = false; diff --git a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx index bcd723a7e02..17a29443b71 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Github/GitHubProjectCreateRenderer.tsx @@ -105,15 +105,14 @@ function renderRepositoryList(props: GitHubProjectCreateRendererProps) { </div> )} - <div className="display-flex-justify-center width-100"> - <ListFooter - count={repositories.length} - total={repositoryPaging.total} - loadMore={props.onLoadMore} - loading={loadingRepositories} - useMIUIButtons - /> - </div> + <ListFooter + className="sw-mb-10" + count={repositories.length} + total={repositoryPaging.total} + loadMore={props.onLoadMore} + loading={loadingRepositories} + useMIUIButtons + /> </div> ) ); diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreate.tsx index 6478fc3709f..d7b47b15c2f 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreate.tsx @@ -47,7 +47,7 @@ interface State { showPersonalAccessTokenForm: boolean; } -const GITLAB_PROJECTS_PAGESIZE = 30; +const GITLAB_PROJECTS_PAGESIZE = 20; export default class GitlabProjectCreate extends React.PureComponent<Props, State> { mounted = false; diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx index 695ce5dad36..5bbf169a8e5 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectCreateRenderer.tsx @@ -17,14 +17,14 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + +import { DeferredSpinner, LightPrimary, Title } from 'design-system'; import * as React from 'react'; import { translate } from '../../../../helpers/l10n'; -import { getBaseUrl } from '../../../../helpers/system'; import { GitlabProject } from '../../../../types/alm-integration'; import { AlmKeys, AlmSettingsInstance } from '../../../../types/alm-settings'; import { Paging } from '../../../../types/types'; import AlmSettingsInstanceDropdown from '../components/AlmSettingsInstanceDropdown'; -import CreateProjectPageHeader from '../components/CreateProjectPageHeader'; import PersonalAccessTokenForm from '../components/PersonalAccessTokenForm'; import WrongBindingCountAlert from '../components/WrongBindingCountAlert'; import GitlabProjectSelectionForm from './GitlabProjectSelectionForm'; @@ -65,19 +65,12 @@ export default function GitlabProjectCreateRenderer(props: GitlabProjectCreateRe return ( <> - <CreateProjectPageHeader - title={ - <span className="text-middle"> - <img - alt="" // Should be ignored by screen readers - className="spacer-right" - height="24" - src={`${getBaseUrl()}/images/alm/gitlab.svg`} - /> - {translate('onboarding.create_project.gitlab.title')} - </span> - } - /> + <header className="sw-mb-10"> + <Title className="sw-mb-4">{translate('onboarding.create_project.gitlab.title')}</Title> + <LightPrimary className="sw-body-sm"> + {translate('onboarding.create_project.gitlab.subtitle')} + </LightPrimary> + </header> <AlmSettingsInstanceDropdown almKey={AlmKeys.GitLab} @@ -86,7 +79,7 @@ export default function GitlabProjectCreateRenderer(props: GitlabProjectCreateRe onChangeConfig={props.onSelectedAlmInstanceChange} /> - {loading && <i className="spinner" />} + <DeferredSpinner loading={loading} /> {!loading && !selectedAlmInstance && ( <WrongBindingCountAlert alm={AlmKeys.GitLab} canAdmin={!!canAdmin} /> diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx index 87926e314bc..3ae79b1ec60 100644 --- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx @@ -17,21 +17,17 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { FlagMessage, InputSearch, LightPrimary, Link } from 'design-system/lib'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import Link from '../../../../components/common/Link'; import ListFooter from '../../../../components/controls/ListFooter'; -import SearchBox from '../../../../components/controls/SearchBox'; import Tooltip from '../../../../components/controls/Tooltip'; -import { Button } from '../../../../components/controls/buttons'; -import CheckIcon from '../../../../components/icons/CheckIcon'; -import QualifierIcon from '../../../../components/icons/QualifierIcon'; -import { Alert } from '../../../../components/ui/Alert'; import { translate } from '../../../../helpers/l10n'; -import { getProjectUrl, queryToSearch } from '../../../../helpers/urls'; +import { getBaseUrl } from '../../../../helpers/system'; +import { queryToSearch } from '../../../../helpers/urls'; import { GitlabProject } from '../../../../types/alm-integration'; -import { ComponentQualifier } from '../../../../types/component'; import { Paging } from '../../../../types/types'; +import AlmRepoItem from '../components/AlmRepoItem'; import { CreateProjectModes } from '../types'; export interface GitlabProjectSelectionFormProps { @@ -50,104 +46,78 @@ export default function GitlabProjectSelectionForm(props: GitlabProjectSelection if (projects.length === 0 && searchQuery.length === 0 && !searching) { return ( - <Alert className="spacer-top" variant="warning"> - <FormattedMessage - defaultMessage={translate('onboarding.create_project.gitlab.no_projects')} - id="onboarding.create_project.gitlab.no_projects" - values={{ - link: ( - <Link - to={{ - pathname: '/projects/create', - search: queryToSearch({ mode: CreateProjectModes.GitLab, resetPat: 1 }), - }} - > - {translate('onboarding.create_project.update_your_token')} - </Link> - ), - }} - /> - </Alert> + <FlagMessage className="sw-mt-2" variant="warning"> + <span> + <FormattedMessage + defaultMessage={translate('onboarding.create_project.gitlab.no_projects')} + id="onboarding.create_project.gitlab.no_projects" + values={{ + link: ( + <Link + to={{ + pathname: '/projects/create', + search: queryToSearch({ mode: CreateProjectModes.GitLab, resetPat: 1 }), + }} + > + {translate('onboarding.create_project.update_your_token')} + </Link> + ), + }} + /> + </span> + </FlagMessage> ); } return ( - <div className="boxed-group big-padded create-project-import"> - <SearchBox - className="spacer" - loading={searching} - minLength={3} + <> + <InputSearch + size="large" + className="sw-mb-6" onChange={props.onSearch} - placeholder={translate('onboarding.create_project.search_prompt')} + placeholder={translate('onboarding.create_project.search_repositories')} + value={searchQuery} + clearIconAriaLabel={translate('clear')} /> - <hr /> - {projects.length === 0 ? ( - <div className="padded">{translate('no_results')}</div> + <div className="sw-py-6 sw-px-2"> + <LightPrimary className="sw-body-sm">{translate('no_results')}</LightPrimary> + </div> ) : ( - <table className="data zebra zebra-hover"> - <tbody> - {projects.map((project) => ( - <tr key={project.id}> - <td> - <Tooltip overlay={project.slug}> - <strong className="project-name display-inline-block text-ellipsis"> - {project.sqProjectKey ? ( - <Link to={getProjectUrl(project.sqProjectKey)}> - <QualifierIcon - className="spacer-right" - qualifier={ComponentQualifier.Project} - /> - {project.sqProjectName} - </Link> - ) : ( - project.name - )} - </strong> - </Tooltip> - <br /> - <Tooltip overlay={project.pathSlug}> - <span className="text-muted project-path display-inline-block text-ellipsis"> - {project.pathName} - </span> - </Tooltip> - </td> - <td> - <Link - className="display-inline-flex-center big-spacer-right" - to={project.url} - target="_blank" - > - {translate('onboarding.create_project.gitlab.link')} - </Link> - </td> - {project.sqProjectKey ? ( - <td> - <span className="display-flex-center display-flex-justify-end already-set-up"> - <CheckIcon className="little-spacer-right" size={12} /> - {translate('onboarding.create_project.repository_imported')} - </span> - </td> - ) : ( - <td className="text-right"> - <Button onClick={() => props.onImport(project.id)}> - {translate('onboarding.create_project.set_up')} - </Button> - </td> - )} - </tr> - ))} - </tbody> - </table> + <div className="sw-flex sw-flex-col sw-gap-3"> + {projects.map((project) => ( + <AlmRepoItem + key={project.id} + almKey={project.id} + almUrl={project.url} + almUrlText={translate('onboarding.create_project.gitlab.link')} + almIconSrc={`${getBaseUrl()}/images/alm/gitlab.svg`} + sqProjectKey={project.sqProjectKey} + onImport={props.onImport} + primaryTextNode={ + <Tooltip overlay={project.slug}> + <span>{project.name}</span> + </Tooltip> + } + secondaryTextNode={ + <Tooltip overlay={project.pathSlug}> + <span>{project.pathName}</span> + </Tooltip> + } + /> + ))} + </div> )} <ListFooter + className="sw-mb-10" count={projects.length} loadMore={props.onLoadMore} loading={loadingMore} pageSize={projectsPaging.pageSize} total={projectsPaging.total} + useMIUIButtons /> - </div> + </> ); } diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx index 00d7036e401..7970bde1bf1 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitHub-it.tsx @@ -157,7 +157,7 @@ it('should show search filter when the authentication is successful', async () = almSetting: 'conf-github-2', organization: 'org-1', page: 1, - pageSize: 30, + pageSize: 20, query: 'search', }); }); @@ -185,7 +185,7 @@ it('should have load more', async () => { almSetting: 'conf-github-2', organization: 'org-1', page: 2, - pageSize: 30, + pageSize: 20, query: '', }); expect(loadMore).not.toBeInTheDocument(); diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitLab-it.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitLab-it.tsx index de7780bc55e..cc549475982 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/GitLab-it.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/GitLab-it.tsx @@ -86,7 +86,7 @@ it('should ask for PAT when it is not set yet and show the import project featur expect(screen.getByText('Gitlab project 1')).toBeInTheDocument(); expect(screen.getByText('Gitlab project 2')).toBeInTheDocument(); - expect(screen.getAllByText('onboarding.create_project.set_up')).toHaveLength(2); + expect(screen.getAllByText('onboarding.create_project.import')).toHaveLength(2); expect(screen.getByText('onboarding.create_project.repository_imported')).toBeInTheDocument(); }); @@ -114,11 +114,11 @@ it('should show import project feature when PAT is already set', async () => { ); projectItem = screen.getByRole('row', { name: /Gitlab project 2/ }); - const setupButton = within(projectItem).getByRole('button', { - name: 'onboarding.create_project.set_up', + const importButton = within(projectItem).getByRole('button', { + name: 'onboarding.create_project.import', }); - await user.click(setupButton); + await user.click(importButton); expect( screen.getByRole('heading', { name: 'onboarding.create_project.new_code_definition.title' }) @@ -144,16 +144,14 @@ it('should show search filter when PAT is already set', async () => { await selectEvent.select(ui.instanceSelector.get(), [/conf-final-2/]); }); - const inputSearch = screen.getByRole('searchbox', { - name: 'onboarding.create_project.search_prompt', - }); + const inputSearch = screen.getByRole('searchbox'); await user.click(inputSearch); await user.keyboard('sea'); expect(getGitlabProjects).toHaveBeenLastCalledWith({ almSetting: 'conf-final-2', page: 1, - pageSize: 30, + pageSize: 20, query: 'sea', }); }); @@ -179,7 +177,7 @@ it('should have load more', async () => { expect(getGitlabProjects).toHaveBeenLastCalledWith({ almSetting: 'conf-final-2', page: 2, - pageSize: 30, + pageSize: 20, query: '', }); expect(loadMore).not.toBeInTheDocument(); diff --git a/server/sonar-web/src/main/js/apps/create/project/components/WrongBindingCountAlert.tsx b/server/sonar-web/src/main/js/apps/create/project/components/WrongBindingCountAlert.tsx index 215cdf261c3..fe89f9454c2 100644 --- a/server/sonar-web/src/main/js/apps/create/project/components/WrongBindingCountAlert.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/components/WrongBindingCountAlert.tsx @@ -17,10 +17,10 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ + +import { FlagMessage, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import Link from '../../../../components/common/Link'; -import { Alert } from '../../../../components/ui/Alert'; import { translate } from '../../../../helpers/l10n'; import { getGlobalSettingsUrl } from '../../../../helpers/urls'; import { AlmKeys } from '../../../../types/alm-settings'; @@ -35,29 +35,31 @@ export default function WrongBindingCountAlert(props: WrongBindingCountAlertProp const { alm, canAdmin } = props; return ( - <Alert variant="error"> - {canAdmin ? ( - <FormattedMessage - defaultMessage={translate('onboarding.create_project.wrong_binding_count.admin')} - id="onboarding.create_project.wrong_binding_count.admin" - values={{ - alm: translate('onboarding.alm', alm), - url: ( - <Link to={getGlobalSettingsUrl(ALM_INTEGRATION_CATEGORY)}> - {translate('settings.page')} - </Link> - ), - }} - /> - ) : ( - <FormattedMessage - defaultMessage={translate('onboarding.create_project.wrong_binding_count')} - id="onboarding.create_project.wrong_binding_count" - values={{ - alm: translate('onboarding.alm', alm), - }} - /> - )} - </Alert> + <FlagMessage variant="error" className="sw-mb-2"> + <span> + {canAdmin ? ( + <FormattedMessage + defaultMessage={translate('onboarding.create_project.wrong_binding_count.admin')} + id="onboarding.create_project.wrong_binding_count.admin" + values={{ + alm: translate('onboarding.alm', alm), + url: ( + <Link to={getGlobalSettingsUrl(ALM_INTEGRATION_CATEGORY)}> + {translate('settings.page')} + </Link> + ), + }} + /> + ) : ( + <FormattedMessage + defaultMessage={translate('onboarding.create_project.wrong_binding_count')} + id="onboarding.create_project.wrong_binding_count" + values={{ + alm: translate('onboarding.alm', alm), + }} + /> + )} + </span> + </FlagMessage> ); } 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 e593a4af405..a702ea5c212 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -3971,6 +3971,7 @@ onboarding.create_project.github.warning.message_admin.link=DevOps Platform inte onboarding.create_project.github.no_orgs=We couldn't load any organizations with your key. Contact an administrator. onboarding.create_project.github.no_orgs_admin=We couldn't load any organizations. Make sure the GitHub App is installed in at least one organization and check the GitHub instance configuration in the {link}. onboarding.create_project.gitlab.title=Gitlab project onboarding +onboarding.create_project.gitlab.subtitle=Import projects from one of your GitLab groups onboarding.create_project.gitlab.no_projects=No projects could be fetched from Gitlab. Contact your system administrator, or {link}. onboarding.create_project.gitlab.link=See on GitLab |