SONAR-10994 Connect BranchStatus component to new branch store

8 files changed, 43 insertions, 25 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
index f05afbd4bfe..8455831806e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranchesMenuItem.tsx
@@ -69,7 +69,7 @@ export default function ComponentNavBranchesMenuItem({ branchLike, ...props }: P
           )}
         </div>
         <div className="big-spacer-left note">
-          <BranchStatus branchLike={branchLike} />
+          <BranchStatus branchLike={branchLike} component={props.component.key} />
         </div>
       </Link>
     </li>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
index 9eb4704aa43..f72338ef2e8 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNavMeta.tsx
@@ -95,7 +95,7 @@ export function ComponentNavMeta({ branchLike, component, currentUser, warnings
                 <DetachIcon className="little-spacer-left" size={12} />
               </a>
             )}
-          <BranchStatus branchLike={branchLike} />
+          <BranchStatus branchLike={branchLike} component={component.key} />
         </div>
       )}
     </div>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
index 3d0620b4377..04c1bf0c791 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavBranchesMenuItem-test.tsx.snap
@@ -42,13 +42,14 @@ exports[`renders main branch 1`] = `
     <div
       className="big-spacer-left note"
     >
-      <BranchStatus
+      <Connect(BranchStatus)
         branchLike={
           Object {
             "isMain": true,
             "name": "master",
           }
         }
+        component="component"
       />
     </div>
   </Link>
@@ -97,7 +98,7 @@ exports[`renders short-living branch 1`] = `
     <div
       className="big-spacer-left note"
     >
