diff --git a/.changeset/quick-coins-speak.md b/.changeset/quick-coins-speak.md new file mode 100644 index 000000000..9485b06da --- /dev/null +++ b/.changeset/quick-coins-speak.md @@ -0,0 +1,5 @@ +--- +"@azure-tools/cadl-ranch-dashboard": minor +--- + +Added number of scenarios under each row diff --git a/packages/cadl-ranch-dashboard/package.json b/packages/cadl-ranch-dashboard/package.json index e46b32a59..411864d5a 100644 --- a/packages/cadl-ranch-dashboard/package.json +++ b/packages/cadl-ranch-dashboard/package.json @@ -1,7 +1,7 @@ { "name": "@azure-tools/cadl-ranch-dashboard", "private": true, - "version": "0.9.0", + "version": "0.10.0", "description": "Cadl Ranch Dashboard website", "main": "dist/index.js", "type": "module", diff --git a/packages/cadl-ranch-dashboard/src/components/tree-table/row-label-cell.tsx b/packages/cadl-ranch-dashboard/src/components/tree-table/row-label-cell.tsx index e0710d686..a82f6f48f 100644 --- a/packages/cadl-ranch-dashboard/src/components/tree-table/row-label-cell.tsx +++ b/packages/cadl-ranch-dashboard/src/components/tree-table/row-label-cell.tsx @@ -1,5 +1,5 @@ -import { FunctionComponent } from "react"; -import { TreeTableRow } from "./types.js"; +import { FunctionComponent, useMemo } from "react"; +import { ManifestTreeNode, TreeTableRow } from "./types.js"; import { Button, Popover, PopoverSurface, PopoverTrigger, Title3, Tooltip } from "@fluentui/react-components"; import ReactMarkdown from "react-markdown"; import { ScenarioData } from "@azure-tools/cadl-ranch-coverage-sdk"; @@ -17,6 +17,7 @@ const INDENT_SIZE = 14; export const RowLabelCell: FunctionComponent = ({ row }) => { const caret = row.hasChildren ? row.expanded ? : : null; const marginLeft = row.depth * INDENT_SIZE; + const rowLabel = getLabelForRow(row); return ( = ({ row }) => { flex: 1, }} > - {row.item.name} + {rowLabel}
{row.item.scenario && } @@ -98,3 +99,24 @@ const GotoSourceButton: FunctionComponent = ({ scenario } function getGithubLineNumber(value: number): `L${number}` { return `L${value + 1}`; } + +function getLabelForRow(row: TreeTableRow): string { + return useMemo(() => { + const countLeafChildren = (node: ManifestTreeNode): number => { + if (Object.keys(node.children).length === 0) { + return 1; + } + + return Object.values(node.children).reduce((acc, child) => acc + countLeafChildren(child), 0); + }; + + const { name } = row.item; + + if (!row.hasChildren) { + return name; + } + + const totalLeafChildren = countLeafChildren(row.item); + return `${name} (${totalLeafChildren} scenarios)`; + }, [row.item, row.hasChildren]); +}