From 1e244b724919050aa4c7d8d371418400db628c58 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Wed, 9 Aug 2023 11:16:59 +0200 Subject: [PATCH] SONAR-20086 Migrating GitLab config page to new design --- .../project/Github/GitHubProjectCreate.tsx | 2 +- .../Github/GitHubProjectCreateRenderer.tsx | 17 +- .../project/Gitlab/GitlabProjectCreate.tsx | 2 +- .../Gitlab/GitlabProjectCreateRenderer.tsx | 25 ++- .../Gitlab/GitlabProjectSelectionForm.tsx | 150 +++++++----------- .../create/project/__tests__/GitHub-it.tsx | 4 +- .../create/project/__tests__/GitLab-it.tsx | 16 +- .../components/WrongBindingCountAlert.tsx | 54 ++++--- .../resources/org/sonar/l10n/core.properties | 1 + 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 { 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) { )} -
- -
+ ) ); 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 { 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 ( <> - - - {translate('onboarding.create_project.gitlab.title')} - - } - /> +
+ {translate('onboarding.create_project.gitlab.title')} + + {translate('onboarding.create_project.gitlab.subtitle')} + +
- {loading && } + {!loading && !selectedAlmInstance && ( 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 ( - - - {translate('onboarding.create_project.update_your_token')} - - ), - }} - /> - + + + + {translate('onboarding.create_project.update_your_token')} + + ), + }} + /> + + ); } return ( -
- + -
- {projects.length === 0 ? ( -
{translate('no_results')}
+
+ {translate('no_results')} +
) : ( - - - {projects.map((project) => ( - - - - {project.sqProjectKey ? ( - - ) : ( - - )} - - ))} - -
- - - {project.sqProjectKey ? ( - - - {project.sqProjectName} - - ) : ( - project.name - )} - - -
- - - {project.pathName} - - - 		- - {translate('onboarding.create_project.gitlab.link')} - - - - - {translate('onboarding.create_project.repository_imported')} - - - -
+
+ {projects.map((project) => ( + + {project.name} + + } + secondaryTextNode={ + + {project.pathName} + + } + /> + ))} +
)} -
+ ); } 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 ( - - {canAdmin ? ( - - {translate('settings.page')} - - ), - }} - /> - ) : ( - - )} - + + + {canAdmin ? ( + + {translate('settings.page')} + + ), + }} + /> + ) : ( + + )} + + ); } 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 -- 2.39.5