webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsPage.js in katello-3.7.0.rc2 vs webpack/scenes/Subscriptions/UpstreamSubscriptions/UpstreamSubscriptionsPage.js in katello-3.7.0

@@ -3,10 +3,11 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Grid, Row, Col } from 'react-bootstrap';
 import { bindMethods, Button } from 'patternfly-react';
+import BreadcrumbsBar from 'foremanReact/components/BreadcrumbBar';
 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';
 import { columns } from './UpstreamSubscriptionsTableSchema';
@@ -20,31 +21,31 @@
     };
 
     bindMethods(this, [
       'onChange',
       'saveUpstreamSubscriptions',
+      'quantityValidationInput',
     ]);
   }
 
   componentDidMount() {
     this.loadData();
   }
 
   onChange(value, rowData) {
     const { selectedRows } = this.state;
-    const newValue = parseInt(value, 10);
     const pool = {
       ...rowData,
       id: rowData.id,
-      updatedQuantity: newValue,
+      updatedQuantity: value,
       selected: true,
     };
 
     const match = this.poolInSelectedRows(pool);
     const index = _.indexOf(selectedRows, match);
 
-    if (newValue > 0) {
+    if (value) {
       if (match) {
         selectedRows.splice(index, 1, pool);
       } else {
         selectedRows.push(pool);
       }
@@ -53,29 +54,62 @@
     }
 
     this.setState({ selectedRows });
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  quantityValidation(pool) {
+    const origQuantity = pool.updatedQuantity;
+    if (origQuantity && helpers.stringIsInteger(origQuantity)) {
+      const parsedQuantity = parseInt(origQuantity, 10);
+      const aboveZeroMsg = [false, __('Please enter a positive number above zero')];
+
+      if (parsedQuantity.toString().length > 10) return [false, __('Please limit number to 10 digits')];
+      if (!pool.available) return [false, __('No pools available')];
+      // handling unlimited subscriptions, they show as -1
+      if (pool.available === -1) return parsedQuantity ? [true, ''] : aboveZeroMsg;
+      if (parsedQuantity > pool.available) return [false, __(`Quantity must not be above ${pool.available}`)];
+      if (parsedQuantity <= 0) return aboveZeroMsg;
+    } else {
+      return [false, __('Please enter digits only')];
+    }
+    return [true, ''];
+  }
+
   poolInSelectedRows(pool) {
     const { selectedRows } = this.state;
 
     return _.find(
       selectedRows,
       foundPool => pool.id === foundPool.id,
     );
   }
 
+  quantityValidationInput(pool) {
+    if (!pool || pool.updatedQuantity === undefined) return null;
+    if (this.quantityValidation(pool)[0]) {
+      return 'success';
+    }
+    return 'error';
+  }
+
+  validateSelectedRows() {
+    return Array.isArray(this.state.selectedRows) &&
+           this.state.selectedRows.length &&
+           this.state.selectedRows.every(pool => this.quantityValidation(pool)[0]);
+  }
+
   saveUpstreamSubscriptions() {
     const updatedPools = _.map(
       this.state.selectedRows,
-      pool => ({ ...pool, quantity: pool.updatedQuantity }),
+      pool => ({ ...pool, quantity: parseInt(pool.updatedQuantity, 10) }),
     );
 
     const updatedSubscriptions = { pools: updatedPools };
 
     this.props.saveUpstreamSubscriptions(updatedSubscriptions).then(() => {
-      const { task, error } = this.props.upstreamSubscriptions;
+      const { task } = this.props.upstreamSubscriptions;
 
       // TODO: could probably factor this out into a task response component
       if (task) {
         const message = (
           <span>
@@ -86,22 +120,10 @@
           </span>
         );
 
         notify({ message: ReactDOMServer.renderToStaticMarkup(message), type: 'success' });
         this.props.history.push('/subscriptions');
-      } else {
-        let errorMessages = [];
-
-        if (error.errors) {
-          errorMessages = error.errors;
-        } else if (error.message) {
-          errorMessages.push(error.message);
-        }
-
-        for (let i = 0; i < errorMessages.length; i += 1) {
-          notify({ message: errorMessages[i], type: 'error' });
-        }
       }
     });
   }
 
   loadData() {
@@ -119,11 +141,12 @@
           <Row>
             <Col sm={12}>
               <Button
                 bsStyle="primary"
                 type="submit"
-                disabled={upstreamSubscriptions.loading}
+                disabled={upstreamSubscriptions.loading ||
+                          !this.validateSelectedRows()}
                 onClick={this.saveUpstreamSubscriptions}
               >
                 {__('Submit')}
               </Button>
 
@@ -210,11 +233,23 @@
     const tableColumns = columns(this, selectionController);
     const rows = getSelectedUpstreamSubscriptions();
 
     return (
       <Grid bsClass="container-fluid">
-        <h1>{__('Add Subscriptions')}</h1>
+        <BreadcrumbsBar data={{
+          isSwitchable: false,
+          breadcrumbItems: [
+            {
+              caption: __('Subscriptions'),
+              onClick: () => this.props.history.push('/subscriptions'),
+            },
+            {
+              caption: __('Add Subscriptions'),
+            },
+          ],
+        }}
+        />
 
         <LoadingState loading={upstreamSubscriptions.loading} loadingText={__('Loading')}>
           <Row>
             <Col sm={12}>
               <Table
@@ -238,10 +273,10 @@
   history: PropTypes.shape({ push: PropTypes.func }).isRequired,
   loadUpstreamSubscriptions: PropTypes.func.isRequired,
   saveUpstreamSubscriptions: PropTypes.func.isRequired,
   upstreamSubscriptions: PropTypes.shape({
     task: PropTypes.shape({}),
-    error: PropTypes.shape({}),
   }).isRequired,
+  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
 };
 
 export default UpstreamSubscriptionsPage;