katello 5.0.0.rc2 → 5.0.1

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/SubscriptionsTable.js

@@ -1,294 +1,287 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, findIndex, isEqual } from 'lodash';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { LoadingState } from '../../../../components/LoadingState';
+import { filterRHSubscriptions } from '../../SubscriptionHelpers';
 import { recordsValid } from '../../SubscriptionValidations';
 import { buildTableRows, groupSubscriptionsByProductId } from './SubscriptionsTableHelpers';
 import Table from './components/Table';
 import Dialogs from './components/Dialogs';
 
-class SubscriptionsTable extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      rows: undefined,
-      subscriptions: undefined,
-      groupedSubscriptions: undefined,
-      updatedQuantity: {},
-      editing: false,
-      showUpdateConfirmDialog: false,
-      showCancelConfirmDialog: false,
-      showErrorDialog: false,
+const SubscriptionsTable = ({
+  emptyState,
+  tableColumns,
+  columns,
+  updateQuantity,
+  selectionEnabled,
+  customHeader,
+  customToolbar,
+  searchQuery,
+  organizationId,
+  availableQuantities,
+  selectedRows,
+  onSelectedRowsChange,
+  toggleDeleteButton,
+  subscriptionDeleteModalOpen,
+  onDeleteSubscriptions,
+  onSubscriptionDeleteModalClose,
+  onApiResponse,
+  onRefreshReady,
+}) => {
+  const [subscriptions, setSubscriptions] = useState({
+    results: [],
+    loading: false,
+    availableQuantities: null,
+    itemCount: 0,
+    pagination: { page: 1, perPage: 20 },
+    searchIsActive: false,
+  });
+  const [rows, setRows] = useState([]);
+  const [groupedSubscriptions, setGroupedSubscriptions] = useState(undefined);
+  const [syncedSubscriptions, setSyncedSubscriptions] = useState(undefined);
+  const [updatedQuantity, setUpdatedQuantity] = useState({});
+  const [editing, setEditing] = useState(false);
+  const [showUpdateConfirmDialog, setShowUpdateConfirmDialog] = useState(false);
+  const [showCancelConfirmDialog, setShowCancelConfirmDialog] = useState(false);
+  const [showErrorDialog, setShowErrorDialog] = useState(false);
+
+  const handleApiResponse = useCallback((apiData) => {
+    const nextSubscriptions = {
+      results: apiData.results || [],
+      loading: apiData.loading,
+      availableQuantities: apiData.availableQuantities,
+      itemCount: apiData.itemCount,
+      pagination: {
+        page: apiData.page,
+        perPage: apiData.perPage,
+      },
+      searchIsActive: apiData.searchIsActive,
+      missingPermissions: apiData.missingPermissions,
+      activePermissions: apiData.activePermissions,
     };
-  }
+    setSubscriptions(nextSubscriptions);
+    if (onApiResponse) {
+      onApiResponse(apiData);
+    }
+  }, [onApiResponse]);
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  // Replaces getDerivedStateFromProps: sync rows when subscriptions change
+  useEffect(() => {
     if (
-      nextProps.subscriptions !== undefined &&
-      !isEqual(nextProps.subscriptions, prevState.subscriptions)
+      subscriptions !== undefined &&
+      !isEqual(subscriptions, syncedSubscriptions)
     ) {
-      const groupedSubscriptions = groupSubscriptionsByProductId(
-        nextProps.subscriptions,
-        prevState.groupedSubscriptions,
-      );
-      const rows = buildTableRows(
+      const nextGroupedSubscriptions = groupSubscriptionsByProductId(
+        subscriptions,
         groupedSubscriptions,
-        nextProps.subscriptions.availableQuantities,
-        prevState.updatedQuantity,
+      );
+      const nextRows = buildTableRows(
+        nextGroupedSubscriptions,
+        subscriptions.availableQuantities,
+        updatedQuantity,
       );
 
-      return { rows, groupedSubscriptions, subscriptions: nextProps.subscriptions };
+      setSyncedSubscriptions(subscriptions);
+      setGroupedSubscriptions(nextGroupedSubscriptions);
+      setRows(nextRows);
     }
+  }, [subscriptions, syncedSubscriptions, groupedSubscriptions, updatedQuantity]);
+
+  const enableEditing = useCallback((editingState) => {
+    setUpdatedQuantity({});
+    setEditing(editingState);
+  }, []);
+
+  const updateRows = useCallback((nextUpdatedQuantity) => {
+    setUpdatedQuantity(nextUpdatedQuantity);
+    setRows(buildTableRows(
+      groupedSubscriptions,
+      subscriptions.availableQuantities,
+      nextUpdatedQuantity,
+    ));
+  }, [groupedSubscriptions, subscriptions.availableQuantities]);
+
+  const toggleSubscriptionGroup = useCallback((groupId) => {
+    setGroupedSubscriptions((prevGrouped) => {
+      const nextGrouped = cloneDeep(prevGrouped);
+      nextGrouped[groupId].open = !nextGrouped[groupId].open;
+
+      setRows(buildTableRows(
+        nextGrouped,
+        subscriptions.availableQuantities,
+        updatedQuantity,
+      ));
+
+      return nextGrouped;
+    });
+  }, [subscriptions.availableQuantities, updatedQuantity]);
+
+  const showUpdateConfirm = useCallback(show => setShowUpdateConfirmDialog(show), []);
+  const showCancelConfirm = useCallback(show => setShowCancelConfirmDialog(show), []);
+  const showErrorDialogFn = useCallback(show => setShowErrorDialog(show), []);
+
+  const cancelEdit = useCallback(() => {
+    setShowCancelConfirmDialog(false);
+    setUpdatedQuantity({});
+    setEditing(false);
+    setRows(buildTableRows(
+      groupedSubscriptions,
+      subscriptions.availableQuantities,
+      {},
+    ));
+  }, [groupedSubscriptions, subscriptions.availableQuantities]);
+
+  const hasQuantityChanged = useCallback((rowData, editedValue) => {
+    if (editedValue !== undefined) {
+      const originalRows = subscriptions.results;
+      const index = findIndex(originalRows, row => (row.id === rowData.id));
+      if (index < 0) {
+        return false;
+      }
+      const currentValue = originalRows[index].quantity;
 
-    return null;
-  }
+      return (`${editedValue}` !== `${currentValue}`);
+    }
+    return false;
+  }, [subscriptions.results]);
 
