Fixes #24480 - fix org switching on subs page

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subscriptions page should render select org page 1`] = `
+<CheckOrg>
+  <Header
+    title="Select Organization"
+  >
+    <HelmetWrapper
+      defer={true}
+      encodeSpecialCharacters={true}
+    >
+      <SideEffect(NullComponent)
+        defer={true}
+        encodeSpecialCharacters={true}
+        title="Select Organization"
+        titleAttributes={Object {}}
+      >
+        <NullComponent
+          defer={true}
+          encodeSpecialCharacters={true}
+          title="Select Organization"
+          titleAttributes={Object {}}
+        />
+      </SideEffect(NullComponent)>
+    </HelmetWrapper>
+  </Header>
+  <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,41 +1,62 @@
 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';
 import Header from '../../containers/Application/Headers';
 
 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 (
           <React.Fragment>
             <Header title={__('Select Organization')} />
             <SetOrganization redirectPath={redirectPath} />
-          </React.Fragment>
-        );
+          </React.Fragment>);
       }
       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/containers/Application/Routes.js

@@ -1,22 +1,11 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { links } from './config';
-import Header from './Headers';
 
 export default () => (
   <div>
-    {links.map(({ path, component, text }) => {
-      const Page = component;
-      const withHeader = () => (
-        <React.Fragment>
-          <Header title={text} />
-          <Page />
-        </React.Fragment>
-      );
-
-      return (
-        <Route exact key={path} path={`/${path}`} component={withHeader} />
-      );
-    })}
+    {links.map(({ path, component }) => (
+      <Route exact key={path} path={`/${path}`} component={component} />
+      ))}
   </div>
 );

webpack/containers/Application/config.js

@@ -4,32 +4,34 @@ import UpstreamSubscriptions from '../../scenes/Subscriptions/UpstreamSubscripti
 import SubscriptionDetails from '../../scenes/Subscriptions/Details';
 import SetOrganization from '../../components/SelectOrg/SetOrganization';
 import WithOrganization from '../../components/WithOrganization/withOrganization';
+import withHeader from './withHeaders';
 
 // eslint-disable-next-line import/prefer-default-export
 export const links = [
   {
-    text: __('RH Repos'),
     path: 'redhat_repositories',
-    component: WithOrganization(Repos, '/redhat_repositories'),
+    component: WithOrganization(
+      withHeader(Repos, { title: __('RH Repos') }),
+      '/redhat_repositories',
+    ),
   },
   {
-    text: __('RH Subscriptions'),
     path: 'subscriptions',
-    component: WithOrganization(Subscriptions, '/subscriptions'),
+    component: WithOrganization(
+      withHeader(Subscriptions, { title: __('RH Subscriptions') }),
+      '/subscriptions',
+    ),
   },
   {
-    text: __('Add Subscriptions'),
     path: 'subscriptions/add',
-    component: UpstreamSubscriptions,
+    component: withHeader(UpstreamSubscriptions, { title: __('Add Subscriptions') }),
   },
   {
-    text: __('Subscription Details'),
     // eslint-disable-next-line no-useless-escape
-    path: 'subscriptions/:id(\[0-9]*$\)',
-    component: SubscriptionDetails,
+    path: 'subscriptions/:id([0-9]*$)',
+    component: withHeader(SubscriptionDetails, { title: __('Subscription Details') }),
   },
   {
-    text: __('Select Organization'),
     path: 'organization_select',
     component: SetOrganization,
   },

webpack/containers/Application/withHeaders.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from '../Application/Headers';
+
+function withHeader(WrappedComponent, tags) {
+  const Headers = props => (
+    <React.Fragment>
+      <Header {...tags} />
+      <WrappedComponent {...props} />
+    </React.Fragment>
+  );
+
+  return Headers;
+}
+
+export default withHeader;