diff --git a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
index a667da9a9cb0e17992d9e8344724f453b43880bb..752b203b7c0d7ecc0032275dfa1810c3c255c97c 100644
--- a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
+++ b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
@@ -9,7 +9,6 @@ import Database from "metabase/entities/databases";
import EntityItem from "metabase/components/EntityItem";
import Icon from "metabase/components/Icon";
import { Grid, GridItem } from "metabase/components/Grid";
-import TableInfoPopover from "metabase/components/MetadataInfo/TableInfoPopover";
import { ANALYTICS_CONTEXT, ITEM_WIDTHS } from "../../constants";
import BrowseHeader from "../BrowseHeader";
@@ -46,22 +45,18 @@ const TableBrowser = ({
<Grid>
{tables.map(table => (
<GridItem key={table.id} width={ITEM_WIDTHS}>
- <TableInfoPopover table={table} placement="bottom-start">
- <TableCard hoverable={isSyncCompleted(table)}>
- <TableLink
- to={
- isSyncCompleted(table) ? getTableUrl(table, metadata) : ""
- }
- data-metabase-event={`${ANALYTICS_CONTEXT};Table Click`}
- >
- <TableBrowserItem
- table={table}
- dbId={dbId}
- xraysEnabled={xraysEnabled}
- />
- </TableLink>
- </TableCard>
- </TableInfoPopover>
+ <TableCard hoverable={isSyncCompleted(table)}>
+ <TableLink
+ to={isSyncCompleted(table) ? getTableUrl(table, metadata) : ""}
+ data-metabase-event={`${ANALYTICS_CONTEXT};Table Click`}
+ >
+ <TableBrowserItem
+ table={table}
+ dbId={dbId}
+ xraysEnabled={xraysEnabled}
+ />
+ </TableLink>
+ </TableCard>
</GridItem>
))}
</Grid>
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index e2b0498047751408b8316c3fc2cc30217a657106..cf072d6b1b2854065d1de26373fa78d31faaabea 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -17,10 +17,8 @@ import ListSearchField from "metabase/components/ListSearchField";
import ExternalLink from "metabase/core/components/ExternalLink";
import Icon from "metabase/components/Icon";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
import AccordionList from "metabase/components/AccordionList";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
-import TableInfoPopover from "metabase/components/MetadataInfo/TableInfoPopover";
import MetabaseSettings from "metabase/lib/settings";
import { getSchemaName } from "metabase/lib/schema";
@@ -1464,17 +1462,6 @@ const TablePicker = ({
item.table ? <Icon name="table2" size={18} /> : null
}
showItemArrows={hasNextStep}
- renderItemWrapper={(itemContent, item) => {
- if (item.table?.id != null) {
- return (
- <TableInfoPopover table={item.table}>
- {itemContent}
- </TableInfoPopover>
- );
- }
-
- return itemContent;
- }}
/>
{isSavedQuestionList && (
<div className="bg-light p2 text-centered border-top">
@@ -1511,15 +1498,6 @@ const TablePicker = ({
};
class FieldPicker extends Component {
- renderItemWrapper = (itemContent, item) => {
- const dimension = item.field?.dimension?.();
- return (
- <DimensionInfoPopover dimension={dimension}>
- {itemContent}
- </DimensionInfoPopover>
- );
- };
-
render() {
const {
isLoading,
@@ -1581,7 +1559,6 @@ class FieldPicker extends Component {
<Icon name={item.field.dimension().icon()} size={18} />
) : null
}
- renderItemWrapper={this.renderItemWrapper}
/>
</div>
);
diff --git a/frontend/src/metabase/query_builder/components/DimensionList.jsx b/frontend/src/metabase/query_builder/components/DimensionList.jsx
index ddd7c26da6bda2473285bf263f2d387e1a47a711..eeabbc474b04cf0f3c28fa7612a15023956e3ab2 100644
--- a/frontend/src/metabase/query_builder/components/DimensionList.jsx
+++ b/frontend/src/metabase/query_builder/components/DimensionList.jsx
@@ -7,7 +7,6 @@ import AccordionList from "metabase/components/AccordionList";
import Icon from "metabase/components/Icon";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import Tooltip from "metabase/components/Tooltip";
-import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
import { FieldDimension } from "metabase-lib/lib/Dimension";
import { DimensionPicker } from "./DimensionPicker";
@@ -173,21 +172,6 @@ export default class DimensionList extends Component {
);
}
- renderItemWrapper = (itemContent, item) => {
- if (item.dimension) {
- const dimension = this._getDimensionFromItem(item);
- if (dimension) {
- return (
- <DimensionInfoPopover dimension={dimension}>
- {itemContent}
- </DimensionInfoPopover>
- );
- }
- }
-
- return itemContent;
- };
-
_getDimensionFromItem(item) {
const {
enableSubDimensions,
@@ -251,7 +235,6 @@ export default class DimensionList extends Component {
onChange={this.handleChange}
itemIsSelected={this.itemIsSelected}
renderItemExtra={this.renderItemExtra}
- renderItemWrapper={this.renderItemWrapper}
getItemClassName={() => "hover-parent hover--display"}
/>
);
diff --git a/frontend/src/metabase/query_builder/components/data-search/SearchResultWithInfoPopover.jsx b/frontend/src/metabase/query_builder/components/data-search/SearchResultWithInfoPopover.jsx
deleted file mode 100644
index e80a45ff2f8ef846c35c3eb6092c52a47ae3451f..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/data-search/SearchResultWithInfoPopover.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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}
- table={{
- id: item.table_id,
- description: item.table_description,
- }}
- >
- <li>
- <SearchResult result={item} onClick={onSelect} compact />
- </li>
- </TableInfoPopover>
- );
- default:
- return (
- <li>
- <SearchResult result={item} onClick={onSelect} compact />
- </li>
- );
- }
-}
diff --git a/frontend/src/metabase/query_builder/components/data-search/SearchResults.jsx b/frontend/src/metabase/query_builder/components/data-search/SearchResults.jsx
index f3b23c688e3d7ca11ec5c93dab5a47d2022b22d4..f4b18854c8eebf84bdafcb8368c1d8dc48aa6220 100644
--- a/frontend/src/metabase/query_builder/components/data-search/SearchResults.jsx
+++ b/frontend/src/metabase/query_builder/components/data-search/SearchResults.jsx
@@ -4,11 +4,10 @@ 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,
@@ -52,11 +51,9 @@ export function SearchResults({
return (
<ul>
{list.map(item => (
- <SearchResultWithInfoPopover
- key={`${item.id}_${item.model}`}
- item={item}
- onSelect={onSelect}
- />
+ <li key={`${item.id}_${item.model}`}>
+ <SearchResult result={item} onClick={onSelect} compact />
+ </li>
))}
</ul>
);
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
index 54c189f310fb2ec4a25386bb683a6e2575c7e7d0..ca107e6a3ac55b355a63a7ae69a09ac2f6d4d842 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorSuggestions.jsx
@@ -6,7 +6,6 @@ import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
import Popover from "metabase/components/Popover";
-import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
import { ListItemStyled, UlStyled } from "./ExpressionEditorSuggestions.styled";
@@ -119,13 +118,7 @@ export default class ExpressionEditorSuggestions extends React.Component {
</ListItemStyled>
);
- return suggestion.dimension ? (
- <DimensionInfoPopover key={key} dimension={suggestion.dimension}>
- {listItem}
- </DimensionInfoPopover>
- ) : (
- <React.Fragment key={key}>{listItem}</React.Fragment>
- );
+ return <React.Fragment key={key}>{listItem}</React.Fragment>;
})}
</UlStyled>
</Popover>
diff --git a/frontend/src/metabase/query_builder/components/notebook/steps/FieldsPicker.jsx b/frontend/src/metabase/query_builder/components/notebook/steps/FieldsPicker.jsx
index 77e70cff7fc722f671717a77d827beae4690a515..9732393d31f932d3ad1b2c67b521e092290d3f8e 100644
--- a/frontend/src/metabase/query_builder/components/notebook/steps/FieldsPicker.jsx
+++ b/frontend/src/metabase/query_builder/components/notebook/steps/FieldsPicker.jsx
@@ -4,7 +4,6 @@ import React from "react";
import { t } from "ttag";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
import CheckBox from "metabase/core/components/CheckBox";
import StackedCheckBox from "metabase/components/StackedCheckBox";
@@ -49,19 +48,17 @@ export default function FieldsPicker({
</li>
)}
{dimensions.map(dimension => (
- <DimensionInfoPopover dimension={dimension} key={dimension.key()}>
- <li className="px1 pb1 flex align-center">
- <CheckBox
- disabled={disableSelected && selected.has(dimension.key())}
- checked={selected.has(dimension.key())}
- label={dimension.displayName()}
- onChange={() => {
- onToggleDimension(dimension, !selected.has(dimension.key()));
- }}
- className="mr1"
- />
- </li>
- </DimensionInfoPopover>
+ <li key={dimension.key()} className="px1 pb1 flex align-center">
+ <CheckBox
+ disabled={disableSelected && selected.has(dimension.key())}
+ checked={selected.has(dimension.key())}
+ label={dimension.displayName()}
+ onChange={() => {
+ onToggleDimension(dimension, !selected.has(dimension.key()));
+ }}
+ className="mr1"
+ />
+ </li>
))}
</ul>
</PopoverWithTrigger>
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/DimensionList/DimensionListItem/DimensionListItem.jsx b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/DimensionList/DimensionListItem/DimensionListItem.jsx
index e514d23dea738916ee73a51b086777c102192503..c119d25cb497a61c867e869f0bb53c3be9d3e5e1 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/DimensionList/DimensionListItem/DimensionListItem.jsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/DimensionList/DimensionListItem/DimensionListItem.jsx
@@ -4,7 +4,6 @@ import { t } from "ttag";
import Tooltip from "metabase/components/Tooltip";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import DimensionInfoPopover from "metabase/components/MetadataInfo/DimensionInfoPopover";
import { DimensionPicker } from "metabase/query_builder/components/DimensionPicker";
import Icon from "metabase/components/Icon";
@@ -70,65 +69,63 @@ export const DimensionListItem = ({
const handleChange = () => onChangeDimension(dimension);
return (
- <DimensionInfoPopover dimension={dimension}>
- <DimensionListItemRoot
- data-testid="dimension-list-item"
- isSelected={isSelected}
- aria-selected={isSelected}
- >
- <DimensionListItemContent>
- <DimensionListItemTitleContainer onClick={handleChange}>
- <DimensionListItemIcon name={iconName} size={18} />
- <DimensionListItemTitle data-testid="dimension-list-item-name">
- {name}
- </DimensionListItemTitle>
- </DimensionListItemTitleContainer>
-
- {tag && <DimensionListItemTag>{tag}</DimensionListItemTag>}
-
- {hasSubDimensions && selectedSubDimensionName && (
- <PopoverWithTrigger
- triggerClasses="align-self-stretch"
- triggerElement={
- <SubDimensionButton data-testid="dimension-list-item-binning">
- {selectedSubDimensionName}
- </SubDimensionButton>
- }
- sizeToFit
- >
- {({ onClose }) => (
- <DimensionPicker
- className="scroll-y text-green"
- dimension={selectedSubDimension}
- dimensions={subDimensions}
- onChangeDimension={dimension => {
- onSubDimensionChange(dimension);
- onClose();
- }}
- />
- )}
- </PopoverWithTrigger>
- )}
-
- {isSelected && (
- <DimensionListItemRemoveButton aria-label="Remove dimension">
- <Icon name="close" onClick={handleRemove} />
- </DimensionListItemRemoveButton>
- )}
- </DimensionListItemContent>
-
- {!isSelected && (
- <Tooltip tooltip={t`Add grouping`}>
- <DimensionListItemAddButton
- onClick={handleAdd}
- aria-label="Add dimension"
- >
- <Icon name="add" size={12} />
- </DimensionListItemAddButton>
- </Tooltip>
+ <DimensionListItemRoot
+ data-testid="dimension-list-item"
+ isSelected={isSelected}
+ aria-selected={isSelected}
+ >
+ <DimensionListItemContent>
+ <DimensionListItemTitleContainer onClick={handleChange}>
+ <DimensionListItemIcon name={iconName} size={18} />
+ <DimensionListItemTitle data-testid="dimension-list-item-name">
+ {name}
+ </DimensionListItemTitle>
+ </DimensionListItemTitleContainer>
+
+ {tag && <DimensionListItemTag>{tag}</DimensionListItemTag>}
+
+ {hasSubDimensions && selectedSubDimensionName && (
+ <PopoverWithTrigger
+ triggerClasses="align-self-stretch"
+ triggerElement={
+ <SubDimensionButton data-testid="dimension-list-item-binning">
+ {selectedSubDimensionName}
+ </SubDimensionButton>
+ }
+ sizeToFit
+ >
+ {({ onClose }) => (
+ <DimensionPicker
+ className="scroll-y text-green"
+ dimension={selectedSubDimension}
+ dimensions={subDimensions}
+ onChangeDimension={dimension => {
+ onSubDimensionChange(dimension);
+ onClose();
+ }}
+ />
+ )}
+ </PopoverWithTrigger>
)}
- </DimensionListItemRoot>
- </DimensionInfoPopover>
+
+ {isSelected && (
+ <DimensionListItemRemoveButton aria-label="Remove dimension">
+ <Icon name="close" onClick={handleRemove} />
+ </DimensionListItemRemoveButton>
+ )}
+ </DimensionListItemContent>
+
+ {!isSelected && (
+ <Tooltip tooltip={t`Add grouping`}>
+ <DimensionListItemAddButton
+ onClick={handleAdd}
+ aria-label="Add dimension"
+ >
+ <Icon name="add" size={12} />
+ </DimensionListItemAddButton>
+ </Tooltip>
+ )}
+ </DimensionListItemRoot>
);
};
diff --git a/frontend/test/metabase/scenarios/onboarding/reference/databases.cy.spec.js b/frontend/test/metabase/scenarios/onboarding/reference/databases.cy.spec.js
index e6255d21f400515c791c9dfa6e3f11c79345ec8b..560d9bb0b474e06527038ddedb68103a7733791e 100644
--- a/frontend/test/metabase/scenarios/onboarding/reference/databases.cy.spec.js
+++ b/frontend/test/metabase/scenarios/onboarding/reference/databases.cy.spec.js
@@ -77,27 +77,6 @@ describe("scenarios > reference > databases", () => {
checkQuestionSourceDatabasesOrder("Native query");
});
});
-
- it("should show a popover with metadata related to the table", () => {
- cy.visit("/browse/1");
- cy.findByText("Products").trigger("mouseenter");
-
- popover().within(() => {
- // check for the table's description
- cy.contains(
- "Includes a catalog of all the products ever sold by the famed Sample Company.",
- );
-
- // check for table column metadata
- cy.findByText("8 columns");
-
- // check that fk links are shown
- cy.findByText("Orders");
- cy.findByText("Reviews").click();
- // check that the links are clickable
- cy.location("pathname").should("eq", "/question");
- });
- });
});
function checkReferenceDatabasesOrder() {