convert OrganizationList to use PaginatedDataList (#192)

* convert Org list to use PaginatedDataList

* add ToolbarAddButton, ToolbarDeleteButton

* pass full org into OrganizationListItem

src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
+import PropTypes, { arrayOf, shape, string, bool, node } from 'prop-types';
 import {
   DataList,
   DataListItem,
@@ -99,6 +99,9 @@ class PaginatedDataList extends React.Component {
       additionalControls,
       itemName,
       itemNamePlural,
+      showSelectAll,
+      isAllSelected,
+      onSelectAll,
     } = this.props;
     const { error } = this.state;
     const [orderBy, sortOrder] = this.getSortOrder();
@@ -146,8 +149,10 @@ class PaginatedDataList extends React.Component {
                   columns={toolbarColumns}
                   onSearch={() => { }}
                   onSort={this.handleSort}
-                  showAdd={!!additionalControls}
-                  add={additionalControls}
+                  showSelectAll={showSelectAll}
+                  isAllSelected={isAllSelected}
+                  onSelectAll={onSelectAll}
+                  additionalControls={additionalControls}
                 />
                 <DataList aria-label={i18n._(t`${ucFirst(pluralize(itemName))} List`)}>
                   {items.map(item => (renderItem ? renderItem(item) : (
@@ -216,7 +221,10 @@ PaginatedDataList.propTypes = {
     key: string.isRequired,
     isSortable: bool,
   })),
-  additionalControls: PropTypes.node,
+  additionalControls: arrayOf(node),
+  showSelectAll: PropTypes.bool,
+  isAllSelected: PropTypes.bool,
+  onSelectAll: PropTypes.func,
 };
 
 PaginatedDataList.defaultProps = {
@@ -224,9 +232,12 @@ PaginatedDataList.defaultProps = {
   toolbarColumns: [
     { name: i18nMark('Name'), key: 'name', isSortable: true },
   ],
-  additionalControls: null,
+  additionalControls: [],
   itemName: 'item',
   itemNamePlural: '',
+  showSelectAll: false,
+  isAllSelected: false,
+  onSelectAll: null,
 };
 
 export { PaginatedDataList as _PaginatedDataList };

src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { string, func } from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import { PlusIcon } from '@patternfly/react-icons';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+function ToolbarAddButton ({ linkTo, onClick }) {
+  if (!linkTo && !onClick) {
+    throw new Error('ToolbarAddButton requires either `linkTo` or `onClick` prop');
+  }
+  if (linkTo) {
+    // TODO: This should only be a <Link> (no <Button>) but CSS is off
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <Link to={linkTo} className="pf-c-button pf-m-primary">
+            <Button
+              variant="primary"
+              aria-label={i18n._(t`Add`)}
+            >
+              <PlusIcon />
+            </Button>
+          </Link>
+        )}
+      </I18n>
+    );
+  }
+  return (
+    <I18n>
+      {({ i18n }) => (
+        <Button
+          variant="primary"
+          aria-label={i18n._(t`Add`)}
+          onClick={onClick}
+        >
+          <PlusIcon />
+        </Button>
+      )}
+    </I18n>
+  );
+}
+ToolbarAddButton.propTypes = {
+  linkTo: string,
+  onClick: func,
+};
+ToolbarAddButton.defaultProps = {
+  linkTo: null,
+  onClick: null
+};
+
+export default ToolbarAddButton;

src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -0,0 +1,162 @@
+import React, { Fragment } from 'react';
+import { func, bool, number, string, arrayOf, shape } from 'prop-types';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { TrashAltIcon } from '@patternfly/react-icons';
+import { I18n, i18nMark } from '@lingui/react';
+import { Trans, t } from '@lingui/macro';
+import AlertModal from '../AlertModal';
+import { pluralize } from '../../util/strings';
+
+const ItemToDelete = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+  summary_fields: shape({
+    user_capabilities: shape({
+      delete: bool.isRequired,
+    }).isRequired,
+  }).isRequired,
+});
+
+function cannotDelete (item) {
+  return !item.summary_fields.user_capabilities.delete;
+}
+
+class ToolbarDeleteButton extends React.Component {
+  static propTypes = {
+    onDelete: func.isRequired,
+    itemsToDelete: arrayOf(ItemToDelete).isRequired,
+    itemName: string,
+  };
+
+  static defaultProps = {
+    itemName: 'item',
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isModalOpen: false,
+    };
+
+    this.handleConfirmDelete = this.handleConfirmDelete.bind(this);
+    this.handleCancelDelete = this.handleCancelDelete.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+  }
+
+  handleConfirmDelete () {
+    this.setState({ isModalOpen: true });
+  }
+
+  handleCancelDelete () {
+    this.setState({ isModalOpen: false, });
+  }
+
+  handleDelete () {
+    const { onDelete } = this.props;
+    onDelete();
+    this.setState({ isModalOpen: false });
+  }
+
+  renderTooltip () {
+    const { itemsToDelete, itemName } = this.props;
+    if (itemsToDelete.some(cannotDelete)) {
+      return (
+        <div>
+          <Trans>
+            You dont have permission to delete the following
+            {' '}
+            {pluralize(itemName)}
+            :
+          </Trans>
+          {itemsToDelete
+            .filter(cannotDelete)
+            .map(item => (
+              <div key={item.id}>
+                {item.name}
+              </div>
+            ))
+          }
+        </div>
+      );
+    }
+    if (itemsToDelete.length) {
+      return i18nMark('Delete');
+    }
+    return i18nMark('Select a row to delete');
+  }
+
+  render () {
+    const { itemsToDelete, itemName } = this.props;
+    const { isModalOpen } = this.state;
+
+    const isDisabled = itemsToDelete.length === 0
+      || itemsToDelete.some(cannotDelete);
+
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <Fragment>
+            <Tooltip
+              content={this.renderTooltip()}
+              position="left"
+            >
+              <Button
+                className="awx-ToolBarBtn"
+                variant="plain"
+                aria-label={i18n._(t`Delete`)}
+                onClick={this.handleConfirmDelete}
+                isDisabled={isDisabled}
+              >
+                <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
+              </Button>
+            </Tooltip>
+            { isModalOpen && (
+              <AlertModal
+                variant="danger"
+                title={itemsToDelete === 1
+                  ? i18n._(t`Delete ${itemName}`)
+                  : i18n._(t`Delete ${pluralize(itemName)}`)
+                }
+                isOpen={isModalOpen}
+                onClose={this.handleCancelDelete}
+                actions={[
+                  <Button
+                    key="delete"
+                    variant="danger"
+                    aria-label={i18n._(t`confirm delete`)}
+                    onClick={this.handleDelete}
+                  >
+                    {i18n._(t`Delete`)}
+                  </Button>,
+                  <Button
+                    key="cancel"
+                    variant="secondary"
+                    aria-label={i18n._(t`cancel delete`)}
+                    onClick={this.handleCancelDelete}
+                  >
+                    {i18n._(t`Cancel`)}
+                  </Button>
+                ]}
+              >
+                {i18n._(t`Are you sure you want to delete:`)}
+                <br />
+                {itemsToDelete.map((item) => (
+                  <span key={item.id}>
+                    <strong>
+                      {item.name}
+                    </strong>
+                    <br />
+                  </span>
+                ))}
+                <br />
+              </AlertModal>
+            )}
+          </Fragment>
+        )}
+      </I18n>
+    );
+  }
+}
+
+export default ToolbarDeleteButton;

src/components/PaginatedDataList/index.js

@@ -1,3 +1,5 @@
 import PaginatedDataList from './PaginatedDataList';
 
 export default PaginatedDataList;
+export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
+export { default as ToolbarAddButton } from './ToolbarAddButton';