Move smart inventory button out to it's own component to properly handle kebabification

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Button, Card, PageSection, Tooltip } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
 
 import { HostsAPI } from '../../../api';
 import AlertModal from '../../../components/AlertModal';
@@ -20,6 +20,7 @@ import {
 } from '../../../util/qs';
 
 import HostListItem from './HostListItem';
+import SmartInventoryButton from './SmartInventoryButton';
 
 const QS_CONFIG = getQSConfig('host', {
   page: 1,
@@ -183,30 +184,10 @@ function HostList({ i18n }) {
                 />,
                 ...(canAdd
                   ? [
-                      <Tooltip
+                      <SmartInventoryButton
-                        key="smartInventory"
-                        content={
-                          hasNonDefaultSearchParams
-                            ? i18n._(
-                                t`Create a new Smart Inventory with the applied filter`
-                              )
-                            : i18n._(
-                                t`Enter at least one search filter to create a new Smart Inventory`
-                              )
-                        }
-                        position="top"
-                      >
-                        <div>
-                          <Button
-                            onClick={() => handleSmartInventoryClick()}
-                            aria-label={i18n._(t`Smart Inventory`)}
-                            variant="secondary"
                         isDisabled={!hasNonDefaultSearchParams}
-                          >
+                        onClick={() => handleSmartInventoryClick()}
-                            {i18n._(t`Smart Inventory`)}
+                      />,
-                          </Button>
-                        </div>
-                      </Tooltip>,
                     ]
                   : []),
               ]}

awx/ui_next/src/screens/Host/HostList/SmartInventoryButton.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { func } from 'prop-types';
+import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { useKebabifiedMenu } from '../../../contexts/Kebabified';
+
+function SmartInventoryButton({ onClick, i18n, isDisabled }) {
+  const { isKebabified } = useKebabifiedMenu();
+
+  if (isKebabified) {
+    return (
+      <DropdownItem
+        key="add"
+        isDisabled={isDisabled}
+        component="button"
+        onClick={onClick}
+      >
+        {i18n._(t`Smart Inventory`)}
+      </DropdownItem>
+    );
+  }
+
+  return (
+    <Tooltip
+      key="smartInventory"
+      content={
+        !isDisabled
+          ? i18n._(t`Create a new Smart Inventory with the applied filter`)
+          : i18n._(
+              t`Enter at least one search filter to create a new Smart Inventory`
+            )
+      }
+      position="top"
+    >
+      <div>
+        <Button
+          onClick={onClick}
+          aria-label={i18n._(t`Smart Inventory`)}
+          variant="secondary"
+          isDisabled={isDisabled}
+        >
+          {i18n._(t`Smart Inventory`)}
+        </Button>
+      </div>
+    </Tooltip>
+  );
+}
+SmartInventoryButton.propTypes = {
+  onClick: func.isRequired,
+};
+
+export default withI18n()(SmartInventoryButton);

awx/ui_next/src/screens/Host/HostList/SmartInventoryButton.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import SmartInventoryButton from './SmartInventoryButton';
+
+describe('<SmartInventoryButton />', () => {
+  test('should render button', () => {
+    const onClick = jest.fn();
+    const wrapper = mountWithContexts(
+      <SmartInventoryButton onClick={onClick} />
+    );
+    const button = wrapper.find('button');
+    expect(button).toHaveLength(1);
+    button.simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+});