Fix swagger UI missing (#3552)

Recent regression with the new program viewer refactoring

.chronus/changes/fix-swagger-ui-missing-2024-5-10-15-15-0.md

@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: internal
+packages:
+  - "@typespec/playground"
+---
+
+Fix swagger UI missing

packages/playground/src/react/output-view/file-viewer.tsx

@@ -2,11 +2,15 @@ import { FolderListRegular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useState } from "react";
 import { FileOutput } from "../file-output/file-output.js";
 import { OutputTabs } from "../output-tabs/output-tabs.js";
-import type { OutputViewerProps, ProgramViewer } from "../types.js";
+import type { FileOutputViewer, OutputViewerProps, ProgramViewer } from "../types.js";
 
 import style from "./output-view.module.css";
 
-const FileViewerComponent = ({ program, outputFiles }: OutputViewerProps) => {
+const FileViewerComponent = ({
+  program,
+  outputFiles,
+  fileViewers,
+}: OutputViewerProps & { fileViewers: Record<string, FileOutputViewer> }) => {
   const [filename, setFilename] = useState<string>("");
   const [content, setContent] = useState<string>("");
 
@@ -42,15 +46,20 @@ const FileViewerComponent = ({ program, outputFiles }: OutputViewerProps) => {
     <div className={style["file-viewer"]}>
       <OutputTabs filenames={outputFiles} selected={filename} onSelect={handleTabSelection} />
       <div className={style["file-viewer-content"]}>
-        <FileOutput filename={filename} content={content} viewers={[] as any} />
+        <FileOutput filename={filename} content={content} viewers={fileViewers} />
       </div>
     </div>
   );
 };
 
-export const FileViewer: ProgramViewer = {
-  key: "file-output",
-  label: "Output explorer",
-  icon: <FolderListRegular />,
-  render: FileViewerComponent,
-};
+export function createFileViewer(fileViewers: FileOutputViewer[]): ProgramViewer {
+  const viewerMap = Object.fromEntries(fileViewers.map((x) => [x.key, x]));
+  return {
+    key: "file-output",
+    label: "Output explorer",
+    icon: <FolderListRegular />,
+    render: (props) => {
+      return <FileViewerComponent {...props} fileViewers={viewerMap} />;
+    },
+  };
+}

packages/playground/src/react/output-view/output-view.tsx

@@ -2,7 +2,7 @@ import { Tab, TabList, type SelectTabEventHandler } from "@fluentui/react-compon
 import { useCallback, useMemo, useState, type FunctionComponent } from "react";
 import type { PlaygroundEditorsOptions } from "../playground.js";
 import type { CompilationState, CompileResult, FileOutputViewer, ProgramViewer } from "../types.js";
-import { FileViewer } from "./file-viewer.js";
+import { createFileViewer } from "./file-viewer.js";
 import { TypeGraphViewer } from "./type-graph-viewer.js";
 
 import style from "./output-view.module.css";
@@ -43,26 +43,22 @@ function resolveViewers(
   viewers: ProgramViewer[] | undefined,
   fileViewers: FileOutputViewer[] | undefined
 ): ResolvedViewers {
+  const fileViewer = createFileViewer(fileViewers ?? []);
   const output: ResolvedViewers = {
-    fileViewers: {},
     programViewers: {
-      [FileViewer.key]: FileViewer,
+      [fileViewer.key]: fileViewer,
       [TypeGraphViewer.key]: TypeGraphViewer,
     },
   };
 
   for (const item of viewers ?? []) {
     output.programViewers[item.key] = item;
   }
-  for (const item of fileViewers ?? []) {
-    output.fileViewers[item.key] = item;
-  }
 
   return output;
 }
 
 interface ResolvedViewers {
-  fileViewers: Record<string, FileOutputViewer>;
   programViewers: Record<string, ProgramViewer>;
 }