Fix link propagation

metabase · May 9, 2024 · d7d100e · d7d100e
1 parent f4b1770
commit d7d100e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.tsx b/frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.tsx
@@ -6,7 +6,7 @@ import { ResponsiveContainer } from "metabase/components/ResponsiveContainer/Res
 import { useAreAnyTruncated } from "metabase/hooks/use-is-truncated";
 import resizeObserver from "metabase/lib/resize-observer";
 import * as Urls from "metabase/lib/urls";
-import type { FlexProps, GroupProps, IconProps } from "metabase/ui";
+import type { FlexProps } from "metabase/ui";
 import { Flex, Text, Tooltip } from "metabase/ui";
 import type { CollectionEssentials } from "metabase-types/api";
 
@@ -25,13 +25,9 @@ import { getBreadcrumbMaxWidths, getCollectionPathString } from "./utils";
 export const CollectionBreadcrumbsWithTooltip = ({
  collection,
  containerName,
- collectionsIconProps,
- breadcrumbGroupProps,
 }: {
  collection: CollectionEssentials;
  containerName: string;
- collectionsIconProps?: Partial<IconProps>;
- breadcrumbGroupProps?: Partial<GroupProps>;
 }) => {
  const collections = (
  (collection.effective_ancestors as CollectionEssentials[]) || []
@@ -89,11 +85,20 @@ export const CollectionBreadcrumbsWithTooltip = ({
  w="auto"
  >
  <Flex align="center" w="100%" lh="1" style={{ flexFlow: "row nowrap" }}>
- <CollectionsIcon name="folder" {...collectionsIconProps} />
+ <CollectionsIcon
+ name="folder"
+ // Stopping propagation so that the parent <tr>'s onclick won't fire
+ onClick={(e: React.MouseEvent) => e.stopPropagation()}
+ />
  {shownCollections.map((collection, index) => {
  const key = `collection${collection.id}`;
  return (
- <BreadcrumbGroup spacing={0} key={key} {...breadcrumbGroupProps}>
+ <BreadcrumbGroup
+ spacing={0}
+ key={key}
+ // Stopping propagation so that the parent <tr>'s onclick won't fire
+ onClick={(e: React.MouseEvent) => e.stopPropagation()}
+ >
  {index > 0 && <PathSeparator />}
  <CollectionBreadcrumbsWrapper
  containerName={containerName}

diff --git a/frontend/src/metabase/browse/components/ModelsTable.tsx b/frontend/src/metabase/browse/components/ModelsTable.tsx
@@ -104,9 +104,6 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
  const icon = getIcon(model);
  const containerName = `collections-path-for-${model.id}`;
  const dispatch = useDispatch();
- const stopClickPropagation = {
- onClick: (e: React.MouseEvent) => e.stopPropagation(),
- };
  const { id, name } = model;
 
  return (
@@ -151,9 +148,6 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
  <CollectionBreadcrumbsWithTooltip
  containerName={containerName}
  collection={model.collection}
- // To avoid propagating the click event to the ModelTableRow
- breadcrumbGroupProps={stopClickPropagation}
- collectionsIconProps={stopClickPropagation}
  />
  )}
  </ItemCell>