diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 744d3e26fd..2dbf67dca4 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -94,7 +94,7 @@ function ToolbarDeleteButton({
const renderTooltip = () => {
const itemsUnableToDelete = itemsToDelete
.filter(cannotDelete)
- .map(item => item.name)
+ .map(item => item.name || item.username)
.join(', ');
if (itemsToDelete.some(cannotDelete)) {
return (
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
index c85730226c..487f2c17f0 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
@@ -12,6 +12,11 @@ const itemB = {
name: 'Foo',
summary_fields: { user_capabilities: { delete: false } },
};
+const itemC = {
+ id: 1,
+ username: 'Foo',
+ summary_fields: { user_capabilities: { delete: false } },
+};
describe('', () => {
test('should render button', () => {
@@ -61,4 +66,14 @@ describe('', () => {
expect(wrapper.find('Tooltip')).toHaveLength(1);
expect(wrapper.find('Tooltip').prop('content')).toEqual('Delete');
});
+
+ test('should render tooltip for username', () => {
+ const wrapper = mountWithContexts(
+ {}} itemsToDelete={[itemC]} />
+ );
+ expect(wrapper.find('Tooltip')).toHaveLength(1);
+ expect(wrapper.find('Tooltip').prop('content').props.children).toEqual(
+ 'You do not have permission to delete Items: Foo'
+ );
+ });
});