Update inventory source sync button on kebab

Update inventory source sync button on kebab

See: https://github.com/ansible/awx/issues/8020

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;

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

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';

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
-                ? [
+                ? [<ToolbarSyncSourceButton onClick={syncAll} />]
-                    <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>,
-                  ]
                 : []),
             ]}
           />