convert OrganizationList to use PaginatedDataList (#192)

* convert Org list to use PaginatedDataList * add ToolbarAddButton, ToolbarDeleteButton * pass full org into OrganizationListItem
2026-02-19 20:20:06 -03:30 · 2019-05-07 09:51:50 -04:00
parent a011896cc0
commit e7ec1c6ef8
18 changed files with 693 additions and 525 deletions
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -1,24 +1,15 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, i18nMark } from '@lingui/react';
+import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
-  Button,
  Checkbox,
  Level,
  LevelItem,
  Toolbar,
  ToolbarGroup,
  ToolbarItem,
-  Tooltip,
 } from '@patternfly/react-core';
-import {
-  TrashAltIcon,
-  PlusIcon,
-} from '@patternfly/react-icons';
-import {
-  Link
-} from 'react-router-dom';

 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
@@ -28,12 +19,8 @@ import VerticalSeparator from '../VerticalSeparator';
 class DataListToolbar extends React.Component {
  render () {
    const {
-      add,
-      addBtnToolTipContent,
-      addUrl,
      columns,
-      deleteTooltip,
-      disableDelete,
+      showSelectAll,
      isAllSelected,
      isCompact,
      noLeftMargin,
@@ -41,18 +28,12 @@ class DataListToolbar extends React.Component {
      onSearch,
      onCompact,
      onExpand,
-      onOpenDeleteModal,
      onSelectAll,
-      showAdd,
-      showDelete,
-      showSelectAll,
      sortOrder,
      sortedColumnKey,
+      additionalControls,
    } = this.props;

-    const deleteIconStyling = disableDelete ? 'awx-ToolBarBtn awx-ToolBarBtn--disabled'
-      : 'awx-ToolBarBtn';
-
    const showExpandCollapse = (onCompact && onExpand);
    return (
      <I18n>
@@ -96,9 +77,9 @@ class DataListToolbar extends React.Component {
                      />
                    </ToolbarItem>
                  </ToolbarGroup>
-                  { (showExpandCollapse || showDelete || addUrl || add) && (
+                  { (showExpandCollapse || additionalControls.length) ? (
                    <VerticalSeparator />
-                  )}
+                  ) : null}
                  {showExpandCollapse && (
                    <Fragment>
                      <ToolbarGroup>
@@ -108,50 +89,15 @@ class DataListToolbar extends React.Component {
                          onExpand={onExpand}
                        />
                      </ToolbarGroup>
-                      { (showDelete || addUrl || add) && (
+                      { additionalControls && (
                        <VerticalSeparator />
                      )}
                    </Fragment>
                  )}
                </Toolbar>
              </LevelItem>
-              <LevelItem style={{ display: 'flex' }}>
-                {showDelete && (
-                  <Tooltip
-                    content={deleteTooltip}
-                    position="top"
-                  >
-                    <div
-                      className={deleteIconStyling}
-                    >
-                      <Button
-                        variant="plain"
-                        aria-label={i18n._(t`Delete`)}
-                        onClick={onOpenDeleteModal}
-                        isDisabled={disableDelete}
-                      >
-                        <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
-                      </Button>
-                    </div>
-                  </Tooltip>
-                )}
-                {showAdd && addUrl && (
-                  <Link to={addUrl}>
-                    <Tooltip
-                      content={addBtnToolTipContent}
-                    >
-                      <Button
-                        variant="primary"
-                        aria-label={i18n._(t`Add`)}
-                      >
-                        <PlusIcon />
-                      </Button>
-                    </Tooltip>
-                  </Link>
-                )}
-                {showAdd && add && (
-                  <Fragment>{add}</Fragment>
-                )}
+              <LevelItem>
+                {additionalControls}
              </LevelItem>
            </Level>
          </div>
@@ -162,48 +108,34 @@ class DataListToolbar extends React.Component {
 }

 DataListToolbar.propTypes = {
-  add: PropTypes.node,
-  addBtnToolTipContent: PropTypes.string,
-  addUrl: PropTypes.string,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  deleteTooltip: PropTypes.node,
-  disableDelete: PropTypes.bool,
+  showSelectAll: PropTypes.bool,
  isAllSelected: PropTypes.bool,
  isCompact: PropTypes.bool,
  noLeftMargin: PropTypes.bool,
  onCompact: PropTypes.func,
  onExpand: PropTypes.func,
-  onOpenDeleteModal: PropTypes.func,
  onSearch: PropTypes.func,
  onSelectAll: PropTypes.func,
  onSort: PropTypes.func,
-  showAdd: PropTypes.bool,
-  showDelete: PropTypes.bool,
-  showSelectAll: PropTypes.bool,
  sortOrder: PropTypes.string,
  sortedColumnKey: PropTypes.string,
+  additionalControls: PropTypes.arrayOf(PropTypes.node),
 };

 DataListToolbar.defaultProps = {
-  add: null,
-  addBtnToolTipContent: i18nMark('Add'),
-  addUrl: null,
-  deleteTooltip: i18nMark('Delete'),
-  disableDelete: true,
+  showSelectAll: false,
  isAllSelected: false,
  isCompact: false,
  noLeftMargin: false,
  onCompact: null,
  onExpand: null,
-  onOpenDeleteModal: null,
  onSearch: null,
  onSelectAll: null,
  onSort: null,
-  showAdd: false,
-  showDelete: false,
-  showSelectAll: false,
  sortOrder: 'ascending',
  sortedColumnKey: 'name',
+  additionalControls: [],
 };

 export default DataListToolbar;
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -81,32 +81,34 @@
  font-size: 18px;
 }

-.awx-ToolBarBtn{
+.awx-ToolBarBtn {
  width: 30px;
  display: flex;
  justify-content: center;
  margin-right: 20px;
  border-radius: 3px;
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
 }

-.awx-ToolBarBtn:hover{
+.awx-ToolBarBtn:hover {
  .awx-ToolBarTrashCanIcon {
-    color:white;
+    color: white;
  }
  background-color:#d9534f;
 }

-.awx-ToolBarBtn--disabled:hover{
+.awx-ToolBarBtn[disabled]:hover {
  .awx-ToolBarTrashCanIcon {
    color: #d2d2d2;
  }
-  background-color:white;
-  cursor: not-allowed;
+  background-color: white;
 }

-.pf-l-toolbar >div{
+.pf-l-toolbar > div {
  &:last-child{
    display:none;
  }
 }
-
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/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 };
--- a/src/components/PaginatedDataList/ToolbarAddButton.jsx
+++ b/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;
--- a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/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;
--- a/src/components/PaginatedDataList/index.js
+++ b/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';