Skip to content
Snippets Groups Projects
Unverified Commit 8b6e0bf1 authored by Raphael Krut-Landau's avatar Raphael Krut-Landau Committed by GitHub
Browse files

Fix column widths in Browse models (#42601)

parent c5946629
No related branches found
No related tags found
No related merge requests found
import { useMemo } from "react";
import { t } from "ttag";
import { c, t } from "ttag";
import NoResults from "assets/img/no_results.svg";
import { useSearchQuery } from "metabase/api";
......@@ -42,7 +42,8 @@ export const BrowseModels = () => {
<Title order={1} color="text-dark">
<Group spacing="sm">
<Icon size={24} color={color("brand")} name="model" />
{t`Models`}
{c("The title of a page where you can view all the models")
.t`Browsing models`}
</Group>
</Title>
<ModelFilterControls
......
import styled from "@emotion/styled";
import {
ItemLink,
TableColumn,
hideResponsively,
} from "metabase/components/ItemsTable/BaseItemsTable.styled";
import type { ResponsiveProps } from "metabase/components/ItemsTable/utils";
import { color } from "metabase/lib/colors";
import { breakpoints } from "metabase/ui/theme";
export const ModelTableRow = styled.tr`
cursor: pointer;
......@@ -8,3 +15,25 @@ export const ModelTableRow = styled.tr`
outline: 2px solid ${color("brand")};
}
`;
export const ModelNameLink = styled(ItemLink)`
padding-inline-start: 0.6rem;
padding-block: 0.5rem;
`;
export const ModelCell = styled.td<ResponsiveProps>`
td& {
padding: 0.25em 0.5rem 0.25em 0.5rem;
}
${hideResponsively}
`;
export const ModelNameColumn = styled(TableColumn)`
width: 356px;
@container ${props => props.containerName} (max-width: ${breakpoints.md}) {
width: 280px;
}
@container ${props => props.containerName} (max-width: ${breakpoints.sm}) {
width: 200px;
}
`;
......@@ -8,7 +8,6 @@ import {
type SortingOptions,
} from "metabase/components/ItemsTable/BaseItemsTable";
import {
ItemCell,
ItemLink,
ItemNameCell,
Table,
......@@ -17,6 +16,7 @@ import {
} from "metabase/components/ItemsTable/BaseItemsTable.styled";
import { Columns, SortDirection } from "metabase/components/ItemsTable/Columns";
import type { ResponsiveProps } from "metabase/components/ItemsTable/utils";
import { Ellipsified } from "metabase/core/components/Ellipsified";
import { color } from "metabase/lib/colors";
import { useDispatch, useSelector } from "metabase/lib/redux";
import * as Urls from "metabase/lib/urls";
......@@ -29,21 +29,27 @@ import { getCollectionName, getIcon } from "../utils";
import { CollectionBreadcrumbsWithTooltip } from "./CollectionBreadcrumbsWithTooltip";
import { EllipsifiedWithMarkdownTooltip } from "./EllipsifiedWithMarkdownTooltip";
import { ModelTableRow } from "./ModelsTable.styled";
import {
ModelCell,
ModelNameColumn,
ModelTableRow,
} from "./ModelsTable.styled";
import { getModelDescription, sortModels } from "./utils";
export interface ModelsTableProps {
models: ModelResult[];
}
export const itemsTableContainerName = "ItemsTableContainer";
const descriptionProps: ResponsiveProps = {
hideAtContainerBreakpoint: "sm",
containerName: "ItemsTableContainer",
containerName: itemsTableContainerName,
};
const collectionProps: ResponsiveProps = {
hideAtContainerBreakpoint: "xs",
containerName: "ItemsTableContainer",
containerName: itemsTableContainerName,
};
const DEFAULT_SORTING_OPTIONS: SortingOptions = {
......@@ -61,36 +67,60 @@ export const ModelsTable = ({ models }: ModelsTableProps) => {
const sortedModels = sortModels(models, sortingOptions, localeCode);
/** The name column has an explicitly set width. The remaining columns divide the remaining width. This is the percentage allocated to the collection column */
const collectionWidth = 38.5;
const descriptionWidth = 100 - collectionWidth;
return (
<Table>
<colgroup>
{/* <col> for Name column */}
<TableColumn style={{ width: "200px" }} />
{/* <col> for Description column */}
<TableColumn {...descriptionProps} />
<ModelNameColumn containerName={itemsTableContainerName} />
{/* <col> for Collection column */}
<TableColumn {...collectionProps} />
<TableColumn {...collectionProps} width={`${collectionWidth}%`} />
{/* <col> for Description column */}
<TableColumn {...descriptionProps} width={`${descriptionWidth}%`} />
<Columns.RightEdge.Col />
</colgroup>
<thead>
<tr>
<Columns.Name.Header
<SortableColumnHeader
name="name"
sortingOptions={sortingOptions}
onSortingOptionsChange={setSortingOptions}
/>
<SortableColumnHeader name="description" {...descriptionProps}>
{t`Description`}
style={{ paddingInlineStart: ".625rem" }}
columnHeaderProps={{
style: { paddingInlineEnd: ".5rem" },
}}
>
{t`Name`}
</SortableColumnHeader>
<SortableColumnHeader
name="collection"
sortingOptions={sortingOptions}
onSortingOptionsChange={setSortingOptions}
{...collectionProps}
columnHeaderProps={{
style: {
paddingInline: ".5rem",
},
}}
>
{t`Collection`}
<Ellipsified>{t`Collection`}</Ellipsified>
</SortableColumnHeader>
<SortableColumnHeader
name="description"
{...descriptionProps}
columnHeaderProps={{
style: {
paddingInline: ".5rem",
},
}}
>
{t`Description`}
</SortableColumnHeader>
<Columns.RightEdge.Header />
</tr>
......@@ -132,15 +162,8 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
}}
/>
{/* Description */}
<ItemCell {...descriptionProps}>
<EllipsifiedWithMarkdownTooltip>
{getModelDescription(model) || ""}
</EllipsifiedWithMarkdownTooltip>
</ItemCell>
{/* Collection */}
<ItemCell
<ModelCell
data-testid={`path-for-collection: ${
model.collection
? getCollectionName(model.collection)
......@@ -154,7 +177,14 @@ const TBodyRow = ({ model }: { model: ModelResult }) => {
collection={model.collection}
/>
)}
</ItemCell>
</ModelCell>
{/* Description */}
<ModelCell {...descriptionProps}>
<EllipsifiedWithMarkdownTooltip>
{getModelDescription(model) || ""}
</EllipsifiedWithMarkdownTooltip>
</ModelCell>
{/* Adds a border-radius to the table */}
<Columns.RightEdge.Cell />
......@@ -176,7 +206,15 @@ const NameCell = ({
const { id, name } = model;
return (
<ItemNameCell data-testid={`${testIdPrefix}-name`}>
<ItemLink to={Urls.model({ id, name })} onClick={onClick}>
<ItemLink
to={Urls.model({ id, name })}
onClick={onClick}
style={{
// To align the icons with "Name" in the <th>
paddingInlineStart: "1.4rem",
paddingInlineEnd: ".5rem",
}}
>
<Icon
size={16}
{...icon}
......
......@@ -40,7 +40,7 @@ export const Table = styled.table<{ isInDragLayer?: boolean }>`
Table.defaultProps = { className: AdminS.ContentTable };
const hideResponsively = ({
export const hideResponsively = ({
hideAtContainerBreakpoint,
containerName,
}: ResponsiveProps) =>
......@@ -52,7 +52,9 @@ const hideResponsively = ({
`;
export const ColumnHeader = styled.th<ResponsiveProps>`
padding: 0.75em 1em 0.75em !important;
th& {
padding: 0.75em 1em 0.75em;
}
font-weight: bold;
color: ${color("text-medium")};
${hideResponsively}
......
......@@ -37,6 +37,7 @@ export type SortableColumnHeaderProps = {
name?: string;
sortingOptions?: SortingOptions;
onSortingOptionsChange?: (newSortingOptions: SortingOptions) => void;
columnHeaderProps?: Partial<HTMLAttributes<HTMLTableHeaderCellElement>>;
} & PropsWithChildren<Partial<HTMLAttributes<HTMLDivElement>>>;
export const SortableColumnHeader = ({
......@@ -46,6 +47,7 @@ export const SortableColumnHeader = ({
children,
hideAtContainerBreakpoint,
containerName,
columnHeaderProps,
...props
}: SortableColumnHeaderProps & ResponsiveProps) => {
const isSortable = !!onSortingOptionsChange && !!name;
......@@ -76,6 +78,7 @@ export const SortableColumnHeader = ({
<ColumnHeader
hideAtContainerBreakpoint={hideAtContainerBreakpoint}
containerName={containerName}
{...columnHeaderProps}
>
<SortingControlContainer
{...props}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment