From 98b9d4358db61491ee6aa3f01861ff106bb32a13 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 24 Sep 2020 15:51:58 -0400
Subject: [PATCH] Add username to tooltip

Add username to tooltip when user cannot be deleted.

See: https://github.com/ansible/awx/issues/7751
---
 .../PaginatedDataList/ToolbarDeleteButton.jsx     |  2 +-
 .../ToolbarDeleteButton.test.jsx                  | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 25a280d549..65b7095938 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -87,7 +87,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('<ToolbarDeleteButton />', () => {
   test('should render button', () => {
@@ -61,4 +66,14 @@ describe('<ToolbarDeleteButton />', () => {
     expect(wrapper.find('Tooltip')).toHaveLength(1);
     expect(wrapper.find('Tooltip').prop('content')).toEqual('Delete');
   });
+
+  test('should render tooltip for username', () => {
+    const wrapper = mountWithContexts(
+      <ToolbarDeleteButton onDelete={() => {}} 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'
+    );
+  });
 });