-  getInlineEditController = () => ({
+  const inlineEditController = useMemo(() => ({
     isEditing: ({ rowData }) =>
-      (this.state.editing && rowData.upstream_pool_id && !rowData.expired),
+      (editing && rowData.upstream_pool_id && !rowData.expired),
     hasChanged: ({ rowData }) => {
-      const editedValue = this.state.updatedQuantity[rowData.id];
-      return this.hasQuantityChanged(rowData, editedValue);
+      const editedValue = updatedQuantity[rowData.id];
+      return hasQuantityChanged(rowData, editedValue);
     },
-    onActivate: () => this.enableEditing(true),
+    onActivate: () => enableEditing(true),
     onConfirm: () => {
-      if (recordsValid(this.state.rows)) {
-        this.showUpdateConfirm(true);
+      if (recordsValid(rows)) {
+        showUpdateConfirm(true);
       } else {
-        this.showErrorDialog(true);
+        showErrorDialogFn(true);
       }
     },
-    onCancel: () => {
-      this.showCancelConfirm(true);
-    },
+    onCancel: () => showCancelConfirm(true),
     onChange: (value, { rowData }) => {
-      const updatedQuantity = cloneDeep(this.state.updatedQuantity);
+      const nextUpdatedQuantity = cloneDeep(updatedQuantity);
 
-      if (this.hasQuantityChanged(rowData, value)) {
-        updatedQuantity[rowData.id] = value;
+      if (hasQuantityChanged(rowData, value)) {
+        nextUpdatedQuantity[rowData.id] = value;
       } else {
-        delete updatedQuantity[rowData.id];
+        delete nextUpdatedQuantity[rowData.id];
       }
 
-      this.updateRows(updatedQuantity);
+      updateRows(nextUpdatedQuantity);
     },
-  });
-
-  getSelectionController = () => {
-    const allSubscriptionResults = this.props.subscriptions.results;
+  }), [
+    editing,
+    updatedQuantity,
+    rows,
+    hasQuantityChanged,
+    enableEditing,
+    showUpdateConfirm,
+    showErrorDialogFn,
+    showCancelConfirm,
+    updateRows,
+  ]);
+
+  const selectionController = useMemo(() => {
+    const allSubscriptionResults = filterRHSubscriptions(subscriptions.results || []);
 
     const checkAllRowsSelected = () =>
-      allSubscriptionResults.length === this.props.selectedRows.length;
+      allSubscriptionResults.length > 0 &&
+      allSubscriptionResults.length === selectedRows.length;
 
-    return ({
+    return {
       allRowsSelected: () => checkAllRowsSelected(),
       selectAllRows: () => {
         if (checkAllRowsSelected()) {
-          this.props.onSelectedRowsChange([]);
-          this.props.toggleDeleteButton(false);
+          onSelectedRowsChange([]);
+          toggleDeleteButton(false);
         } else {
-          this.props.onSelectedRowsChange(allSubscriptionResults.map(row => row.id));
-          this.props.toggleDeleteButton(true);
+          const selectedIds = allSubscriptionResults.map(row => row.id);
+          onSelectedRowsChange(selectedIds);
+          toggleDeleteButton(selectedIds.length > 0);
         }
       },
       selectRow: ({ rowData }) => {
-        let { selectedRows } = this.props;
+        let nextSelectedRows = selectedRows;
         if (selectedRows.includes(rowData.id)) {
-          selectedRows = selectedRows.filter(e => e !== rowData.id);
+          nextSelectedRows = selectedRows.filter(e => e !== rowData.id);
         } else {
-          selectedRows = selectedRows.concat(rowData.id);
+          nextSelectedRows = selectedRows.concat(rowData.id);
         }
-        this.props.onSelectedRowsChange(selectedRows);
-        this.props.toggleDeleteButton(selectedRows.length > 0);
+        onSelectedRowsChange(nextSelectedRows);
+        toggleDeleteButton(nextSelectedRows.length > 0);
       },
-      isSelected: ({ rowData }) => this.props.selectedRows.includes(rowData.id),
-    });
-  };
-
-  getTableProps = () => {
-    const {
-      subscriptions,
-      emptyState,
-      tableColumns,
-      loadSubscriptions,
-      selectionEnabled,
-    } = this.props;
-    const { groupedSubscriptions, rows, editing } = this.state;
-
-    return {
-      emptyState,
-      editing,
-      groupedSubscriptions,
-      loadSubscriptions,
-      rows,
-      subscriptions,
-      selectionEnabled,
-      tableColumns,
-      toggleSubscriptionGroup: this.toggleSubscriptionGroup,
-      inlineEditController: this.getInlineEditController(),
-      selectionController: this.getSelectionController(),
-    };
-  };
-
-  getUpdateDialogProps = () => {
-    const { showUpdateConfirmDialog: show, updatedQuantity } = this.state;
-    const {
-      updateQuantity,
-    } = this.props;
-    return {
-      show,
-      updatedQuantity,
-      updateQuantity,
-      enableEditing: this.enableEditing,
-      showUpdateConfirm: this.showUpdateConfirm,
-    };
-  };
-
-  getUnsavedChangesDialogProps = () => {
-    const { showCancelConfirmDialog: show } = this.state;
-    return {
-      show,
-      cancelEdit: this.cancelEdit,
-      showCancelConfirm: this.showCancelConfirm,
-    };
-  };
-
-  getInputsErrorsDialogProps = () => {
-    const { showErrorDialog: show } = this.state;
-    return {
-      show,
-      showErrorDialog: this.showErrorDialog,
+      isSelected: ({ rowData }) => selectedRows.includes(rowData.id),
     };
-  };
-
-  getDeleteDialogProps = () => {
-    const {
-      subscriptionDeleteModalOpen: show,
-      onDeleteSubscriptions,
-      onSubscriptionDeleteModalClose,
-    } = this.props;
-    const { selectedRows } = this.props;
-    return {
-      show,
-      selectedRows,
-      onSubscriptionDeleteModalClose,
-      onDeleteSubscriptions,
-    };
-  };
-
-  getLoadingStateProps = () => {
-    const { subscriptions: { loading } } = this.props;
-    return {
-      loading,
-      loadingText: __('Loading'),
-    };
-  };
-
-  getDialogsProps = () => ({
-    updateDialog: this.getUpdateDialogProps(),
-    unsavedChangesDialog: this.getUnsavedChangesDialogProps(),
-    inputsErrorsDialog: this.getInputsErrorsDialogProps(),
-    deleteDialog: this.getDeleteDialogProps(),
-  });
-
-
-  toggleSubscriptionGroup = (groupId) => {
-    this.setState((prevState) => {
-      const { subscriptions } = this.props;
-      const { groupedSubscriptions, updatedQuantity } = prevState;
-      const { open } = groupedSubscriptions[groupId];
-
-      groupedSubscriptions[groupId].open = !open;
-
-      const rows = buildTableRows(
-        groupedSubscriptions,
-        subscriptions.availableQuantities,
-        updatedQuantity,
-      );
-      return { rows, groupedSubscriptions };
-    });
-  };
-
-  enableEditing = (editingState) => {
-    this.setState({
-      updatedQuantity: {},
-      editing: editingState,
-    });
-  };
-
-  updateRows = (updatedQuantity) => {
-    this.setState((prevState) => {
-      const { groupedSubscriptions } = prevState;
-      const { subscriptions } = this.props;
-
-      const rows = buildTableRows(
-        groupedSubscriptions,
-        subscriptions.availableQuantities,
-        updatedQuantity,
-      );
-      return { rows, updatedQuantity };
-    });
-  };
-
-  showUpdateConfirm = (show) => {
-    this.setState({
-      showUpdateConfirmDialog: show,
-    });
-  };
-
-  showCancelConfirm = (show) => {
-    this.setState({
-      showCancelConfirmDialog: show,
-    });
-  };
-
-  showErrorDialog = (show) => {
-    this.setState({
-      showErrorDialog: show,
-    });
-  };
-
-  cancelEdit = () => {
-    this.showCancelConfirm(false);
-    this.enableEditing(false);
-    this.updateRows({});
-  };
-
-  hasQuantityChanged = (rowData, editedValue) => {
-    if (editedValue !== undefined) {
-      const originalRows = this.props.subscriptions.results;
-      const index = findIndex(originalRows, row => (row.id === rowData.id));
-      const currentValue = originalRows[index].quantity;
-
-      return (`${editedValue}` !== `${currentValue}`);
-    }
-    return false;
-  };
-
-  render() {
-    return (
-      <LoadingState {...this.getLoadingStateProps()}>
-        <Table ouiaId="subscriptions-table" {...this.getTableProps()} />
-        <Dialogs {...this.getDialogsProps()} />
-      </LoadingState>
-    );
-  }
-}
+  }, [
+    subscriptions.results,
+    selectedRows,
+    onSelectedRowsChange,
+    toggleDeleteButton,
+  ]);
+
+  return (
+    <>
+      <Table
+        ouiaId="subscriptions-table"
+        emptyState={emptyState}
+        editing={editing}
+        groupedSubscriptions={groupedSubscriptions}
+        rows={rows}
+        searchQuery={searchQuery}
+        organizationId={organizationId}
+        availableQuantities={availableQuantities}
+        selectionEnabled={selectionEnabled}
+        tableColumns={tableColumns}
+        columns={columns}
+        customHeader={customHeader}
+        customToolbar={customToolbar}
+        toggleSubscriptionGroup={toggleSubscriptionGroup}
+        inlineEditController={inlineEditController}
+        selectionController={selectionController}
+        onApiResponse={handleApiResponse}
+        onRefreshReady={onRefreshReady}
+      />
+      <Dialogs
+        updateDialog={{
+          show: showUpdateConfirmDialog,
+          updatedQuantity,
+          updateQuantity,
+          enableEditing,
+          showUpdateConfirm,
+        }}
+        unsavedChangesDialog={{
+          show: showCancelConfirmDialog,
+          cancelEdit,
+          showCancelConfirm,
+        }}
+        inputsErrorsDialog={{
+          show: showErrorDialog,
+          showErrorDialog: showErrorDialogFn,
+        }}
+        deleteDialog={{
+          show: subscriptionDeleteModalOpen,
+          selectedRows,
+          onSubscriptionDeleteModalClose,
+          onDeleteSubscriptions,
+        }}
+      />
+    </>
+  );
+};
 
 SubscriptionsTable.propTypes = {
   tableColumns: PropTypes.arrayOf(PropTypes.string).isRequired,
-  loadSubscriptions: PropTypes.func.isRequired,
+  columns: PropTypes.objectOf(PropTypes.shape({
+    title: PropTypes.node,
+    wrapper: PropTypes.func,
+  })).isRequired,
   updateQuantity: PropTypes.func.isRequired,
   emptyState: PropTypes.shape({}).isRequired,
-  subscriptions: PropTypes.shape({
-    loading: PropTypes.bool,
-    availableQuantities: PropTypes.shape({}),
-    // Disabling rule as existing code failed due to an eslint-plugin-react update
-    // eslint-disable-next-line react/forbid-prop-types
-    results: PropTypes.array,
-  }).isRequired,
+  searchQuery: PropTypes.string,
+  organizationId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  availableQuantities: PropTypes.shape({}),
   subscriptionDeleteModalOpen: PropTypes.bool.isRequired,
   onDeleteSubscriptions: PropTypes.func.isRequired,
   onSubscriptionDeleteModalClose: PropTypes.func.isRequired,
@@ -296,10 +289,21 @@ SubscriptionsTable.propTypes = {
   selectedRows: PropTypes.instanceOf(Array).isRequired,
   onSelectedRowsChange: PropTypes.func.isRequired,
   selectionEnabled: PropTypes.bool,
+  customHeader: PropTypes.node,
+  customToolbar: PropTypes.node,
+  onApiResponse: PropTypes.func,
+  onRefreshReady: PropTypes.func,
 };
 
 SubscriptionsTable.defaultProps = {
+  searchQuery: '',
+  organizationId: undefined,
+  availableQuantities: null,
   selectionEnabled: false,
+  customHeader: undefined,
+  customToolbar: undefined,
+  onApiResponse: undefined,
+  onRefreshReady: undefined,
 };
 
 export default SubscriptionsTable;