fix(topology): catalog btn tooltip should not show if not needed (#1009)

Signed-off-by: Thuan Vo <thvo@redhat.com>
cryostatio · May 2, 2023 · 96ec510 · 96ec510
1 parent ed1f37c
commit 96ec510
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/app/Topology/Actions/QuickSearchPanel.tsx b/src/app/Topology/Actions/QuickSearchPanel.tsx
@@ -266,6 +266,7 @@ export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
       titleIconVariant={QuickSearchIcon}
       title={'Topology Entity Catalog'}
       className={'topology__quick-search-modal'}
+      id={'topology-quick-search-modal'}
       description={<div>Select an entity to add to view. {guide}</div>}
     >
       <QuickSearchPanel />

diff --git a/src/app/Topology/Toolbar/QuickSearchButton.tsx b/src/app/Topology/Toolbar/QuickSearchButton.tsx
@@ -35,7 +35,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { portalRoot } from '@app/utils/utils';
+
 import { Button, Tooltip } from '@patternfly/react-core';
 import * as React from 'react';
 import QuickSearchIcon from '../Shared/QuickSearchIcon';
@@ -46,16 +46,29 @@ export interface QuickSearchButtonProps {
 }
 
 export const QuickSearchButton: React.FC<QuickSearchButtonProps> = ({ onClick, tooltipContent, ...props }) => {
+  const catalogRef = React.useRef<HTMLDivElement>(null);
+  const handleClick = React.useCallback(() => {
+    onClick();
+    catalogRef.current?.blur(); // Remove focus on the catalog button
+  }, [onClick]);
+
   return (
-    <Tooltip {...props} content={tooltipContent} appendTo={portalRoot}>
-      <Button
-        variant="plain"
-        onClick={onClick}
-        className={'topology__quick-search-button'}
-        data-quickstart-id={'topology-catalog-btn'}
+    <div id="topology-quicksearch-btn-wrapper">
+      <Tooltip
+        {...props}
+        content={tooltipContent}
+        appendTo={() => document.getElementById('topology-quicksearch-btn-wrapper') || document.body}
       >
-        <QuickSearchIcon />
-      </Button>
-    </Tooltip>
+        <Button
+          variant="plain"
+          onClick={handleClick}
+          style={{ padding: 0 }}
+          data-quickstart-id={'topology-catalog-btn'}
+          ref={catalogRef}
+        >
+          <QuickSearchIcon />
+        </Button>
+      </Tooltip>
+    </div>
   );
 };
diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css
@@ -360,10 +360,6 @@ Below CSS rules only apply to Topology components
   font-size: 1.1em !important;
 }
 
-.topology__quick-search-button {
-  padding: 0;
-}
-
 .topology__list-view__entity-details {
   background-color: var(--pf-global--palette--white);
   padding: 1em;