katello 3.7.0 → 3.7.1

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailProduct.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'patternfly-react';
+
+const SubscriptionDetailProduct = ({ content }) => (
+  <Row key={content.id}>
+    <Col sm={12}>
+      <Row><u>{content.name}</u></Row>
+    </Col>
+    <Col sm={3}>
+      <Row>{ __('Content Download URL') }</Row>
+      <Row>{ __('GPG Key URL') }</Row>
+      <Row>{ __('Repo Type') }</Row>
+      <Row>{ __('Enabled?') }</Row>
+    </Col>
+    <Col sm={9}>
+      <Row>{content.content_url}</Row>
+      <Row>{content.gpg_url}</Row>
+      <Row>{content.type}</Row>
+      <Row>{content.enabled ? __('yes') : __('no')}</Row>
+    </Col>
+  </Row>
+);
+
+SubscriptionDetailProduct.propTypes = {
+  content: PropTypes.shape({}).isRequired,
+};
+
+export default SubscriptionDetailProduct;

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailReducer.js

@@ -4,9 +4,18 @@ import {
   SUBSCRIPTION_DETAILS_SUCCESS,
   SUBSCRIPTION_DETAILS_FAILURE,
 } from './SubscriptionDetailConstants';
+import {
+  PRODUCTS_REQUEST,
+  PRODUCTS_SUCCESS,
+  PRODUCTS_FAILURE,
+} from '../../Products/ProductConstants';
 
 const initialState = Immutable({
   loading: false,
+  enabledProducts: {
+    results: [],
+    total: 0,
+  },
 });
 
 export default (state = initialState, action) => {
@@ -15,6 +24,10 @@ export default (state = initialState, action) => {
       return state.set('loading', true);
     }
 
+    case PRODUCTS_REQUEST: {
+      return state.set('loading', true);
+    }
+
     case SUBSCRIPTION_DETAILS_SUCCESS: {
       const subscriptionDetails = action.response;
 
@@ -24,6 +37,15 @@ export default (state = initialState, action) => {
       });
     }
 
+    case PRODUCTS_SUCCESS: {
+      const enabledProducts = { enabledProducts: action.response };
+
+      return state.merge({
+        ...enabledProducts,
+        loading: false,
+      });
+    }
+
     case SUBSCRIPTION_DETAILS_FAILURE: {
       return state.merge({
         error: action.payload.message,
@@ -31,6 +53,13 @@ export default (state = initialState, action) => {
       });
     }
 
+    case PRODUCTS_FAILURE: {
+      return state.merge({
+        error: action.payload.message,
+        loading: false,
+      });
+    }
+
     default:
       return state;
   }

data/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Row, Col } from 'patternfly-react';
+import { Nav, NavItem, TabPane, TabContent, TabContainer, Grid, Row, Col } from 'patternfly-react';
 import BreadcrumbsBar from 'foremanReact/components/BreadcrumbBar';
 import SubscriptionDetailInfo from './SubscriptionDetailInfo';
 import SubscriptionDetailAssociations from './SubscriptionDetailAssociations';
 import SubscriptionDetailProducts from './SubscriptionDetailProducts';
+import SubscriptionDetailEnabledProducts from './SubscriptionDetailEnabledProducts';
 import { LoadingState } from '../../../move_to_pf/LoadingState';
 import { notify } from '../../../move_to_foreman/foreman_toast_notifications';
 import api from '../../../services/api';
@@ -18,12 +19,22 @@ class SubscriptionDetails extends Component {
     // eslint-disable-next-line react/prop-types
     const routerParams = this.props.match.params;
     this.props.loadSubscriptionDetails(parseInt(routerParams.id, 10));
+    this.props.loadProducts({
+      subscription_id: parseInt(routerParams.id, 10),
+      include_available_content: true,
+      enabled: true,
+    });
   }
 
   componentDidUpdate(prevProps) {
     const routerParams = this.props.match.params;
     if (routerParams.id !== prevProps.match.params.id) {
       this.props.loadSubscriptionDetails(parseInt(routerParams.id, 10));
+      this.props.loadProducts({
+        subscription_id: parseInt(routerParams.id, 10),
+        include_available_content: true,
+        enabled: true,
+      });
     }
   }
 
