katello 3.8.0.rc1 → 3.8.0.rc2

data/webpack/scenes/Subscriptions/Manifest/__tests__/__snapshots__/ManageManifestModal.test.js.snap

@@ -73,14 +73,19 @@ exports[`manage manifest modal should render 1`] = `
           <FormGroup
             bsClass="form-group"
           >
-            <ControlLabel
-              bsClass="control-label"
-              className="col-sm-3"
-              htmlFor="cdnUrl"
-              srOnly={false}
+            <Col
+              bsClass="col"
+              componentClass="div"
+              sm={3}
             >
-              Red Hat CDN URL
-            </ControlLabel>
+              <ControlLabel
+                bsClass="control-label"
+                htmlFor="cdnUrl"
+                srOnly={false}
+              >
+                Red Hat CDN URL
+              </ControlLabel>
+            </Col>
             <Col
               bsClass="col"
               componentClass="div"
@@ -96,6 +101,27 @@ exports[`manage manifest modal should render 1`] = `
               />
             </Col>
           </FormGroup>
+          <FormGroup
+            bsClass="form-group"
+          >
+            <Col
+              bsClass="col"
+              componentClass="div"
+              sm={3}
+              smOffset={3}
+            >
+              <Button
+                active={false}
+                block={false}
+                bsClass="btn"
+                bsStyle="default"
+                disabled={false}
+                onClick={[Function]}
+              >
+                Update
+              </Button>
+            </Col>
+          </FormGroup>
           <br />
           <h5>
             Subscription Manifest
