SONAR-20086 - Migrating Bitbucket server page

8 files changed, 127 insertions, 210 deletions

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 (
-      <Alert className="spacer-top" variant="warning">
+      <FlagMessage variant="warning">
         <FormattedMessage
           defaultMessage={translate('onboarding.create_project.no_bbs_projects')}
           id="onboarding.create_project.no_bbs_projects"
@@ -71,31 +62,34 @@ export default function BitbucketImportRepositoryForm(props: BitbucketImportRepo
             ),
           }}
         />
-      </Alert>
+      </FlagMessage>
     );
   }
 
   return (
-    <div className="create-project-import-bbs">
-      <SearchBox
-        onChange={props.onSearch}
-        placeholder={translate('onboarding.create_project.search_repositories_by_name')}
-      />
+    <div>
+      <div className="sw-mb-10 sw-w-abs-400">
+        <InputSearch
+          searchInputAriaLabel={translate('onboarding.create_project.search_repositories_by_name')}
+          clearIconAriaLabel={translate('clear')}
+          onChange={props.onSearch}
+          placeholder={translate('onboarding.create_project.search_repositories_by_name')}
+          size="full"
+        />
+      </div>
 
       {searching || searchResults ? (
         <BitbucketSearchResults
-          onSelectRepository={props.onSelectRepository}
+          onImportRepository={props.onImportRepository}
           projects={projects}
           searchResults={searchResults}
           searching={searching}
-          selectedRepository={selectedRepository}
         />
       ) : (
         <BitbucketRepositories
-          onSelectRepository={props.onSelectRepository}
+          onImportRepository={props.onImportRepository}
           projectRepositories={projectRepositories}
           projects={projects}
-          selectedRepository={selectedRepository}
         />
       )}
     </div>
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 (
-    <BoxedGroupAccordion
-      className={classNames('big-spacer-bottom', {
-        open,
-        'not-clickable': !props.onClick,
-        'no-hover': !props.onClick,
-      })}
+    <Accordion
+      className="sw-mb-6"
       onClick={
         props.onClick
           ? props.onClick
@@ -63,13 +54,13 @@ export default function BitbucketProjectAccordion(props: BitbucketProjectAccordi
             }
       }
       open={open}
-      title={<h3>{title}</h3>}
+      header={title}
     >
       {open && (
         <>
-          <div className="display-flex-wrap">
+          <div className="sw-mb-4">
             {repositoryCount === 0 && (
-              <Alert variant="warning">
+              <FlagMessage variant="warning">
                 <FormattedMessage
                   defaultMessage={translate('onboarding.create_project.no_bbs_repos')}
                   id="onboarding.create_project.no_bbs_repos"
@@ -89,49 +80,33 @@ export default function BitbucketProjectAccordion(props: BitbucketProjectAccordi
                     ),
                   }}
                 />
-              </Alert>
+              </FlagMessage>
             )}
 
-            {repositories.map((repo) =>
-              repo.sqProjectKey ? (
-                <div
-                  className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo"
-                  key={repo.id}
-                >
-                  <CheckIcon className="spacer-right" fill={colors.green} size={14} />
-                  <div className="overflow-hidden">
-                    <div className="little-spacer-bottom">
-                      <strong title={repo.name}>
-                        <Link to={getProjectUrl(repo.sqProjectKey)}>{repo.name}</Link>
-                      </strong>
-                    </div>
-                    <em>{translate('onboarding.create_project.repository_imported')}</em>
-                  </div>
-                </div>
-              ) : (
-                <Radio
-                  checked={selectedRepository?.id === repo.id}
-                  className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden"
-                  key={repo.id}
-                  onCheck={() => props.onSelectRepository(repo)}
-                  value={String(repo.id)}
-                >
-                  <strong title={repo.name}>{repo.name}</strong>
-                </Radio>
-              )
-            )}
+            <div className="sw-flex sw-flex-col sw-gap-3">
+              {repositories.map((r) => (
+                <AlmRepoItem
+                  key={r.name}
+                  almKey={r.name}
+                  almIconSrc={`${getBaseUrl()}/images/alm/bitbucket.svg`}
+                  sqProjectKey={r.sqProjectKey}
+                  onImport={() => props.onImportRepository(r)}
+                  primaryTextNode={<span>{r.name}</span>}
+                />
+              ))}
+            </div>
           </div>
 
           {!showingAllRepositories && repositoryCount > 0 && (
-            <Alert variant="warning">
+            <FlagMessage variant="warning">
               {translateWithParameters(
                 'onboarding.create_project.only_showing_X_first_repos',
                 repositoryCount
               )}
-            </Alert>
+            </FlagMessage>
           )}
         </>
       )}