-      <BranchStatus
+      <Connect(BranchStatus)
         branchLike={
           Object {
             "isMain": false,
@@ -109,6 +110,7 @@ exports[`renders short-living branch 1`] = `
             "type": "SHORT",
           }
         }
+        component="component"
       />
     </div>
   </Link>
@@ -158,7 +160,7 @@ exports[`renders short-living orhpan branch 1`] = `
     <div
       className="big-spacer-left note"
     >
-      <BranchStatus
+      <Connect(BranchStatus)
         branchLike={
           Object {
             "isMain": false,
@@ -171,6 +173,7 @@ exports[`renders short-living orhpan branch 1`] = `
             "type": "SHORT",
           }
         }
+        component="component"
       />
     </div>
   </Link>
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
index efe7cceabd8..fdd4a833114 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/__tests__/__snapshots__/ComponentNavMeta-test.tsx.snap
@@ -52,7 +52,7 @@ exports[`renders meta for pull request 1`] = `
         size={12}
       />
     </a>
-    <BranchStatus
+    <Connect(BranchStatus)
       branchLike={
         Object {
           "analysisDate": "2018-01-01",
@@ -63,6 +63,7 @@ exports[`renders meta for pull request 1`] = `
           "url": "https://example.com/pull/1234",
         }
       }
+      component="my-project"
     />
   </div>
 </div>
@@ -82,7 +83,7 @@ exports[`renders status of short-living branch 1`] = `
   <div
     className="navbar-context-meta-secondary display-inline-flex-center"
   >
-    <BranchStatus
+    <Connect(BranchStatus)
       branchLike={
         Object {
           "analysisDate": "2018-01-01",
@@ -92,6 +93,7 @@ exports[`renders status of short-living branch 1`] = `
           "type": "SHORT",
         }
       }
+      component="my-project"
     />
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
index 0bdf8ee4576..60011b07ab1 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/BranchRow.tsx
@@ -157,7 +157,7 @@ export default class BranchRow extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { branchLike, isOrphan } = this.props;
+    const { branchLike, component, isOrphan } = this.props;
     const indented = (isShortLivingBranch(branchLike) || isPullRequest(branchLike)) && !isOrphan;
 
     return (
@@ -173,7 +173,7 @@ export default class BranchRow extends React.PureComponent<Props, State> {
           )}
         </td>
         <td className="thin nowrap">
-          <BranchStatus branchLike={branchLike} />
+          <BranchStatus branchLike={branchLike} component={component} />
         </td>
         <td className="thin nowrap text-right big-spacer-left">
           {branchLike.analysisDate && <DateFromNow date={branchLike.analysisDate} />}
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
index cc9f9c8b924..1a2b636607c 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/BranchRow-test.tsx.snap
@@ -22,13 +22,14 @@ exports[`renders main branch 1`] = `
   <td
     className="thin nowrap"
   >
-    <BranchStatus
+    <Connect(BranchStatus)
       branchLike={
         Object {
           "isMain": true,
           "name": "master",
         }
       }
+      component="foo"
     />
   </td>
   <td
@@ -70,7 +71,7 @@ exports[`renders pull request 1`] = `
   <td
     className="thin nowrap"
   >
-    <BranchStatus
+    <Connect(BranchStatus)
       branchLike={
         Object {
           "base": "master",
@@ -79,6 +80,7 @@ exports[`renders pull request 1`] = `
           "title": "Feature PR",
         }
       }
+      component="foo"
     />
   </td>
   <td
@@ -122,7 +124,7 @@ exports[`renders short-living branch 1`] = `
   <td
     className="thin nowrap"
   >
-    <BranchStatus
+    <Connect(BranchStatus)
       branchLike={
         Object {
           "analysisDate": "2017-09-27T00:05:19+0000",
@@ -132,6 +134,7 @@ exports[`renders short-living branch 1`] = `
           "type": "SHORT",
         }
       }
+      component="foo"
     />
   </td>
   <td
diff --git a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
index e0f712a68a7..61cb36b02f6 100644
--- a/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
+++ b/server/sonar-web/src/main/js/components/common/BranchStatus.tsx
@@ -18,16 +18,27 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { connect } from 'react-redux';
 import Level from '../ui/Level';
+import { Store, getBranchStatusByBranchLike } from '../../store/rootReducer';
 
 interface Props {
   branchLike: T.BranchLike;
+  component: string;
+  status?: string;
 }
 
-export default function BranchStatus({ branchLike }: Props) {
-  if (!branchLike.status) {
+export function BranchStatus({ status }: Props) {
+  if (!status) {
     return null;
   }
 
-  return <Level level={branchLike.status.qualityGateStatus} small={true} />;
+  return <Level level={status} small={true} />;
 }
+
+const mapStateToProps = (state: Store, { branchLike, component }: Props) => {
+  const status = getBranchStatusByBranchLike(state, component, branchLike);
+  return { status };
+};
+
+export default connect(mapStateToProps)(BranchStatus);
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
index c09200b9880..345a6ec8ae9 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/BranchStatus-test.tsx
@@ -19,18 +19,17 @@
  */
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import BranchStatus from '../BranchStatus';
+import { BranchStatus } from '../BranchStatus';
+import { mockLongLivingBranch } from '../../../helpers/testMocks';
 
 it('should render correctly', () => {
-  const branch: T.MainBranch = { isMain: true, name: 'foo' };
-  expect(getWrapper(branch).type()).toBeNull();
-  expect(getWrapper(branch, 'OK')).toMatchSnapshot();
-  expect(getWrapper(branch, 'ERROR')).toMatchSnapshot();
+  expect(shallowRender().type()).toBeNull();
+  expect(shallowRender('OK')).toMatchSnapshot();
+  expect(shallowRender('ERROR')).toMatchSnapshot();
 });
 
-function getWrapper(branch: T.MainBranch, qualityGateStatus?: string) {
-  if (qualityGateStatus) {
-    branch.status = { qualityGateStatus };
-  }
-  return shallow(<BranchStatus branchLike={branch} />);
+function shallowRender(status?: string) {
+  return shallow(
+    <BranchStatus branchLike={mockLongLivingBranch()} component="foo" status={status} />
+  );
 }