SubscriptionsTable.js in katello-3.8.0.rc1

- old
+ new

@@ -1,32 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { sprintf } from 'jed';
 import { cloneDeep, findIndex, isEqual } from 'lodash';
-import { Table } from 'patternfly-react';
+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';
-import { renderTaskStartedToast } from '../../../Tasks/helpers';
-import {
-  BLOCKING_FOREMAN_TASK_TYPES,
-  MANIFEST_TASKS_BULK_SEARCH_ID,
-} from '../../SubscriptionConstants';
 
+const emptyStateData = {
+  header: __('There are no Subscriptions to display'),
+  description: __('Add Subscriptions to this Allocation to manage your Entitlements.'),
+  documentation: {
+    title: __('Learn more about adding Subscriptions to Allocations'),
+    url: 'http://redhat.com',
+  },
+  action: {
+    title: __('Add Subscriptions'),
+    url: 'subscriptions/add',
+  },
+};
+
+const ErrorAlerts = ({ errors }) => {
+  const alerts = errors.filter(Boolean).map(e => (
+    <Alert type={Alert.ALERT_TYPE_ERROR} key={e}>
+      <span>{e}</span>
+    </Alert>
+  ));
+
+  return (
+    <div>
+      {alerts}
+    </div>
+  );
+};
+ErrorAlerts.propTypes = {
+  errors: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 class SubscriptionsTable extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       rows: undefined,
       subscriptions: undefined,
-      groupedSubscriptions: undefined,
+      groupdSubscriptions: undefined,
       updatedQuantity: {},
       editing: false,
       showUpdateConfirmDialog: false,
       showCancelConfirmDialog: false,
       showErrorDialog: false,
@@ -37,53 +62,53 @@
   static getDerivedStateFromProps(nextProps, prevState) {
     if (
       nextProps.subscriptions !== undefined &&
       !isEqual(nextProps.subscriptions, prevState.subscriptions)
     ) {
-      const groupedSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
+      const groupdSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
       const rows = buildTableRows(
-        groupedSubscriptions,
+        groupdSubscriptions,
         nextProps.subscriptions.availableQuantities,
         prevState.updatedQuantity,
       );
 
-      return { rows, groupedSubscriptions, subscriptions: nextProps.subscriptions };
+      return { rows, groupdSubscriptions, subscriptions: nextProps.subscriptions };
     }
 
     return null;
   }
 
   toggleSubscriptionGroup(groupId) {
     const { subscriptions } = this.props;
-    const { groupedSubscriptions, updatedQuantity } = this.state;
-    const { open } = groupedSubscriptions[groupId];
+    const { groupdSubscriptions, updatedQuantity } = this.state;
+    const { open } = groupdSubscriptions[groupId];
 
-    groupedSubscriptions[groupId].open = !open;
+    groupdSubscriptions[groupId].open = !open;
 
 
     const rows = buildTableRows(
-      groupedSubscriptions,
+      groupdSubscriptions,
       subscriptions.availableQuantities,
       updatedQuantity,
     );
 
-    this.setState({ rows, groupedSubscriptions });
+    this.setState({ rows, groupdSubscriptions });
   }
 
   enableEditing(editingState) {
     this.setState({
       updatedQuantity: {},
       editing: editingState,
     });
   }
 
   updateRows(updatedQuantity) {
-    const { groupedSubscriptions } = this.state;
+    const { groupdSubscriptions } = this.state;
     const { subscriptions } = this.props;
 
     const rows = buildTableRows(
-      groupedSubscriptions,
+      groupdSubscriptions,
       subscriptions.availableQuantities,
       updatedQuantity,
     );
     this.setState({ rows, updatedQuantity });
   }
@@ -107,19 +132,11 @@
   }
 
   confirmEdit() {
     this.showUpdateConfirm(false);
     if (Object.keys(this.state.updatedQuantity).length > 0) {
-      this.props.updateQuantity(buildPools(this.state.updatedQuantity))
-        .then(() =>
-          this.props.bulkSearch({
-            search_id: MANIFEST_TASKS_BULK_SEARCH_ID,
-            type: 'all',
-            active_only: true,
-            action_types: BLOCKING_FOREMAN_TASK_TYPES,
-          }))
-        .then(() => renderTaskStartedToast(this.props.task));
+      this.props.updateQuantity(buildPools(this.state.updatedQuantity));
     }
     this.enableEditing(false);
   }
 
   cancelEdit() {
@@ -138,21 +155,20 @@
     }
     return false;
   }
 
   render() {
-    const { subscriptions, emptyState } = this.props;
-    const { groupedSubscriptions } = this.state;
-    const allSubscriptionResults = subscriptions.results;
+    const { subscriptions } = this.props;
+    const { groupdSubscriptions } = this.state;
 
     const groupingController = {
       isCollapseable: ({ rowData }) =>
         // it is the first subscription in the group
-        rowData.id === groupedSubscriptions[rowData.product_id].subscriptions[0].id &&
+        rowData.id === groupdSubscriptions[rowData.product_id].subscriptions[0].id &&
         // the group contains more then one subscription
-        groupedSubscriptions[rowData.product_id].subscriptions.length > 1,
-      isCollapsed: ({ rowData }) => !groupedSubscriptions[rowData.product_id].open,
+        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),
@@ -184,12 +200,11 @@
 
         this.updateRows(updatedQuantity);
       },
     };
 
