katello 3.7.0.rc1 → 3.7.0.rc2

data/webpack/scenes/Subscriptions/SubscriptionsPage.scss

@@ -0,0 +1,38 @@
+@import '~patternfly/dist/sass/patternfly/variables';
+@import '~patternfly-react/dist/sass/inline-edit';
+
+.editable {
+  &.changed {
+    font-weight: bold;
+  }
+}
+
+.pf-table-inline-edit {
+  tbody {
+    .form-group {
+      margin-bottom: 0;
+    }
+
+    tr.open-grouped-row {
+      background-color: $table-bg-hover;
+      td {
+        border-bottom-color: $table-border-hover;
+      }
+    }
+  }
+
+  .table-view-pf-select {
+    width: 50px;
+
+    .collapse-subscription-group-button {
+      margin-top: 4px;
+      cursor: pointer;
+      float: left;
+      font-weight: bold;
+    }
+
+    input[type="checkbox"] {
+      float: right;
+    }
+  }
+}

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsActions.js

@@ -14,12 +14,12 @@ export const loadUpstreamSubscriptions = (extendedParams = {}) => (dispatch) =>
   dispatch({ type: UPSTREAM_SUBSCRIPTIONS_REQUEST });
 
   const params = {
-    ...{ organization_id: orgId, attachable: true },
+    ...{ organization_id: orgId(), attachable: true },
     ...propsToSnakeCase(extendedParams),
   };
 
   return api
