From 3e08957f66e0ed39f936a5d23d245490d68ddeb3 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 18 Nov 2020 11:03:26 +0100
Subject: [PATCH] SONAR-14057 Mark Azure projects previously imported

---
 .../create/project/AzureProjectAccordion.tsx  |  47 +++++---
 .../__tests__/AzureProjectAccordion-test.tsx  |  26 ++++-
 .../AzureProjectAccordion-test.tsx.snap       | 100 +++++++++++++-----
 .../src/main/js/apps/create/project/style.css |   5 +
 .../src/main/js/types/alm-integration.ts      |   2 +
 5 files changed, 140 insertions(+), 40 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/create/project/AzureProjectAccordion.tsx b/server/sonar-web/src/main/js/apps/create/project/AzureProjectAccordion.tsx
index 87d2f5a1d8f..6205e32b1bb 100644
--- a/server/sonar-web/src/main/js/apps/create/project/AzureProjectAccordion.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/AzureProjectAccordion.tsx
@@ -24,9 +24,12 @@ import { Link } from 'react-router';
 import BoxedGroupAccordion from 'sonar-ui-common/components/controls/BoxedGroupAccordion';
 import ListFooter from 'sonar-ui-common/components/controls/ListFooter';
 import Radio from 'sonar-ui-common/components/controls/Radio';
+import CheckIcon from 'sonar-ui-common/components/icons/CheckIcon';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { colors } from '../../../app/theme';
+import { getProjectUrl } from '../../../helpers/urls';
 import { AzureProject, AzureRepository } from '../../../types/alm-integration';
 import { CreateProjectModes } from './types';
 
@@ -57,6 +60,9 @@ export default function AzureProjectAccordion(props: AzureProjectAccordionProps)
   const [page, setPage] = React.useState(1);
   const limitedRepositories = repositories.slice(0, page * PAGE_SIZE);
 
