Migrate spec dashboard to css modules

packages/spec-dashboard/package.json

@@ -36,7 +36,6 @@
   },
   "homepage": "https://github.com/microsoft/typespec#readme",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
     "@fluentui/react-components": "~9.73.1",
     "@fluentui/react-icons": "^2.0.292",
     "@typespec/spec-coverage-sdk": "workspace:^",

packages/spec-dashboard/src/components/coverage-overview.module.css

@@ -0,0 +1,38 @@
+.section {
+  margin-bottom: 32px;
+  padding: 20px 24px;
+  background-color: var(--colorNeutralBackground2);
+  border-radius: var(--borderRadiusXLarge);
+  border: 1px solid var(--colorNeutralStroke2);
+}
+
+.heading {
+  display: block;
+  margin-bottom: 16px;
+  color: var(--colorNeutralForeground1);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  background-color: var(--colorNeutralBackground1);
+  padding: 16px 16px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-height: 100px;
+}
+
+.card-name {
+  color: var(--colorNeutralForeground2);
+  min-height: calc(var(--lineHeightBase300));
+  display: flex;
+  align-items: center;
+  text-align: center;
+}

packages/spec-dashboard/src/components/coverage-overview.tsx

@@ -1,7 +1,8 @@
-import { Card, Text, tokens } from "@fluentui/react-components";
+import { Card, Text } from "@fluentui/react-components";
 import { FunctionComponent, useMemo } from "react";
 import { CoverageSummary } from "../apis.js";
 import { GroupRatioColors, GroupRatios } from "../constants.js";
