wip

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

@@ -2,12 +2,12 @@ import { useMemo } from "react";
 import { t } from "ttag";
 
 import NoResults from "assets/img/no_results.svg";
+import type { ModelResult, SearchRequest } from "metabase-types/api";
 import { useSearchQuery } from "metabase/api";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { color } from "metabase/lib/colors";
 import { PLUGIN_CONTENT_VERIFICATION } from "metabase/plugins";
 import { Box, Flex, Group, Icon, Stack, Title } from "metabase/ui";
-import type { ModelResult, SearchRequest } from "metabase-types/api";
 
 import type { ActualModelFilters } from "../utils";
 import { filterModels } from "../utils";
@@ -17,12 +17,13 @@ import {
   BrowseHeader,
   BrowseMain,
   BrowseSection,
-  CenteredEmptyState,
+  CenteredEmptyState
 } from "./BrowseContainer.styled";
 import { ModelExplanationBanner } from "./ModelExplanationBanner";
 import { ModelsTable } from "./ModelsTable";
+import { RecentlyViewedModels } from "./RecentlyViewedModels";
 
-const { availableModelFilters, useModelFilterSettings } =
+const { availableModelFilters, useModelFilterSettings, ModelFilterControls } =
   PLUGIN_CONTENT_VERIFICATION;
 
 export const BrowseModels = () => {
@@ -45,7 +46,7 @@ export const BrowseModels = () => {
                 {t`Models`}
               </Group>
             </Title>
-            <PLUGIN_CONTENT_VERIFICATION.ModelFilterControls
+            <ModelFilterControls
               actualModelFilters={actualModelFilters}
               setActualModelFilters={setActualModelFilters}
             />
@@ -75,14 +76,17 @@ export const BrowseModelsBody = ({
   };
   const { data, error, isLoading } = useSearchQuery(query);
 
-  const models = useMemo(() => {
+  const { modelsWithoutMetabaseAnalytics, filteredModels } = useMemo(() => {
     const unfilteredModels = (data?.data as ModelResult[]) ?? [];
+    const modelsWithoutMetabaseAnalytics = unfilteredModels.filter(
+      model => model.collection.id !== 1,
+    );
     const filteredModels = filterModels(
-      unfilteredModels || [],
+      modelsWithoutMetabaseAnalytics,
       actualModelFilters,
       availableModelFilters,
     );
-    return filteredModels;
+    return { modelsWithoutMetabaseAnalytics, filteredModels };
   }, [data, actualModelFilters]);
 
   if (error || isLoading) {
@@ -95,11 +99,14 @@ export const BrowseModelsBody = ({
     );
   }
 
-  if (models.length) {
+  if (filteredModels.length) {
     return (
-      <Stack spacing="md" mb="lg">
+      <Stack mb="lg" spacing="md">
         <ModelExplanationBanner />
-        <ModelsTable models={models} />
+        <RecentlyViewedModels
+          modelCount={modelsWithoutMetabaseAnalytics.length}
+        />
+        <ModelsTable models={filteredModels} />
       </Stack>
     );
   }

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

@@ -0,0 +1,20 @@
+import { Ellipsified } from "metabase/core/components/Ellipsified";
+import Markdown from "metabase/core/components/Markdown";
+
+export const EllipsifiedWithMarkdownTooltip = ({
+  children,
+}: {
+  children: string;
+}) => {
+  return (
+    <Ellipsified
+      tooltip={
+        <Markdown disallowHeading unstyleLinks lineClamp={12}>
+          {children}
+        </Markdown>
+      }
+    >
+      {children}
+    </Ellipsified>
+  );
+};

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

@@ -28,8 +28,8 @@ import { trackModelClick } from "../analytics";
 import { getCollectionName, getIcon } from "../utils";
 
 import { CollectionBreadcrumbsWithTooltip } from "./CollectionBreadcrumbsWithTooltip";
-import { EllipsifiedWithMarkdown } from "./EllipsifiedWithMarkdown";
 import { ModelTableRow } from "./ModelsTable.styled";
+import { EllipsifiedWithMarkdownTooltip } from "./EllipsifiedWithMarkdownTooltip";
 import { getModelDescription, sortModels } from "./utils";
 
 export interface ModelsTableProps {
@@ -134,9 +134,9 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
 
       {/* Description */}
       <ItemCell {...descriptionProps}>
-        <EllipsifiedWithMarkdown>
+        <EllipsifiedWithMarkdownTooltip>
           {getModelDescription(model) || ""}
-        </EllipsifiedWithMarkdown>
+        </EllipsifiedWithMarkdownTooltip>
       </ItemCell>
 
       {/* Collection */}