-    </BoxedGroupAccordion>
+    </Accordion>
   );
 }
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<Props, S
     await this.fetchInitialData();
   };
 
-  handleImportRepository = () => {
-    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<Props, S
     }
 
     if (!query) {
-      this.setState({ searching: false, searchResults: undefined, selectedRepository: undefined });
+      this.setState({ searching: false, searchResults: undefined });
       return;
     }
 
-    this.setState({ searching: true, selectedRepository: undefined });
+    this.setState({ searching: true });
     searchForBitbucketServerRepositories(selectedAlmInstance.key, query)
       .then(({ repositories }) => {
         if (this.mounted) {
@@ -221,10 +220,6 @@ export default class BitbucketProjectCreate extends React.PureComponent<Props, S
       });
   };
 
-  handleSelectRepository = (selectedRepository: BitbucketRepository) => {
-    this.setState({ selectedRepository });
-  };
-
   onSelectedAlmInstanceChange = (instance: AlmSettingsInstance) => {
     this.setState({
       selectedAlmInstance: instance,
@@ -243,7 +238,6 @@ export default class BitbucketProjectCreate extends React.PureComponent<Props, S
       projects,
       searching,
       searchResults,
-      selectedRepository,
       showPersonalAccessTokenForm,
     } = this.state;
 
@@ -256,14 +250,12 @@ export default class BitbucketProjectCreate extends React.PureComponent<Props, S
         onImportRepository={this.handleImportRepository}
         onPersonalAccessTokenCreated={this.handlePersonalAccessTokenCreated}
         onSearch={this.handleSearch}
-        onSelectRepository={this.handleSelectRepository}
         onSelectedAlmInstanceChange={this.onSelectedAlmInstanceChange}
         projectRepositories={projectRepositories}
         projects={projects}
         resetPat={Boolean(location.query.resetPat)}
         searchResults={searchResults}
         searching={searching}
-        selectedRepository={selectedRepository}
         showPersonalAccessTokenForm={
           showPersonalAccessTokenForm || Boolean(location.query.resetPat)
         }
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
index 426079c2836..0b435d15b5d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketServer/BitbucketProjectCreateRenderer.tsx
@@ -17,10 +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 { DeferredSpinner, LightPrimary, PageContentFontWrapper, Title } from 'design-system';
 import * as React from 'react';
-import { Button } from '../../../../components/controls/buttons';
 import { translate } from '../../../../helpers/l10n';
-import { getBaseUrl } from '../../../../helpers/system';
 import {
   BitbucketProject,
   BitbucketProjectRepositories,
@@ -28,7 +27,6 @@ import {
 } from '../../../../types/alm-integration';
 import { AlmKeys, AlmSettingsInstance } from '../../../../types/alm-settings';
 import AlmSettingsInstanceDropdown from '../components/AlmSettingsInstanceDropdown';
-import CreateProjectPageHeader from '../components/CreateProjectPageHeader';
 import PersonalAccessTokenForm from '../components/PersonalAccessTokenForm';
 import WrongBindingCountAlert from '../components/WrongBindingCountAlert';
 import BitbucketImportRepositoryForm from './BitbucketImportRepositoryForm';
@@ -38,9 +36,8 @@ export interface BitbucketProjectCreateRendererProps {
   almInstances: AlmSettingsInstance[];
   canAdmin?: boolean;
   loading: boolean;
-  onImportRepository: () => 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 (
-    <>
-      <CreateProjectPageHeader
-        additionalActions={
-          !showPersonalAccessTokenForm && (
-            <div className="display-flex-center pull-right">
-              <Button
-                className="button-large button-primary"
-                disabled={!selectedRepository}
-                onClick={props.onImportRepository}
-              >
-                {translate('onboarding.create_project.import_selected_repo')}
-              </Button>
-            </div>
-          )
-        }
-        title={
-          <span className="text-middle">
-            <img
-              alt="" // Should be ignored by screen readers
-              className="spacer-right"
-              height="24"
-              src={`${getBaseUrl()}/images/alm/bitbucket.svg`}
-            />
-            {translate('onboarding.create_project.from_bbs')}
-          </span>
-        }
-      />
+    <PageContentFontWrapper>
+      <header className="sw-mb-10">
+        <Title className="sw-mb-4">
+          {translate('onboarding.create_project.import_selected_repo')}
+        </Title>
+        <LightPrimary className="sw-body-sm">
+          {translate('onboarding.create_project.from_bbs')}
+        </LightPrimary>
+      </header>
 
       <AlmSettingsInstanceDropdown
         almKey={AlmKeys.BitbucketServer}
@@ -103,31 +81,29 @@ export default function BitbucketProjectCreateRenderer(props: BitbucketProjectCr
         onChangeConfig={props.onSelectedAlmInstanceChange}
       />
 
-      {loading && <i className="spinner" />}
+      <DeferredSpinner loading={loading}>
+        {!selectedAlmInstance && (
+          <WrongBindingCountAlert alm={AlmKeys.BitbucketServer} canAdmin={!!canAdmin} />
+        )}
 
-      {!loading && !selectedAlmInstance && (
-        <WrongBindingCountAlert alm={AlmKeys.BitbucketServer} canAdmin={!!canAdmin} />
-      )}
-
-      {!loading &&
-        selectedAlmInstance &&
-        (showPersonalAccessTokenForm ? (
-          <PersonalAccessTokenForm
-            almSetting={selectedAlmInstance}
-            onPersonalAccessTokenCreated={props.onPersonalAccessTokenCreated}
-            resetPat={resetPat}
-          />
-        ) : (
-          <BitbucketImportRepositoryForm
-            onSearch={props.onSearch}
-            onSelectRepository={props.onSelectRepository}
-            projectRepositories={projectRepositories}
-            projects={projects}
-            searchResults={searchResults}
-            searching={searching}
-            selectedRepository={selectedRepository}
-          />
-        ))}
-    </>
+        {selectedAlmInstance &&
+          (showPersonalAccessTokenForm ? (
+            <PersonalAccessTokenForm
+              almSetting={selectedAlmInstance}
+              onPersonalAccessTokenCreated={props.onPersonalAccessTokenCreated}
+              resetPat={resetPat}
+            />
+          ) : (
+            <BitbucketImportRepositoryForm
+              onSearch={props.onSearch}
+              projectRepositories={projectRepositories}
+              projects={projects}
+              searchResults={searchResults}
+              searching={searching}
+              onImportRepository={props.onImportRepository}
+            />
+          ))}
+      </DeferredSpinner>
+    </PageContentFontWrapper>
   );
 }
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 (
     <>
-      <div className="overflow-hidden spacer-bottom">
-        <ButtonLink
-          className="pull-right"
-          onClick={() => setOpenProjectKeys(allAreExpanded ? [] : projects.map((p) => p.key))}
-        >
-          {allAreExpanded ? translate('collapse_all') : translate('expand_all')}
-        </ButtonLink>
-      </div>
-
       {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)
           <BitbucketProjectAccordion
             key={project.key}
             onClick={() => 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 (
-      <Alert className="big-spacer-top" variant="warning">
+      <FlagMessage variant="warning">
         {translate('onboarding.create_project.no_bbs_repos.filter')}
-      </Alert>
+      </FlagMessage>
     );
   }
 
@@ -52,34 +50,30 @@ export default function BitbucketSearchResults(props: BitbucketSearchResultsProp
   );
 
   return (
-    <div className="big-spacer-top">
-      <DeferredSpinner loading={searching}>
-        {filteredSearchResults.length > 0 && (
+    <DeferredSpinner loading={searching}>
+      {filteredSearchResults.length > 0 && (
+        <BitbucketProjectAccordion
+          onImportRepository={props.onImportRepository}
+          open
+          repositories={filteredSearchResults}
+          showingAllRepositories
+        />
+      )}
+
+      {filteredProjects.map((project) => {
+        const repositories = searchResults.filter((r) => r.projectKey === project.key);
+
+        return (
           <BitbucketProjectAccordion
-            onSelectRepository={props.onSelectRepository}
+            onImportRepository={props.onImportRepository}
+            key={project.key}
             open
-            repositories={filteredSearchResults}
-            selectedRepository={selectedRepository}
+            project={project}
+            repositories={repositories}
             showingAllRepositories
           />
-        )}
-
-        {filteredProjects.map((project) => {
-          const repositories = searchResults.filter((r) => r.projectKey === project.key);
-
-          return (
-            <BitbucketProjectAccordion
-              key={project.key}
-              onSelectRepository={props.onSelectRepository}
-              open
-              project={project}
-              repositories={repositories}
-              selectedRepository={selectedRepository}
-              showingAllRepositories
-            />
-          );
-        })}
-      </DeferredSpinner>
-    </div>
+        );
+      })}
+    </DeferredSpinner>
   );
 }
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(
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 1268881dd65..e593a4af405 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2402,7 +2402,7 @@ my_account.create_new.TRK=Add a project
 my_account.add_project=Add Project
 my_account.add_project.manual=Manually
 my_account.add_project.azure=From Azure DevOps
-my_account.add_project.bitbucket=from Bitbucket Server
+my_account.add_project.bitbucket=From Bitbucket Server
 my_account.add_project.bitbucketcloud=From Bitbucket Cloud
 my_account.add_project.github=From GitHub
 my_account.add_project.gitlab=From GitLab