@@ -34,6 +45,8 @@ class SubscriptionDetails extends Component {
 
   render() {
     const { subscriptionDetails } = this.props;
+
+
     const resource = {
       nameField: 'name',
       resourceUrl: api.getApiUrl('/subscriptions'),
@@ -45,7 +58,7 @@ class SubscriptionDetails extends Component {
     }
 
     return (
-      <Grid bsClass="container-fluid">
+      <div>
         {!subscriptionDetails.loading && <BreadcrumbsBar
           onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
           data={{
@@ -63,32 +76,64 @@ class SubscriptionDetails extends Component {
             resource,
           }}
         />}
-        <div>
-          <LoadingState loading={subscriptionDetails.loading} loadingText={__('Loading')}>
-            <Row>
-              <Col sm={6}>
-                <SubscriptionDetailInfo
-                  subscriptionDetails={subscriptionDetails}
-                />
-              </Col>
-              <Col sm={6}>
-                <SubscriptionDetailAssociations
-                  subscriptionDetails={subscriptionDetails}
-                />
-                <SubscriptionDetailProducts
-                  subscriptionDetails={subscriptionDetails}
-                />
-              </Col>
-            </Row>
-          </LoadingState>
-        </div>
-      </Grid>
+
+        <TabContainer id="subscription-tabs-container" defaultActiveKey={1}>
+          <div>
+            <LoadingState loading={subscriptionDetails.loading} loadingText={__('Loading')}>
+              <Nav bsClass="nav nav-tabs">
+                <NavItem eventKey={1}>
+                  <div>{__('Details')}</div>
+                </NavItem>
+                <NavItem eventKey={2}>
+                  <div>{__('Enabled Products')}</div>
+                </NavItem>
+              </Nav>
+              <Grid bsClass="container-fluid">
+                <TabContent animation={false}>
+                  <TabPane eventKey={1}>
+                    <div>
+                      <Row>
+                        <Col sm={6}>
+                          <SubscriptionDetailInfo
+                            subscriptionDetails={subscriptionDetails}
+                          />
+                        </Col>
+                        <Col sm={6}>
+                          <SubscriptionDetailAssociations
+                            subscriptionDetails={subscriptionDetails}
+                          />
+                          <SubscriptionDetailProducts
+                            subscriptionDetails={subscriptionDetails}
+                          />
+                        </Col>
+                      </Row>
+                    </div>
+                  </TabPane>
+
+                  <TabPane eventKey={2}>
+                    <div>
+                      <Row>
+                        <Col sm={12}>
+                          <SubscriptionDetailEnabledProducts
+                            enabledProducts={subscriptionDetails.enabledProducts}
+                          />
+                        </Col>
+                      </Row>
+                    </div>
+                  </TabPane>
+                </TabContent>
+              </Grid>
+            </LoadingState>
+          </div>
+        </TabContainer>
+      </div>
     );
   }
 }
 
 SubscriptionDetails.propTypes = {
   loadSubscriptionDetails: PropTypes.func.isRequired,
+  loadProducts: PropTypes.func.isRequired,
   subscriptionDetails: PropTypes.shape({}).isRequired,
   history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
 };

data/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss

@@ -0,0 +1,9 @@
+.scrolld-list {
+  max-height: 400px;
+  overflow-y: auto; 
+}
+
+.list-view-pf-expand {
+  max-height: 20px;
+  padding: 0;
+}

data/webpack/scenes/Subscriptions/Details/__tests__/SubscriptionDetailEnabledProducts.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { ListView } from 'patternfly-react';
+import SubscriptionDetailEnabledProducts from '../SubscriptionDetailEnabledProducts';
+import { availableContent, product } from '../../../Products/__tests__/products.fixtures.js';
+
+describe('subscription detail enabled products page', () => {
+  it('renders correctly', () => {
+    const testRenderer = TestRenderer
+      .create(<SubscriptionDetailEnabledProducts
+        enabledProducts={{ results: [product([availableContent])] }}
+      />);
+    const testInstance = testRenderer.root;
+
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+    expect(testInstance.findAllByType(ListView.Item)).toHaveLength(1);
+  });
+});

data/webpack/scenes/Subscriptions/Details/__tests__/SubscriptionDetailProduct.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import SubscriptionDetailProduct from '../SubscriptionDetailProduct';
+import { availableContent } from '../../../Products/__tests__/products.fixtures.js';
+
+describe('subscription detail enabled product component', () => {
+  it('renders correctly', () => {
+    const testRenderer = TestRenderer
+      .create(<SubscriptionDetailProduct content={availableContent.content} />);
+
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+});

data/webpack/scenes/Subscriptions/Details/__tests__/SubscriptionDetails.test.js

@@ -5,7 +5,9 @@ import SubscriptionDetails from '../SubscriptionDetails';
 import SubscriptionDetailAssociations from '../SubscriptionDetailAssociations';
 import SubscriptionDetailInfo from '../SubscriptionDetailInfo';
 import SubscriptionDetailProducts from '../SubscriptionDetailProducts';
+import SubscriptionDetailEnabledProducts from '../SubscriptionDetailEnabledProducts';
 import { loadSubscriptionDetails } from '../SubscriptionDetailActions';
+import { loadProducts } from '../../../Products/ProductActions';
 import { successState } from './subscriptionDetails.fixtures';
 
 jest.mock('../../../../move_to_foreman/foreman_toast_notifications');
@@ -13,15 +15,19 @@ jest.mock('../../../../move_to_foreman/foreman_toast_notifications');
 describe('subscriptions details page', () => {
   it('should render and contain appropiate components', async () => {
     const match = { params: { id: 1 } };
+    const noop = () => {};
 
     const wrapper = shallow(<SubscriptionDetails
       loadSubscriptionDetails={loadSubscriptionDetails}
+      loadProducts={loadProducts}
       subscriptionDetails={successState}
+      history={{ push: noop }}
       match={match}
     />);
     expect(wrapper.find(SubscriptionDetailAssociations)).toHaveLength(1);
     expect(wrapper.find(SubscriptionDetailInfo)).toHaveLength(1);
     expect(wrapper.find(SubscriptionDetailProducts)).toHaveLength(1);
+    expect(wrapper.find(SubscriptionDetailEnabledProducts)).toHaveLength(1);
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 });

data/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetailEnabledProducts.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subscription detail enabled products page renders correctly 1`] = `
+<div
+  className="list-group list-view-pf list-view-pf-view"
+>
+  <div
+    className="list-group-item"
+  >
+    <div
+      className="list-group-item-header"
+      onClick={[Function]}
+    >
+      <div
+        className="list-view-pf-expand"
+        onClick={[Function]}
+      >
+        <span
+          className="fa fa-angle-right"
+        />
+      </div>
+      <div
+        className="list-view-pf-main-info"
+      >
+        <div
+          className="list-view-pf-body"
+        >
+          <div
+            className="list-view-pf-description"
+          >
+            <div
+              className="list-group-item-heading"
+            >
+              Red Hat Enterprise Linux Server
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="list-group-item-container container-fluid hidden"
+    />
+  </div>
+</div>
+`;

data/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetailProduct.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subscription detail enabled product component renders correctly 1`] = `
+<div
+  className="row"
+>
+  <div
+    className="col-sm-12"
+  >
+    <div
+      className="row"
+    >
+      <u>
+        Red Hat Enterprise Linux 7 Server (RPMs)
+      </u>
+    </div>
+  </div>
+  <div
+    className="col-sm-3"
+  >
+    <div
+      className="row"
+    >
+      Content Download URL
+    </div>
+    <div
+      className="row"
+    >
+      GPG Key URL
+    </div>
+    <div
+      className="row"
+    >
+      Repo Type
+    </div>
+    <div
+      className="row"
+    >
+      Enabled?
+    </div>
+  </div>
+  <div
+    className="col-sm-9"
+  >
+    <div
+      className="row"
+    >
+      /content/dist/rhel/server/7/$releasever/$basearch/os
+    </div>
+    <div
+      className="row"
+    >
+      file:///etc/pki/rpm-gpg/RPM-GPG-KEY-redhat-release
+    </div>
+    <div
+      className="row"
+    >
+      yum
+    </div>
+    <div
+      className="row"
+    >
+      no
+    </div>
+  </div>
+</div>
+`;

data/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap

@@ -1,11 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`subscriptions details page should render and contain appropiate components 1`] = `
-<Grid
-  bsClass="container-fluid"
-  componentClass="div"
-  fluid={false}
->
+<div>
   <BreadcrumbsBar
     data={
       Object {
@@ -28,413 +24,504 @@ exports[`subscriptions details page should render and contain appropiate compone
     }
     onSwitcherItemClick={[Function]}
   />
-  <div>
-    <LoadingState
-      loading={false}
-      loadingText="Loading"
-    >
-      <Row
-        bsClass="row"
-        componentClass="div"
+  <Uncontrolled(TabContainer)
+    defaultActiveKey={1}
+    id="subscription-tabs-container"
+  >
+    <div>
+      <LoadingState
+        loading={false}
+        loadingText="Loading"
+        timeout={300}
       >
-        <Col
-          bsClass="col"
-          componentClass="div"
-          sm={6}
+        <Nav
+          bsClass="nav nav-tabs"
+          justified={false}
+          pullLeft={false}
+          pullRight={false}
+          stacked={false}
         >
-          <SubscriptionDetailInfo
-            subscriptionDetails={
-              Object {
-                "account_number": 1212729,
-                "activation_keys": Array [],
-                "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
-                "available": 1,
-                "consumed": 0,
-                "contract_number": 10126160,
-                "cores": 4,
-                "cp_id": "4028f92a6317cfbd0163b419377f3bee",
-                "description": "OpenShift Enterprise",
-                "end_date": "2021-12-31 23:59:59 -0500",
-                "error": null,
-                "host_count": 0,
-                "id": 48,
-                "instance_multiplier": 1,
-                "loading": false,
-                "multi_entitlement": true,
-                "name": "OpenShift Employee Subscription",
-                "product_id": "SER0421",
-                "product_name": "OpenShift Employee Subscription",
-                "provided_products": Array [
-                  Object {
-                    "id": 1,
-                    "name": "Red Hat OpenShift Container Platform",
-                  },
-                  Object {
-                    "id": 2,
-                    "name": "Oracle Java for RHEL Server",
-                  },
-                  Object {
-                    "id": 3,
-                    "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
-                  },
-                  Object {
-                    "id": 4,
-                    "name": "Red Hat CloudForms Beta",
-                  },
-                  Object {
-                    "id": 5,
-                    "name": "Red Hat CloudForms",
-                  },
-                  Object {
-                    "id": 6,
-                    "name": "Red Hat OpenShift Enterprise Client Tools",
-                  },
-                  Object {
-                    "id": 7,
-                    "name": "Red Hat Enterprise Linux Atomic Host",
-                  },
-                  Object {
-                    "id": 8,
-                    "name": "JBoss Enterprise Application Platform",
-                  },
-                  Object {
-                    "id": 9,
-                    "name": "Red Hat JBoss AMQ Clients",
-                  },
-                  Object {
-                    "id": 10,
-                    "name": "Red Hat Beta",
-                  },
-                  Object {
-                    "id": 11,
-                    "name": "Red Hat OpenShift Enterprise Infrastructure",
-                  },
-                  Object {
-                    "id": 12,
-                    "name": "Red Hat Enterprise Linux Fast Datapath Beta",
-                  },
-                  Object {
-                    "id": 13,
-                    "name": "Red Hat Ansible Engine",
-                  },
-                  Object {
-                    "id": 14,
-                    "name": "Red Hat OpenShift Enterprise Application Node",
-                  },
-                  Object {
-                    "id": 15,
-                    "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
-                  },
-                  Object {
-                    "id": 16,
-                    "name": "Red Hat Software Collections Beta for RHEL Server",
-                  },
-                  Object {
-                    "id": 17,
-                    "name": "Red Hat Software Collections for RHEL Server",
-                  },
-                  Object {
-                    "id": 18,
-                    "name": "Red Hat Enterprise Linux Fast Datapath",
-                  },
-                  Object {
-                    "id": 19,
-                    "name": "Red Hat Enterprise Linux Server",
-                  },
-                  Object {
-                    "id": 20,
-                    "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
-                  },
-                  Object {
-                    "id": 21,
-                    "name": "JBoss Enterprise Web Server",
-                  },
-                  Object {
-                    "id": 22,
-                    "name": "Red Hat JBoss Core Services",
-                  },
-                ],
-                "quantity": 1,
-                "ram": null,
-                "sockets": null,
-                "stacking_id": "SER0421",
-                "start_date": "2013-03-01 00:00:00 -0500",
-                "subscription_id": 3,
-                "support_level": "Self-Support",
-                "support_type": "L1-L3",
-                "type": "NORMAL",
-                "unmapped_guest": false,
-                "upstream": true,
-                "virt_only": false,
-                "virt_who": false,
-              }
-            }
-          />
-        </Col>
-        <Col
-          bsClass="col"
+          <NavItem
+            active={false}
+            disabled={false}
+            eventKey={1}
+          >
+            <div>
+              Details
+            </div>
+          </NavItem>
+          <NavItem
+            active={false}
+            disabled={false}
+            eventKey={2}
+          >
+            <div>
+              Enabled Products
+            </div>
+          </NavItem>
+        </Nav>
+        <Grid
+          bsClass="container-fluid"
           componentClass="div"
-          sm={6}
+          fluid={false}
         >
-          <SubscriptionDetailAssociations
-            subscriptionDetails={
-              Object {
-                "account_number": 1212729,
-                "activation_keys": Array [],
-                "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
-                "available": 1,
-                "consumed": 0,
-                "contract_number": 10126160,
-                "cores": 4,
-                "cp_id": "4028f92a6317cfbd0163b419377f3bee",
-                "description": "OpenShift Enterprise",
-                "end_date": "2021-12-31 23:59:59 -0500",
-                "error": null,
-                "host_count": 0,
-                "id": 48,
-                "instance_multiplier": 1,
-                "loading": false,
-                "multi_entitlement": true,
-                "name": "OpenShift Employee Subscription",
-                "product_id": "SER0421",
-                "product_name": "OpenShift Employee Subscription",
-                "provided_products": Array [
-                  Object {
-                    "id": 1,
-                    "name": "Red Hat OpenShift Container Platform",
-                  },
-                  Object {
-                    "id": 2,
-                    "name": "Oracle Java for RHEL Server",
-                  },
-                  Object {
-                    "id": 3,
-                    "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
-                  },
-                  Object {
-                    "id": 4,
-                    "name": "Red Hat CloudForms Beta",
-                  },
-                  Object {
-                    "id": 5,
-                    "name": "Red Hat CloudForms",
-                  },
-                  Object {
-                    "id": 6,
-                    "name": "Red Hat OpenShift Enterprise Client Tools",
-                  },
-                  Object {
-                    "id": 7,
-                    "name": "Red Hat Enterprise Linux Atomic Host",
-                  },
-                  Object {
-                    "id": 8,
-                    "name": "JBoss Enterprise Application Platform",
-                  },
-                  Object {
-                    "id": 9,
-                    "name": "Red Hat JBoss AMQ Clients",
-                  },
-                  Object {
-                    "id": 10,
-                    "name": "Red Hat Beta",
-                  },
-                  Object {
-                    "id": 11,
-                    "name": "Red Hat OpenShift Enterprise Infrastructure",
-                  },
-                  Object {
-                    "id": 12,
-                    "name": "Red Hat Enterprise Linux Fast Datapath Beta",
-                  },
-                  Object {
-                    "id": 13,
-                    "name": "Red Hat Ansible Engine",
-                  },
-                  Object {
-                    "id": 14,
-                    "name": "Red Hat OpenShift Enterprise Application Node",
-                  },
-                  Object {
-                    "id": 15,
-                    "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
-                  },
-                  Object {
-                    "id": 16,
-                    "name": "Red Hat Software Collections Beta for RHEL Server",
-                  },
-                  Object {
-                    "id": 17,
-                    "name": "Red Hat Software Collections for RHEL Server",
-                  },
-                  Object {
-                    "id": 18,
-                    "name": "Red Hat Enterprise Linux Fast Datapath",
-                  },
-                  Object {
-                    "id": 19,
-                    "name": "Red Hat Enterprise Linux Server",
-                  },
-                  Object {
-                    "id": 20,
-                    "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
-                  },
-                  Object {
-                    "id": 21,
-                    "name": "JBoss Enterprise Web Server",
-                  },
-                  Object {
-                    "id": 22,
-                    "name": "Red Hat JBoss Core Services",
-                  },
-                ],
-                "quantity": 1,
-                "ram": null,
-                "sockets": null,
-                "stacking_id": "SER0421",
-                "start_date": "2013-03-01 00:00:00 -0500",
-                "subscription_id": 3,
-                "support_level": "Self-Support",
-                "support_type": "L1-L3",
-                "type": "NORMAL",
-                "unmapped_guest": false,
-                "upstream": true,
-                "virt_only": false,
-                "virt_who": false,
-              }
-            }
-          />
-          <SubscriptionDetailProducts
-            subscriptionDetails={
-              Object {
-                "account_number": 1212729,
-                "activation_keys": Array [],
-                "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
-                "available": 1,
-                "consumed": 0,
-                "contract_number": 10126160,
-                "cores": 4,
-                "cp_id": "4028f92a6317cfbd0163b419377f3bee",
-                "description": "OpenShift Enterprise",
-                "end_date": "2021-12-31 23:59:59 -0500",
-                "error": null,
-                "host_count": 0,
-                "id": 48,
-                "instance_multiplier": 1,
-                "loading": false,
-                "multi_entitlement": true,
-                "name": "OpenShift Employee Subscription",
-                "product_id": "SER0421",
-                "product_name": "OpenShift Employee Subscription",
-                "provided_products": Array [
-                  Object {
-                    "id": 1,
-                    "name": "Red Hat OpenShift Container Platform",
-                  },
-                  Object {
-                    "id": 2,
-                    "name": "Oracle Java for RHEL Server",
-                  },
-                  Object {
-                    "id": 3,
-                    "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
-                  },
-                  Object {
-                    "id": 4,
-                    "name": "Red Hat CloudForms Beta",
-                  },
-                  Object {
-                    "id": 5,
-                    "name": "Red Hat CloudForms",
-                  },
-                  Object {
-                    "id": 6,
-                    "name": "Red Hat OpenShift Enterprise Client Tools",
-                  },
-                  Object {
-                    "id": 7,
-                    "name": "Red Hat Enterprise Linux Atomic Host",
-                  },
-                  Object {
-                    "id": 8,
-                    "name": "JBoss Enterprise Application Platform",
-                  },
-                  Object {
-                    "id": 9,
-                    "name": "Red Hat JBoss AMQ Clients",
-                  },
-                  Object {
-                    "id": 10,
-                    "name": "Red Hat Beta",
-                  },
-                  Object {
-                    "id": 11,
-                    "name": "Red Hat OpenShift Enterprise Infrastructure",
-                  },
-                  Object {
-                    "id": 12,
-                    "name": "Red Hat Enterprise Linux Fast Datapath Beta",
-                  },
-                  Object {
-                    "id": 13,
-                    "name": "Red Hat Ansible Engine",
-                  },
-                  Object {
-                    "id": 14,
-                    "name": "Red Hat OpenShift Enterprise Application Node",
-                  },
-                  Object {
-                    "id": 15,
-                    "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
-                  },
-                  Object {
-                    "id": 16,
-                    "name": "Red Hat Software Collections Beta for RHEL Server",
-                  },
-                  Object {
-                    "id": 17,
-                    "name": "Red Hat Software Collections for RHEL Server",
-                  },
-                  Object {
-                    "id": 18,
-                    "name": "Red Hat Enterprise Linux Fast Datapath",
-                  },
-                  Object {
-                    "id": 19,
-                    "name": "Red Hat Enterprise Linux Server",
-                  },
-                  Object {
-                    "id": 20,
-                    "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
-                  },
-                  Object {
-                    "id": 21,
-                    "name": "JBoss Enterprise Web Server",
-                  },
-                  Object {
-                    "id": 22,
-                    "name": "Red Hat JBoss Core Services",
-                  },
-                ],
-                "quantity": 1,
-                "ram": null,
-                "sockets": null,
-                "stacking_id": "SER0421",
-                "start_date": "2013-03-01 00:00:00 -0500",
-                "subscription_id": 3,
-                "support_level": "Self-Support",
-                "support_type": "L1-L3",
-                "type": "NORMAL",
-                "unmapped_guest": false,
-                "upstream": true,
-                "virt_only": false,
-                "virt_who": false,
-              }
-            }
-          />
-        </Col>
-      </Row>
-    </LoadingState>
-  </div>
-</Grid>
+          <TabContent
+            animation={false}
+            bsClass="tab"
+            componentClass="div"
+            mountOnEnter={false}
+            unmountOnExit={false}
+          >
+            <TabPane
+              bsClass="tab-pane"
+              eventKey={1}
+            >
+              <div>
+                <Row
+                  bsClass="row"
+                  componentClass="div"
+                >
+                  <Col
+                    bsClass="col"
+                    componentClass="div"
+                    sm={6}
+                  >
+                    <SubscriptionDetailInfo
+                      subscriptionDetails={
+                        Object {
+                          "account_number": 1212729,
+                          "activation_keys": Array [],
+                          "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
+                          "available": 1,
+                          "consumed": 0,
+                          "contract_number": 10126160,
+                          "cores": 4,
+                          "cp_id": "4028f92a6317cfbd0163b419377f3bee",
+                          "description": "OpenShift Enterprise",
+                          "enabledProducts": Object {
+                            "results": Array [],
+                            "total": 0,
+                          },
+                          "end_date": "2021-12-31 23:59:59 -0500",
+                          "error": null,
+                          "host_count": 0,
+                          "id": 48,
+                          "instance_multiplier": 1,
+                          "loading": false,
+                          "multi_entitlement": true,
+                          "name": "OpenShift Employee Subscription",
+                          "product_id": "SER0421",
+                          "product_name": "OpenShift Employee Subscription",
+                          "provided_products": Array [
+                            Object {
+                              "id": 1,
+                              "name": "Red Hat OpenShift Container Platform",
+                            },
+                            Object {
+                              "id": 2,
+                              "name": "Oracle Java for RHEL Server",
+                            },
+                            Object {
+                              "id": 3,
+                              "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
+                            },
+                            Object {
+                              "id": 4,
+                              "name": "Red Hat CloudForms Beta",
+                            },
+                            Object {
+                              "id": 5,
+                              "name": "Red Hat CloudForms",
+                            },
+                            Object {
+                              "id": 6,
+                              "name": "Red Hat OpenShift Enterprise Client Tools",
+                            },
+                            Object {
+                              "id": 7,
+                              "name": "Red Hat Enterprise Linux Atomic Host",
+                            },
+                            Object {
+                              "id": 8,
+                              "name": "JBoss Enterprise Application Platform",
+                            },
+                            Object {
+                              "id": 9,
+                              "name": "Red Hat JBoss AMQ Clients",
+                            },
+                            Object {
+                              "id": 10,
+                              "name": "Red Hat Beta",
+                            },
+                            Object {
+                              "id": 11,
+                              "name": "Red Hat OpenShift Enterprise Infrastructure",
+                            },
+                            Object {
+                              "id": 12,
+                              "name": "Red Hat Enterprise Linux Fast Datapath Beta",
+                            },
+                            Object {
+                              "id": 13,
+                              "name": "Red Hat Ansible Engine",
+                            },
+                            Object {
+                              "id": 14,
+                              "name": "Red Hat OpenShift Enterprise Application Node",
+                            },
+                            Object {
+                              "id": 15,
+                              "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
+                            },
+                            Object {
+                              "id": 16,
+                              "name": "Red Hat Software Collections Beta for RHEL Server",
+                            },
+                            Object {
+                              "id": 17,
+                              "name": "Red Hat Software Collections for RHEL Server",
+                            },
+                            Object {
+                              "id": 18,
+                              "name": "Red Hat Enterprise Linux Fast Datapath",
+                            },
+                            Object {
+                              "id": 19,
+                              "name": "Red Hat Enterprise Linux Server",
+                            },
+                            Object {
+                              "id": 20,
+                              "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
+                            },
+                            Object {
+                              "id": 21,
+                              "name": "JBoss Enterprise Web Server",
+                            },
+                            Object {
+                              "id": 22,
+                              "name": "Red Hat JBoss Core Services",
+                            },
+                          ],
+                          "quantity": 1,
+                          "ram": null,
+                          "sockets": null,
+                          "stacking_id": "SER0421",
+                          "start_date": "2013-03-01 00:00:00 -0500",
+                          "subscription_id": 3,
+                          "support_level": "Self-Support",
+                          "support_type": "L1-L3",
+                          "type": "NORMAL",
+                          "unmapped_guest": false,
+                          "upstream": true,
+                          "virt_only": false,
+                          "virt_who": false,
+                        }
+                      }
+                    />
+                  </Col>
+                  <Col
+                    bsClass="col"
+                    componentClass="div"
+                    sm={6}
+                  >
+                    <SubscriptionDetailAssociations
+                      subscriptionDetails={
+                        Object {
+                          "account_number": 1212729,
+                          "activation_keys": Array [],
+                          "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
+                          "available": 1,
+                          "consumed": 0,
+                          "contract_number": 10126160,
+                          "cores": 4,
+                          "cp_id": "4028f92a6317cfbd0163b419377f3bee",
+                          "description": "OpenShift Enterprise",
+                          "enabledProducts": Object {
+                            "results": Array [],
+                            "total": 0,
+                          },
+                          "end_date": "2021-12-31 23:59:59 -0500",
+                          "error": null,
+                          "host_count": 0,
+                          "id": 48,
+                          "instance_multiplier": 1,
+                          "loading": false,
+                          "multi_entitlement": true,
+                          "name": "OpenShift Employee Subscription",
+                          "product_id": "SER0421",
+                          "product_name": "OpenShift Employee Subscription",
+                          "provided_products": Array [
+                            Object {
+                              "id": 1,
+                              "name": "Red Hat OpenShift Container Platform",
+                            },
+                            Object {
+                              "id": 2,
+                              "name": "Oracle Java for RHEL Server",
+                            },
+                            Object {
+                              "id": 3,
+                              "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
+                            },
+                            Object {
+                              "id": 4,
+                              "name": "Red Hat CloudForms Beta",
+                            },
+                            Object {
+                              "id": 5,
+                              "name": "Red Hat CloudForms",
+                            },
+                            Object {
+                              "id": 6,
+                              "name": "Red Hat OpenShift Enterprise Client Tools",
+                            },
+                            Object {
+                              "id": 7,
+                              "name": "Red Hat Enterprise Linux Atomic Host",
+                            },
+                            Object {
+                              "id": 8,
+                              "name": "JBoss Enterprise Application Platform",
+                            },
+                            Object {
+                              "id": 9,
+                              "name": "Red Hat JBoss AMQ Clients",
+                            },
+                            Object {
+                              "id": 10,
+                              "name": "Red Hat Beta",
+                            },
+                            Object {
+                              "id": 11,
+                              "name": "Red Hat OpenShift Enterprise Infrastructure",
+                            },
+                            Object {
+                              "id": 12,
+                              "name": "Red Hat Enterprise Linux Fast Datapath Beta",
+                            },
+                            Object {
+                              "id": 13,
+                              "name": "Red Hat Ansible Engine",
+                            },
+                            Object {
+                              "id": 14,
+                              "name": "Red Hat OpenShift Enterprise Application Node",
+                            },
+                            Object {
+                              "id": 15,
+                              "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
+                            },
+                            Object {
+                              "id": 16,
+                              "name": "Red Hat Software Collections Beta for RHEL Server",
+                            },
+                            Object {
+                              "id": 17,
+                              "name": "Red Hat Software Collections for RHEL Server",
+                            },
+                            Object {
+                              "id": 18,
+                              "name": "Red Hat Enterprise Linux Fast Datapath",
+                            },
+                            Object {
+                              "id": 19,
+                              "name": "Red Hat Enterprise Linux Server",
+                            },
+                            Object {
+                              "id": 20,
+                              "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
+                            },
+                            Object {
+                              "id": 21,
+                              "name": "JBoss Enterprise Web Server",
+                            },
+                            Object {
+                              "id": 22,
+                              "name": "Red Hat JBoss Core Services",
+                            },
+                          ],
+                          "quantity": 1,
+                          "ram": null,
+                          "sockets": null,
+                          "stacking_id": "SER0421",
+                          "start_date": "2013-03-01 00:00:00 -0500",
+                          "subscription_id": 3,
+                          "support_level": "Self-Support",
+                          "support_type": "L1-L3",
+                          "type": "NORMAL",
+                          "unmapped_guest": false,
+                          "upstream": true,
+                          "virt_only": false,
+                          "virt_who": false,
+                        }
+                      }
+                    />
+                    <SubscriptionDetailProducts
+                      subscriptionDetails={
+                        Object {
+                          "account_number": 1212729,
+                          "activation_keys": Array [],
+                          "arch": "ia64,ppc,ppc64,ppc64le,s390,s390x,x86,x86_64",
+                          "available": 1,
+                          "consumed": 0,
+                          "contract_number": 10126160,
+                          "cores": 4,
+                          "cp_id": "4028f92a6317cfbd0163b419377f3bee",
+                          "description": "OpenShift Enterprise",
+                          "enabledProducts": Object {
+                            "results": Array [],
+                            "total": 0,
+                          },
+                          "end_date": "2021-12-31 23:59:59 -0500",
+                          "error": null,
+                          "host_count": 0,
+                          "id": 48,
+                          "instance_multiplier": 1,
+                          "loading": false,
+                          "multi_entitlement": true,
+                          "name": "OpenShift Employee Subscription",
+                          "product_id": "SER0421",
+                          "product_name": "OpenShift Employee Subscription",
+                          "provided_products": Array [
+                            Object {
+                              "id": 1,
+                              "name": "Red Hat OpenShift Container Platform",
+                            },
+                            Object {
+                              "id": 2,
+                              "name": "Oracle Java for RHEL Server",
+                            },
+                            Object {
+                              "id": 3,
+                              "name": "Red Hat OpenShift Enterprise JBoss EAP add-on",
+                            },
+                            Object {
+                              "id": 4,
+                              "name": "Red Hat CloudForms Beta",
+                            },
+                            Object {
+                              "id": 5,
+                              "name": "Red Hat CloudForms",
+                            },
+                            Object {
+                              "id": 6,
+                              "name": "Red Hat OpenShift Enterprise Client Tools",
+                            },
+                            Object {
+                              "id": 7,
+                              "name": "Red Hat Enterprise Linux Atomic Host",
+                            },
+                            Object {
+                              "id": 8,
+                              "name": "JBoss Enterprise Application Platform",
+                            },
+                            Object {
+                              "id": 9,
+                              "name": "Red Hat JBoss AMQ Clients",
+                            },
+                            Object {
+                              "id": 10,
+                              "name": "Red Hat Beta",
+                            },
+                            Object {
+                              "id": 11,
+                              "name": "Red Hat OpenShift Enterprise Infrastructure",
+                            },
+                            Object {
+                              "id": 12,
+                              "name": "Red Hat Enterprise Linux Fast Datapath Beta",
+                            },
+                            Object {
+                              "id": 13,
+                              "name": "Red Hat Ansible Engine",
+                            },
+                            Object {
+                              "id": 14,
+                              "name": "Red Hat OpenShift Enterprise Application Node",
+                            },
+                            Object {
+                              "id": 15,
+                              "name": "Red Hat OpenShift Enterprise JBoss FUSE add-on",
+                            },
+                            Object {
+                              "id": 16,
+                              "name": "Red Hat Software Collections Beta for RHEL Server",
+                            },
+                            Object {
+                              "id": 17,
+                              "name": "Red Hat Software Collections for RHEL Server",
+                            },
+                            Object {
+                              "id": 18,
+                              "name": "Red Hat Enterprise Linux Fast Datapath",
+                            },
+                            Object {
+                              "id": 19,
+                              "name": "Red Hat Enterprise Linux Server",
+                            },
+                            Object {
+                              "id": 20,
+                              "name": "Red Hat OpenShift Enterprise JBoss A-MQ add-on",
+                            },
+                            Object {
+                              "id": 21,
+                              "name": "JBoss Enterprise Web Server",
+                            },
+                            Object {
+                              "id": 22,
+                              "name": "Red Hat JBoss Core Services",
+                            },
+                          ],
+                          "quantity": 1,
+                          "ram": null,
+                          "sockets": null,
+                          "stacking_id": "SER0421",
+                          "start_date": "2013-03-01 00:00:00 -0500",
+                          "subscription_id": 3,
+                          "support_level": "Self-Support",
+                          "support_type": "L1-L3",
+                          "type": "NORMAL",
+                          "unmapped_guest": false,
+                          "upstream": true,
+                          "virt_only": false,
+                          "virt_who": false,
+                        }
+                      }
+                    />
+                  </Col>
+                </Row>
+              </div>
+            </TabPane>
+            <TabPane
+              bsClass="tab-pane"
+              eventKey={2}
+            >
+              <div>
+                <Row
+                  bsClass="row"
+                  componentClass="div"
+                >
+                  <Col
+                    bsClass="col"
+                    componentClass="div"
+                    sm={12}
+                  >
+                    <SubscriptionDetailEnabledProducts
+                      enabledProducts={
+                        Object {
+                          "results": Array [],
+                          "total": 0,
+                        }
+                      }
+                    />
+                  </Col>
+                </Row>
+              </div>
+            </TabPane>
+          </TabContent>
+        </Grid>
+      </LoadingState>
+    </div>
+  </Uncontrolled(TabContainer)>
+</div>
 `;