Squashed branch

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

@@ -59,7 +59,7 @@ export interface Collection {
 
   location: string | null;
   effective_location?: string; // location path containing only those collections that the user has permission to access
-  effective_ancestors?: Collection[];
+  effective_ancestors?: Pick<Collection, "id" | "name">[];
 
   here?: CollectionContentModel[];
   below?: CollectionContentModel[];
@@ -110,6 +110,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-types/api/search.ts

@@ -132,6 +132,7 @@ export type SearchRequest = {
   last_edited_by?: UserId[];
   search_native_query?: boolean | null;
   verified?: boolean | null;
+  model_ancestors?: boolean | null;
 
   // this should be in ListCollectionItemsRequest but legacy code expects them here
   collection?: CollectionId;

frontend/src/metabase/admin/performance/components/StrategyForm.tsx

@@ -422,19 +422,9 @@ const MultiplierFieldSubtitle = () => (
   <div>
     {t`To determine how long each cached result should stick around, we take that query's average execution time and multiply that by what you input here. The result is how many seconds the cache should remain valid for.`}{" "}
     <Tooltip
-      events={{
-        hover: true,
-        focus: true,
-        touch: true,
-      }}
+      variant="multiline"
       inline={true}
-      styles={{
-        tooltip: {
-          whiteSpace: "normal",
-        },
-      }}
       label={t`If a query takes on average 120 seconds (2 minutes) to run, and you input 10 for your multiplier, its cache entry will persist for 1,200 seconds (20 minutes).`}
-      maw="20rem"
     >
       <Text tabIndex={0} lh="1" display="inline" c="brand">
         {t`Example`}

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

@@ -5,20 +5,13 @@ import _ from "underscore";
 import NoResults from "assets/img/no_results.svg";
 import { useSearchQuery } from "metabase/api";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import Search from "metabase/entities/search";
 import { color } from "metabase/lib/colors";
-import { useSelector } from "metabase/lib/redux";
+import { useDispatch } from "metabase/lib/redux";
 import { PLUGIN_CONTENT_VERIFICATION } from "metabase/plugins";
-import { getLocale } from "metabase/setup/selectors";
 import { Box, Flex, Group, Icon, Stack, Title } from "metabase/ui";
-import type { CollectionId } from "metabase-types/api";
 
-import { BROWSE_MODELS_LOCALSTORAGE_KEY } from "../constants";
-import {
-  filterModels,
-  getCollectionViewPreferences,
-  groupModels,
-  type ActualModelFilters,
-} from "../utils";
+import { filterModels, type ActualModelFilters } from "../utils";
 
 import {
   BrowseContainer,
@@ -27,9 +20,8 @@ import {
   BrowseSection,
   CenteredEmptyState,
 } from "./BrowseApp.styled";
-import { ModelGrid } from "./BrowseModels.styled";
 import { ModelExplanationBanner } from "./ModelExplanationBanner";
-import { ModelGroup } from "./ModelGroup";
+import { ModelsTable } from "./ModelsTable";
 
 const { availableModelFilters } = PLUGIN_CONTENT_VERIFICATION;
 
@@ -107,16 +99,13 @@ export const BrowseModelsBody = ({
 }: {
   actualModelFilters: ActualModelFilters;
 }) => {
+  const dispatch = useDispatch();
   const { data, error, isLoading } = useSearchQuery({
     models: ["dataset"],
+    model_ancestors: true,
     filter_items_in_personal_collection: "exclude",
   });
   const unfilteredModels = data?.data;
-  const locale = useSelector(getLocale);
-  const localeCode: string | undefined = locale?.code;
-  const [collectionViewPreferences, setCollectionViewPreferences] = useState(
-    getCollectionViewPreferences,
-  );
 
   const models = useMemo(
     () =>
@@ -128,37 +117,7 @@ export const BrowseModelsBody = ({
     [unfilteredModels, actualModelFilters],
   );
 
-  const handleToggleCollectionExpand = (collectionId: CollectionId) => {
-    const newPreferences = {
-      ...collectionViewPreferences,
-      [collectionId]: {
-        expanded: !(
-          collectionViewPreferences?.[collectionId]?.expanded ?? true
-        ),
-        showAll: !!collectionViewPreferences?.[collectionId]?.showAll,
-      },
-    };
-    setCollectionViewPreferences(newPreferences);
-    localStorage.setItem(
-      BROWSE_MODELS_LOCALSTORAGE_KEY,
-      JSON.stringify(newPreferences),
-    );
-  };
-
-  const handleToggleCollectionShowAll = (collectionId: CollectionId) => {
-    const newPreferences = {
-      ...collectionViewPreferences,
-      [collectionId]: {
-        expanded: collectionViewPreferences?.[collectionId]?.expanded ?? true,
-        showAll: !collectionViewPreferences?.[collectionId]?.showAll,
-      },
-    };
-    setCollectionViewPreferences(newPreferences);
-    localStorage.setItem(
-      BROWSE_MODELS_LOCALSTORAGE_KEY,
-      JSON.stringify(newPreferences),
-    );
-  };
+  const wrappedModels = models.map(model => Search.wrapEntity(model, dispatch));
 
   if (error || isLoading) {
     return (
@@ -170,34 +129,11 @@ export const BrowseModelsBody = ({
     );
   }
 
-  const groupsOfModels = groupModels(models, localeCode);
-
   if (models.length) {
     return (
       <Stack spacing="md" mb="lg">
         <ModelExplanationBanner />
-        <ModelGrid role="grid">
-          {groupsOfModels.map(groupOfModels => {
-            const collectionId = groupOfModels[0].collection.id;
-            return (
-              <ModelGroup
-                expanded={
-                  collectionViewPreferences?.[collectionId]?.expanded ?? true
-                }
-                showAll={!!collectionViewPreferences?.[collectionId]?.showAll}
-                toggleExpanded={() =>
-                  handleToggleCollectionExpand(collectionId)
-                }
-                toggleShowAll={() =>
-                  handleToggleCollectionShowAll(collectionId)
-                }
-                models={groupOfModels}
-                key={`modelgroup-${collectionId}`}
-                localeCode={localeCode}
-              />
-            );
-          })}
-        </ModelGrid>
+        <ModelsTable items={wrappedModels} />
       </Stack>
     );
   }

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([]);
@@ -209,18 +209,17 @@ const mockModels: SearchResult[] = [
 ].map(model => createMockModelResult(model));
 
 describe("BrowseModels", () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
   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.findByText("Alpha");
-    await screen.findByText("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();

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

@@ -0,0 +1,28 @@
+import { Ellipsified } from "metabase/core/components/Ellipsified";
+import Markdown from "metabase/core/components/Markdown";
+
+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/ModelExplanationBanner.tsx

@@ -1,39 +1,24 @@
-import { useState } from "react";
 import { t } from "ttag";
 
-import { useDispatch, useSelector } from "metabase/lib/redux";
-import { updateUserSetting } from "metabase/redux/settings";
-import { getSetting } from "metabase/selectors/settings";
-import { Flex, Paper, Icon, Text } from "metabase/ui";
+import { useUserSetting } from "metabase/common/hooks";
+import { Flex, Icon, Paper, Text } from "metabase/ui";
 
 import { BannerCloseButton, BannerModelIcon } from "./BrowseModels.styled";
 
 export function ModelExplanationBanner() {
-  const hasDismissedBanner = useSelector(state =>
-    getSetting(state, "dismissed-browse-models-banner"),
+  const [hasDismissedBanner, setHasDismissedBanner] = useUserSetting(
+    "dismissed-browse-models-banner",
   );
-  const dispatch = useDispatch();
-
-  const [shouldShowBanner, setShouldShowBanner] = useState(!hasDismissedBanner);
-
   const dismissBanner = () => {
-    setShouldShowBanner(false);
-    dispatch(
-      updateUserSetting({
-        key: "dismissed-browse-models-banner",
-        value: true,
-      }),
-    );
+    setHasDismissedBanner(true);
   };
 
-  if (!shouldShowBanner) {
+  if (hasDismissedBanner) {
     return null;
   }
 
   return (
     <Paper
-      mt="1rem"
-      mb="-0.5rem"
       p="1rem"
       color="text-dark"
       bg="brand-lighter"
@@ -44,7 +29,7 @@ export function ModelExplanationBanner() {
     >
       <Flex>
         <BannerModelIcon name="model" />
-        <Text size="md" lh="1rem" mr="1rem">
+        <Text size="md" lh="1rem" style={{ marginInlineEnd: "1rem" }}>
           {t`Models help curate data to make it easier to find answers to questions all in one place.`}
         </Text>
         <BannerCloseButton onClick={dismissBanner}>