From 9b06260fea07a6cfa7cad86123cd9f31bd4f603f Mon Sep 17 00:00:00 2001 From: Kevin Silva Date: Thu, 10 Aug 2023 15:12:23 +0200 Subject: SONAR-20086 - Migrating Bitbucket server page --- .../BitbucketImportRepositoryForm.tsx | 40 ++++----- .../BitbucketServer/BitbucketProjectAccordion.tsx | 79 +++++++----------- .../BitbucketServer/BitbucketProjectCreate.tsx | 18 ++--- .../BitbucketProjectCreateRenderer.tsx | 94 ++++++++-------------- .../BitbucketServer/BitbucketRepositories.tsx | 21 +---- .../BitbucketServer/BitbucketSearchResults.tsx | 58 ++++++------- .../apps/create/project/__tests__/Bitbucket-it.tsx | 25 +++--- 7 files changed, 126 insertions(+), 209 deletions(-) (limited to 'server/sonar-web/src/main/js/apps/create/project') diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx index bee7ea6a447..8ea8ca5afda 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketImportRepositoryForm.tsx @@ -17,11 +17,9 @@ * 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, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import Link from '../../../../components/common/Link'; -import SearchBox from '../../../../components/controls/SearchBox'; -import { Alert } from '../../../../components/ui/Alert'; import { translate } from '../../../../helpers/l10n'; import { queryToSearch } from '../../../../helpers/urls'; import { @@ -35,26 +33,19 @@ import BitbucketSearchResults from './BitbucketSearchResults'; export interface BitbucketImportRepositoryFormProps { onSearch: (query: string) => void; - onSelectRepository: (repo: BitbucketRepository) => void; + onImportRepository: (repo: BitbucketRepository) => void; projects?: BitbucketProject[]; projectRepositories?: BitbucketProjectRepositories; searching: boolean; searchResults?: BitbucketRepository[]; - selectedRepository?: BitbucketRepository; } export default function BitbucketImportRepositoryForm(props: BitbucketImportRepositoryFormProps) { - const { - projects = [], - projectRepositories = {}, - searchResults, - searching, - selectedRepository, - } = props; + const { projects = [], projectRepositories = {}, searchResults, searching } = props; if (projects.length === 0) { return ( - + - + ); } return ( -
- +
+
+ +
{searching || searchResults ? ( ) : ( )}
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectAccordion.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectAccordion.tsx index d6dda0e8680..99c3291f515 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectAccordion.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectAccordion.tsx @@ -17,44 +17,35 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import classNames from 'classnames'; +import { Accordion, FlagMessage, Link } from 'design-system'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; -import { colors } from '../../../../app/theme'; -import Link from '../../../../components/common/Link'; -import BoxedGroupAccordion from '../../../../components/controls/BoxedGroupAccordion'; -import Radio from '../../../../components/controls/Radio'; -import CheckIcon from '../../../../components/icons/CheckIcon'; -import { Alert } from '../../../../components/ui/Alert'; import { translate, translateWithParameters } from '../../../../helpers/l10n'; -import { getProjectUrl, queryToSearch } from '../../../../helpers/urls'; +import { getBaseUrl } from '../../../../helpers/system'; +import { queryToSearch } from '../../../../helpers/urls'; import { BitbucketProject, BitbucketRepository } from '../../../../types/alm-integration'; +import AlmRepoItem from '../components/AlmRepoItem'; import { CreateProjectModes } from '../types'; export interface BitbucketProjectAccordionProps { onClick?: () => void; - onSelectRepository: (repo: BitbucketRepository) => void; + onImportRepository: (repository: BitbucketRepository) => void; open: boolean; project?: BitbucketProject; repositories: BitbucketRepository[]; - selectedRepository?: BitbucketRepository; showingAllRepositories: boolean; } export default function BitbucketProjectAccordion(props: BitbucketProjectAccordionProps) { - const { open, project, repositories, selectedRepository, showingAllRepositories } = props; + const { open, project, repositories, showingAllRepositories } = props; const repositoryCount = repositories.length; const title = project?.name ?? translate('search_results'); return ( - {title}} + header={title} > {open && ( <> -
+
{repositoryCount === 0 && ( - + - + )} - {repositories.map((repo) => - repo.sqProjectKey ? ( -
- -
-
- - {repo.name} - -
- {translate('onboarding.create_project.repository_imported')} -
-
- ) : ( - props.onSelectRepository(repo)} - value={String(repo.id)} - > - {repo.name} - - ) - )} +
+ {repositories.map((r) => ( + props.onImportRepository(r)} + primaryTextNode={{r.name}} + /> + ))} +
{!showingAllRepositories && repositoryCount > 0 && ( - + {translateWithParameters( 'onboarding.create_project.only_showing_X_first_repos', repositoryCount )} - + )} )} - + ); } diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreate.tsx index 0613375131a..87b2af6cc2f 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreate.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreate.tsx @@ -51,7 +51,6 @@ interface State { projectRepositories?: BitbucketProjectRepositories; searching: boolean; searchResults?: BitbucketRepository[]; - selectedRepository?: BitbucketRepository; showPersonalAccessTokenForm: boolean; } @@ -181,10 +180,10 @@ export default class BitbucketProjectCreate extends React.PureComponent { - const { selectedAlmInstance, selectedRepository } = this.state; + handleImportRepository = (selectedRepository: BitbucketRepository) => { + const { selectedAlmInstance } = this.state; - if (selectedAlmInstance && selectedRepository) { + if (selectedAlmInstance) { this.props.onProjectSetupDone( setupBitbucketServerProjectCreation({ almSetting: selectedAlmInstance.key, @@ -203,11 +202,11 @@ export default class BitbucketProjectCreate extends React.PureComponent { if (this.mounted) { @@ -221,10 +220,6 @@ export default class BitbucketProjectCreate extends React.PureComponent { - this.setState({ selectedRepository }); - }; - onSelectedAlmInstanceChange = (instance: AlmSettingsInstance) => { this.setState({ selectedAlmInstance: instance, @@ -243,7 +238,6 @@ export default class BitbucketProjectCreate extends React.PureComponent void; + onImportRepository: (repository: BitbucketRepository) => void; onSearch: (query: string) => void; - onSelectRepository: (repo: BitbucketRepository) => void; onPersonalAccessTokenCreated: () => void; onSelectedAlmInstanceChange: (instance: AlmSettingsInstance) => void; projects?: BitbucketProject[]; @@ -48,7 +45,6 @@ export interface BitbucketProjectCreateRendererProps { resetPat: boolean; searching: boolean; searchResults?: BitbucketRepository[]; - selectedRepository?: BitbucketRepository; showPersonalAccessTokenForm?: boolean; } @@ -60,7 +56,7 @@ export default function BitbucketProjectCreateRenderer(props: BitbucketProjectCr loading, projects, projectRepositories, - selectedRepository, + searching, searchResults, showPersonalAccessTokenForm, @@ -68,33 +64,15 @@ export default function BitbucketProjectCreateRenderer(props: BitbucketProjectCr } = props; return ( - <> - - -
- ) - } - title={ - - - {translate('onboarding.create_project.from_bbs')} - - } - /> + +
+ + {translate('onboarding.create_project.import_selected_repo')} + + + {translate('onboarding.create_project.from_bbs')} + +
- {loading && } + + {!selectedAlmInstance && ( + + )} - {!loading && !selectedAlmInstance && ( - - )} - - {!loading && - selectedAlmInstance && - (showPersonalAccessTokenForm ? ( - - ) : ( - - ))} - + {selectedAlmInstance && + (showPersonalAccessTokenForm ? ( + + ) : ( + + ))} + + ); } diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketRepositories.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketRepositories.tsx index ef53100e336..8caf9497501 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketRepositories.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketRepositories.tsx @@ -19,8 +19,6 @@ */ import { uniq, without } from 'lodash'; import * as React from 'react'; -import { ButtonLink } from '../../../../components/controls/buttons'; -import { translate } from '../../../../helpers/l10n'; import { BitbucketProject, BitbucketProjectRepositories, @@ -29,21 +27,18 @@ import { import BitbucketProjectAccordion from './BitbucketProjectAccordion'; export interface BitbucketRepositoriesProps { - onSelectRepository: (repo: BitbucketRepository) => void; + onImportRepository: (repo: BitbucketRepository) => void; projects: BitbucketProject[]; projectRepositories: BitbucketProjectRepositories; - selectedRepository?: BitbucketRepository; } export default function BitbucketRepositories(props: BitbucketRepositoriesProps) { - const { projects, projectRepositories, selectedRepository } = props; + const { projects, projectRepositories } = props; const [openProjectKeys, setOpenProjectKeys] = React.useState( projects.length > 0 ? [projects[0].key] : [] ); - const allAreExpanded = projects.length <= openProjectKeys.length; - const handleClick = (isOpen: boolean, projectKey: string) => { setOpenProjectKeys( isOpen ? without(openProjectKeys, projectKey) : uniq([...openProjectKeys, projectKey]) @@ -52,15 +47,6 @@ export default function BitbucketRepositories(props: BitbucketRepositoriesProps) return ( <> -
- setOpenProjectKeys(allAreExpanded ? [] : projects.map((p) => p.key))} - > - {allAreExpanded ? translate('collapse_all') : translate('expand_all')} - -
- {projects.map((project) => { const isOpen = openProjectKeys.includes(project.key); const { allShown, repositories = [] } = projectRepositories[project.key] || {}; @@ -69,12 +55,11 @@ export default function BitbucketRepositories(props: BitbucketRepositoriesProps) handleClick(isOpen, project.key)} - onSelectRepository={props.onSelectRepository} open={isOpen} project={project} repositories={repositories} - selectedRepository={selectedRepository} showingAllRepositories={allShown} + onImportRepository={props.onImportRepository} /> ); })} diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketSearchResults.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketSearchResults.tsx index a72b1d95e50..4afc74f2460 100644 --- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketSearchResults.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketSearchResults.tsx @@ -17,29 +17,27 @@ * 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, FlagMessage } from 'design-system'; import * as React from 'react'; -import { Alert } from '../../../../components/ui/Alert'; -import DeferredSpinner from '../../../../components/ui/DeferredSpinner'; import { translate } from '../../../../helpers/l10n'; import { BitbucketProject, BitbucketRepository } from '../../../../types/alm-integration'; import BitbucketProjectAccordion from './BitbucketProjectAccordion'; export interface BitbucketSearchResultsProps { - onSelectRepository: (repo: BitbucketRepository) => void; + onImportRepository: (repo: BitbucketRepository) => void; projects: BitbucketProject[]; searching: boolean; searchResults?: BitbucketRepository[]; - selectedRepository?: BitbucketRepository; } export default function BitbucketSearchResults(props: BitbucketSearchResultsProps) { - const { projects, searching, searchResults = [], selectedRepository } = props; + const { projects, searching, searchResults = [] } = props; if (searchResults.length === 0 && !searching) { return ( - + {translate('onboarding.create_project.no_bbs_repos.filter')} - + ); } @@ -52,34 +50,30 @@ export default function BitbucketSearchResults(props: BitbucketSearchResultsProp ); return ( -
- - {filteredSearchResults.length > 0 && ( + + {filteredSearchResults.length > 0 && ( + + )} + + {filteredProjects.map((project) => { + const repositories = searchResults.filter((r) => r.projectKey === project.key); + + return ( - )} - - {filteredProjects.map((project) => { - const repositories = searchResults.filter((r) => r.projectKey === project.key); - - return ( - - ); - })} - -
+ ); + })} + ); } diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/Bitbucket-it.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/Bitbucket-it.tsx index a7916f10af8..6b807c89485 100644 --- a/server/sonar-web/src/main/js/apps/create/project/__tests__/Bitbucket-it.tsx +++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/Bitbucket-it.tsx @@ -108,10 +108,6 @@ it('should show import project feature when PAT is already set', async () => { expect(screen.getByText('Bitbucket Project 1')).toBeInTheDocument(); - await user.click(screen.getByRole('button', { name: 'expand_all' })); - - expect(screen.getByRole('button', { name: 'collapse_all' })).toBeInTheDocument(); - const projectItem = screen.getByRole('region', { name: /Bitbucket Project 1/ }); expect( @@ -125,15 +121,20 @@ it('should show import project feature when PAT is already set', async () => { ); await user.click(projectItem); - const radioButton = within(projectItem).getByRole('radio', { - name: 'Bitbucket Repo 2', - }); - const importButton = screen.getByText('onboarding.create_project.import_selected_repo'); - expect(radioButton).toBeInTheDocument(); - expect(importButton).toBeDisabled(); - await user.click(radioButton); - expect(importButton).toBeEnabled(); + expect( + screen.getByRole('row', { + name: 'Bitbucket Repo 1 onboarding.create_project.repository_imported', + }) + ).toBeInTheDocument(); + + expect( + screen.getByRole('row', { + name: 'Bitbucket Repo 2 onboarding.create_project.import', + }) + ).toBeInTheDocument(); + + const importButton = screen.getByText('onboarding.create_project.import'); await user.click(importButton); expect( -- cgit v1.2.3