fixes #34732 - Replace pf3 OverlayTrigger

theforeman · Apr 5, 2022 · fadec1a · fadec1a
1 parent fb0bf32
commit fadec1a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 44 deletions.
diff --git a/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.js b/webpack/components/AnsibleRolesSwitcher/components/AnsibleRole.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ListView, Tooltip, OverlayTrigger } from 'patternfly-react';
+import { ListView } from 'patternfly-react';
+import { Tooltip } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -13,12 +14,6 @@ const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
       ? __('This Ansible role is inherited from parent host group')
       : __('This Ansible role is inherited from host group');
 
-  const tooltip = (
-    <Tooltip id={role.id}>
-      <span>{text}</span>
-    </Tooltip>
-  );
-
   const clickHandler = (onClickFn, ansibleRole) => event => {
     event.preventDefault();
     onClickFn(ansibleRole);
@@ -48,11 +43,7 @@ const AnsibleRole = ({ role, icon, onClick, resourceName, index }) => {
   );
 
   if (role.inherited) {
-    return (
-      <OverlayTrigger overlay={tooltip} placement="top">
-        {listItem()}
-      </OverlayTrigger>
-    );
+    return <Tooltip content={<span>{text}</span>}>{listItem()}</Tooltip>;
   }
 
   return listItem(clickHandler);

diff --git a/webpack/components/AnsibleRolesSwitcher/components/OrderedRolesTooltip.js b/webpack/components/AnsibleRolesSwitcher/components/OrderedRolesTooltip.js
@@ -1,22 +1,21 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Tooltip, Icon, OverlayTrigger } from 'patternfly-react';
+import { Tooltip } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
 
 const OrderedRolesTooltip = props => {
-  const tooltip = (
-    <Tooltip id="assigned-ansible-roles-tooltip">
-      <span>
-        {__(
-          'Use drag and drop to change order of the roles. Ordering of roles is respected for Ansible runs, inherited roles are always before those assigned directly'
-        )}
-      </span>
-    </Tooltip>
+  const content = (
+    <span>
+      {__(
+        'Use drag and drop to change order of the roles. Ordering of roles is respected for Ansible runs, inherited roles are always before those assigned directly'
+      )}
+    </span>
   );
 
   return (
-    <OverlayTrigger overlay={tooltip} trigger={['hover', 'focus']}>
-      <Icon type="pf" name="info" style={{ 'margin-right': '10px' }} />
-    </OverlayTrigger>
+    <Tooltip content={content}>
+      <InfoCircleIcon style={{ 'margin-right': '10px' }} />
+    </Tooltip>
   );
 };
 

diff --git a/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap b/webpack/components/AnsibleRolesSwitcher/components/__snapshots__/AnsibleRole.test.js.snap
@@ -65,25 +65,11 @@ exports[`AnsibleRole should render a role to remove 1`] = `
 `;
 
 exports[`AnsibleRole should render inherited role to remove 1`] = `
-<OverlayTrigger
-  defaultOverlayShown={false}
-  overlay={
-    <Tooltip
-      bsClass="tooltip"
-      id={5}
-      placement="right"
-    >
-      <span>
-        This Ansible role is inherited from host group
-      </span>
-    </Tooltip>
-  }
-  placement="top"
-  trigger={
-    Array [
-      "hover",
-      "focus",
-    ]
+<Tooltip
+  content={
+    <span>
+      This Ansible role is inherited from host group
+    </span>
   }
 >
   <ListViewItem
@@ -104,5 +90,5 @@ exports[`AnsibleRole should render inherited role to remove 1`] = `
     onExpandClose={[Function]}
     stacked={true}
   />
-</OverlayTrigger>
+</Tooltip>
 `;