Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ellipsify descriptions properly in Browse models #42456

Merged
merged 2 commits into from
May 13, 2024
Merged

Ellipsify descriptions properly in Browse models #42456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d675683
Ellipsify descriptions properly in Browse models
rafpaf May 9, 2024
7689e91
fix imports
rafpaf May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions frontend/src/metabase/browse/components/BrowseModels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -45,7 +45,7 @@ export const BrowseModels = () => {
{t`Models`}
</Group>
</Title>
<PLUGIN_CONTENT_VERIFICATION.ModelFilterControls
<ModelFilterControls
actualModelFilters={actualModelFilters}
setActualModelFilters={setActualModelFilters}
/>
Expand Down Expand Up @@ -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,
);
Expand All @@ -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>
);
}
Expand Down
30 changes: 0 additions & 30 deletions frontend/src/metabase/browse/components/EllipsifiedWithMarkdown.unit.spec.tsx
View file
Open in desktop

This file was deleted.

8 changes: 6 additions & 2 deletions ...se/components/EllipsifiedWithMarkdown.tsx → ...onents/EllipsifiedWithMarkdownTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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={
Expand All @@ -10,7 +14,7 @@ export const EllipsifiedWithMarkdown = ({ children }: { children: string }) => {
</Markdown>
}
>
<Markdown disallowHeading>{children.replace(/\s/g, " ")}</Markdown>
{children}
</Ellipsified>
);
};
6 changes: 3 additions & 3 deletions frontend/src/metabase/browse/components/ModelsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -134,9 +134,9 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {

{/* Description */}
<ItemCell {...descriptionProps}>
<EllipsifiedWithMarkdown>
<EllipsifiedWithMarkdownTooltip>
{getModelDescription(model) || ""}
</EllipsifiedWithMarkdown>
</EllipsifiedWithMarkdownTooltip>
</ItemCell>

{/* Collection */}
Expand Down