diff --git a/frontend/src/metabase/browse/components/BrowseModels.tsx b/frontend/src/metabase/browse/components/BrowseModels.tsx index c8c73ed627695580215344b3d9cb3d24cef57879..aff23886608f51eb3b402a60443da1326a768717 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 bb19f80ee54e6f7e369e604c71ac24a3c7199476..0000000000000000000000000000000000000000 --- 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 c44c4dad1aadfa18ec906066ba6c26b73c70d642..fe3458f6314387573bc31de0fa1568f5f7bd8525 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 0e368118f42cd1e53060ea651df9bbe427e77856..e0d64deb5bebe16d02cd0e5ca15cd86f27d3523b 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 */}