From cc0a4231f4ab58b8564b7dc89ad4d75070c4e380 Mon Sep 17 00:00:00 2001
From: Raphael Krut-Landau <raphael.kl@gmail.com>
Date: Mon, 13 May 2024 16:47:44 -0400
Subject: [PATCH] Ellipsify descriptions properly in Browse models (#42456)
* Ellipsify descriptions properly in Browse models
* Simplify
---
.../browse/components/BrowseModels.tsx | 14 ++++-----
.../EllipsifiedWithMarkdown.unit.spec.tsx | 30 -------------------
...tsx => EllipsifiedWithMarkdownTooltip.tsx} | 8 +++--
.../browse/components/ModelsTable.tsx | 6 ++--
4 files changed, 16 insertions(+), 42 deletions(-)
delete mode 100644 frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.unit.spec.tsx
rename frontend/src/metabase/browse/components/{EllipsifiedWithMarkdown.tsx => EllipsifiedWithMarkdownTooltip.tsx} (67%)
diff --git a/frontend/src/metabase/browse/components/BrowseModels.tsx b/frontend/src/metabase/browse/components/BrowseModels.tsx
index c8c73ed6276..aff23886608 100644
--- 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
deleted file mode 100644
index bb19f80ee54..00000000000
--- a/frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.unit.spec.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { renderWithProviders, screen } from "__support__/ui";
-
-import { EllipsifiedWithMarkdown } from "./EllipsifiedWithMarkdown";
-
-const render = (children: string) => {
- renderWithProviders(
- <EllipsifiedWithMarkdown>{children}</EllipsifiedWithMarkdown>,
- );
-};
-
-describe("EllipsifiedWithMarkdown", () => {
- it("renders Markdown with text", () => {
- const exampleText = "Some example text to be ellipsified";
- render(exampleText);
- expect(screen.getByText(exampleText)).toBeInTheDocument();
- });
-
- it("replaces line breaks with spaces in displayed children", () => {
- const inputText = "Some example\ntext to be ellipsified";
- const expectedText = "Some example text to be ellipsified";
- render(inputText);
- expect(screen.getByText(expectedText)).toBeInTheDocument();
- });
-
- it("does not display headings", () => {
- const inputText = "# Header\nSome example text to be ellipsified";
- render(inputText);
- expect(screen.queryByRole("heading")).not.toBeInTheDocument();
- });
-});
diff --git a/frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.tsx b/frontend/src/metabase/browse/components/EllipsifiedWithMarkdownTooltip.tsx
similarity index 67%
rename from frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.tsx
rename to frontend/src/metabase/browse/components/EllipsifiedWithMarkdownTooltip.tsx
index c44c4dad1aa..fe3458f6314 100644
--- a/frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.tsx
+++ b/frontend/src/metabase/browse/components/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
index 0e368118f42..e0d64deb5be 100644
--- 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 */}
--
GitLab