Basic Table Component (+ use it for API Keys) (#42287)

* add basic table component

* use basic table in api keys UI

* tweak padding

* replace test id

* update e2e test ids

e2e/test/scenarios/admin-2/api-keys.cy.spec.ts

@@ -124,8 +124,7 @@ describe("scenarios > admin > settings > API keys", () => {
     cy.wait("@deleteKey");
     cy.wait("@getKeys");
 
-    cy.findByTestId("api-keys-table").should("not.contain", "Test API Key One");
-    cy.findByTestId("api-keys-table").findByText("No API keys here yet");
+    cy.findByTestId("empty-table-warning").findByText("No API keys here yet");
   });
 
   it("should allow editing an API key", () => {

frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx

-import cx from "classnames";
 import { useState, useMemo } from "react";
 import { t } from "ttag";
 
 import { useListApiKeysQuery } from "metabase/api";
+import { StyledTable } from "metabase/common/components/Table";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { DelayedLoadingAndErrorWrapper } from "metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper";
 import { Ellipsified } from "metabase/core/components/Ellipsified";
-import AdminS from "metabase/css/admin.module.css";
 import CS from "metabase/css/core/index.css";
 import { formatDateTimeWithUnit } from "metabase/lib/formatting/date";
 import { Stack, Title, Text, Button, Group, Icon } from "metabase/ui";
@@ -16,7 +15,8 @@ import type { ApiKey } from "metabase-types/api";
 import { CreateApiKeyModal } from "./CreateApiKeyModal";
 import { DeleteApiKeyModal } from "./DeleteApiKeyModal";
 import { EditApiKeyModal } from "./EditApiKeyModal";
-import { formatMaskedKey } from "./utils";
+import type { FlatApiKey } from "./utils";
+import { flattenApiKey, formatMaskedKey } from "./utils";
 
 const { fontFamilyMonospace } = getThemeOverrides();
 
@@ -24,7 +24,13 @@ type Modal = null | "create" | "edit" | "delete";
 
 function EmptyTableWarning({ onCreate }: { onCreate: () => void }) {
   return (
-    <Stack mt="xl" align="center" justify="center" spacing="sm">
+    <Stack
+      mt="xl"
+      align="center"
+      justify="center"
+      spacing="sm"
+      data-testid="empty-table-warning"
+    >
       <Title>{t`No API keys here yet`}</Title>
       <Text color="text.1" mb="md">
         {t`You can create an API key to make API calls programatically.`}
@@ -36,6 +42,15 @@ function EmptyTableWarning({ onCreate }: { onCreate: () => void }) {
   );
 }
 
+const columns = [
+  { key: "name", name: t`Key name` },
+  { key: "group_name", name: t`Group` },
+  { key: "masked_key", name: t`Key` },
+  { key: "updated_by_name", name: t`Last modified by` },
+  { key: "updated_at", name: t`Last modified on` },
+  { key: "actions", name: "" },
+];
+
 function ApiKeysTable({
   apiKeys,
   setActiveApiKey,
@@ -49,66 +64,76 @@ function ApiKeysTable({
   loading: boolean;
   error?: unknown;
 }) {
+  const flatApiKeys = useMemo(() => apiKeys?.map(flattenApiKey), [apiKeys]);
+
+  if (loading || error) {
+    return <DelayedLoadingAndErrorWrapper loading={loading} error={error} />;
+  }
+
+  if (apiKeys?.length === 0 || !apiKeys || !flatApiKeys) {
+    return <EmptyTableWarning onCreate={() => setModal("create")} />;
+  }
+
   return (
-    <Stack data-testid="api-keys-table" pb="lg">
-      <table className={cx(AdminS.ContentTable, CS.borderBottom)}>
-        <thead>
-          <tr>
-            <th>{t`Key name`}</th>
-            <th>{t`Group`}</th>
-            <th>{t`Key`}</th>
-            <th>{t`Last modified by`}</th>
-            <th>{t`Last modified on`}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {apiKeys?.map(apiKey => (
-            <tr key={apiKey.id} className={CS.borderBottom}>
-              <td className={CS.textBold} style={{ maxWidth: 400 }}>
-                <Ellipsified>{apiKey.name}</Ellipsified>
-              </td>
-              <td>{apiKey.group.name}</td>
-              <td>
-                <Text ff={fontFamilyMonospace as string}>
-                  {formatMaskedKey(apiKey.masked_key)}
-                </Text>
-              </td>
-              <td>{apiKey.updated_by.common_name}</td>
-              <td>{formatDateTimeWithUnit(apiKey.updated_at, "minute")}</td>
-              <td>
-                <Group spacing="md">
-                  <Icon
-                    name="pencil"
-                    className={CS.cursorPointer}
-                    onClick={() => {
-                      setActiveApiKey(apiKey);
-                      setModal("edit");
-                    }}
-                  />
-                  <Icon
-                    name="trash"
-                    className={CS.cursorPointer}
-                    onClick={() => {
-                      setActiveApiKey(apiKey);
-                      setModal("delete");
-                    }}
-                  />
-                </Group>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <LoadingAndErrorWrapper loading={loading} error={error}>
-        {apiKeys?.length === 0 && (
-          <EmptyTableWarning onCreate={() => setModal("create")} />
-        )}
-      </LoadingAndErrorWrapper>
-    </Stack>
+    <StyledTable
+      data-testid="api-keys-table"
+      columns={columns}
+      rows={flatApiKeys}
+      rowRenderer={row => (
+        <ApiKeyRow
+          apiKey={row}
+          setActiveApiKey={setActiveApiKey}
+          setModal={setModal}
+        />
+      )}
+    />
   );
 }
 
+const ApiKeyRow = ({
+  apiKey,
+  setActiveApiKey,
+  setModal,
+}: {
+  apiKey: FlatApiKey;
+  setActiveApiKey: (apiKey: ApiKey) => void;
+  setModal: (modal: Modal) => void;
+}) => (
+  <tr>
+    <td className={CS.textBold} style={{ maxWidth: 400 }}>
+      <Ellipsified>{apiKey.name}</Ellipsified>
+    </td>
+    <td>{apiKey.group.name}</td>
+    <td>
+      <Text ff={fontFamilyMonospace as string}>
+        {formatMaskedKey(apiKey.masked_key)}
+      </Text>
+    </td>
+    <td>{apiKey.updated_by.common_name}</td>
+    <td>{formatDateTimeWithUnit(apiKey.updated_at, "minute")}</td>
+    <td>
+      <Group spacing="md" py="md">
+        <Icon
+          name="pencil"
+          className={CS.cursorPointer}
+          onClick={() => {
+            setActiveApiKey(apiKey);
+            setModal("edit");
+          }}
+        />
+        <Icon
+          name="trash"
+          className={CS.cursorPointer}
+          onClick={() => {
+            setActiveApiKey(apiKey);
+            setModal("delete");
+          }}
+        />
+      </Group>
+    </td>
+  </tr>
+);
+
 export const ManageApiKeys = () => {
   const [modal, setModal] = useState<Modal>(null);
   const [activeApiKey, setActiveApiKey] = useState<null | ApiKey>(null);

frontend/src/metabase/admin/settings/components/ApiKeys/utils.ts

 import * as Yup from "yup";
 
+import type { ApiKey } from "metabase-types/api";
+
 export function formatMaskedKey(maskedKey: string) {
   return maskedKey.substring(0, 7) + "...";
 }
@@ -8,3 +10,14 @@ export const API_KEY_VALIDATION_SCHEMA = Yup.object({
   name: Yup.string().required(),
   group_id: Yup.number().required(),
 });
+
+export type FlatApiKey = ApiKey & {
+  group_name: string;
+  updated_by_name: string;
+};
+
+export const flattenApiKey = (apiKey: ApiKey): FlatApiKey => ({
+  ...apiKey,
+  group_name: apiKey.group.name,
+  updated_by_name: apiKey.updated_by?.common_name || "",
+});

frontend/src/metabase/common/components/Table/Table.styled.tsx

+import styled from "@emotion/styled";
+
+import { color } from "metabase/lib/colors";
+
+import { Table } from "./Table";
+
+export const StyledTable = styled(Table)`
+  width: 100%;
+  border-collapse: unset;
+  border-spacing: 0;
+  margin-block: 1rem;
+  position: relative;
+  border-radius: 0.5rem;
+  border: 1px solid ${color("border")};
+
+  th {
+    text-align: left;
+    padding: 0.5rem;
+    border-bottom: 1px solid ${color("border")};
+  }
+
+  tbody {
+    width: 100%;
+    max-height: 600px;
+    overflow-y: auto;
+  }
+
+  tbody > tr:hover {
+    background-color: ${color("brand-lighter")};
+  }
+
+  td {
+    border-bottom: 1px solid ${color("border")};
+    padding-inline: 0.5rem;
+  }
+  &:first-of-type td,
+  th {
+    padding-inline-start: 1rem;
+  }
+` as typeof Table;
+// we have to cast this because emotion messes up the generic types here
+// see https://github.com/emotion-js/emotion/issues/2342

frontend/src/metabase/common/components/Table/Table.tsx

+import React from "react";
+
+import { color } from "metabase/lib/colors";
+import { Box, Flex, Icon } from "metabase/ui";
+
+type BaseRow = Record<string, unknown> & { id: number | string };
+
+type ColumnItem = {
+  name: string;
+  key: string;
+};
+
+export type TableProps<Row extends BaseRow> = {
+  columns: ColumnItem[];
+  rows: Row[];
+  rowRenderer: (row: Row) => React.ReactNode;
+  tableProps?: React.HTMLAttributes<HTMLTableElement>;
+};
+
+/**
+ * A basic reusable table component that supports client-side sorting by a column
+ *
+ * @param columns - an array of objects with a name and key properties
+ * @param rows - an array of objects with keys that match the column keys
+ * @param rowRenderer - a function that takes a row object and returns a <tr> element
+ * @param tableProps - additional props to pass to the <table> element
+ */
+export function Table<Row extends BaseRow>({
+  columns,
+  rows,
+  rowRenderer,
+  ...tableProps
+}: TableProps<Row>) {
+  const [sortColumn, setSortColumn] = React.useState<string | null>(null);
+  const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">(
+    "asc",
+  );
+
+  const sortedRows = React.useMemo(() => {
+    if (sortColumn) {
+      return [...rows].sort((a, b) => {
+        const aValue = a[sortColumn];
+        const bValue = b[sortColumn];
+        if (
+          aValue === bValue ||
+          !isSortableValue(aValue) ||
+          !isSortableValue(bValue)
+        ) {
+          return 0;
+        }
+        if (sortDirection === "asc") {
+          return aValue < bValue ? -1 : 1;
+        } else {
+          return aValue > bValue ? -1 : 1;
+        }
+      });
+    }
+    return rows;
+  }, [rows, sortColumn, sortDirection]);
+
+  return (
+    <table {...tableProps}>
+      <thead>
+        <tr>
+          {columns.map(column => (
+            <th key={String(column.key)}>
+              <ColumnHeader
+                column={column}
+                sortColumn={sortColumn}
+                sortDirection={sortDirection}
+                onSort={(columnKey: string, direction: "asc" | "desc") => {
+                  setSortColumn(columnKey);
+                  setSortDirection(direction);
+                }}
+              />
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {sortedRows.map((row, index) => (
+          <React.Fragment key={String(row.id) || index}>
+            {rowRenderer(row)}
+          </React.Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function ColumnHeader({
+  column,
+  sortColumn,
+  sortDirection,
+  onSort,
+}: {
+  column: ColumnItem;
+  sortColumn: string | null;
+  sortDirection: "asc" | "desc";
+  onSort: (column: string, direction: "asc" | "desc") => void;
+}) {
+  return (
+    <Flex
+      gap="sm"
+      align="center"
+      style={{ cursor: "pointer" }}
+      onClick={() =>
+        onSort(
+          String(column.key),
+          sortColumn === column.key && sortDirection === "asc" ? "desc" : "asc",
+        )
+      }
+    >
+      {column.name}
+      {
+        column.name && column.key === sortColumn ? (
+          <Icon
+            name={sortDirection === "desc" ? "chevronup" : "chevrondown"}
+            color={color("text-medium")}
+            style={{ flexShrink: 0 }}
+            size={8}
+          />
+        ) : (
+          <Box w="8px" />
+        ) // spacer to keep the header the same size regardless of sort status
+      }
+    </Flex>
+  );
+}
+
+function isSortableValue(value: unknown): value is string | number {
+  return typeof value === "string" || typeof value === "number";
+}

frontend/src/metabase/common/components/Table/Table.unit.spec.tsx

+import { screen, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { getIcon, queryIcon } from "__support__/ui";
+
+import { Table } from "./Table";
+
+type Pokemon = {
+  id: number;
+  name: string;
+  type: string;
+  generation: number;
+};
+
+const sampleData: Pokemon[] = [
+  {
+    id: 2,
+    name: "Charmander",
+    type: "Fire",
+    generation: 1,
+  },
+  {
+    id: 1,
+    name: "Bulbasaur",
+    type: "Grass",
+    generation: 1,
+  },
+  {
+    id: 3,
+    name: "Squirtle",
+    type: "Water",
+    generation: 1,
+  },
+  {
+    id: 4,
+    name: "Pikachu",
+    type: "Electric",
+    generation: 1,
+  },
+  {
+    id: 99,
+    name: "Scorbunny",
+    type: "Fire",
+    generation: 8,
+  },
+];
+
+const sampleColumns = [
+  {
+    key: "name",
+    name: "Name",
+  },
+  {
+    key: "type",
+    name: "Type",
+  },
+  {
+    key: "generation",
+    name: "Generation",
+  },
+];
+
+const renderRow = (row: Pokemon) => {
+  return (
+    <tr>
+      <td>{row.name}</td>
+      <td>{row.type}</td>
+      <td>{row.generation}</td>
+    </tr>
+  );
+};
+
+describe("common > components > Table", () => {
+  it("should render table headings", () => {
+    render(
+      <Table
+        columns={sampleColumns}
+        rows={sampleData}
+        rowRenderer={renderRow}
+      />,
+    );
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Type")).toBeInTheDocument();
+    expect(screen.getByText("Generation")).toBeInTheDocument();
+    expect(screen.queryByText("id")).not.toBeInTheDocument();
+  });
+
+  it("should render table row data", () => {
+    render(
+      <Table
+        columns={sampleColumns}
+        rows={sampleData}
+        rowRenderer={renderRow}
+      />,
+    );
+    expect(screen.getByText("Bulbasaur")).toBeInTheDocument();
+    expect(screen.getByText("Charmander")).toBeInTheDocument();
+    expect(screen.getByText("Scorbunny")).toBeInTheDocument();
+    expect(screen.getByText("Grass")).toBeInTheDocument();
+    expect(screen.getByText("Water")).toBeInTheDocument();
+
+    expect(screen.queryByText("Sizzlepede")).not.toBeInTheDocument();
+  });
+
+  it("should sort the table", async () => {
+    render(
+      <Table
+        columns={sampleColumns}
+        rows={sampleData}
+        rowRenderer={renderRow}
+      />,
+    );
+    const sortButton = screen.getByText("Name");
+
+    expect(queryIcon("chevrondown")).not.toBeInTheDocument();
+    expect(queryIcon("chevronup")).not.toBeInTheDocument();
+    firstRowShouldHaveText("Charmander");
+
+    await userEvent.click(sortButton);
+    expect(getIcon("chevrondown")).toBeInTheDocument();
+    firstRowShouldHaveText("Bulbasaur");
+
+    await userEvent.click(sortButton);
+    expect(getIcon("chevronup")).toBeInTheDocument();
+    firstRowShouldHaveText("Squirtle");
+  });
+
+  it("should sort on multiple columns", async () => {
+    render(
+      <Table
+        columns={sampleColumns}
+        rows={sampleData}
+        rowRenderer={renderRow}
+      />,
+    );
+    const sortNameButton = screen.getByText("Name");
+    const sortGenButton = screen.getByText("Generation");
+
+    expect(queryIcon("chevrondown")).not.toBeInTheDocument();
+    expect(queryIcon("chevronup")).not.toBeInTheDocument();
+    firstRowShouldHaveText("Charmander");
+
+    await userEvent.click(sortNameButton);
+    expect(getIcon("chevrondown")).toBeInTheDocument();
+    firstRowShouldHaveText("Bulbasaur");
+
+    await userEvent.click(sortGenButton);
+    expect(getIcon("chevrondown")).toBeInTheDocument();
+    firstRowShouldHaveText("1");
+
+    await userEvent.click(sortGenButton);
+    expect(getIcon("chevronup")).toBeInTheDocument();
+    firstRowShouldHaveText("8");
+  });
+});
+
+function firstRowShouldHaveText(text: string) {
+  expect(screen.getAllByRole("row")[1]).toHaveTextContent(text);
+}

frontend/src/metabase/common/components/Table/index.ts

+export * from "./Table";
+export * from "./Table.styled";