-    const checkAllRowsSelected = () =>
-      allSubscriptionResults.length === this.state.selectedRows.length;
+    const checkAllRowsSelected = () => this.state.rows.length === this.state.selectedRows.length;
 
     const updateDeleteButton = () => {
       this.props.toggleDeleteButton(this.state.selectedRows.length > 0);
     };
 
@@ -201,11 +216,11 @@
             { selectedRows: [] },
             updateDeleteButton,
           );
         } else {
           this.setState(
-            { selectedRows: allSubscriptionResults.map(row => row.id) },
+            { selectedRows: this.state.rows.map(row => row.id) },
             updateDeleteButton,
           );
         }
       },
       selectRow: ({ rowData }) => {
@@ -229,11 +244,11 @@
         ...pagination,
       });
     };
 
     let bodyMessage;
-    if (allSubscriptionResults.length === 0 && subscriptions.searchIsActive) {
+    if (subscriptions.results.length === 0 && subscriptions.searchIsActive) {
       bodyMessage = __('No subscriptions match your search criteria.');
     }
 
     const columnsDefinition = createSubscriptionsTableSchema(
       inlineEditController,
@@ -241,13 +256,19 @@
       groupingController,
     );
 
     return (
       <LoadingState loading={subscriptions.loading} loadingText={__('Loading')}>
+        <ErrorAlerts
+          errors={[
+            subscriptions.error,
+            subscriptions.quantitiesError,
+          ]}
+        />
         <ForemanTable
           columns={columnsDefinition}
-          emptyState={emptyState}
+          emptyState={emptyStateData}
           bodyMessage={bodyMessage}
           rows={this.state.rows}
           components={{
             header: {
               row: Table.TableInlineEditHeaderRow,
@@ -329,23 +350,15 @@
 }
 
 SubscriptionsTable.propTypes = {
   loadSubscriptions: PropTypes.func.isRequired,
   updateQuantity: PropTypes.func.isRequired,
-  emptyState: PropTypes.shape({}).isRequired,
   subscriptions: PropTypes.shape({
     results: PropTypes.array,
   }).isRequired,
   subscriptionDeleteModalOpen: PropTypes.bool.isRequired,
   onDeleteSubscriptions: PropTypes.func.isRequired,
   onSubscriptionDeleteModalClose: PropTypes.func.isRequired,
   toggleDeleteButton: PropTypes.func.isRequired,
-  task: PropTypes.shape({}),
-  bulkSearch: PropTypes.func,
-};
-
-SubscriptionsTable.defaultProps = {
-  task: { humanized: {} },
-  bulkSearch: undefined,
 };
 
 export default SubscriptionsTable;