Fix column widths in Browse models (#42601)

metabase · May 14, 2024 · 8b6e0bf · 8b6e0bf
1 parent c594662
commit 8b6e0bf
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 28 deletions.
diff --git a/frontend/src/metabase/browse/components/BrowseModels.tsx b/frontend/src/metabase/browse/components/BrowseModels.tsx
@@ -1,5 +1,5 @@
 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

diff --git a/frontend/src/metabase/browse/components/ModelsTable.styled.tsx b/frontend/src/metabase/browse/components/ModelsTable.styled.tsx
@@ -1,10 +1,39 @@
 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;
   :outline {
     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;
+  }
+`;
diff --git a/frontend/src/metabase/browse/components/ModelsTable.tsx b/frontend/src/metabase/browse/components/ModelsTable.tsx
@@ -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}

diff --git a/frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx b/frontend/src/metabase/components/ItemsTable/BaseItemsTable.styled.tsx
@@ -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}

diff --git a/frontend/src/metabase/components/ItemsTable/BaseItemsTable.tsx b/frontend/src/metabase/components/ItemsTable/BaseItemsTable.tsx
@@ -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}