Lift config context one level higher.

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

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,28 +42,27 @@ 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 }) => (
-          <AboutModal
-            isOpen={isOpen}
-            onClose={this.handleModalToggle}
-            productName="Ansible Tower"
-            trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
-            brandImageSrc={brandImg}
-            brandImageAlt={i18n._(t`Brand Image`)}
-            logoImageSrc={logoImg}
-            logoImageAlt={i18n._(t`AboutModal Logo`)}
-            heroImageSrc={heroImg}
-          >
-            <pre>
-              { this.createSpeechBubble(version) }
-              {`
+          <ConfigContext.Consumer>
+            {({ ansible_version, version }) =>
+              <AboutModal
+                isOpen={isOpen}
+                onClose={this.handleModalToggle}
+                productName="Ansible Tower"
+                trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
+                brandImageSrc={brandImg}
+                brandImageAlt={i18n._(t`Brand Image`)}
+                logoImageSrc={logoImg}
+                logoImageAlt={i18n._(t`AboutModal Logo`)}
+                heroImageSrc={heroImg}
+              >
+                <pre>
+                  {this.createSpeechBubble(version)}
+                  {`
               \\
               \\  ^__^
                   (oo)\\_______
@@ -92,22 +70,28 @@ class About extends React.Component {
                       ||----w |
                       ||     ||
                         `}
-            </pre>
+                </pre>
 
-            <TextContent>
-              <TextList component="dl">
-                <TextListItem component="dt">
-                  <Trans>Ansible Version</Trans>
-                </TextListItem>
-                <TextListItem component="dd">{ ansible_version }</TextListItem>
-              </TextList>
-            </TextContent>
-            { error ? <div>error</div> : ''}
-          </AboutModal>
+                <TextContent>
+                  <TextList component="dl">
+                    <TextListItem component="dt">
+                      <Trans>Ansible Version</Trans>
+                    </TextListItem>
+                    <TextListItem component="dd">{ansible_version}</TextListItem>
+                  </TextList>
+                </TextContent>
+              </AboutModal>
+            }
+          </ConfigContext.Consumer>
         )}
       </I18n>
     );
   }
 }
 
+About.contextTypes = {
+  ansible_version: PropTypes.string,
+  version: PropTypes.string,
+};
+
 export default About;