SubscriptionsTable.js in katello-3.8.0.rc2

- old
+ new

@@ -1,57 +1,32 @@
 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, Alert } from 'patternfly-react';
+import { Table } 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,
-      groupdSubscriptions: undefined,
+      groupedSubscriptions: undefined,
       updatedQuantity: {},
       editing: false,
       showUpdateConfirmDialog: false,
       showCancelConfirmDialog: false,
       showErrorDialog: false,
@@ -62,53 +37,53 @@
   static getDerivedStateFromProps(nextProps, prevState) {
     if (
       nextProps.subscriptions !== undefined &&
       !isEqual(nextProps.subscriptions, prevState.subscriptions)
     ) {
-      const groupdSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
+      const groupedSubscriptions = groupSubscriptionsByProductId(nextProps.subscriptions);
       const rows = buildTableRows(
-        groupdSubscriptions,
+        groupedSubscriptions,
         nextProps.subscriptions.availableQuantities,
         prevState.updatedQuantity,
       );
 
-      return { rows, groupdSubscriptions, subscriptions: nextProps.subscriptions };
+      return { rows, groupedSubscriptions, subscriptions: nextProps.subscriptions };
     }
 
     return null;
   }
 
   toggleSubscriptionGroup(groupId) {
     const { subscriptions } = this.props;
-    const { groupdSubscriptions, updatedQuantity } = this.state;
-    const { open } = groupdSubscriptions[groupId];
+    const { groupedSubscriptions, updatedQuantity } = this.state;
+    const { open } = groupedSubscriptions[groupId];
 
-    groupdSubscriptions[groupId].open = !open;
+    groupedSubscriptions[groupId].open = !open;
 
 
     const rows = buildTableRows(
-      groupdSubscriptions,
+      groupedSubscriptions,
       subscriptions.availableQuantities,
       updatedQuantity,
     );
 
-    this.setState({ rows, groupdSubscriptions });
+    this.setState({ rows, groupedSubscriptions });
   }
 
   enableEditing(editingState) {
     this.setState({
       updatedQuantity: {},
       editing: editingState,
     });
   }
 
   updateRows(updatedQuantity) {
-    const { groupdSubscriptions } = this.state;
+    const { groupedSubscriptions } = this.state;
     const { subscriptions } = this.props;
 
     const rows = buildTableRows(
-      groupdSubscriptions,
+      groupedSubscriptions,
       subscriptions.availableQuantities,
       updatedQuantity,
     );
     this.setState({ rows, updatedQuantity });
   }
@@ -132,11 +107,19 @@
   }
 
   confirmEdit() {
     this.showUpdateConfirm(false);
     if (Object.keys(this.state.updatedQuantity).length > 0) {
-      this.props.updateQuantity(buildPools(this.state.updatedQuantity));
+      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.enableEditing(false);
   }
 
   cancelEdit() {
@@ -155,20 +138,21 @@
     }
     return false;
   }
 
   render() {
-    const { subscriptions } = this.props;
-    const { groupdSubscriptions } = this.state;
+    const { subscriptions, emptyState } = this.props;
+    const { groupedSubscriptions } = this.state;
+    const allSubscriptionResults = subscriptions.results;
 
     const groupingController = {
       isCollapseable: ({ rowData }) =>
         // it is the first subscription in the group
-        rowData.id === groupdSubscriptions[rowData.product_id].subscriptions[0].id &&
+        rowData.id === groupedSubscriptions[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,
+        groupedSubscriptions[rowData.product_id].subscriptions.length > 1,
+      isCollapsed: ({ rowData }) => !groupedSubscriptions[rowData.product_id].open,
       toggle: ({ rowData }) => this.toggleSubscriptionGroup(rowData.product_id),
     };
 
     const inlineEditController = {
       isEditing: ({ rowData }) => (this.state.editing && rowData.available >= 0),
@@ -200,11 +184,12 @@
 
         this.updateRows(updatedQuantity);
       },
     };
 
-    const checkAllRowsSelected = () => this.state.rows.length === this.state.selectedRows.length;
+    const checkAllRowsSelected = () =>
+      allSubscriptionResults.length === this.state.selectedRows.length;
 
     const updateDeleteButton = () => {
       this.props.toggleDeleteButton(this.state.selectedRows.length > 0);
     };
 
@@ -216,11 +201,11 @@
             { selectedRows: [] },
             updateDeleteButton,
           );
         } else {
           this.setState(
-            { selectedRows: this.state.rows.map(row => row.id) },
+            { selectedRows: allSubscriptionResults.map(row => row.id) },
             updateDeleteButton,
           );
         }
       },
       selectRow: ({ rowData }) => {
@@ -244,11 +229,11 @@
         ...pagination,
       });
     };
 
     let bodyMessage;
-    if (subscriptions.results.length === 0 && subscriptions.searchIsActive) {
+    if (allSubscriptionResults.length === 0 && subscriptions.searchIsActive) {
       bodyMessage = __('No subscriptions match your search criteria.');
     }
 
     const columnsDefinition = createSubscriptionsTableSchema(
       inlineEditController,
@@ -256,19 +241,13 @@
       groupingController,
     );
 
     return (
       <LoadingState loading={subscriptions.loading} loadingText={__('Loading')}>
-        <ErrorAlerts
-          errors={[
-            subscriptions.error,
-            subscriptions.quantitiesError,
-          ]}
-        />
         <ForemanTable
           columns={columnsDefinition}
-          emptyState={emptyStateData}
+          emptyState={emptyState}
           bodyMessage={bodyMessage}
           rows={this.state.rows}
           components={{
             header: {
               row: Table.TableInlineEditHeaderRow,
@@ -350,15 +329,23 @@
 }
 
 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;