From bc083089bb426403cf36834f2d53479036a64aaf Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Fri, 6 Aug 2021 15:58:18 -0400
Subject: [PATCH] Update inventory source sync button on kebab

Update inventory source sync button on kebab

See: https://github.com/ansible/awx/issues/8020
---
 .../PaginatedTable/ToolbarSyncSourceButton.js | 45 +++++++++++++++++++
 .../ToolbarSyncSourceButton.test.js           | 16 +++++++
 awx/ui/src/components/PaginatedTable/index.js |  1 +
 .../InventorySources/InventorySourceList.js   | 19 +-------
 4 files changed, 64 insertions(+), 17 deletions(-)
 create mode 100644 awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.js
 create mode 100644 awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.test.js

diff --git a/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.js b/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.js
new file mode 100644
index 0000000000..7ff424689a
--- /dev/null
+++ b/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { func } from 'prop-types';
+import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
+
+import { t } from '@lingui/macro';
+import { useKebabifiedMenu } from 'contexts/Kebabified';
+
+function ToolbarSyncSourceButton({ onClick }) {
+  const { isKebabified } = useKebabifiedMenu();
+
+  if (isKebabified) {
+    return (
+      <DropdownItem
+        ouiaId="sync-all-button"
+        key="add"
+        component="button"
+        onClick={onClick}
+      >
+        {t`Sync all`}
+      </DropdownItem>
+    );
+  }
+
+  return (
+    <Tooltip key="update" content={t`Sync all sources`} position="top">
+      <Button
+        ouiaId="sync-all-button"
+        onClick={onClick}
+        aria-label={t`Sync all`}
+        variant="secondary"
+      >
+        {t`Sync all`}
+      </Button>
+    </Tooltip>
+  );
+}
+
+ToolbarSyncSourceButton.propTypes = {
+  onClick: func,
+};
+ToolbarSyncSourceButton.defaultProps = {
+  onClick: null,
+};
+
+export default ToolbarSyncSourceButton;
diff --git a/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.test.js b/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.test.js
new file mode 100644
index 0000000000..c6b71dca50
--- /dev/null
+++ b/awx/ui/src/components/PaginatedTable/ToolbarSyncSourceButton.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import ToolbarSyncSourceButton from './ToolbarSyncSourceButton';
+
+describe('<ToolbarSyncSourceButton />', () => {
+  test('should render button', () => {
+    const onClick = jest.fn();
+    const wrapper = mountWithContexts(
+      <ToolbarSyncSourceButton onClick={onClick} />
+    );
+    const button = wrapper.find('button');
+    expect(button).toHaveLength(1);
+    button.simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+});
diff --git a/awx/ui/src/components/PaginatedTable/index.js b/awx/ui/src/components/PaginatedTable/index.js
index 93a5529090..e30c1e1711 100644
--- a/awx/ui/src/components/PaginatedTable/index.js
+++ b/awx/ui/src/components/PaginatedTable/index.js
@@ -4,3 +4,4 @@ export { default as HeaderRow, HeaderCell } from './HeaderRow';
 export { default as ActionItem } from './ActionItem';
 export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
 export { default as ToolbarAddButton } from './ToolbarAddButton';
+export { default as ToolbarSyncSourceButton } from './ToolbarSyncSourceButton';
diff --git a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceList.js b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceList.js
index 61bf3de2ca..8ae59c8b24 100644
--- a/awx/ui/src/screens/Inventory/InventorySources/InventorySourceList.js
+++ b/awx/ui/src/screens/Inventory/InventorySources/InventorySourceList.js
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { t, Plural } from '@lingui/macro';
-import { Button, Tooltip } from '@patternfly/react-core';
 
 import useRequest, {
   useDeleteItems,
@@ -14,6 +13,7 @@ import PaginatedTable, {
   HeaderCell,
   ToolbarAddButton,
   ToolbarDeleteButton,
+  ToolbarSyncSourceButton,
 } from 'components/PaginatedTable';
 import useSelected from 'hooks/useSelected';
 import DatalistToolbar from 'components/DataListToolbar';
@@ -185,22 +185,7 @@ function InventorySourceList() {
                 }
               />,
               ...(canSyncSources
-                ? [
-                    <Tooltip
-                      key="update"
-                      content={t`Sync all sources`}
-                      position="top"
-                    >
-                      <Button
-                        ouiaId="sync-all-button"
-                        onClick={syncAll}
-                        aria-label={t`Sync all`}
-                        variant="secondary"
-                      >
-                        {t`Sync all`}
-                      </Button>
-                    </Tooltip>,
-                  ]
+                ? [<ToolbarSyncSourceButton onClick={syncAll} />]
                 : []),
             ]}
           />