From 7b5a8425edd0395326491b1355bae8980de906fe Mon Sep 17 00:00:00 2001
From: Mathieu Suen <mathieu.suen@sonarsource.com>
Date: Wed, 19 May 2021 13:51:02 +0200
Subject: [PATCH] SONAR-14805 Add import action for bitbucket cloud onboarding

---
 .../src/main/js/api/alm-integrations.ts       |  10 ++
 .../project/BitbucketCloudProjectCreate.tsx   |  53 ++++--
 .../BitbucketCloudProjectCreateRender.tsx     |   7 +-
 .../project/BitbucketCloudSearchForm.tsx      |  29 ++-
 .../BitbucketCloudProjectCreate-test.tsx      |  64 +++++--
 ...BitbucketCloudProjectCreateRender-test.tsx |   3 +-
 .../BitbucketCloudSearchForm-test.tsx         |  13 +-
 .../BitbucketCloudProjectCreate-test.tsx.snap |   2 +
 ...cketCloudProjectCreateRender-test.tsx.snap |   1 +
 .../BitbucketCloudSearchForm-test.tsx.snap    | 165 +++++++++++++++++-
 10 files changed, 306 insertions(+), 41 deletions(-)

diff --git a/server/sonar-web/src/main/js/api/alm-integrations.ts b/server/sonar-web/src/main/js/api/alm-integrations.ts
index f98c7ff105f..aa0b4c6907c 100644
--- a/server/sonar-web/src/main/js/api/alm-integrations.ts
+++ b/server/sonar-web/src/main/js/api/alm-integrations.ts
@@ -156,6 +156,16 @@ export function getGithubClientId(almSetting: string): Promise<{ clientId?: stri
   return getJSON('/api/alm_integrations/get_github_client_id', { almSetting });
 }
 
+export function importBitbucketCloudRepository(
+  almSetting: string,
+  repositorySlug: string
+): Promise<{ project: ProjectBase }> {
+  return postJSON('/api/alm_integrations/import_bitbucketcloud_repo', {
+    almSetting,
+    repositorySlug
+  }).catch(throwGlobalError);
+}
+
 export function importGithubRepository(
   almSetting: string,
   organization: string,
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreate.tsx
index a9d9f6efe1b..0a08a013fac 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreate.tsx
@@ -19,8 +19,11 @@
  */
 import * as React from 'react';
 import { WithRouterProps } from 'react-router';
-import { searchForBitbucketCloudRepositories } from '../../../api/alm-integrations';
-import { BitbucketCloudRepository, BitbucketRepository } from '../../../types/alm-integration';
+import {
+  importBitbucketCloudRepository,
+  searchForBitbucketCloudRepositories
+} from '../../../api/alm-integrations';
+import { BitbucketCloudRepository } from '../../../types/alm-integration';
 import { AlmSettingsInstance } from '../../../types/alm-settings';
 import BitbucketCloudProjectCreateRenderer from './BitbucketCloudProjectCreateRender';
 
@@ -32,21 +35,20 @@ interface Props extends Pick<WithRouterProps, 'location' | 'router'> {
 }
 
 interface State {
-  settings: AlmSettingsInstance;
+  importingSlug?: string;
+  isLastPage?: boolean;
   loading: boolean;
   loadingMore: boolean;
-  isLastPage?: boolean;
   projectsPaging: Omit<T.Paging, 'total'>;
+  resetPat: boolean;
   repositories: BitbucketCloudRepository[];
-  searchResults?: BitbucketRepository[];
-  selectedRepository?: BitbucketRepository;
   searching: boolean;
   searchQuery: string;
+  settings: AlmSettingsInstance;
   showPersonalAccessTokenForm: boolean;
-  resetPat: boolean;
 }
 
-export const BITBUCKET_PROJECTS_PAGESIZE = 30;
+export const BITBUCKET_CLOUD_PROJECTS_PAGESIZE = 30;
 export default class BitbucketCloudProjectCreate extends React.PureComponent<Props, State> {
   mounted = false;
 
@@ -55,14 +57,14 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
     this.state = {
       // For now, we only handle a single instance. So we always use the first
       // one from the list.
-      settings: props.settings[0],
       loading: false,
       loadingMore: false,
       resetPat: false,
-      projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_PROJECTS_PAGESIZE },
+      projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
       repositories: [],
       searching: false,
       searchQuery: '',
+      settings: props.settings[0],
       showPersonalAccessTokenForm: true
     };
   }