+  const isSelected = (repo: AzureRepository) =>
+    selectedRepository?.projectName === project.key && selectedRepository.name === repo.name;
+
   return (
     <BoxedGroupAccordion
       className={classNames('big-spacer-bottom', {
@@ -90,19 +96,36 @@ export default function AzureProjectAccordion(props: AzureProjectAccordionProps)
             <>
               <div className="display-flex-wrap">
                 {limitedRepositories.map(repo => (
-                  <Radio
-                    checked={selectedRepository?.name === repo.name}
-                    className={classNames(
-                      'display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden',
-                      importing && ['disabled', 'text-muted', 'link-no-underline']
+                  <div
+                    className="display-flex-start spacer-right spacer-bottom create-project-azdo-repo"
+                    key={repo.name}>
+                    {repo.sqProjectKey ? (
+                      <>
+                        <CheckIcon className="spacer-right" fill={colors.green} size={14} />
+                        <div className="overflow-hidden">
+                          <div className="little-spacer-bottom text-ellipsis">
+                            <strong title={repo.sqProjectName}>
+                              <Link to={getProjectUrl(repo.sqProjectKey)}>
+                                {repo.sqProjectName}
+                              </Link>
+                            </strong>
+                          </div>
+                          <em>{translate('onboarding.create_project.repository_imported')}</em>
+                        </div>
+                      </>
+                    ) : (
+                      <Radio
+                        checked={isSelected(repo)}
+                        className="overflow-hidden"
+                        disabled={importing}
+                        onCheck={() => props.onSelectRepository(repo)}
+                        value={repo.name}>
+                        <strong className="text-ellipsis" title={repo.name}>
+                          {repo.name}
+                        </strong>
+                      </Radio>
                     )}
-                    key={repo.name}
-                    onCheck={() => !importing && props.onSelectRepository(repo)}
-                    value={repo.name}>
-                    <strong className="text-ellipsis" title={repo.name}>
-                      {repo.name}
-                    </strong>
-                  </Radio>
+                  </div>
                 ))}
               </div>
               <ListFooter
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/AzureProjectAccordion-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/AzureProjectAccordion-test.tsx
index 394205a7852..61588b9fbf6 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/AzureProjectAccordion-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/AzureProjectAccordion-test.tsx
@@ -21,15 +21,22 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import BoxedGroupAccordion from 'sonar-ui-common/components/controls/BoxedGroupAccordion';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import { mockAzureProject, mockAzureRepository } from '../../../../helpers/mocks/alm-integrations';
+import { mockEvent } from '../../../../helpers/testMocks';
 import AzureProjectAccordion, { AzureProjectAccordionProps } from '../AzureProjectAccordion';
 
 it('should render correctly', () => {
   expect(shallowRender({ loading: true })).toMatchSnapshot('loading');
   expect(shallowRender({ startsOpen: false })).toMatchSnapshot('closed');
-  expect(shallowRender({ repositories: [mockAzureRepository()] })).toMatchSnapshot(
-    'with a repository'
-  );
+  expect(
+    shallowRender({
+      repositories: [
+        mockAzureRepository(),
+        mockAzureRepository({ sqProjectKey: 'sq-key', sqProjectName: 'SQ Name' })
+      ]
+    })
+  ).toMatchSnapshot('with repositories');
   expect(shallowRender({ importing: true, repositories: [mockAzureRepository()] })).toMatchSnapshot(
     'importing'
   );
@@ -95,6 +102,19 @@ it('should close when clicked', () => {
   ).toBe(false);
 });
 
+it('should trigger selection when repo is clicked', () => {
+  const onSelectRepository = jest.fn();
+  const repo = mockAzureRepository();
+  const wrapper = shallowRender({ onSelectRepository, repositories: [repo] });
+
+  wrapper
+    .find(Radio)
+    .props()
+    .onCheck(mockEvent());
+
+  expect(onSelectRepository).toBeCalledWith(repo);
+});
+
 function shallowRender(overrides: Partial<AzureProjectAccordionProps> = {}) {
   return shallow(
     <AzureProjectAccordion
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzureProjectAccordion-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzureProjectAccordion-test.tsx.snap
index 15116a710ba..5189109e856 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzureProjectAccordion-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/__snapshots__/AzureProjectAccordion-test.tsx.snap
@@ -30,20 +30,25 @@ exports[`should render correctly: importing 1`] = `
     <div
       className="display-flex-wrap"
     >
-      <Radio
-        checked={false}
-        className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled text-muted link-no-underline"
+      <div
+        className="display-flex-start spacer-right spacer-bottom create-project-azdo-repo"
         key="Azure repo 1"
-        onCheck={[Function]}
-        value="Azure repo 1"
       >
-        <strong
-          className="text-ellipsis"
-          title="Azure repo 1"
+        <Radio
+          checked={false}
+          className="overflow-hidden"
+          disabled={true}
+          onCheck={[Function]}
+          value="Azure repo 1"
         >
-          Azure repo 1
-        </strong>
-      </Radio>
+          <strong
+            className="text-ellipsis"
+            title="Azure repo 1"
+          >
+            Azure repo 1
+          </strong>
+        </Radio>
+      </div>
     </div>
     <ListFooter
       count={1}
@@ -80,7 +85,7 @@ exports[`should render correctly: loading 1`] = `
 </BoxedGroupAccordion>
 `;
 
-exports[`should render correctly: with a repository 1`] = `
+exports[`should render correctly: with repositories 1`] = `
 <BoxedGroupAccordion
   className="big-spacer-bottom open"
   onClick={[Function]}
@@ -97,25 +102,70 @@ exports[`should render correctly: with a repository 1`] = `
     <div
       className="display-flex-wrap"
     >
-      <Radio
-        checked={false}
-        className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden"
+      <div
+        className="display-flex-start spacer-right spacer-bottom create-project-azdo-repo"
         key="Azure repo 1"
-        onCheck={[Function]}
-        value="Azure repo 1"
       >
-        <strong
-          className="text-ellipsis"
-          title="Azure repo 1"
+        <Radio
+          checked={false}
+          className="overflow-hidden"
+          disabled={false}
+          onCheck={[Function]}
+          value="Azure repo 1"
         >
-          Azure repo 1
-        </strong>
-      </Radio>
+          <strong
+            className="text-ellipsis"
+            title="Azure repo 1"
+          >
+            Azure repo 1
+          </strong>
+        </Radio>
+      </div>
+      <div
+        className="display-flex-start spacer-right spacer-bottom create-project-azdo-repo"
+        key="Azure repo 1"
+      >
+        <CheckIcon
+          className="spacer-right"
+          fill="#00aa00"
+          size={14}
+        />
+        <div
+          className="overflow-hidden"
+        >
+          <div
+            className="little-spacer-bottom text-ellipsis"
+          >
+            <strong
+              title="SQ Name"
+            >
+              <Link
+                onlyActiveOnIndex={false}
+                style={Object {}}
+                to={
+                  Object {
+                    "pathname": "/dashboard",
+                    "query": Object {
+                      "branch": undefined,
+                      "id": "sq-key",
+                    },
+                  }
+                }
+              >
+                SQ Name
+              </Link>
+            </strong>
+          </div>
+          <em>
+            onboarding.create_project.repository_imported
+          </em>
+        </div>
+      </div>
     </div>
     <ListFooter
-      count={1}
+      count={2}
       loadMore={[Function]}
-      total={1}
+      total={2}
     />
   </DeferredSpinner>
 </BoxedGroupAccordion>
diff --git a/server/sonar-web/src/main/js/apps/create/project/style.css b/server/sonar-web/src/main/js/apps/create/project/style.css
index b02012dfe23..d2e9420fcbd 100644
--- a/server/sonar-web/src/main/js/apps/create/project/style.css
+++ b/server/sonar-web/src/main/js/apps/create/project/style.css
@@ -34,6 +34,11 @@
   justify-content: space-between;
 }
 
+.create-project-azdo-repo {
+  width: 250px;
+  min-height: 40px;
+}
+
 .create-project-import-bbs .open .boxed-group-header {
   border-bottom: 1px solid var(--barBorderColor);
 }
diff --git a/server/sonar-web/src/main/js/types/alm-integration.ts b/server/sonar-web/src/main/js/types/alm-integration.ts
index fca78f50149..603d3cbd71f 100644
--- a/server/sonar-web/src/main/js/types/alm-integration.ts
+++ b/server/sonar-web/src/main/js/types/alm-integration.ts
@@ -26,6 +26,8 @@ export interface AzureProject {
 export interface AzureRepository {
   name: string;
   projectName: string;
+  sqProjectKey?: string;
+  sqProjectName?: string;
 }
 
 export interface BitbucketProject {
-- 
2.39.5