20441927389

Committed 22 Dec 2025 07:28PM UTC coverage: 79.4%. First build

Build # 20441927389

Build Type

Pull #811

github

Committed by

web-flow

Commit Message

Merge a753c9150 into 436b80909

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

Run Details

1476 of 1934 branches covered (76.32%)

Branch coverage included in aggregate %.

0 of 65 new or added lines in 6 files covered. (0.0%)

6788 of 8474 relevant lines covered (80.1%)

82.79 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.89

/src/ui/components/ListDatabases/ListDatabases.tsx

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";

export type Database = ListDatabasesOutput["databases"][number];

interface ListDatabasesProps {
    databases?: Database[];
    darkMode?: boolean;
}

function formatBytes(bytes: number): string {
    if (bytes === 0) return "0 Bytes";

    const k = 1024;
    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
}

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 (!propDatabases) {
        if (isLoading) {
            return <div>Loading...</div>;
        }

        if (error) {
            return <div>Error: {error}</div>;
        }
    }

    if (!databases) {
        return null;
    }

    return (
        <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>
    );
};

1	import { type ReactElement } from "react";	3✔
NEW 2	import { useDarkMode, useRenderData } from "../../hooks/index.js";	×
NEW 3	import { Cell, HeaderCell, HeaderRow, Row, Table, TableBody, TableHead } from "@leafygreen-ui/table";	×
NEW 4	import { Body } from "@leafygreen-ui/typography";	×
5	import type { ListDatabasesOutput } from "../../../tools/mongodb/metadata/listDatabases.js";
NEW 6	import { AmountTextStyles, getContainerStyles } from "./ListDatabases.styles.js";	×
7
8	export type Database = ListDatabasesOutput["databases"][number];
9
10	interface ListDatabasesProps {
11	databases?: Database[];
12	darkMode?: boolean;
13	}
14
15	function formatBytes(bytes: number): string {	×
16	if (bytes === 0) return "0 Bytes";	×
17
18	const k = 1024;	×
19	const sizes = ["Bytes", "KB", "MB", "GB", "TB"];	×
20	const i = Math.floor(Math.log(bytes) / Math.log(k));	×
21
22	return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];	×
23	}	×
24
NEW 25	export const ListDatabases = ({	×
NEW 26	databases: propDatabases,	×
NEW 27	darkMode: darkModeProp,	×
NEW 28	}: ListDatabasesProps): ReactElement \| null => {	×
NEW 29	const darkMode = useDarkMode(darkModeProp);	×
NEW 30	const { data: hookData, isLoading, error } = useRenderData<ListDatabasesOutput>();	×
NEW 31	const databases = propDatabases ?? hookData?.databases;	×
32
NEW 33	if (!propDatabases) {	×
NEW 34	if (isLoading) {	×
NEW 35	return <div>Loading...</div>;	×
NEW 36	}	×
37
NEW 38	if (error) {	×
NEW 39	return <div>Error: {error}</div>;	×
NEW 40	}	×
41	}	×
42
NEW 43	if (!databases) {	×
44	return null;	×
45	}	×
46
47	return (	×
NEW 48	<div className={getContainerStyles(darkMode)}>	×
NEW 49	<Body className={AmountTextStyles} darkMode={darkMode}>	×
NEW 50	Your cluster has <strong>{databases.length} databases</strong>:	×
NEW 51	</Body>	×
NEW 52	<Table darkMode={darkMode}>	×
NEW 53	<TableHead>	×
NEW 54	<HeaderRow>	×
NEW 55	<HeaderCell>Database</HeaderCell>	×
NEW 56	<HeaderCell>Size</HeaderCell>	×
NEW 57	</HeaderRow>	×
NEW 58	</TableHead>	×
NEW 59	<TableBody>	×
NEW 60	{databases.map((db) => (	×
NEW 61	<Row key={db.name}>	×
NEW 62	<Cell>{db.name}</Cell>	×
NEW 63	<Cell>{formatBytes(db.size)}</Cell>	×
NEW 64	</Row>	×
NEW 65	))}	×
NEW 66	</TableBody>	×
NEW 67	</Table>	×
NEW 68	</div>	×
69	);
70	};	×

mongodb-js / mongodb-mcp-server / 20441927389

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous