rebase

frontend/src/metabase-types/api/collection.ts

@@ -114,6 +114,7 @@ export interface CollectionItem {
  setPinned?: (isPinned: boolean) => void;
  setCollection?: (collection: Pick<Collection, "id">) => void;
  setCollectionPreview?: (isEnabled: boolean) => void;
+ collection_ancestors?: Pick<Collection, "id" | "name">[];
 }
 
 export interface CollectionListQuery {

frontend/src/metabase/browse/components/BrowseModels.tsx

@@ -13,7 +13,8 @@ import { Box, Flex, Group, Icon, Stack, Title } from "metabase/ui";
 import type { SearchRequest, ModelResult } from "metabase-types/api";
 import { SortDirection } from "metabase-types/api";
 
-import { filterModels, type ActualModelFilters } from "../utils";
+import type { ActualModelFilters } from "../utils";
+import { filterModels } from "../utils";
 
 import {
  BrowseContainer,
@@ -85,7 +86,6 @@ export const BrowseModelsBody = ({
  model_ancestors: true,
  filter_items_in_personal_collection: "exclude",
  };
-
  const { data, error, isLoading } = useSearchQuery(query);
 
  const models = useMemo(() => {

frontend/src/metabase/browse/components/BrowseModels.unit.spec.tsx

@@ -13,7 +13,7 @@ import { createMockSetupState } from "metabase-types/store/mocks";
 
 import { BrowseModels } from "./BrowseModels";
 
-const renderBrowseModels = (modelCount: number) => {
+const setup = (modelCount: number) => {
  const models = mockModels.slice(0, modelCount);
  setupSearchEndpoints(models);
  setupSettingsEndpoints([]);
@@ -264,20 +264,23 @@ const mockModels: SearchResult[] = [
 
 describe("BrowseModels", () => {
  it("displays a 'no models' message in the Models tab when no models exist", async () => {
- renderBrowseModels(0);
+ setup(0);
  expect(await screen.findByText("No models here yet")).toBeInTheDocument();
  });
 
  it("displays the Our Analytics collection if it has a model", async () => {
- renderBrowseModels(25);
- await screen.findAllByText("Our analytics");
+ setup(25);
+ expect(await screen.findByRole("table")).toBeInTheDocument();
+ expect(
+ await screen.findAllByTestId("path-for-collection: Our analytics"),
+ ).toHaveLength(2);
  expect(await screen.findByText("Model 20")).toBeInTheDocument();
  expect(await screen.findByText("Model 21")).toBeInTheDocument();
  expect(await screen.findByText("Model 22")).toBeInTheDocument();
  });
 
  it("displays collection breadcrumbs", async () => {
- renderBrowseModels(25);
+ setup(25);
  expect(await screen.findByText("Model 1")).toBeInTheDocument();
  expect(
  await screen.findAllByTestId("breadcrumbs-for-collection: Alpha"),

frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.styled.tsx

@@ -4,7 +4,7 @@ import type { AnchorHTMLAttributes } from "react";
 import { ResponsiveChild } from "metabase/components/ResponsiveContainer/ResponsiveContainer";
 import { color } from "metabase/lib/colors";
 import type { AnchorProps } from "metabase/ui";
-import { Anchor } from "metabase/ui";
+import { Anchor, FixedSizeIcon, Group } from "metabase/ui";
 
 import type { RefProp } from "./types";
 
@@ -54,3 +54,11 @@ export const CollectionBreadcrumbsWrapper = styled(ResponsiveChild)`
  `;
  }}
 `;
+
+export const BreadcrumbGroup = styled(Group)`
+ flex-flow: row nowrap;
+`;
+
+export const CollectionsIcon = styled(FixedSizeIcon)`
+ margin-inline-end: 0.5rem;
+`;

frontend/src/metabase/browse/components/CollectionBreadcrumbsWithTooltip.tsx

@@ -6,15 +6,17 @@ 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 } from "metabase/ui";
-import { FixedSizeIcon, Flex, Group, Text, Tooltip } from "metabase/ui";
+import type { FlexProps, GroupProps, IconProps } from "metabase/ui";
+import { Flex, Text, Tooltip } from "metabase/ui";
 import type { CollectionEssentials } from "metabase-types/api";
 
 import { getCollectionName } from "../utils";
 
 import {
  Breadcrumb,
+ BreadcrumbGroup,
  CollectionBreadcrumbsWrapper,
+ CollectionsIcon,
 } from "./CollectionBreadcrumbsWithTooltip.styled";
 import { pathSeparatorChar } from "./constants";
 import type { RefProp } from "./types";
@@ -23,9 +25,13 @@ 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[]) || []
@@ -82,11 +88,11 @@ export const CollectionBreadcrumbsWithTooltip = ({
  w="auto"
  >
  <Flex align="center" w="100%" lh="1" style={{ flexFlow: "row nowrap" }}>
- <FixedSizeIcon name="folder" style={{ marginInlineEnd: ".5rem" }} />
+ <CollectionsIcon name="folder" {...collectionsIconProps} />
  {shownCollections.map((collection, index) => {
  const key = `collection${collection.id}`;
  return (
- <Group spacing={0} style={{ flexFlow: "row nowrap" }} key={key}>
+ <BreadcrumbGroup spacing={0} key={key} {...breadcrumbGroupProps}>
  {index > 0 && <PathSeparator />}
  <CollectionBreadcrumbsWrapper
  containerName={containerName}
@@ -114,7 +120,7 @@ export const CollectionBreadcrumbsWithTooltip = ({
  {getCollectionName(collection)}
  </Breadcrumb>
  </CollectionBreadcrumbsWrapper>
- </Group>
+ </BreadcrumbGroup>
  );
  })}
  </Flex>

frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.tsx

@@ -1,16 +1,28 @@
 import { Ellipsified } from "metabase/core/components/Ellipsified";
 import Markdown from "metabase/core/components/Markdown";
 
-export const EllipsifiedWithMarkdown = ({ children }: { children: string }) => {
- return (
- <Ellipsified
- tooltip={
- <Markdown disallowHeading unstyleLinks lineClamp={12}>
- {children}
- </Markdown>
- }
- >
- <Markdown disallowHeading>{children.replace(/\s/g, " ")}</Markdown>
- </Ellipsified>
+export const EllipsifiedWithMarkdown = ({
+ shouldMarkdownifyTooltipTarget = false,
+ shouldMarkdownifyTooltip = true,
+ children,
+}: {
+ /** NOTE: If the tooltip target is markdownified,
+ * useIsTruncated won't know whether it has been truncated */
+ shouldMarkdownifyTooltipTarget?: boolean;
+ shouldMarkdownifyTooltip?: boolean;
+ children: string;
+}) => {
+ const tooltip = shouldMarkdownifyTooltip ? (
+ <Markdown disallowHeading unstyleLinks lineClamp={12}>
+ {children}
+ </Markdown>
+ ) : (
+ children
  );
+ const tooltipTarget = shouldMarkdownifyTooltipTarget ? (
+ <Markdown disallowHeading>{children}</Markdown>
+ ) : (
+ children
+ );
+ return <Ellipsified tooltip={tooltip}>{tooltipTarget}</Ellipsified>;
 };

frontend/src/metabase/browse/components/ModelsTable.styled.tsx

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+import { color } from "metabase/lib/colors";
+
+export const ModelTableRow = styled.tr`
+ cursor: pointer;
+ :outline {
+ outline: 2px solid ${color("brand")};
+ }
+`;

frontend/src/metabase/browse/components/ModelsTable.tsx

@@ -1,3 +1,4 @@
+import { push } from "react-router-redux";
 import { t } from "ttag";
 
 import EntityItem from "metabase/components/EntityItem";
@@ -6,7 +7,6 @@ import {
  type SortingOptions,
 } from "metabase/components/ItemsTable/BaseItemsTable";
 import {
- ColumnHeader,
  ItemCell,
  ItemLink,
  ItemNameCell,
@@ -17,6 +17,7 @@ import {
 import { Columns } from "metabase/components/ItemsTable/Columns";
 import type { ResponsiveProps } from "metabase/components/ItemsTable/utils";
 import { color } from "metabase/lib/colors";
+import { useDispatch } from "metabase/lib/redux";
 import * as Urls from "metabase/lib/urls";
 import { Icon, type IconProps } from "metabase/ui";
 import type { Card, ModelResult } from "metabase-types/api";
@@ -26,6 +27,7 @@ import { getCollectionName, getIcon } from "../utils";
 
 import { CollectionBreadcrumbsWithTooltip } from "./CollectionBreadcrumbsWithTooltip";
 import { EllipsifiedWithMarkdown } from "./EllipsifiedWithMarkdown";
+import { ModelTableRow } from "./ModelsTable.styled";
 import { getModelDescription } from "./utils";
 
 export interface ModelsTableProps {
@@ -69,7 +71,9 @@ export const ModelsTable = ({
  sortingOptions={sortingOptions}
  onSortingOptionsChange={onSortingOptionsChange}
  />
- <ColumnHeader {...descriptionProps}>{t`Description`}</ColumnHeader>
+ <SortableColumnHeader name="description" {...descriptionProps}>
+ {t`Description`}
+ </SortableColumnHeader>
  <SortableColumnHeader
  name="collection"
  sortingOptions={sortingOptions}
@@ -93,9 +97,24 @@ export const ModelsTable = ({
 const TBodyRow = ({ item }: { item: ModelResult }) => {
  const icon = getIcon(item);
  const containerName = `collections-path-for-${item.id}`;
+ const dispatch = useDispatch();
+ const stopClickPropagation = {
+ onClick: (e: React.MouseEvent) => e.stopPropagation(),
+ };
 
  return (
- <tr>
+ <ModelTableRow
+ onClick={(e: React.MouseEvent) => {
+ const url = Urls.model(item as unknown as Partial<Card>);
+ if ((e.ctrlKey || e.metaKey) && e.button === 0) {
+ window.open(url, "_blank");
+ } else {
+ dispatch(push(url));
+ }
+ }}
+ tabIndex={0}
+ key={item.id}
+ >
  {/* Name */}
  <NameCell
  item={item}
@@ -125,13 +144,16 @@ const TBodyRow = ({ item }: { item: ModelResult }) => {
  <CollectionBreadcrumbsWithTooltip
  containerName={containerName}
  collection={item.collection}
+ // To avoid propagating the click event to the ModelTableRow
+ breadcrumbGroupProps={stopClickPropagation}
+ collectionsIconProps={stopClickPropagation}
  />
  )}
  </ItemCell>
 
  {/* Adds a border-radius to the table */}
  <Columns.RightEdge.Cell />
- </tr>
+ </ModelTableRow>
  );
 };
 

frontend/src/metabase/core/components/Ellipsified/Ellipsified.styled.tsx

@@ -22,4 +22,8 @@ interface EllipsifiedRootProps {
 
 export const EllipsifiedRoot = styled.div<EllipsifiedRootProps>`
  ${props => ((props.lines ?? 1) > 1 ? clampCss(props) : ellipsifyCss)};
+ // To ellipsify markdown
+ p {
+ ${ellipsifyCss}
+ }
 `;

frontend/src/metabase/ui/components/icons/Icon/Icon.tsx

@@ -43,8 +43,11 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
  return tooltip ? <Tooltip label={tooltip}>{icon}</Tooltip> : icon;
 });
 
-/** An icon that does not shrink when the viewport gets narrower **/
-export const FixedSizeIcon = styled(Icon)<{ size?: number }>`
- min-width: ${({ size }) => size ?? 16}px;
- min-height: ${({ size }) => size ?? 16}px;
+const widthToString = (width: number | string) =>
+ typeof width === "number" ? `${width}px` : width;
+
+/** An icon that does not shrink when its container is too narrow **/
+export const FixedSizeIcon = styled(Icon)`
+ min-width: ${({ size }) => widthToString(size || 16)};
+ min-height: ${({ size }) => widthToString(size || 16)};
 `;

frontend/src/metabase/ui/components/overlays/Tooltip/Tooltip.styled.tsx

@@ -25,5 +25,16 @@ export const getTooltipOverrides = (): MantineThemeOverride["components"] => ({
  padding: "0.6rem 0.75rem",
  },
  }),
+ variants: {
+ multiline: _theme => {
+ return {
+ tooltip: {
+ whiteSpace: "normal",
+ maxWidth: "20rem",
+ overflowWrap: "break-word",
+ },
+ };
+ },
+ },
  },
 });