Add remote TypeSpec file import to Azure playground

packages/typespec-azure-playground-website/package.json

@@ -57,12 +57,15 @@
     "@azure-tools/typespec-azure-rulesets": "workspace:^",
     "@azure-tools/typespec-client-generator-core": "workspace:^",
     "@emotion/react": "^11.14.0",
+    "@fluentui/react-components": "~9.72.3",
+    "@fluentui/react-icons": "^2.0.292",
     "@typespec/compiler": "workspace:^",
     "@typespec/events": "workspace:^",
     "@typespec/http": "workspace:^",
     "@typespec/json-schema": "workspace:^",
     "@typespec/openapi": "workspace:^",
     "@typespec/openapi3": "workspace:^",
+    "@typespec/pack": "workspace:^",
     "@typespec/protobuf": "workspace:^",
     "@typespec/rest": "workspace:^",
     "@typespec/sse": "workspace:^",
@@ -78,6 +81,7 @@
   "devDependencies": {
     "@playwright/test": "^1.51.1",
     "@types/node": "~24.10.1",
+    "@types/react": "~19.2.2",
     "@types/react-dom": "~19.2.2",
     "@typespec/bundler": "workspace:^",
     "@typespec/playground": "workspace:^",

packages/typespec-azure-playground-website/src/import.module.css

@@ -0,0 +1,9 @@
+.url-input {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.error {
+  color: var(--colorPaletteRedForeground1);
+  margin-bottom: 10px;
+}

packages/typespec-azure-playground-website/src/import.tsx

@@ -0,0 +1,83 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  Input,
+  Label,
+  ToolbarButton,
+  Tooltip,
+} from "@fluentui/react-components";
+import { ArrowUploadFilled } from "@fluentui/react-icons";
+import { combineProjectIntoFile, createRemoteHost } from "@typespec/pack";
+import { DiagnosticList, usePlaygroundContext } from "@typespec/playground/react";
+import { ReactNode, useState } from "react";
+import style from "./import.module.css";
+
+export const ImportToolbarButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Tooltip content="Import" relationship="description" withArrow>
+        <ToolbarButton
+          appearance="subtle"
+          aria-label="Import Remote TypeSpec"
+          icon={<ArrowUploadFilled />}
+          onClick={() => setOpen(true)}
+        />
+      </Tooltip>
+
+      <Dialog open={open} onOpenChange={(event, data) => setOpen(data.open)}>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>Import Remote TypeSpec</DialogTitle>
+            <DialogContent>
+              <ImportTsp onImport={() => setOpen(false)} />
+            </DialogContent>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </>
+  );
+};
+
+const ImportTsp = ({ onImport }: { onImport: () => void }) => {
+  const [error, setError] = useState<ReactNode | null>(null);
+  const [value, setValue] = useState("");
+  const context = usePlaygroundContext();
+
+  const importSpec = async () => {
+    const content = value;
+    const result = await combineProjectIntoFile(createRemoteHost(), content);
+    if (result.diagnostics.length > 0) {
+      setError(<DiagnosticList diagnostics={result.diagnostics} />);
+      return;
+    } else if (result.content) {
+      context.setContent(result.content);
+      onImport();
+    }
+  };
+  return (
+    <div>
+      <h3>Import Remote TypeSpec Document</h3>
+
+      <div>
+        <Label>URL to import</Label>
+      </div>
+      <Input
+        value={value}
+        onChange={(_, data) => setValue(data.value)}
+        className={style["url-input"]}
+      />
+      {error && <div className={style["error"]}>{error}</div>}
+      <div>
+        <Button appearance="primary" className="import-btn" onClick={importSpec}>
+          Import
+        </Button>
+      </div>
+    </div>
+  );
+};

packages/typespec-azure-playground-website/src/main.tsx

@@ -11,6 +11,7 @@ import samples from "../samples/dist/samples.js";
 
 import { MANIFEST } from "@typespec/compiler";
 import "@typespec/playground/style.css";
+import { ImportToolbarButton } from "./import.js";
 import "./style.css";
 
 registerMonacoDefaultWorkersForVite();
@@ -54,6 +55,7 @@ await renderReactPlayground({
     useShim: true,
   },
   footer: <PlaygroundFooter />,
+  commandBarButtons: <ImportToolbarButton />,
   onFileBug: () => {
     const bodyPayload = encodeURIComponent(`\n\n\n[Playground Link](${document.location.href})`);
     const url = `https://github.com/Azure/typespec-azure/issues/new?body=${bodyPayload}`;

packages/typespec-azure-playground-website/tsconfig.json

@@ -10,7 +10,7 @@
     "outDir": "dist-dev",
     "rootDir": ".",
     "tsBuildInfoFile": "temp/tsconfig.tsbuildinfo",
-    "types": ["node"],
+    "types": ["node", "vite/client"],
     "checkJs": true,
     "allowJs": true,
     "jsxImportSource": "@emotion/react",