diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index bcecf8a2bc..e52ae1c2cb 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -159,7 +159,7 @@ DataListToolbar.propTypes = {
searchColumns: SearchColumns.isRequired,
searchableKeys: PropTypes.arrayOf(PropTypes.string),
relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
- sortColumns: SortColumns.isRequired,
+ sortColumns: SortColumns,
showSelectAll: PropTypes.bool,
isAllSelected: PropTypes.bool,
isCompact: PropTypes.bool,
@@ -176,6 +176,7 @@ DataListToolbar.defaultProps = {
itemCount: 0,
searchableKeys: [],
relatedSearchableKeys: [],
+ sortColumns: null,
clearAllFilters: null,
showSelectAll: false,
isAllSelected: false,
diff --git a/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
new file mode 100644
index 0000000000..a6c5e2b239
--- /dev/null
+++ b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
@@ -0,0 +1,21 @@
+import 'styled-components/macro';
+import React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+
+export default function ActionItem({ column, tooltip, visible, children }) {
+ if (!visible) {
+ return null;
+ }
+
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx b/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
index 53c6c1cb19..58a718d765 100644
--- a/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/ActionsTd.jsx
@@ -3,8 +3,6 @@ import React from 'react';
import { Td } from '@patternfly/react-table';
import styled, { css } from 'styled-components';
-// table cells will automatically grow beyond specified width to accomodate
-// multiple action buttons
const ActionsGrid = styled.div`
display: grid;
grid-gap: 16px;
@@ -18,7 +16,8 @@ const ActionsGrid = styled.div`
}}
`;
-export default function ActionsTd({ numActions = 1, children }) {
+export default function ActionsTd({ children }) {
+ const numActions = children.length;
const width = numActions * 40;
return (
- {children}
+
+ {React.Children.map(children, (child, i) =>
+ React.cloneElement(child, {
+ column: i + 1,
+ })
+ )}
+
|
);
}
diff --git a/awx/ui_next/src/components/PaginatedTable/index.js b/awx/ui_next/src/components/PaginatedTable/index.js
index c588cf47eb..c38bb6acae 100644
--- a/awx/ui_next/src/components/PaginatedTable/index.js
+++ b/awx/ui_next/src/components/PaginatedTable/index.js
@@ -2,5 +2,4 @@ export { default } from './PaginatedTable';
export { default as PaginatedTableRow } from './PaginatedTableRow';
export { default as ActionsTd } from './ActionsTd';
export { default as HeaderRow, HeaderCell } from './HeaderRow';
-// export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
-// export { default as ToolbarAddButton } from './ToolbarAddButton';
+export { default as ActionItem } from './ActionItem';
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 190443aeae..6719851935 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -1,7 +1,7 @@
import React, { useState, useCallback } from 'react';
import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
-import { Button, Label, Tooltip } from '@patternfly/react-core';
+import { Button, Label } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table';
import { PencilAltIcon } from '@patternfly/react-icons';
import { t } from '@lingui/macro';
@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
import { timeOfDay } from '../../../util/dates';
import { InventoriesAPI } from '../../../api';
import { Inventory } from '../../../types';
-import { ActionsTd } from '../../../components/PaginatedTable';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import CopyButton from '../../../components/CopyButton';
import SyncStatusIndicator from '../../../components/SyncStatusIndicator';
@@ -98,25 +98,27 @@ function InventoryListItem({
) : (
-
- {inventory.summary_fields.user_capabilities.edit ? (
-
-
-
- ) : (
-
- )}
- {inventory.summary_fields.user_capabilities.copy && (
+
+
+
+
+
- )}
+
)}
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index d029632598..63ff176a1a 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -6,7 +6,7 @@ import { Button, Tooltip } from '@patternfly/react-core';
import { Tr, Td } from '@patternfly/react-table';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
-import { ActionsTd } from '../../../components/PaginatedTable';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import { Organization } from '../../../types';
@@ -36,21 +36,20 @@ function OrganizationListItem({
{organization.summary_fields.related_field_counts.users} |
{organization.summary_fields.related_field_counts.teams} |
-
- {organization.summary_fields.user_capabilities.edit ? (
-
-
-
- ) : (
- ''
- )}
+
+
+
+
);