Support rendering OpenAPI spec (#36449)

Fix #20852

web_src/js/standalone/external-render-iframe.ts

@@ -21,6 +21,9 @@ function mainExternalRenderIframe() {
   };
 
   const updateIframeHeight = () => postIframeMsg('resize', {iframeHeight: document.documentElement.scrollHeight});
+  const resizeObserver = new ResizeObserver(() => updateIframeHeight());
+  resizeObserver.observe(window.document.documentElement);
+
   updateIframeHeight();
   window.addEventListener('DOMContentLoaded', updateIframeHeight);
   // the easiest way to handle dynamic content changes and easy to debug, can be fine-tuned in the future

web_src/js/standalone/swagger.ts

@@ -1,18 +1,30 @@
 import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
 import 'swagger-ui-dist/swagger-ui.css';
+import {load as loadYaml} from 'js-yaml';
 
 window.addEventListener('load', async () => {
-  const url = document.querySelector('#swagger-ui')!.getAttribute('data-source')!;
-  const res = await fetch(url);
-  const spec = await res.json();
+  const elSwaggerUi = document.querySelector('#swagger-ui')!;
+  const url = elSwaggerUi.getAttribute('data-source')!;
+  let spec: any;
+  if (url) {
+    const res = await fetch(url);
+    spec = await res.json();
+  } else {
+    const elSpecContent = elSwaggerUi.querySelector<HTMLTextAreaElement>('.swagger-spec-content')!;
+    const filename = elSpecContent.getAttribute('data-spec-filename');
+    const isJson = filename?.toLowerCase().endsWith('.json');
+    spec = isJson ? JSON.parse(elSpecContent.value) : loadYaml(elSpecContent.value);
+  }
 
   // Make the page's protocol be at the top of the schemes list
   const proto = window.location.protocol.slice(0, -1);
-  spec.schemes.sort((a: string, b: string) => {
-    if (a === proto) return -1;
-    if (b === proto) return 1;
-    return 0;
-  });
+  if (spec?.schemes) {
+    spec.schemes.sort((a: string, b: string) => {
+      if (a === proto) return -1;
+      if (b === proto) return 1;
+      return 0;
+    });
+  }
 
   SwaggerUI({
     spec,