@@ -80,7 +82,9 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
   handlePersonalAccessTokenCreated = async () => {
     this.setState({ showPersonalAccessTokenForm: false });
     this.cleanUrl();
+    this.setState({ loading: true });
     await this.fetchData();
+    this.setState({ loading: false });
   };
 
   cleanUrl = () => {
@@ -122,7 +126,7 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
   handleError = () => {
     if (this.mounted) {
       this.setState({
-        projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_PROJECTS_PAGESIZE },
+        projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
         repositories: [],
         resetPat: true,
         showPersonalAccessTokenForm: true
@@ -136,7 +140,7 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
     this.setState(
       {
         searching: true,
-        projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_PROJECTS_PAGESIZE },
+        projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
         searchQuery
       },
       async () => {
@@ -166,9 +170,32 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
     );
   };
 
+  handleImport = async (repositorySlug: string) => {
+    const { settings } = this.state;
+
+    if (!settings) {
+      return;
+    }
+
+    this.setState({ importingSlug: repositorySlug });
+
+    const result = await importBitbucketCloudRepository(settings.key, repositorySlug).catch(
+      () => undefined
+    );
+
+    if (this.mounted) {
+      this.setState({ importingSlug: undefined });
+
+      if (result) {
+        this.props.onProjectCreate([result.project.key]);
+      }
+    }
+  };
+
   render() {
     const { canAdmin, loadingBindings, location } = this.props;
     const {
+      importingSlug,
       isLastPage = true,
       settings,
       loading,
@@ -181,11 +208,13 @@ export default class BitbucketCloudProjectCreate extends React.PureComponent<Pro
     } = this.state;
     return (
       <BitbucketCloudProjectCreateRenderer
+        importingSlug={importingSlug}
         isLastPage={isLastPage}
         settings={settings}
         canAdmin={canAdmin}
         loadingMore={loadingMore}
         loading={loading || loadingBindings}
+        onImport={this.handleImport}
         onLoadMore={this.handleLoadMore}
         onPersonalAccessTokenCreated={this.handlePersonalAccessTokenCreated}
         onSearch={this.handleSearch}
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreateRender.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreateRender.tsx
index dc68ee2589f..f9568ebd179 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreateRender.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudProjectCreateRender.tsx
@@ -28,11 +28,12 @@ import PersonalAccessTokenForm from './PersonalAccessTokenForm';
 import WrongBindingCountAlert from './WrongBindingCountAlert';
 
 export interface BitbucketCloudProjectCreateRendererProps {
+  importingSlug?: string;
   isLastPage: boolean;
-  settings?: AlmSettingsInstance;
   canAdmin?: boolean;
   loading: boolean;
   loadingMore: boolean;
+  onImport: (repositorySlug: string) => void;
   onLoadMore: () => void;
   onPersonalAccessTokenCreated: () => void;
   onSearch: (searchQuery: string) => void;
@@ -41,12 +42,14 @@ export interface BitbucketCloudProjectCreateRendererProps {
   searching: boolean;
   searchQuery: string;
   showPersonalAccessTokenForm: boolean;
+  settings?: AlmSettingsInstance;
 }
 
 export default function BitbucketCloudProjectCreateRenderer(
   props: BitbucketCloudProjectCreateRendererProps
 ) {
   const {
+    importingSlug,
     isLastPage,
     settings,
     canAdmin,
@@ -90,10 +93,12 @@ export default function BitbucketCloudProjectCreateRenderer(
           />
         ) : (
           <BitbucketCloudSearchForm
+            importingSlug={importingSlug}
             isLastPage={isLastPage}
             loadingMore={loadingMore}
             searchQuery={searchQuery}
             searching={searching}
+            onImport={props.onImport}
             onSearch={props.onSearch}
             onLoadMore={props.onLoadMore}
             repositories={repositories}
diff --git a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudSearchForm.tsx b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudSearchForm.tsx
index a01de30bac4..eca6ca0e234 100644
--- a/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudSearchForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/BitbucketCloudSearchForm.tsx
@@ -36,8 +36,10 @@ import { ComponentQualifier } from '../../../types/component';
 import { CreateProjectModes } from './types';
 
 export interface BitbucketCloudSearchFormProps {
+  importingSlug?: string;
   isLastPage: boolean;
   loadingMore: boolean;
+  onImport: (repositorySlug: string) => void;
   onLoadMore: () => void;
   onSearch: (searchQuery: string) => void;
   repositories?: BitbucketCloudRepository[];
@@ -50,7 +52,14 @@ function getRepositoryUrl(workspace: string, slug: string) {
 }
 
 export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchFormProps) {
-  const { isLastPage, loadingMore, repositories = [], searching, searchQuery } = props;
+  const {
+    importingSlug,
+    isLastPage,
+    loadingMore,
+    repositories = [],
+    searching,
+    searchQuery
+  } = props;
 
   if (repositories.length === 0 && searchQuery.length === 0 && !searching) {
     return (
@@ -136,11 +145,14 @@ export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchForm
                 ) : (
                   <td className="text-right">
                     <Button
+                      disabled={Boolean(importingSlug)}
                       onClick={() => {
-                        /* Todo for import repo */
+                        props.onImport(repository.slug);
                       }}>
                       {translate('onboarding.create_project.set_up')}
-                      {false && <DeferredSpinner className="spacer-left" />}
+                      {importingSlug === repository.slug && (
+                        <DeferredSpinner className="spacer-left" />
+                      )}
                     </Button>
                   </td>
                 )}
@@ -150,11 +162,12 @@ export default function BitbucketCloudSearchForm(props: BitbucketCloudSearchForm
         </table>
       )}
       <footer className="spacer-top note text-center">
-        {translateWithParameters(
-          'x_of_y_shown',
-          formatMeasure(repositories.length, 'INT', null),
-          isLastPage ? formatMeasure(repositories.length, 'INT', null) : translate('unknown')
-        )}
+        {isLastPage &&
+          translateWithParameters(
+            'x_of_y_shown',
+            formatMeasure(repositories.length, 'INT', null),
+            formatMeasure(repositories.length, 'INT', null)
+          )}
         {!isLastPage && (
           <Button
             className="spacer-left"
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreate-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreate-test.tsx
index ffdec037bb5..4fd5d850b08 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreate-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreate-test.tsx
@@ -20,19 +20,23 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { waitAndUpdate } from 'sonar-ui-common/helpers/testUtils';
-import { searchForBitbucketCloudRepositories } from '../../../../api/alm-integrations';
 import {
-  mockBitbucketCloudRepository,
-  mockBitbucketRepository
-} from '../../../../helpers/mocks/alm-integrations';
+  importBitbucketCloudRepository,
+  searchForBitbucketCloudRepositories
+} from '../../../../api/alm-integrations';
+import { mockBitbucketCloudRepository } from '../../../../helpers/mocks/alm-integrations';
 import { mockBitbucketCloudAlmSettingsInstance } from '../../../../helpers/mocks/alm-settings';
 import { mockLocation, mockRouter } from '../../../../helpers/testMocks';
 import BitbucketCloudProjectCreate, {
-  BITBUCKET_PROJECTS_PAGESIZE
+  BITBUCKET_CLOUD_PROJECTS_PAGESIZE
 } from '../BitbucketCloudProjectCreate';
 
 jest.mock('../../../../api/alm-integrations', () => {
+  const { mockProject } = jest.requireActual('../../../../helpers/mocks/projects');
   return {
+    importBitbucketCloudRepository: jest
+      .fn()
+      .mockResolvedValue({ project: mockProject({ key: 'project-key' }) }),
     searchForBitbucketCloudRepositories: jest
       .fn()
       .mockResolvedValue({ isLastPage: true, repositories: [] }),
@@ -65,7 +69,7 @@ it('Should handle error correctly', async () => {
   wrapper.setState({
     showPersonalAccessTokenForm: false,
     repositories: [mockBitbucketCloudRepository()],
-    projectsPaging: { pageIndex: 2, pageSize: BITBUCKET_PROJECTS_PAGESIZE }
+    projectsPaging: { pageIndex: 2, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE }
   });
   await wrapper.instance().handlePersonalAccessTokenCreated();
   expect(wrapper.state().repositories).toHaveLength(0);
@@ -77,7 +81,10 @@ it('Should handle error correctly', async () => {
 it('Should load repository', async () => {
   (searchForBitbucketCloudRepositories as jest.Mock).mockResolvedValueOnce({
     isLastPage: true,
-    repositories: [mockBitbucketRepository(), mockBitbucketRepository({ sqProjectKey: 'sq-key' })]
+    repositories: [
+      mockBitbucketCloudRepository(),
+      mockBitbucketCloudRepository({ sqProjectKey: 'sq-key' })
+    ]
   });
 
   const wrapper = shallowRender();
@@ -88,7 +95,10 @@ it('Should load repository', async () => {
 it('Should load more repository', async () => {
   (searchForBitbucketCloudRepositories as jest.Mock).mockResolvedValueOnce({
     isLastPage: true,
-    repositories: [mockBitbucketRepository(), mockBitbucketRepository({ sqProjectKey: 'sq-key' })]
+    repositories: [
+      mockBitbucketCloudRepository(),
+      mockBitbucketCloudRepository({ sqProjectKey: 'sq-key' })
+    ]
   });
 
   const wrapper = shallowRender();
@@ -102,14 +112,17 @@ it('Should load more repository', async () => {
 it('Should handle search repository', async () => {
   (searchForBitbucketCloudRepositories as jest.Mock).mockResolvedValueOnce({
     isLastPage: true,
-    repositories: [mockBitbucketRepository(), mockBitbucketRepository({ sqProjectKey: 'sq-key' })]
+    repositories: [
+      mockBitbucketCloudRepository(),
+      mockBitbucketCloudRepository({ sqProjectKey: 'sq-key' })
+    ]
   });
 
   const wrapper = shallowRender();
   wrapper.setState({
     isLastPage: false,
     showPersonalAccessTokenForm: false,
-    projectsPaging: { pageIndex: 2, pageSize: BITBUCKET_PROJECTS_PAGESIZE },
+    projectsPaging: { pageIndex: 2, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
     repositories: [mockBitbucketCloudRepository()]
   });
   wrapper.instance().handleSearch('test');
@@ -119,11 +132,40 @@ it('Should handle search repository', async () => {
   expect(searchForBitbucketCloudRepositories).toHaveBeenLastCalledWith(
     'key',
     'test',
-    BITBUCKET_PROJECTS_PAGESIZE,
+    BITBUCKET_CLOUD_PROJECTS_PAGESIZE,
     1
   );
 });
 
+it('Should import repository', async () => {
+  const onProjectCreate = jest.fn();
+  const wrapper = shallowRender({ onProjectCreate });
+  wrapper.setState({
+    isLastPage: false,
+    showPersonalAccessTokenForm: false,
+    projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
+    repositories: [mockBitbucketCloudRepository({ slug: 'slug-test' })]
+  });
+  await wrapper.instance().handleImport('slug-test');
+  expect(importBitbucketCloudRepository).toHaveBeenCalledWith('key', 'slug-test');
+  expect(onProjectCreate).toHaveBeenCalledWith(['project-key']);
+});
+
+it('Should behave correctly when import fail', async () => {
+  (importBitbucketCloudRepository as jest.Mock).mockRejectedValueOnce({});
+  const onProjectCreate = jest.fn();
+  const wrapper = shallowRender({ onProjectCreate });
+  wrapper.setState({
+    isLastPage: false,
+    showPersonalAccessTokenForm: false,
+    projectsPaging: { pageIndex: 1, pageSize: BITBUCKET_CLOUD_PROJECTS_PAGESIZE },
+    repositories: [mockBitbucketCloudRepository({ slug: 'slug-test' })]
+  });
+  await wrapper.instance().handleImport('slug-test');
+  expect(importBitbucketCloudRepository).toHaveBeenCalledWith('key', 'slug-test');
+  expect(onProjectCreate).not.toHaveBeenCalled();
+});
+
 function shallowRender(props?: Partial<BitbucketCloudProjectCreate['props']>) {
   return shallow<BitbucketCloudProjectCreate>(
     <BitbucketCloudProjectCreate
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreateRender-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreateRender-test.tsx
index 3b07789e6e5..6066505aa04 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreateRender-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudProjectCreateRender-test.tsx
@@ -38,6 +38,7 @@ it('Should render correctly', () => {
 function shallowRender(props?: Partial<BitbucketCloudProjectCreateRendererProps>) {
   return shallow(
     <BitbucketCloudProjectCreateRenderer
+      onImport={jest.fn()}
       isLastPage={true}
       loading={false}
       loadingMore={false}
@@ -46,7 +47,7 @@ function shallowRender(props?: Partial<BitbucketCloudProjectCreateRendererProps>
       onSearch={jest.fn()}
       resetPat={false}
       searching={false}
-      searchQuery={''}
+      searchQuery=""
       settings={mockBitbucketCloudAlmSettingsInstance()}
       showPersonalAccessTokenForm={false}
       {...props}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudSearchForm-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudSearchForm-test.tsx
index 440b7e2ebf7..d9cf4e412e5 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudSearchForm-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/BitbucketCloudSearchForm-test.tsx
@@ -55,16 +55,27 @@ it('Should render correctly', () => {
       searching: true
     })
   ).toMatchSnapshot('Searching');
+  expect(
+    shallowRender({
+      importingSlug: 'import-slug',
+      repositories: [
+        mockBitbucketCloudRepository({ slug: 'import-slug' }),
+        mockBitbucketCloudRepository({ sqProjectKey: 'sq-key' })
+      ],
+      isLastPage: false
+    })
+  ).toMatchSnapshot('Importing');
 });
 
 function shallowRender(props?: Partial<BitbucketCloudSearchFormProps>) {
   return shallow(
     <BitbucketCloudSearchForm
+      onImport={jest.fn()}
       isLastPage={true}
       loadingMore={false}
       onLoadMore={jest.fn()}
       onSearch={jest.fn()}
-      searchQuery={''}
+      searchQuery=""
       searching={false}
       {...props}
     />
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreate-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreate-test.tsx.snap
index 077424a7a23..8861fde1541 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreate-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreate-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Should render correctly 1`] = `
   isLastPage={true}
   loading={false}
   loadingMore={false}
+  onImport={[Function]}
   onLoadMore={[Function]}
   onPersonalAccessTokenCreated={[Function]}
   onSearch={[Function]}
@@ -23,6 +24,7 @@ exports[`Should render correctly: Setting changeds 1`] = `
   isLastPage={true}
   loading={false}
   loadingMore={false}
+  onImport={[Function]}
   onLoadMore={[Function]}
   onPersonalAccessTokenCreated={[Function]}
   onSearch={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreateRender-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreateRender-test.tsx.snap
index 0cdda04f673..eb413b12cc6 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreateRender-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudProjectCreateRender-test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Should render correctly 1`] = `
   <BitbucketCloudSearchForm
     isLastPage={true}
     loadingMore={false}
+    onImport={[MockFunction]}
     onLoadMore={[MockFunction]}
     onSearch={[MockFunction]}
     searchQuery=""
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudSearchForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudSearchForm-test.tsx.snap
index 6c8f6d8e56f..43ddbc5784b 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudSearchForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/BitbucketCloudSearchForm-test.tsx.snap
@@ -31,6 +31,157 @@ exports[`Should render correctly 1`] = `
 </Alert>
 `;
 
+exports[`Should render correctly: Importing 1`] = `
+<div
+  className="boxed-group big-padded create-project-import"
+>
+  <SearchBox
+    className="spacer"
+    loading={false}
+    minLength={3}
+    onChange={[MockFunction]}
+    placeholder="onboarding.create_project.search_prompt"
+  />
+  <hr />
+  <table
+    className="data zebra zebra-hover"
+  >
+    <tbody>
+      <tr
+        key="1"
+      >
+        <td>
+          <Tooltip
+            overlay="import-slug"
+          >
+            <strong
+              className="project-name display-inline-block text-ellipsis"
+            >
+              Repo
+            </strong>
+          </Tooltip>
+          <br />
+          <Tooltip
+            overlay="import-slug"
+          >
+            <span
+              className="text-muted project-path display-inline-block text-ellipsis"
+            >
+              import-slug
+            </span>
+          </Tooltip>
+        </td>
+        <td>
+          <a
+            className="display-inline-flex-center big-spacer-right"
+            href="https://bitbucket.org/worksapce/import-slug"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <DetachIcon
+              className="little-spacer-right"
+            />
+            onboarding.create_project.bitbucketcloud.link
+          </a>
+        </td>
+        <td
+          className="text-right"
+        >
+          <Button
+            disabled={true}
+            onClick={[Function]}
+          >
+            onboarding.create_project.set_up
+            <DeferredSpinner
+              className="spacer-left"
+            />
+          </Button>
+        </td>
+      </tr>
+      <tr
+        key="1"
+      >
+        <td>
+          <Tooltip
+            overlay="project__repo"
+          >
+            <strong
+              className="project-name display-inline-block text-ellipsis"
+            >
+              <Link
+                onlyActiveOnIndex={false}
+                style={Object {}}
+                to={
+                  Object {
+                    "pathname": "/dashboard",
+                    "query": Object {
+                      "branch": undefined,
+                      "id": "sq-key",
+                    },
+                  }
+                }
+              >
+                <QualifierIcon
+                  className="spacer-right"
+                  qualifier="TRK"
+                />
+                sq-key
+              </Link>
+            </strong>
+          </Tooltip>
+          <br />
+          <Tooltip
+            overlay="project__repo"
+          >
+            <span
+              className="text-muted project-path display-inline-block text-ellipsis"
+            >
+              project__repo
+            </span>
+          </Tooltip>
+        </td>
+        <td>
+          <a
+            className="display-inline-flex-center big-spacer-right"
+            href="https://bitbucket.org/worksapce/project__repo"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <DetachIcon
+              className="little-spacer-right"
+            />
+            onboarding.create_project.bitbucketcloud.link
+          </a>
+        </td>
+        <td>
+          <span
+            className="display-flex-center display-flex-justify-end already-set-up"
+          >
+            <CheckIcon
+              className="little-spacer-right"
+              size={12}
+            />
+            onboarding.create_project.repository_imported
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <footer
+    className="spacer-top note text-center"
+  >
+    <Button
+      className="spacer-left"
+      data-test="show-more"
+      disabled={false}
+      onClick={[MockFunction]}
+    >
+      show_more
+    </Button>
+  </footer>
+</div>
+`;
+
 exports[`Should render correctly: Loading more 1`] = `
 <div
   className="boxed-group big-padded create-project-import"
@@ -74,7 +225,7 @@ exports[`Should render correctly: Loading more 1`] = `
         <td>
           <a
             className="display-inline-flex-center big-spacer-right"
-            href="https://bitbucket.org/undefined/project__repo"
+            href="https://bitbucket.org/worksapce/project__repo"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -88,6 +239,7 @@ exports[`Should render correctly: Loading more 1`] = `
           className="text-right"
         >
           <Button
+            disabled={false}
             onClick={[Function]}
           >
             onboarding.create_project.set_up
@@ -99,7 +251,6 @@ exports[`Should render correctly: Loading more 1`] = `
   <footer
     className="spacer-top note text-center"
   >
-    x_of_y_shown.1.unknown
     <Button
       className="spacer-left"
       data-test="show-more"
@@ -135,7 +286,6 @@ exports[`Should render correctly: Searching 1`] = `
   <footer
     className="spacer-top note text-center"
   >
-    x_of_y_shown.0.unknown
     <Button
       className="spacer-left"
       data-test="show-more"
@@ -191,7 +341,7 @@ exports[`Should render correctly: Show more 1`] = `
         <td>
           <a
             className="display-inline-flex-center big-spacer-right"
-            href="https://bitbucket.org/undefined/project__repo"
+            href="https://bitbucket.org/worksapce/project__repo"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -205,6 +355,7 @@ exports[`Should render correctly: Show more 1`] = `
           className="text-right"
         >
           <Button
+            disabled={false}
             onClick={[Function]}
           >
             onboarding.create_project.set_up
@@ -256,7 +407,7 @@ exports[`Should render correctly: Show more 1`] = `
         <td>
           <a
             className="display-inline-flex-center big-spacer-right"
-            href="https://bitbucket.org/undefined/project__repo"
+            href="https://bitbucket.org/worksapce/project__repo"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -283,7 +434,6 @@ exports[`Should render correctly: Show more 1`] = `
   <footer
     className="spacer-top note text-center"
   >
-    x_of_y_shown.2.unknown
     <Button
       className="spacer-left"
       data-test="show-more"
@@ -339,7 +489,7 @@ exports[`Should render correctly: Show no more 1`] = `
         <td>
           <a
             className="display-inline-flex-center big-spacer-right"
-            href="https://bitbucket.org/undefined/project__repo"
+            href="https://bitbucket.org/worksapce/project__repo"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -353,6 +503,7 @@ exports[`Should render correctly: Show no more 1`] = `
           className="text-right"
         >
           <Button
+            disabled={false}
             onClick={[Function]}
           >
             onboarding.create_project.set_up
-- 
2.39.5