Fixes #24480 - fix org switching on subs page

package.json

@@ -31,8 +31,8 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme": "^3.4.0",
+    "enzyme-adapter-react-16.3": "^1.0.0",
     "enzyme-to-json": "^3.1.2",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.0.0",
@@ -59,10 +59,10 @@
     "patternfly": "^3.41.1",
     "patternfly-react": "^2.5.1",
     "prop-types": "^15.6.0",
-    "react": "^16.3.1",
+    "react": "~16.3.1",
     "react-bootstrap": "^0.32.1",
     "react-bootstrap-tooltip-button": "^1.0.6",
-    "react-dom": "^16.3.1",
+    "react-dom": "~16.3.1",
     "react-ellipsis-with-tooltip": "^1.0.7",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",

webpack/components/WithOrganization/__snapshots__/withOrganization.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subscriptions page should render select org page 1`] = `
+<CheckOrg>
+  <Connect(withRouter(SetOrganization))
+    redirectPath="/test"
+  />
+</CheckOrg>
+`;
+
+exports[`subscriptions page should render the wrapped component 1`] = `
+<CheckOrg>
+  <WrappedComponent>
+    <div>
+       Wrapped! 
+    </div>
+  </WrappedComponent>
+</CheckOrg>
+`;

webpack/components/WithOrganization/withOrganization.js

@@ -1,35 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { orgId } from '../../services/api';
+import { get } from 'lodash';
 import SetOrganization from '../SelectOrg/SetOrganization';
 import titleWithCaret from '../../helpers/caret';
 
 function withOrganization(WrappedComponent, redirectPath) {
   class CheckOrg extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { orgId: null };
+    }
+    static getDerivedStateFromProps(newProps, state) {
+      const orgNodeId = document.getElementById('organization-id').dataset.id;
+
+      if (state.orgId !== orgNodeId) {
+        return { orgId: orgNodeId };
+      }
+      return null;
+    }
+
     componentDidUpdate(prevProps) {
       const { location } = this.props;
 
       // TODO: use topbar react component
-      const orgTitle = location.state && location.state.orgChanged;
-      const prevOrgTitle = prevProps.location.state && prevProps.location.state.orgChanged;
+      const orgTitle = get(location, 'state.orgChanged');
+      const prevOrgTitle = get(prevProps, 'location.state.orgChanged');
 
       if (orgTitle !== prevOrgTitle) {
-        document.getElementById('organization-dropdown').children[0].innerHTML = titleWithCaret(orgTitle);
+        document.getElementById('organization-dropdown')
+          .children[0].innerHTML = titleWithCaret(orgTitle);
       }
     }
 
     render() {
-      if (!orgId()) {
+      const { location } = this.props;
+      const newOrgSelected = get(location, 'state.orgChanged');
+
+      if (newOrgSelected) {
+        return <WrappedComponent {...this.props} />;
+      } else if (this.state.orgId === '') {
         return <SetOrganization redirectPath={redirectPath} />;
       }
       return <WrappedComponent {...this.props} />;
     }
   }
 
   CheckOrg.propTypes = {
-    location: PropTypes.shape({}).isRequired,
+    location: PropTypes.shape({})
   };
 
+  CheckOrg.defaultProps = {
+    location: undefined
+  };
   return CheckOrg;
 }
 

webpack/components/WithOrganization/withOrganization.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import withOrganization from './withOrganization';
+
+jest.mock('../SelectOrg/SetOrganization');
+jest.mock('../../helpers/caret');
+
+describe('subscriptions page', () => {
+  const WrappedComponent = () => <div> Wrapped! </div>;
+
+  it('should render the wrapped component', () => {
+    global.document.getElementById = () => ({ dataset: { id: 1 } });
+
+    const Component = withOrganization(WrappedComponent, '/test');
+    const page = mount(<Component />);
+    expect(toJson(page)).toMatchSnapshot();
+  });
+
+  it('should render select org page', () => {
+    global.document.getElementById = () => ({ dataset: { id: '' } });
+
+    const Component = withOrganization(WrappedComponent, '/test');
+    const page = mount(<Component />);
+    expect(toJson(page)).toMatchSnapshot();
+  });
+});

webpack/test_setup.js

@@ -2,7 +2,7 @@
 // See http://airbnb.io/enzyme/docs/installation/react-16.html
 import 'babel-polyfill';
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-16.3';
 import * as Services from './services/api';
 
 configure({ adapter: new Adapter() });