Ellipsify descriptions properly in Browse models (#42456)

* Ellipsify descriptions properly in Browse models * Simplify
metabase · May 13, 2024 · cc0a423 · cc0a423
1 parent e6213e4
commit cc0a423
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 42 deletions.
diff --git a/frontend/src/metabase/browse/components/BrowseModels.tsx b/frontend/src/metabase/browse/components/BrowseModels.tsx
@@ -22,7 +22,7 @@ import {
 import { ModelExplanationBanner } from "./ModelExplanationBanner";
 import { ModelsTable } from "./ModelsTable";
 
-const { availableModelFilters, useModelFilterSettings } =
+const { availableModelFilters, useModelFilterSettings, ModelFilterControls } =
   PLUGIN_CONTENT_VERIFICATION;
 
 export const BrowseModels = () => {
@@ -45,7 +45,7 @@ export const BrowseModels = () => {
                 {t`Models`}
               </Group>
             </Title>
-            <PLUGIN_CONTENT_VERIFICATION.ModelFilterControls
+            <ModelFilterControls
               actualModelFilters={actualModelFilters}
               setActualModelFilters={setActualModelFilters}
             />
@@ -75,10 +75,10 @@ export const BrowseModelsBody = ({
   };
   const { data, error, isLoading } = useSearchQuery(query);
 
-  const models = useMemo(() => {
+  const filteredModels = useMemo(() => {
     const unfilteredModels = (data?.data as ModelResult[]) ?? [];
     const filteredModels = filterModels(
-      unfilteredModels || [],
+      unfilteredModels,
       actualModelFilters,
       availableModelFilters,
     );
@@ -95,11 +95,11 @@ export const BrowseModelsBody = ({
     );
   }
 
-  if (models.length) {
+  if (filteredModels.length) {
     return (
-      <Stack spacing="md" mb="lg">
+      <Stack mb="lg" spacing="md">
         <ModelExplanationBanner />
-        <ModelsTable models={models} />
+        <ModelsTable models={filteredModels} />
       </Stack>
     );
   }

diff --git a/frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.unit.spec.tsx b/frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.unit.spec.tsx
diff --git a/...se/components/EllipsifiedWithMarkdown.tsx → ...onents/EllipsifiedWithMarkdownTooltip.tsx b/...se/components/EllipsifiedWithMarkdown.tsx → ...onents/EllipsifiedWithMarkdownTooltip.tsx
@@ -1,7 +1,11 @@
 import { Ellipsified } from "metabase/core/components/Ellipsified";
 import Markdown from "metabase/core/components/Markdown";
 
-export const EllipsifiedWithMarkdown = ({ children }: { children: string }) => {
+export const EllipsifiedWithMarkdownTooltip = ({
+  children,
+}: {
+  children: string;
+}) => {
   return (
     <Ellipsified
       tooltip={
@@ -10,7 +14,7 @@ export const EllipsifiedWithMarkdown = ({ children }: { children: string }) => {
         </Markdown>
       }
     >
-      <Markdown disallowHeading>{children.replace(/\s/g, " ")}</Markdown>
+      {children}
     </Ellipsified>
   );
 };
diff --git a/frontend/src/metabase/browse/components/ModelsTable.tsx b/frontend/src/metabase/browse/components/ModelsTable.tsx
@@ -28,7 +28,7 @@ import { trackModelClick } from "../analytics";
 import { getCollectionName, getIcon } from "../utils";
 
 import { CollectionBreadcrumbsWithTooltip } from "./CollectionBreadcrumbsWithTooltip";
-import { EllipsifiedWithMarkdown } from "./EllipsifiedWithMarkdown";
+import { EllipsifiedWithMarkdownTooltip } from "./EllipsifiedWithMarkdownTooltip";
 import { ModelTableRow } from "./ModelsTable.styled";
 import { getModelDescription, sortModels } from "./utils";
 
@@ -134,9 +134,9 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
 
       {/* Description */}
       <ItemCell {...descriptionProps}>
-        <EllipsifiedWithMarkdown>
+        <EllipsifiedWithMarkdownTooltip>
           {getModelDescription(model) || ""}
-        </EllipsifiedWithMarkdown>
+        </EllipsifiedWithMarkdownTooltip>
       </ItemCell>
 
       {/* Collection */}