-    .get(`/organizations/${orgId}/upstream_subscriptions`, {}, params)
+    .get(`/organizations/${orgId()}/upstream_subscriptions`, {}, params)
     .then(({ data }) => {
       dispatch({
         type: UPSTREAM_SUBSCRIPTIONS_SUCCESS,
@@ -43,7 +43,7 @@ export const saveUpstreamSubscriptions = upstreamSubscriptions => (dispatch) =>
   };
 
   return api
-    .post(`/organizations/${orgId}/upstream_subscriptions`, params)
+    .post(`/organizations/${orgId()}/upstream_subscriptions`, params)
     .then(({ data }) => {
       dispatch({
         type: SAVE_UPSTREAM_SUBSCRIPTIONS_SUCCESS,

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsPage.js

@@ -4,7 +4,8 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Grid, Row, Col } from 'react-bootstrap';
-import { bindMethods, Button, Spinner } from 'patternfly-react';
+import { bindMethods, Button } from 'patternfly-react';
+import { LoadingState } from '../../../move_to_pf/LoadingState';
 import { notify } from '../../../move_to_foreman/foreman_toast_notifications';
 import helpers from '../../../move_to_foreman/common/helpers';
 import { Table } from '../../../move_to_foreman/components/common/table';
@@ -33,7 +34,7 @@ class UpstreamSubscriptionsPage extends Component {
     const newValue = parseInt(value, 10);
     const pool = {
       ...rowData,
-      id: rowData.pool_id,
+      id: rowData.id,
       updatedQuantity: newValue,
       selected: true,
     };
@@ -86,7 +87,7 @@ class UpstreamSubscriptionsPage extends Component {
         );
 
         notify({ message: ReactDOMServer.renderToStaticMarkup(message), type: 'success' });
-        this.props.history.push('/xui/subscriptions');
+        this.props.history.push('/subscriptions');
       } else {
         let errorMessages = [];
 
@@ -126,7 +127,7 @@ class UpstreamSubscriptionsPage extends Component {
                 {__('Submit')}
               </Button>
 
-              <LinkContainer to="/xui/subscriptions">
+              <LinkContainer to="/subscriptions">
                 <Button>
                   {__('Cancel')}
                 </Button>
@@ -213,7 +214,7 @@ class UpstreamSubscriptionsPage extends Component {
       <Grid bsClass="container-fluid">
         <h1>{__('Add Subscriptions')}</h1>
 
-        <Spinner loading={upstreamSubscriptions.loading} className="small-spacer">
+        <LoadingState loading={upstreamSubscriptions.loading} loadingText={__('Loading')}>
           <Row>
             <Col sm={12}>
               <Table
@@ -227,7 +228,7 @@ class UpstreamSubscriptionsPage extends Component {
             </Col>
           </Row>
           {getSubscriptionActions()}
-        </Spinner>
+        </LoadingState>
       </Grid>
     );
   }

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsTableSchema.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
-import helpers, { selectionHeaderCellFormatter, selectionCellFormatter } from '../../../move_to_foreman/common/helpers';
+import helpers from '../../../move_to_foreman/common/helpers';
 import {
-  headerFormat,
-  cellFormat,
+  headerFormatter,
+  cellFormatter,
+  selectionHeaderCellFormatter,
+  selectionCellFormatter,
 } from '../../../move_to_foreman/components/common/table';
 
 export const columns = (controller, selectionController) => [
@@ -14,15 +16,16 @@ export const columns = (controller, selectionController) => [
       formatters: [label => selectionHeaderCellFormatter(selectionController, label)],
     },
     cell: {
-      formatters: [(value, additionalData) =>
-        selectionCellFormatter(selectionController, value, additionalData)],
+      formatters: [
+        (value, additionalData) => selectionCellFormatter(selectionController, additionalData),
+      ],
     },
   },
   {
     property: 'id',
     header: {
       label: __('Subscription Name'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
       formatters: [
@@ -40,10 +43,10 @@ export const columns = (controller, selectionController) => [
     property: 'contract_number',
     header: {
       label: __('Contract'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
-      formatters: [cellFormat],
+      formatters: [cellFormatter],
     },
   },
   // TODO: use date formatter from tomas' PR
@@ -51,27 +54,27 @@ export const columns = (controller, selectionController) => [
     property: 'start_date',
     header: {
       label: __('Start Date'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
-      formatters: [cellFormat],
+      formatters: [cellFormatter],
     },
   },
   {
     property: 'end_date',
     header: {
       label: __('End Date'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
-      formatters: [cellFormat],
+      formatters: [cellFormatter],
     },
   },
   {
     property: 'quantity',
     header: {
       label: __('Available Entitlements'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
       formatters: [
@@ -87,7 +90,7 @@ export const columns = (controller, selectionController) => [
     property: 'consumed',
     header: {
       label: __('Quantity to Allocate'),
-      formatters: [headerFormat],
+      formatters: [headerFormatter],
     },
     cell: {
       formatters: [

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/__tests__/__snapshots__/UpstreamSubscriptionsPage.test.js.snap

@@ -9,12 +9,9 @@ exports[`upstream subscriptions page should render 1`] = `
   <h1>
     Add Subscriptions
   </h1>
-  <Spinner
-    className="small-spacer"
-    inline={false}
-    inverse={false}
+  <LoadingState
     loading={false}
-    size="md"
+    loadingText="Loading"
   >
     <Row
       bsClass="row"
@@ -157,7 +154,7 @@ exports[`upstream subscriptions page should render 1`] = `
                 "consumed": 100,
                 "contract_number": "11480900",
                 "end_date": "2018-09-15T03:59:59+0000",
-                "pool_id": "8a99f9815e718933015e85b19e1e11d7",
+                "id": "8a99f9815e718933015e85b19e1e11d7",
                 "product_id": "RH00284",
                 "product_name": "Red Hat Enterprise Linux for Power, LE, Premium (IFL, up to 4 LPARs)",
                 "quantity": 200,
@@ -166,16 +163,16 @@ exports[`upstream subscriptions page should render 1`] = `
                 "subscription_id": "4753270",
               },
               Object {
-                "consumed": 100,
-                "contract_number": "11480900",
+                "consumed": 125,
+                "contract_number": "11480898",
                 "end_date": "2018-09-15T03:59:59+0000",
-                "pool_id": "8a99f9815e718933015e85b19e1e11d7",
-                "product_id": "RH00284",
-                "product_name": "Red Hat Enterprise Linux for Power, LE, Premium (IFL, up to 4 LPARs)",
-                "quantity": 200,
+                "id": "8a99f9815e718933015e85b1bfd211db",
+                "product_id": "RH00447",
+                "product_name": "Red Hat Enterprise Linux Server for ATOM with Smart Management, Hyperscale, Standard (5 Physical Nodes)",
+                "quantity": 250,
                 "selected": false,
                 "start_date": "2017-09-15T04:00:00+0000",
-                "subscription_id": "4753270",
+                "subscription_id": "4753271",
               },
             ]
           }
@@ -207,7 +204,7 @@ exports[`upstream subscriptions page should render 1`] = `
           exact={false}
           replace={false}
           strict={false}
-          to="/xui/subscriptions"
+          to="/subscriptions"
         >
           <Button
             active={false}
@@ -221,6 +218,6 @@ exports[`upstream subscriptions page should render 1`] = `
         </LinkContainer>
       </Col>
     </Row>
-  </Spinner>
+  </LoadingState>
 </Grid>
 `;

data/webpack/scenes/Subscriptions/UpstreamSubscriptions/__tests__/upstreamSubscriptions.fixtures.js

@@ -36,7 +36,7 @@ export const requestSuccessResponse = Immutable({
   },
   results: [
     {
-      pool_id: '8a99f9815e718933015e85b19e1e11d7',
+      id: '8a99f9815e718933015e85b19e1e11d7',
       quantity: 200,
       start_date: '2017-09-15T04:00:00+0000',
       end_date: '2018-09-15T03:59:59+0000',
@@ -47,7 +47,7 @@ export const requestSuccessResponse = Immutable({
       subscription_id: '4753270',
     },
     {
-      pool_id: '8a99f9815e718933015e85b1bfd211db',
+      id: '8a99f9815e718933015e85b1bfd211db',
       quantity: 250,
       start_date: '2017-09-15T04:00:00+0000',
       end_date: '2018-09-15T03:59:59+0000',
@@ -65,7 +65,7 @@ export const successState = Immutable({
   loading: false,
   results: [
     {
-      pool_id: '8a99f9815e718933015e85b19e1e11d7',
+      id: '8a99f9815e718933015e85b19e1e11d7',
       quantity: 200,
       start_date: '2017-09-15T04:00:00+0000',
       end_date: '2018-09-15T03:59:59+0000',
@@ -76,7 +76,7 @@ export const successState = Immutable({
       subscription_id: '4753270',
     },
     {
-      pool_id: '8a99f9815e718933015e85b1bfd211db',
+      id: '8a99f9815e718933015e85b1bfd211db',
       quantity: 250,
       start_date: '2017-09-15T04:00:00+0000',
       end_date: '2018-09-15T03:59:59+0000',

data/webpack/scenes/Subscriptions/__tests__/SubscriptionValidations.test.js

@@ -30,6 +30,11 @@ describe('validateQuantity', () => {
       .toEqual(validationError('Has to be > 0'));
   });
 
+  it('detects zero', () => {
+    expect(validateQuantity('0', 500))
+      .toEqual(validationError('Has to be > 0'));
+  });
+
   it('detects too big quantity', () => {
     expect(validateQuantity('501', 500))
       .toEqual(validationError('Exceeds available quantity'));

data/webpack/scenes/Subscriptions/__tests__/subscriptions.fixtures.js

@@ -135,7 +135,7 @@ export const requestSuccessResponseWithRHSubscriptions = Immutable({
 export const quantitiesRequestSuccessResponse = Immutable({
   results: [
     {
-      pool_id: '9a95f981519abf020151ab082c5e0313',
+      id: '9a95f981519abf020151ab082c5e0313',
       quantity: 10000,
       available: 100,
       start_date: '2016-12-15T05:00:00+0000',
@@ -151,7 +151,7 @@ export const quantitiesRequestSuccessResponse = Immutable({
       ],
     },
     {
-      pool_id: '6b123381519abf020151ab082c5e4678',
+      id: '6b123381519abf020151ab082c5e4678',
       quantity: 400,
       available: 40,
       start_date: '2016-12-15T05:00:00+0000',

data/webpack/scenes/Subscriptions/{EntitlementsInlineEditFormatter.js → components/SubscriptionsTable/EntitlementsInlineEditFormatter.js}

@@ -1,7 +1,8 @@
 import React from 'react';
+import { sprintf } from 'jed';
 import { Table, FormControl, FormGroup, HelpBlock, Spinner } from 'patternfly-react';
-import { validateQuantity } from './SubscriptionValidations';
-import { KEY_CODES } from '../../move_to_foreman/common/helpers';
+import { validateQuantity } from '../../SubscriptionValidations';
+import { KEY_CODES } from '../../../../move_to_foreman/common/helpers';
 
 export const entitlementsInlineEditFormatter =
   inlineEditController => Table.inlineEditFormatterFactory({
@@ -39,10 +40,9 @@ export const entitlementsInlineEditFormatter =
         ? 'editable editing changed'
         : 'editable editing';
 
-      const maxMessage = [
-        __('Max'),
-        availableQuantity,
-      ].join(' ');
+      const maxMessage = (availableQuantity < 1)
+        ? __('Unlimited')
+        : sprintf(__('Max %(availableQuantity)s'), { availableQuantity });
 
       const validation = validateQuantity(value, availableQuantity);
 
@@ -55,7 +55,7 @@ export const entitlementsInlineEditFormatter =
         // The same issue prevents from correct switching inputs on TAB.
         // See the reactabular code for details:
         // https://github.com/reactabular/reactabular/blob/master/packages/reactabular-table/src/body-row.js#L58
-        <Spinner loading={!availableQuantity} size="xs">
+        <Spinner loading={availableQuantity === undefined} size="xs">
           <FormGroup
             validationState={validation.state}
           >

data/webpack/scenes/Subscriptions/{SubscriptionsTable.js → components/SubscriptionsTable/SubscriptionsTable.js}

@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { sprintf } from 'jed';
-import { cloneDeep, findIndex } from 'lodash';
-import { Spinner, Table, Alert } from 'patternfly-react';
-import { Table as ForemanTable, TableBody as ForemanTableBody } from '../../move_to_foreman/components/common/table';
-import ConfirmDialog from '../../move_to_foreman/components/common/ConfirmDialog';
-import Dialog from '../../move_to_foreman/components/common/Dialog';
-import { columns } from './SubscriptionsTableSchema';
-import { recordsValid } from './SubscriptionValidations';
+import { cloneDeep, findIndex, isEqual } from 'lodash';
+import { Table, Alert } from 'patternfly-react';
+import { LoadingState } from '../../../../move_to_pf/LoadingState';
+import { Table as ForemanTable, TableBody as ForemanTableBody } from '../../../../move_to_foreman/components/common/table';
+import ConfirmDialog from '../../../../move_to_foreman/components/common/ConfirmDialog';
+import Dialog from '../../../../move_to_foreman/components/common/Dialog';
+import { recordsValid } from '../../SubscriptionValidations';
+import { createSubscriptionsTableSchema } from './SubscriptionsTableSchema';
+import { buildTableRows, groupSubscriptionsByProductId, buildPools } from './SubscriptionsTableHelpers';
 
 const emptyStateData = {
   header: __('There are no Subscriptions to display'),
@@ -39,48 +42,16 @@ ErrorAlerts.propTypes = {
   errors: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-const buildTableRows = (subscriptions, updatedQuantity) =>
-  subscriptions.results.map((subs) => {
-    if (updatedQuantity[subs.id]) {
-      return {
-        ...subs,
-        entitlementsChanged: true,
-        quantity: updatedQuantity[subs.id],
-        availableQuantity: subscriptions.availableQuantities[subs.id],
-      };
-    }
-    return {
-      ...subs,
-      availableQuantity: subscriptions.availableQuantities[subs.id],
-    };
-  });
-
-const buildPools = updatedQuantity =>
-  Object.entries(updatedQuantity)
-    .map(([id, quantity]) => ({
-      id,
-      quantity,
-    }));
-
 class SubscriptionsTable extends Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.subscriptions !== undefined) {
-      return {
-        rows: buildTableRows(
-          nextProps.subscriptions,
-          prevState.updatedQuantity,
-        ),
-      };
-    }
-    return null;
-  }
-
   constructor(props) {
     super(props);
+
     this.state = {
+      rows: undefined,
+      subscriptions: undefined,
+      groupdSubscriptions: undefined,
       updatedQuantity: {},
       editing: false,
-      rows: props.subscriptions.results,
       showUpdateConfirmDialog: false,
       showCancelConfirmDialog: false,
       showErrorDialog: false,
@@ -88,6 +59,41 @@ class SubscriptionsTable extends Component {
     };
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (
+      nextProps.subscriptions !== undefined &&
+      !isEqual(nextProps.subscriptions, prevState.subscriptions)
+    ) {
+      const groupdSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
+      const rows = buildTableRows(
+        groupdSubscriptions,
+        nextProps.subscriptions.availableQuantities,
+        prevState.updatedQuantity,
+      );
+
+      return { rows, groupdSubscriptions, subscriptions: nextProps.subscriptions };
+    }
+
+    return null;
+  }
+
+  toggleSubscriptionGroup(groupId) {
+    const { subscriptions } = this.props;
+    const { groupdSubscriptions, updatedQuantity } = this.state;
+    const { open } = groupdSubscriptions[groupId];
+
+    groupdSubscriptions[groupId].open = !open;
+
+
+    const rows = buildTableRows(
+      groupdSubscriptions,
+      subscriptions.availableQuantities,
+      updatedQuantity,
+    );
+
+    this.setState({ rows, groupdSubscriptions });
+  }
+
   enableEditing(editingState) {
     this.setState({
       updatedQuantity: {},
@@ -96,8 +102,12 @@ class SubscriptionsTable extends Component {
   }
 
   updateRows(updatedQuantity) {
+    const { groupdSubscriptions } = this.state;
+    const { subscriptions } = this.props;
+
     const rows = buildTableRows(
-      this.props.subscriptions,
+      groupdSubscriptions,
+      subscriptions.availableQuantities,
       updatedQuantity,
     );
     this.setState({ rows, updatedQuantity });
@@ -148,6 +158,17 @@ class SubscriptionsTable extends Component {
 
   render() {
     const { subscriptions } = this.props;
+    const { groupdSubscriptions } = this.state;
+
+    const groupingController = {
+      isCollapseable: ({ rowData }) =>
+        // it is the first subscription in the group
+        rowData.id === groupdSubscriptions[rowData.product_id].subscriptions[0].id &&
+        // the group contains more then one subscription
+        groupdSubscriptions[rowData.product_id].subscriptions.length > 1,
+      isCollapsed: ({ rowData }) => !groupdSubscriptions[rowData.product_id].open,
+      toggle: ({ rowData }) => this.toggleSubscriptionGroup(rowData.product_id),
+    };
 
     const inlineEditController = {
       isEditing: ({ rowData }) => (this.state.editing && rowData.available >= 0),
@@ -229,10 +250,14 @@ class SubscriptionsTable extends Component {
       bodyMessage = __('No subscriptions match your search criteria.');
     }
 
-    const columnsDefinition = columns(inlineEditController, selectionController);
+    const columnsDefinition = createSubscriptionsTableSchema(
+      inlineEditController,
+      selectionController,
+      groupingController,
+    );
 
     return (
-      <Spinner loading={subscriptions.loading} className="small-spacer">
+      <LoadingState loading={subscriptions.loading} loadingText={__('Loading')}>
         <ErrorAlerts
           errors={[
             subscriptions.error,
@@ -267,6 +292,9 @@ class SubscriptionsTable extends Component {
             rows={this.state.rows}
             rowKey="id"
             message={bodyMessage}
+            onRow={rowData => ({
+              className: classNames({ 'open-grouped-row': !groupingController.isCollapsed({ rowData }) }),
+            })}
           />
         </ForemanTable>
         <ConfirmDialog
@@ -316,7 +344,7 @@ class SubscriptionsTable extends Component {
           onConfirm={() => this.props.onDeleteSubscriptions(this.state.selectedRows)}
           onCancel={this.props.onSubscriptionDeleteModalClose}
         />
-      </Spinner>
+      </LoadingState>
     );
   }
 }