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 ? ( - - - - ) : ( - '' - )} + + + + );