@@ -215,6 +241,7 @@ exports[`manage manifest modal should render 1`] = `
         <LoadingState
           loading={false}
           loadingText="Loading"
+          timeout={300}
         >
           <Table
             columns={

data/webpack/scenes/Subscriptions/Manifest/__tests__/manifest.fixtures.js

@@ -1,4 +1,5 @@
 import Immutable from 'seamless-immutable';
+import { toastErrorAction, failureAction } from '../../../../services/api/testHelpers';
 
 export const manifestHistoryInitialState = Immutable({
   loading: true,
@@ -149,10 +150,8 @@ export const manifestHistoryFailureActions = [
   {
     type: 'MANIFEST_HISTORY_REQUEST',
   },
-  {
-    result: new Error('Request failed with status code 422'),
-    type: 'MANIFEST_HISTORY_FAILURE',
-  },
+  failureAction('MANIFEST_HISTORY_FAILURE'),
+  toastErrorAction(),
 ];
 
 export const uploadManifestSuccessActions = [
@@ -169,10 +168,8 @@ export const uploadManifestFailureActions = [
   {
     type: 'UPLOAD_MANIFEST_REQUEST',
   },
-  {
-    result: new Error('Request failed with status code 422'),
-    type: 'UPLOAD_MANIFEST_FAILURE',
-  },
+  failureAction('UPLOAD_MANIFEST_FAILURE'),
+  toastErrorAction(),
 ];
 
 export const refreshManifestSuccessActions = [
@@ -189,10 +186,8 @@ export const refreshManifestFailureActions = [
   {
     type: 'REFRESH_MANIFEST_REQUEST',
   },
-  {
-    result: new Error('Request failed with status code 422'),
-    type: 'REFRESH_MANIFEST_FAILURE',
-  },
+  failureAction('REFRESH_MANIFEST_FAILURE'),
+  toastErrorAction(),
 ];
 
 export const deleteManifestSuccessActions = [
@@ -209,8 +204,6 @@ export const deleteManifestFailureActions = [
   {
     type: 'DELETE_MANIFEST_REQUEST',
   },
-  {
-    result: new Error('Request failed with status code 422'),
-    type: 'DELETE_MANIFEST_FAILURE',
-  },
+  failureAction('DELETE_MANIFEST_FAILURE'),
+  toastErrorAction(),
 ];

data/webpack/scenes/Subscriptions/Manifest/index.js

@@ -15,6 +15,7 @@ import './Manifest.scss';
 const mapStateToProps = state => ({
   organization: state.katello.organization,
   manifestHistory: state.katello.manifestHistory,
+  taskDetails: state.katello.manifestHistory.taskDetails,
 });
 
 // map action dispatchers to props

data/webpack/scenes/Subscriptions/SubscriptionActions.js

@@ -16,7 +16,7 @@ import {
   DELETE_SUBSCRIPTIONS_FAILURE,
 } from './SubscriptionConstants';
 import { filterRHSubscriptions } from './SubscriptionHelpers.js';
-import { getResponseError } from '../../move_to_foreman/common/helpers.js';
+import { apiError } from '../../move_to_foreman/common/helpers.js';
 
 export const createSubscriptionParams = (extendedParams = {}) => ({
   ...{ organization_id: orgId() },
@@ -35,12 +35,7 @@ export const loadAvailableQuantities = (extendedParams = {}) => (dispatch) => {
         response: data,
       });
     })
-    .catch((result) => {
-      dispatch({
-        type: SUBSCRIPTIONS_QUANTITIES_FAILURE,
-        error: getResponseError(result.response),
-      });
-    });
+    .catch(result => dispatch(apiError(SUBSCRIPTIONS_QUANTITIES_FAILURE, result)));
 };
 
 export const loadSubscriptions = (extendedParams = {}) => (dispatch) => {
@@ -60,12 +55,7 @@ export const loadSubscriptions = (extendedParams = {}) => (dispatch) => {
         dispatch(loadAvailableQuantities({ poolIds }));
       }
     })
-    .catch((result) => {
-      dispatch({
-        type: SUBSCRIPTIONS_FAILURE,
-        error: getResponseError(result.response),
-      });
-    });
+    .catch(result => dispatch(apiError(SUBSCRIPTIONS_FAILURE, result)));
 };
 
 export const updateQuantity = (quantities = {}) => (dispatch) => {
@@ -83,12 +73,7 @@ export const updateQuantity = (quantities = {}) => (dispatch) => {
         response: data,
       });
     })
-    .catch((result) => {
-      dispatch({
-        type: UPDATE_QUANTITY_FAILURE,
-        error: getResponseError(result.response),
-      });
-    });
+    .catch(result => dispatch(apiError(UPDATE_QUANTITY_FAILURE, result)));
 };
 
 export const deleteSubscriptions = poolIds => (dispatch) => {
@@ -106,13 +91,7 @@ export const deleteSubscriptions = poolIds => (dispatch) => {
         response: data,
       });
     })
-    .catch((result) => {
-      dispatch({
-        type: DELETE_SUBSCRIPTIONS_FAILURE,
-        result,
-      });
-    });
+    .catch(result => dispatch(apiError(DELETE_SUBSCRIPTIONS_FAILURE, result)));
 };
 
-
 export default loadSubscriptions;

data/webpack/scenes/Subscriptions/SubscriptionConstants.js

@@ -21,6 +21,7 @@ export const BLOCKING_FOREMAN_TASK_TYPES = [
   'Actions::Katello::UpstreamSubscriptions::BindEntitlements',
   'Actions::Katello::UpstreamSubscriptions::UpdateEntitlement',
   'Actions::Katello::UpstreamSubscriptions::RemoveEntitlements',
+  'Actions::Katello::UpstreamSubscriptions::UpdateEntitlements',
 ];
 
 export const MANIFEST_TASKS_BULK_SEARCH_ID = 'activeManifestTasksSearch';

data/webpack/scenes/Subscriptions/SubscriptionHelpers.js

@@ -1,3 +1,6 @@
 // eslint-disable-next-line import/prefer-default-export
 export const filterRHSubscriptions = subscriptions =>
   subscriptions.filter(sub => sub.available >= 0);
+
+export const manifestExists = organization =>
+  organization.owner_details && organization.owner_details.upstreamConsumer;

data/webpack/scenes/Subscriptions/SubscriptionReducer.js

@@ -23,7 +23,7 @@ import { GET_SETTING_SUCCESS } from '../../move_to_foreman/Settings/SettingsCons
 const initialState = Immutable({
   ...initialApiState,
   quantitiesLoading: false,
-  availableQuantities: {},
+  availableQuantities: null,
   tasks: [],
 });
 
@@ -73,15 +73,22 @@ export default (state = initialState, action) => {
       return state.set('loading', false);
 
     case SUBSCRIPTIONS_FAILURE:
+      return state
+        .set('loading', false)
+        .set('results', [])
+        .set('itemCount', 0);
+
     case UPDATE_QUANTITY_FAILURE:
     case DELETE_SUBSCRIPTIONS_FAILURE:
       return state.merge({
-        error: action.error,
         loading: false,
       });
 
     case SUBSCRIPTIONS_QUANTITIES_REQUEST:
-      return state.set('quantitiesLoading', true);
+      return state.merge({
+        quantitiesLoading: true,
+        availableQuantities: null,
+      });
 
     case SUBSCRIPTIONS_QUANTITIES_SUCCESS: {
       return state.merge({
@@ -93,7 +100,7 @@ export default (state = initialState, action) => {
     case SUBSCRIPTIONS_QUANTITIES_FAILURE: {
       return state.merge({
         quantitiesLoading: false,
-        quantitiesError: action.error,
+        availableQuantities: {},
       });
     }
 

data/webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Grid, Row, Col, Form, FormGroup } from 'react-bootstrap';
 import { Button } from 'patternfly-react';
 import TooltipButton from 'react-bootstrap-tooltip-button';
-import { notify } from '../../move_to_foreman/foreman_toast_notifications';
-import helpers from '../../move_to_foreman/common/helpers';
+import { renderTaskFinishedToast } from '../Tasks/helpers';
 import ModalProgressBar from '../../move_to_foreman/components/common/ModalProgressBar';
 import ManageManifestModal from './Manifest/';
 import { SubscriptionsTable } from './components/SubscriptionsTable';
+import { manifestExists } from './SubscriptionHelpers';
 import Search from '../../components/Search/index';
 import api, { orgId } from '../../services/api';
 import { createSubscriptionParams } from './SubscriptionActions.js';
@@ -70,7 +69,7 @@ class SubscriptionsPage extends Component {
   }
 
   getDisabledReason(deleteButton) {
-    const { tasks = [], subscriptions } = this.props;
+    const { tasks = [], subscriptions, organization } = this.props;
     const { disconnected } = subscriptions;
     let disabledReason = null;
 
@@ -79,7 +78,9 @@ class SubscriptionsPage extends Component {
     } else if (tasks.length > 0) {
       disabledReason = __('This is disabled because a manifest related task is in progress.');
     } else if (deleteButton && !disabledReason) {
-      disabledReason = __('This is disabled because no subscriptions are selected');
+      disabledReason = __('This is disabled because no subscriptions are selected.');
+    } else if (!manifestExists(organization)) {
+      disabledReason = __('This is disabled because no manifest has been uploaded.');
     }
 
     return disabledReason;
@@ -103,39 +104,14 @@ class SubscriptionsPage extends Component {
 
     pollTaskUntilDone(taskToPoll.id, {}, POLL_TASK_INTERVAL)
       .then((task) => {
-        function getErrors() {
-          return (
-            <ul>
-              {task.humanized.errors.map(error => (
-                <li key={error}> {error} </li>
-              ))}
-            </ul>
-          );
-        }
-
-        const message = (
-          <span>
-            <span>
-              {`${__(`Task ${task.humanized.action} completed with a result of ${task.result}.`)} `}
-            </span>
-            {task.errors ? getErrors() : ''}
-            <a href={helpers.urlBuilder('foreman_tasks/tasks', '', task.id)}>
-              {__('Click here to go to the tasks page for the task.')}
-            </a>
-          </span>
-        );
-
-        notify({
-          message: ReactDOMServer.renderToStaticMarkup(message),
-          type: task.result,
-        });
-
+        renderTaskFinishedToast(task);
         loadSubscriptions();
       });
   }
 
   render() {
-    const { tasks = [], subscriptions } = this.props;
+    const { tasks = [], subscriptions, organization } = this.props;
+    const currentOrg = orgId();
     const { disconnected } = subscriptions;
     const taskInProgress = tasks.length > 0;
     const disableManifestActions = taskInProgress || disconnected;
@@ -153,7 +129,7 @@ class SubscriptionsPage extends Component {
     const getAutoCompleteParams = search => ({
       endpoint: '/subscriptions/auto_complete_search',
       params: {
-        organization_id: orgId(),
+        organization_id: currentOrg,
         search,
       },
     });
@@ -187,8 +163,18 @@ class SubscriptionsPage extends Component {
       this.setState({ disableDeleteButton: !rowsSelected });
     };
 
+
     const csvParams = createSubscriptionParams({ search: this.state.searchQuery });
 
+    const emptyStateData = {
+      header: __('There are no Subscriptions to display'),
+      description: __('Import a Manifest to manage your Entitlements.'),
+      action: {
+        onClick: showManageManifestModal,
+        title: __('Import a Manifest'),
+      },
+    };
+
     return (
       <Grid bsClass="container-fluid">
         <Row>
@@ -208,7 +194,10 @@ class SubscriptionsPage extends Component {
 
                   <div className="toolbar-pf-action-right">
                     <FormGroup>
-                      <LinkContainer to="subscriptions/add" disabled={disableManifestActions}>
+                      <LinkContainer
+                        to="subscriptions/add"
+                        disabled={disableManifestActions || !manifestExists(organization)}
+                      >
                         <TooltipButton
                           tooltipId="add-subscriptions-button-tooltip"
                           tooltipText={this.getDisabledReason()}
@@ -257,11 +246,14 @@ class SubscriptionsPage extends Component {
               <SubscriptionsTable
                 loadSubscriptions={this.props.loadSubscriptions}
                 updateQuantity={this.props.updateQuantity}
+                emptyState={emptyStateData}
                 subscriptions={this.props.subscriptions}
                 subscriptionDeleteModalOpen={this.state.subscriptionDeleteModalOpen}
                 onSubscriptionDeleteModalClose={onSubscriptionDeleteModalClose}
                 onDeleteSubscriptions={onDeleteSubscriptions}
                 toggleDeleteButton={toggleDeleteButton}
+                task={task}
+                bulkSearch={this.props.bulkSearch}
               />
               <ModalProgressBar
                 show={this.state.showTaskModal}
@@ -279,8 +271,10 @@ class SubscriptionsPage extends Component {
 SubscriptionsPage.propTypes = {
   loadSubscriptions: PropTypes.func.isRequired,
   updateQuantity: PropTypes.func.isRequired,
-  subscriptions: PropTypes.shape().isRequired,
+  subscriptions: PropTypes.shape({}).isRequired,
+  organization: PropTypes.shape({}).isRequired,
   pollBulkSearch: PropTypes.func.isRequired,
+  bulkSearch: PropTypes.func,
   pollTaskUntilDone: PropTypes.func.isRequired,
   loadSetting: PropTypes.func.isRequired,
   tasks: PropTypes.arrayOf(PropTypes.shape({})),
@@ -289,6 +283,7 @@ SubscriptionsPage.propTypes = {
 
 SubscriptionsPage.defaultProps = {
   tasks: [],
+  bulkSearch: undefined,
 };
 
 export default SubscriptionsPage;

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

@@ -1,5 +1,6 @@
 import api, { orgId } from '../../../services/api';
 import { propsToSnakeCase } from '../../../services/index';
+import { apiError } from '../../../move_to_foreman/common/helpers.js';
 
 import {
   UPSTREAM_SUBSCRIPTIONS_REQUEST,
@@ -27,12 +28,7 @@ export const loadUpstreamSubscriptions = (extendedParams = {}) => (dispatch) =>
         search: extendedParams.search,
       });
     })
-    .catch((result) => {
-      dispatch({
-        type: UPSTREAM_SUBSCRIPTIONS_FAILURE,
-        result,
-      });
-    });
+    .catch(result => dispatch(apiError(UPSTREAM_SUBSCRIPTIONS_FAILURE, result)));
 };
 
 export const saveUpstreamSubscriptions = upstreamSubscriptions => (dispatch) => {
@@ -50,12 +46,7 @@ export const saveUpstreamSubscriptions = upstreamSubscriptions => (dispatch) =>
         response: data,
       });
     })
-    .catch((result) => {
-      dispatch({
-        type: SAVE_UPSTREAM_SUBSCRIPTIONS_FAILURE,
-        result,
-      });
-    });
+    .catch(result => dispatch(apiError(SAVE_UPSTREAM_SUBSCRIPTIONS_FAILURE, result)));
 };
 
 export default loadUpstreamSubscriptions;

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

@@ -5,6 +5,7 @@ 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';
@@ -22,6 +23,7 @@ class UpstreamSubscriptionsPage extends Component {
     bindMethods(this, [
       'onChange',
       'saveUpstreamSubscriptions',
+      'quantityValidationInput',
     ]);
   }
 
@@ -31,18 +33,17 @@ class UpstreamSubscriptionsPage extends Component {
 
   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 {
@@ -55,6 +56,25 @@ class UpstreamSubscriptionsPage extends Component {
     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;
 
@@ -64,16 +84,30 @@ class UpstreamSubscriptionsPage extends Component {
     );
   }
 
+  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) {
@@ -88,18 +122,6 @@ class UpstreamSubscriptionsPage extends Component {
 
         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' });
-        }
       }
     });
   }
@@ -121,7 +143,8 @@ class UpstreamSubscriptionsPage extends Component {
               <Button
                 bsStyle="primary"
                 type="submit"
-                disabled={upstreamSubscriptions.loading}
+                disabled={upstreamSubscriptions.loading ||
+                          !this.validateSelectedRows()}
                 onClick={this.saveUpstreamSubscriptions}
               >
                 {__('Submit')}
@@ -170,13 +193,9 @@ class UpstreamSubscriptionsPage extends Component {
       description: __('Subscription Allocations allow you to export subscriptions from the Red Hat Customer Portal to ' +
           'an on-premise subscription management application such as Red Hat Satellite.'),
       docUrl: 'http://redhat.com',
-      documentation: {
-        title: __('Learn more about Subscription Allocations'),
-        url: 'http://redhat.com',
-      },
       action: {
-        title: __('New Subscription Allocation'),
-        url: 'http://redhat.com',
+        title: __('Import a Manifest to Begin'),
+        url: '/subscriptions',
       },
     });
 
@@ -212,7 +231,19 @@ class UpstreamSubscriptionsPage extends Component {
 
     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>
@@ -235,13 +266,12 @@ class UpstreamSubscriptionsPage extends Component {
 }
 
 UpstreamSubscriptionsPage.propTypes = {
-  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;

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

@@ -38,7 +38,7 @@ export default (state = initialState, action) => {
 
     case UPSTREAM_SUBSCRIPTIONS_FAILURE:
       return state.merge({
-        error: action.error,
+        error: action.payload.message,
         loading: false,
       });
 
@@ -49,8 +49,7 @@ export default (state = initialState, action) => {
       return state.set('task', action.response).set('loading', false);
 
     case SAVE_UPSTREAM_SUBSCRIPTIONS_FAILURE: {
-      const error = action.result.response.data;
-      return state.set('error', error).set('loading', false);
+      return state.set('error', action.payload.message).set('loading', false);
     }
 
     default:

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+import { FormGroup, FormControl, ControlLabel, HelpBlock } from 'react-bootstrap';
 import helpers from '../../../move_to_foreman/common/helpers';
 import {
   headerFormatter,
@@ -71,7 +71,7 @@ export const columns = (controller, selectionController) => [
     },
   },
   {
-    property: 'quantity',
+    property: 'available',
     header: {
       label: __('Available Entitlements'),
       formatters: [headerFormatter],
@@ -96,22 +96,27 @@ export const columns = (controller, selectionController) => [
       formatters: [
         (value, { rowData }) => (
           <td>
-            <FormGroup>
+            <FormGroup
+              validationState={controller.quantityValidationInput(rowData)}
+            >
               <ControlLabel srOnly>{__('Number to Allocate')}</ControlLabel>
               <FormControl
                 type="text"
                 onBlur={e => controller.onChange(e.target.value, rowData)}
                 defaultValue={rowData.updatedQuantity}
+                onChange={(e) => {
+                  controller.onChange(e.target.value, rowData);
+                }}
                 onKeyDown={(e) => {
                   const key = e.charCode ? e.charCode : e.keyCode;
                   if (key === 13) {
-                    controller.onChange(e.target.value, rowData);
                     controller.saveUpstreamSubscriptions();
                     e.preventDefault();
                   }
                 }}
               />
-              <div>{__('Max')} {rowData.quantity}</div>
+              {controller.quantityValidationInput(rowData) === 'error' &&
+                <HelpBlock>{controller.quantityValidation(rowData)[1]}</HelpBlock>}
             </FormGroup>
           </td>
         ),