feat(mcp-ui): polish up ListDatabases UI and enable it to render as standalone component (#811)

Author: tsck

package.json

@@ -92,7 +92,10 @@
     "@ai-sdk/openai": "^2.0.52",
     "@emotion/css": "^11.13.5",
     "@eslint/js": "^9.34.0",
+    "@leafygreen-ui/lib": "^15.7.0",
     "@leafygreen-ui/table": "^15.2.2",
+    "@leafygreen-ui/tokens": "^4.2.0",
+    "@leafygreen-ui/typography": "^22.2.3",
     "@modelcontextprotocol/inspector": "^0.17.1",
     "@mongodb-js/oidc-mock-provider": "^0.12.0",
     "@redocly/cli": "^2.0.8",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+import "../styles/fonts.css";
 import React from "react";
 import { createRoot } from "react-dom/client";
 

src/ui/build/mount.tsx

@@ -1,5 +1,14 @@
 import { css } from "@emotion/css";
+import { color, InteractionState, Property, spacing, Variant } from "@leafygreen-ui/tokens";
+import { Theme } from "@leafygreen-ui/lib";
 
-export const tableStyles = css`
-    background: white;
+export const getContainerStyles = (darkMode: boolean): string => css`
+    background-color: ${color[darkMode ? Theme.Dark : Theme.Light][Property.Background][Variant.Primary][
+        InteractionState.Default
+    ]};
+    padding: ${spacing[200]}px;
+`;
+
+export const AmountTextStyles = css`
+    margin-bottom: ${spacing[400]}px;
 `;

src/ui/components/ListDatabases/ListDatabases.styles.ts

@@ -1,20 +1,16 @@
-import React from "react";
-import { useRenderData } from "../../hooks/index.js";
-import {
-    Cell as LGCell,
-    HeaderCell as LGHeaderCell,
-    HeaderRow,
-    Row as LGRow,
-    Table,
-    TableBody,
-    TableHead,
-} from "@leafygreen-ui/table";
-import { tableStyles } from "./ListDatabases.styles.js";
+import { type ReactElement } from "react";
+import { useDarkMode, useRenderData } from "../../hooks/index.js";
+import { Cell, HeaderCell, HeaderRow, Row, Table, TableBody, TableHead } from "@leafygreen-ui/table";
+import { Body } from "@leafygreen-ui/typography";
 import type { ListDatabasesOutput } from "../../../tools/mongodb/metadata/listDatabases.js";
+import { AmountTextStyles, getContainerStyles } from "./ListDatabases.styles.js";
 
-const HeaderCell = LGHeaderCell as React.FC<React.ComponentPropsWithoutRef<"th">>;
-const Cell = LGCell as React.FC<React.ComponentPropsWithoutRef<"td">>;
-const Row = LGRow as React.FC<React.ComponentPropsWithoutRef<"tr">>;
+export type Database = ListDatabasesOutput["databases"][number];
+
+interface ListDatabasesProps {
+    databases?: Database[];
+    darkMode?: boolean;
+}
 
 function formatBytes(bytes: number): string {
     if (bytes === 0) return "0 Bytes";
@@ -26,37 +22,49 @@ function formatBytes(bytes: number): string {
     return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
 }
 
-export const ListDatabases = (): React.ReactElement | null => {
-    const { data, isLoading, error } = useRenderData<ListDatabasesOutput>();
+export const ListDatabases = ({
+    databases: propDatabases,
+    darkMode: darkModeProp,
+}: ListDatabasesProps): ReactElement | null => {
+    const darkMode = useDarkMode(darkModeProp);
+    const { data: hookData, isLoading, error } = useRenderData<ListDatabasesOutput>();
+    const databases = propDatabases ?? hookData?.databases;
 
-    if (isLoading) {
-        return <div>Loading...</div>;
-    }
+    if (!propDatabases) {
+        if (isLoading) {
+            return <div>Loading...</div>;
+        }
 
-    if (error) {
-        return <div>Error: {error}</div>;
+        if (error) {
+            return <div>Error: {error}</div>;
+        }
     }
 
-    if (!data) {
+    if (!databases) {
         return null;
     }
 
     return (
-        <Table className={tableStyles}>
-            <TableHead>
-                <HeaderRow>
-                    <HeaderCell>DB Name</HeaderCell>
-                    <HeaderCell>DB Size</HeaderCell>
-                </HeaderRow>
-            </TableHead>
-            <TableBody>
-                {data.databases.map((db) => (
-                    <Row key={db.name}>
-                        <Cell>{db.name}</Cell>
-                        <Cell>{formatBytes(db.size)}</Cell>
-                    </Row>
-                ))}
-            </TableBody>
-        </Table>
+        <div className={getContainerStyles(darkMode)}>
+            <Body className={AmountTextStyles} darkMode={darkMode}>
+                Your cluster has <strong>{databases.length} databases</strong>:
+            </Body>
+            <Table darkMode={darkMode}>
+                <TableHead>
+                    <HeaderRow>
+                        <HeaderCell>Database</HeaderCell>
+                        <HeaderCell>Size</HeaderCell>
+                    </HeaderRow>
+                </TableHead>
+                <TableBody>
+                    {databases.map((db) => (
+                        <Row key={db.name}>
+                            <Cell>{db.name}</Cell>
+                            <Cell>{formatBytes(db.size)}</Cell>
+                        </Row>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
     );
 };

src/ui/components/ListDatabases/ListDatabases.tsx

@@ -1,2 +1,3 @@
+export { useDarkMode } from "./useDarkMode.js";
 export { useRenderData } from "./useRenderData.js";
 export { useHostCommunication } from "./useHostCommunication.js";

src/ui/hooks/index.ts

@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from "react";
+
+function subscribeToPrefersColorScheme(callback: () => void): () => void {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", callback);
+    return () => mediaQuery.removeEventListener("change", callback);
+}
+
+function getPrefersDarkMode(): boolean {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function useDarkMode(override?: boolean): boolean {
+    const prefersDarkMode = useSyncExternalStore(subscribeToPrefersColorScheme, getPrefersDarkMode);
+    return override ?? prefersDarkMode;
+}

src/ui/hooks/useDarkMode.ts

@@ -1 +1,3 @@
 export { UIRegistry } from "./registry/index.js";
+export { ListDatabases } from "./components/ListDatabases/index.js";
+export type { Database } from "./components/ListDatabases/ListDatabases.js";