+import style from "./coverage-overview.module.css";
 
 interface EmitterOverview {
   name: string;
@@ -103,34 +104,11 @@ export const CoverageOverview: FunctionComponent<CoverageOverviewProps> = ({
   }
 
   return (
-    <section
-      css={{
-        marginBottom: 32,
-        padding: "20px 24px",
-        backgroundColor: tokens.colorNeutralBackground2,
-        borderRadius: tokens.borderRadiusXLarge,
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
-      }}
-    >
-      <Text
-        as="h2"
-        weight="semibold"
-        size={500}
-        css={{
-          display: "block",
-          marginBottom: 16,
-          color: tokens.colorNeutralForeground1,
-        }}
-      >
+    <section className={style["section"]}>
+      <Text as="h2" weight="semibold" size={500} className={style["heading"]}>
         Coverage Overview
       </Text>
-      <div
-        css={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-          gap: 16,
-        }}
-      >
+      <div className={style["grid"]}>
         {emitterOverviews.map((emitter) => (
           <EmitterOverviewCard key={emitter.name} emitter={emitter} />
         ))}
@@ -148,33 +126,11 @@ const EmitterOverviewCard: FunctionComponent<EmitterOverviewCardProps> = ({ emit
   const percentage = Math.floor(emitter.coverageRatio * 100);
 
   return (
-    <Card
-      css={{
-        backgroundColor: tokens.colorNeutralBackground1,
-        borderTop: `3px solid ${accentColor}`,
-        padding: "16px 16px 20px",
-        textAlign: "center",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 4,
-        minHeight: 100,
-      }}
-    >
-      <Text
-        weight="semibold"
-        size={300}
-        css={{
-          color: tokens.colorNeutralForeground2,
-          minHeight: `calc(${tokens.lineHeightBase300})`,
-          display: "flex",
-          alignItems: "center",
-          textAlign: "center",
-        }}
-      >
+    <Card className={style["card"]} style={{ borderTop: `3px solid ${accentColor}` }}>
+      <Text weight="semibold" size={300} className={style["card-name"]}>
         {emitter.displayName}
       </Text>
-      <Text weight="bold" size={800} css={{ color: accentColor }}>
+      <Text weight="bold" size={800} style={{ color: accentColor }}>
         {percentage}%
       </Text>
     </Card>

packages/spec-dashboard/src/components/dashboard-table.module.css

@@ -0,0 +1,83 @@
+.table {
+  border-collapse: collapse;
+}
+
+.table tr:nth-of-type(2n) {
+  background-color: var(--colorNeutralBackground3);
+}
+
+.table td,
+.table th {
+  border: 1px solid var(--colorNeutralStroke3);
+  height: 32px;
+}
+
+.table th {
+  padding: 6px 13px;
+  background-color: var(--colorNeutralBackground1);
+}
+
+.scenario-status-cell {
+  padding: 0;
+  width: 120px;
+}
+
+.header-cell {
+  padding: 0 !important;
+}
+
+.header-grid {
+  display: grid;
+  height: 100%;
+  grid-template-rows: auto 26px 32px;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 2px solid var(--colorNeutralStroke3);
+  grid-template-areas:
+    "name name"
+    "gen-version spec-version"
+    "status status";
+}
+
+.header-name {
+  grid-area: name;
+  border-bottom: 1px solid var(--colorNeutralStroke3);
+  padding: 5px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.header-name:hover {
+  background: var(--colorNeutralStroke3);
+}
+
+.version {
+  font-size: 9pt;
+  font-weight: normal;
+  color: var(--colorNeutralForeground2);
+  padding: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  width: 60px;
+  overflow: hidden;
+}
+
+.gen-version {
+  grid-area: gen-version;
+  border-right: 1px solid var(--colorNeutralStroke3);
+}
+
+.spec-version {
+  grid-area: spec-version;
+}
+
+.header-status {
+  grid-area: status;
+  border-top: 1px solid var(--colorNeutralStroke3);
+  height: 32px;
+}
+
+.version-icon {
+  margin-right: 5px;
+  flex: 0 0 auto;
+}

packages/spec-dashboard/src/components/dashboard-table.tsx

@@ -1,11 +1,10 @@
-import { css } from "@emotion/react";
-import { Popover, PopoverSurface, PopoverTrigger, tokens } from "@fluentui/react-components";
+import { mergeClasses, Popover, PopoverSurface, PopoverTrigger } from "@fluentui/react-components";
 import { CodeBlock16Filled, Print16Filled } from "@fluentui/react-icons";
 import { ScenarioManifest } from "@typespec/spec-coverage-sdk";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
 import { CoverageSummary, GeneratorCoverageSuiteReport } from "../apis.js";
-import { Colors } from "../constants.js";
 import { getCompletedRatio } from "../utils/coverage-utils.js";
+import style from "./dashboard-table.module.css";
 import { GeneratorInformation } from "./generator-information.js";
 import { ScenarioGroupRatioStatusBox } from "./scenario-group-status.js";
 import { ScenarioStatusBox } from "./scenario-status.js";
@@ -81,7 +80,7 @@ export const DashboardTable: FunctionComponent<DashboardTableProps> = ({
   });
 
   return (
-    <table css={TableStyles}>
+    <table className={style["table"]}>
       <thead>
         <DashboardHeaderRow
           coverageSummary={coverageSummary}
@@ -109,7 +108,7 @@ const DashboardRow: FunctionComponent<DashboardRowProps> = ({
     <tr>
       <RowLabelCell manifest={coverageSummary.manifest} row={row} />
       {languages.map((lang) => (
-        <td key={lang} css={ScenarioStatusCellStyles}>
+        <td key={lang} className={style["scenario-status-cell"]}>
           {scenarioData ? (
             <ScenarioStatusBox
               status={coverageSummary.generatorReports[lang]?.results[scenarioData.name]}
@@ -177,25 +176,6 @@ const DashboardHeaderRow: FunctionComponent<DashboardHeaderRowProps> = ({
     </tr>
   );
 };
-const TableStyles = css({
-  borderCollapse: "collapse",
-  "& tr:nth-of-type(2n)": {
-    backgroundColor: tokens.colorNeutralBackground3,
-  },
-  "& td, & th": {
-    border: `1px solid ${Colors.borderDefault}`,
-    height: "32px",
-  },
-  "& th": {
-    padding: "6px 13px",
-    backgroundColor: tokens.colorNeutralBackground1,
-  },
-});
-
-const ScenarioStatusCellStyles = css({
-  padding: 0,
-  width: 120,
-});
 
 export interface GeneratorHeaderCellProps {
   status: number;
@@ -211,34 +191,9 @@ export const GeneratorHeaderCell: FunctionComponent<GeneratorHeaderCellProps> =
   displayName,
 }) => {
   return (
-    <th css={{ padding: "0 !important" }}>
-      <div
-        css={{
-          display: "grid",
-          height: "100%",
-          gridTemplateRows: "auto 26px 32px",
-          gridTemplateColumns: "1fr 1fr",
-          borderBottom: `2px solid ${Colors.borderDefault}`,
-          gridTemplateAreas: `
-            "name name"
-            "gen-version spec-version"
-            "status status"
-          `,
-        }}
-      >
-        <div
-          title="Generator name"
-          css={{
-            gridArea: "name",
-            borderBottom: `1px solid ${Colors.borderDefault}`,
-            padding: 5,
-            textAlign: "center",
-            cursor: "pointer",
-            "&:hover": {
-              background: Colors.borderDefault,
-            },
-          }}
-        >
+    <th className={style["header-cell"]}>
+      <div className={style["header-grid"]}>
+        <div title="Generator name" className={style["header-name"]}>
           <Popover withArrow>
             <PopoverTrigger>
               <div>{displayName ?? report?.generatorMetadata?.name ?? language}</div>
@@ -250,57 +205,27 @@ export const GeneratorHeaderCell: FunctionComponent<GeneratorHeaderCellProps> =
         </div>
         <div
           title="Generator version used in this coverage."
-          css={[
-            versionStyles,
-            {
-              gridArea: "gen-version",
-              borderRight: `1px solid ${Colors.borderDefault}`,
-            },
-          ]}
+          className={mergeClasses(style["version"], style["gen-version"])}
         >
-          <Print16Filled css={{ marginRight: 5, flex: "0 0 auto" }} />
+          <Print16Filled className={style["version-icon"]} />
 
           {report?.generatorMetadata?.version ?? "?"}
         </div>
         <div
           title="Scenario version used in this coverage."
-          css={[
-            versionStyles,
-            {
-              gridArea: "spec-version",
-            },
-          ]}
+          className={mergeClasses(style["version"], style["spec-version"])}
         >
-          <CodeBlock16Filled css={{ marginRight: 5, flex: "0 0 auto" }} />
+          <CodeBlock16Filled className={style["version-icon"]} />
           {report?.scenariosMetadata?.version ?? "?"}
         </div>
-        <div
-          title="Coverage stats"
-          css={{
-            gridArea: "status",
-            borderTop: `1px solid ${Colors.borderDefault}`,
-            height: 32,
-          }}
-        >
+        <div title="Coverage stats" className={style["header-status"]}>
           <ScenarioGroupRatioStatusBox ratio={status} />
         </div>
       </div>
     </th>
   );
 };
 
-const versionStyles = css({
-  fontSize: "9pt",
-  fontWeight: "normal",
-  color: Colors.lightText,
-  padding: 5,
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  display: "flex",
-  width: 60,
-  overflow: "hidden",
-});
-
 function createTree(manifest: ScenarioManifest): ManifestTreeNode {
   const root: ManifestTreeNode = { name: "", fullName: "", children: {} };
 

packages/spec-dashboard/src/components/dashboard.module.css

@@ -0,0 +1,24 @@
+.summary-table {
+  margin: 5px;
+}
+
+.specs-card {
+  margin: 5px;
+  flex: 0;
+}
+
+.specs-row {
+  display: flex;
+}
+
+.spacer {
+  height: 30px;
+}
+
+.card {
+  width: 500px;
+}
+
+.tier-filter {
+  margin-bottom: 20px;
+}