rmv TableInfoPopover from nav search (#19532)

frontend/src/metabase/query_builder/components/data-search/SearchResultWithInfoPopover.jsx

+import React from "react";
+import PropTypes from "prop-types";
+
+import SearchResult from "metabase/search/components/SearchResult";
+import TableInfoPopover from "metabase/components/MetadataInfo/TableInfoPopover";
+
+SearchResultWithInfoPopover.propTypes = {
+  item: PropTypes.object.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+const OFFSET = [0, 3];
+
+export function SearchResultWithInfoPopover({ item, onSelect }) {
+  switch (item.model) {
+    case "table":
+      return (
+        <TableInfoPopover
+          placement="right-start"
+          offset={OFFSET}
+          tableId={item.table_id}
+        >
+          <li>
+            <SearchResult result={item} onClick={onSelect} compact />
+          </li>
+        </TableInfoPopover>
+      );
+    default:
+      return (
+        <li>
+          <SearchResult result={item} onClick={onSelect} compact />
+        </li>
+      );
+  }
+}

frontend/src/metabase/query_builder/components/data-search/SearchResults.jsx

@@ -4,10 +4,11 @@ import PropTypes from "prop-types";
 import { t } from "ttag";
 
 import Icon from "metabase/components/Icon";
-import SearchResult from "metabase/search/components/SearchResult";
 import { DEFAULT_SEARCH_LIMIT } from "metabase/lib/constants";
 import Search from "metabase/entities/search";
 
+import { SearchResultWithInfoPopover } from "./SearchResultWithInfoPopover";
+
 const propTypes = {
   databaseId: PropTypes.string,
   searchQuery: PropTypes.string.required,
@@ -51,9 +52,11 @@ export function SearchResults({
           return (
             <ul>
               {list.map(item => (
-                <li key={`${item.id}_${item.model}`}>
-                  <SearchResult result={item} onClick={onSelect} compact />
-                </li>
+                <SearchResultWithInfoPopover
+                  key={`${item.id}_${item.model}`}
+                  item={item}
+                  onSelect={onSelect}
+                />
               ))}
             </ul>
           );

frontend/src/metabase/search/components/SearchResult.jsx

@@ -7,7 +7,6 @@ import { isSyncCompleted } from "metabase/lib/syncing";
 
 import Icon from "metabase/components/Icon";
 import Text from "metabase/components/type/Text";
-import TableInfoPopover from "metabase/components/MetadataInfo/TableInfoPopover";
 
 import { PLUGIN_COLLECTIONS, PLUGIN_MODERATION } from "metabase/plugins";
 
@@ -99,9 +98,14 @@ export default function SearchResult({
   const active = isItemActive(result);
   const loading = isItemLoading(result);
 
-  const linkContent = wrapInPopover(
-    result,
-    <div>
+  return (
+    <ResultLink
+      active={active}
+      compact={compact}
+      to={!onClick ? result.getUrl() : ""}
+      onClick={onClick ? () => onClick(result) : undefined}
+      data-testid="search-result-item"
+    >
       <Flex align="start">
         <ItemIcon item={result} type={result.model} active={active} />
         <Box>
@@ -125,18 +129,6 @@ export default function SearchResult({
         {loading && <ResultSpinner size={24} borderWidth={3} />}
       </Flex>
       {compact || <Context context={result.context} />}
-    </div>,
-  );
-
-  return (
-    <ResultLink
-      active={active}
-      compact={compact}
-      to={!onClick ? result.getUrl() : ""}
-      onClick={onClick ? () => onClick(result) : undefined}
-      data-testid="search-result-item"
-    >
-      {linkContent}
     </ResultLink>
   );
 }
@@ -159,20 +151,3 @@ const isItemLoading = result => {
       return false;
   }
 };
-
-const wrapInPopover = (result, content) => {
-  switch (result.model) {
-    case "table":
-      return (
-        <TableInfoPopover
-          placement="right-start"
-          offset={[-10, 22]}
-          tableId={result.table_id}
-        >
-          {content}
-        </TableInfoPopover>
-      );
-    default:
-      return content;
-  }
-};