SONAR-11618 Update projects select list to also display the project key

diff --git a/server/sonar-web/src/main/js/api/quality-gates.ts b/server/sonar-web/src/main/js/api/quality-gates.ts
index 3ff4f18628466de7e07e8d4f336980860f906d87..b881adfefd65791b08349acd142043d2e33bcc65 100644 (file)
--- a/server/sonar-web/src/main/js/api/quality-gates.ts
+++ b/server/sonar-web/src/main/js/api/quality-gates.ts
@@ -113,7 +113,10 @@ export function searchProjects(data: {
   pageSize?: number;
   query?: string;
   selected?: string;
-}): Promise<{ paging: T.Paging; results: Array<{ id: string; name: string; selected: boolean }> }> {
+}): Promise<{
+  paging: T.Paging;
+  results: Array<{ id: string; key: string; name: string; selected: boolean }>;
+}> {
   return getJSON('/api/qualitygates/search', data).catch(throwGlobalError);
 }
 

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Projects.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Projects.tsx
index 70c83e01b1542bae7ee88f8cf562c1415ba7fa6a..f1bd32dd9e94565269da1879248a1dcc08458e55 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/Projects.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Projects.tsx
@@ -45,7 +45,7 @@ export interface SearchParams {
 interface State {
   lastSearchParams: SearchParams;
   listHasBeenTouched: boolean;
-  projects: Array<{ id: string; name: string; selected: boolean }>;
+  projects: Array<{ id: string; key: string; name: string; selected: boolean }>;
   projectsTotalCount?: number;
   selectedProjects: string[];
 }
@@ -161,7 +161,19 @@ export default class Projects extends React.PureComponent<Props, State> {
 
   renderElement = (id: string): React.ReactNode => {
     const project = find(this.state.projects, { id });
-    return project === undefined ? id : project.name;
+    return (
+      <div className="select-list-list-item">
+        {project === undefined ? (
+          id
+        ) : (
+          <>
+            {project.name}
+            <br />
+            <span className="note">{project.key}</span>
+          </>
+        )}
+      </div>
+    );
   };
 
   render() {

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Projects-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Projects-test.tsx
index fbf453f9302845f1227e17ba1178718d8833c3b2..555c8859ede7f2b6c1e991a23f4ca686ea4a41d8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Projects-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/Projects-test.tsx
@@ -33,9 +33,9 @@ jest.mock('../../../../api/quality-gates', () => ({
   searchProjects: jest.fn().mockResolvedValue({
     paging: { pageIndex: 1, pageSize: 3, total: 55 },
     results: [
-      { id: 'test1', name: 'test1', selected: false },
-      { id: 'test2', name: 'test2', selected: false },
-      { id: 'test3', name: 'test3', selected: true }
+      { id: 'test1', key: 'test1', name: 'test1', selected: false },
+      { id: 'test2', key: 'test2', name: 'test2', selected: false },
+      { id: 'test3', key: 'test3', name: 'test3', selected: true }
     ]
   }),
   associateGateWithProject: jest.fn().mockResolvedValue({}),
@@ -49,8 +49,11 @@ beforeEach(() => {
 it('should render correctly', async () => {
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
+  expect(wrapper.instance().mounted).toBe(true);
 
   expect(wrapper).toMatchSnapshot();
+  expect(wrapper.instance().renderElement('test1')).toMatchSnapshot();
+  expect(wrapper.instance().renderElement('test_foo')).toMatchSnapshot();
   expect(searchProjects).toHaveBeenCalledWith(
     expect.objectContaining({
       page: 1
@@ -62,6 +65,9 @@ it('should render correctly', async () => {
 
   wrapper.setState({ lastSearchParams: { selected: Filter.All } as SearchParams });
   expect(wrapper.find(SelectList).props().needReload).toBe(false);
+
+  wrapper.instance().componentWillUnmount();
+  expect(wrapper.instance().mounted).toBe(false);
 });
 
 it('should handle reload properly', async () => {

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Projects-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Projects-test.tsx.snap
index dadf536e8178a75bfe53743a9e424554984c4d0b..804961561e4d48653585907ed08b2cbaca942446 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Projects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/Projects-test.tsx.snap
@@ -28,3 +28,27 @@ exports[`should render correctly 1`] = `
   }
 />
 `;
+
+exports[`should render correctly 2`] = `
+<div
+  className="select-list-list-item"
+>
+  <React.Fragment>
+    test1
+    <br />
+    <span
+      className="note"
+    >
+      test1
+    </span>
+  </React.Fragment>
+</div>
+`;
+
+exports[`should render correctly 3`] = `
+<div
+  className="select-list-list-item"
+>
+  test_foo
+</div>
+`;

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
index 6b5b1c99a01827eee7387628b32b661199cc5cc2..ed132d1bd467894e72a840c12faacce2080ec325 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
@@ -163,7 +163,19 @@ export default class ChangeProjectsForm extends React.PureComponent<Props, State
 
   renderElement = (key: string): React.ReactNode => {
     const project = find(this.state.projects, { key });
-    return project === undefined ? key : project.name;
+    return (
+      <div className="select-list-list-item">
+        {project === undefined ? (
+          key
+        ) : (
+          <>
+            {project.name}
+            <br />
+            <span className="note">{project.key}</span>
+          </>
+        )}
+      </div>
+    );
   };
 
   render() {

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ChangeProjectsForm-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ChangeProjectsForm-test.tsx
index ddf9f871a2bbe2450ad0a8e487578248342d1b0f..19256e1d4d612ec40725649f459af5d5b3a4de23 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ChangeProjectsForm-test.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ChangeProjectsForm-test.tsx
@@ -50,8 +50,11 @@ beforeEach(() => {
 it('should render correctly', async () => {
   const wrapper = shallowRender();
   await waitAndUpdate(wrapper);
+  expect(wrapper.instance().mounted).toBe(true);
 
   expect(wrapper).toMatchSnapshot();
+  expect(wrapper.instance().renderElement('test1')).toMatchSnapshot();
+  expect(wrapper.instance().renderElement('test_foo')).toMatchSnapshot();
   expect(getProfileProjects).toHaveBeenCalled();
 
   wrapper.setState({ listHasBeenTouched: true });
@@ -59,6 +62,9 @@ it('should render correctly', async () => {
 
   wrapper.setState({ lastSearchParams: { selected: Filter.All } as SearchParams });
   expect(wrapper.find(SelectList).props().needReload).toBe(false);
+
+  wrapper.instance().componentWillUnmount();
+  expect(wrapper.instance().mounted).toBe(false);
 });
 
 it('should handle reload properly', async () => {

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
index 19dc259895fa9b25f7e5dcd1ac7057691567ca80..c67712805f87245b65b578cef18ac97f226e7c70 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/__snapshots__/ChangeProjectsForm-test.tsx.snap
@@ -55,3 +55,27 @@ exports[`should render correctly 1`] = `
   </div>
 </Modal>
 `;
+
+exports[`should render correctly 2`] = `
+<div
+  className="select-list-list-item"
+>
+  <React.Fragment>
+    test1
+    <br />
+    <span
+      className="note"
+    >
+      test1
+    </span>
+  </React.Fragment>
+</div>
+`;
+
+exports[`should render correctly 3`] = `
+<div
+  className="select-list-list-item"
+>
+  test_foo
+</div>
+`;