Fix: Program Viewer crash when using unnamed union variants (microsoft#2941)

Author: timotheeguerin

.chronus/changes/fix-html-program-viewer-unnamed-unions-2024-1-20-16-25-58.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/html-program-viewer"
+---
+
+Fix: Program Viewer crash when using unnamed union variants

packages/html-program-viewer/src/ui.tsx

@@ -69,7 +69,7 @@ export const TypeSpecProgramViewer: FunctionComponent<TypeSpecProgramViewerProps
 };
 
 export interface ItemListProps<T> {
-  items: Map<string, T> | T[];
+  items: Map<string | symbol, T> | T[];
   render: (t: T) => ReactElement<any, any> | null;
 }
 
@@ -85,8 +85,8 @@ export const ItemList = <T extends object>(props: ItemListProps<T>) => {
   }
   return (
     <KeyValueSection>
-      {[...props.items.entries()].map(([k, v]) => (
-        <li key={k}>{props.render(v)}</li>
+      {[...props.items.entries()].map(([k, v], i) => (
+        <li key={typeof k === "symbol" ? i : k}>{props.render(v)}</li>
       ))}
     </KeyValueSection>
   );

packages/html-program-viewer/test/smoke-test.test.ts

@@ -12,4 +12,8 @@ describe("html-program-viewer: smoke tests", () => {
   it("create html view", async () => {
     await runner.compile(`op foo(): string;`);
   });
+
+  it("compile unnamed union variant without error", async () => {
+    await runner.compile(`union Foo { "a", "b" }`);
+  });
 });