Lift config context one level higher.

- Refactor About component to use config context.
- Update About component unit tests.

__tests__/components/About.test.jsx

@@ -31,26 +31,4 @@ describe('<About />', () => {
     expect(onAboutModalClose).toBeCalled();
     aboutWrapper.unmount();
   });
-
-  test('sets error on api request failure', async () => {
-    api.get = jest.fn().mockImplementation(() => {
-      const err = new Error('404 error');
-      err.response = { status: 404, message: 'problem' };
-      return Promise.reject(err);
-    });
-    aboutWrapper = mount(
-      <I18nProvider>
-        <About isOpen />
-      </I18nProvider>
-    );
-
-    const aboutComponentInstance = aboutWrapper.find(About).instance();
-    await aboutComponentInstance.componentDidMount();
-    expect(aboutComponentInstance.state.error.response.status).toBe(404);
-    aboutWrapper.unmount();
-  });
-
-  test('API Config endpoint is valid', () => {
-    expect(API_CONFIG).toBeDefined();
-  });
 });

src/App.jsx

@@ -137,6 +137,7 @@ class App extends React.Component {
               [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
             }}
           />
+          <ConfigContext.Provider value={config}>
             <Switch>
               <ConditionalRedirect
                 shouldRedirect={() => api.isAuthenticated()}
@@ -233,9 +234,7 @@ class App extends React.Component {
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/projects" component={Projects} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventories" component={Inventories} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/inventory_scripts" component={InventoryScripts} />
-                <ConfigContext.Provider value={config}>
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/organizations" component={Organizations} />
-                </ConfigContext.Provider>
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/users" component={Users} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/teams" component={Teams} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/credential_types" component={CredentialTypes} />
@@ -248,9 +247,11 @@ class App extends React.Component {
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} />
                   <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} />
+
                 </Page>
               </Fragment>
             </Switch>
+          </ConfigContext.Provider>
         </Fragment>
       </I18nProvider>
     );

src/components/About.jsx

@@ -5,42 +5,21 @@ import {
   AboutModal,
   TextContent,
   TextList,
-  TextListItem } from '@patternfly/react-core';
+  TextListItem
+} from '@patternfly/react-core';
 
 import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
 import brandImg from '../../images/tower-logo-white.svg';
 import logoImg from '../../images/tower-logo-login.svg';
 
-import api from '../api';
-import { API_CONFIG } from '../endpoints';
-
+import { ConfigContext } from '../context';
+import PropTypes from 'prop-types';
 class About extends React.Component {
-  unmounting = false;
 
-  constructor (props) {
+  constructor(props) {
     super(props);
-
-    this.state = {
-      config: {},
-      error: false
-    };
   }
 
-  async componentDidMount () {
-    try {
-      const { data } = await api.get(API_CONFIG);
-      this.safeSetState({ config: data });
-    } catch (error) {
-      this.safeSetState({ error });
-    }
-  }
-
-  componentWillUnmount () {
-    this.unmounting = true;
-  }
-
-  safeSetState = obj => !this.unmounting && this.setState(obj);
-
   createSpeechBubble = (version) => {
     let text = `Tower ${version}`;
     let top = '';
@@ -63,14 +42,13 @@ class About extends React.Component {
     onAboutModalClose();
   };
 
-  render () {
+  render() {
     const { isOpen } = this.props;
-    const { config = {}, error } = this.state;
-    const { ansible_version = 'loading', version = 'loading' } = config;
-
     return (
       <I18n>
         {({ i18n }) => (
+          <ConfigContext.Consumer>
+            {({ ansible_version, version }) =>
               <AboutModal
                 isOpen={isOpen}
                 onClose={this.handleModalToggle}
@@ -83,7 +61,7 @@ class About extends React.Component {
                 heroImageSrc={heroImg}
               >
                 <pre>
-              { this.createSpeechBubble(version) }
+                  {this.createSpeechBubble(version)}
                   {`
               \\
               \\  ^__^
@@ -99,15 +77,21 @@ class About extends React.Component {
                     <TextListItem component="dt">
                       <Trans>Ansible Version</Trans>
                     </TextListItem>
-                <TextListItem component="dd">{ ansible_version }</TextListItem>
+                    <TextListItem component="dd">{ansible_version}</TextListItem>
                   </TextList>
                 </TextContent>
-            { error ? <div>error</div> : ''}
               </AboutModal>
+            }
+          </ConfigContext.Consumer>
         )}
       </I18n>
     );
   }
 }
 
+About.contextTypes = {
+  ansible_version: PropTypes.string,
+  version: PropTypes.string,
+};
+
 export default About;