fix(openapi-playground): view schema in dialog when deep nested

innoai-tech · Dec 18, 2024 · 4be8f35 · 4be8f35
1 parent b5ae385
commit 4be8f35
Showing 1 changed file with 65 additions and 7 deletions.
diff --git a/webapp/openapi-playground/mod/openapi/SchemaView.tsx b/webapp/openapi-playground/mod/openapi/SchemaView.tsx
@@ -2,6 +2,7 @@ import {
   component,
   component$,
   createProvider,
+  observableRef,
   RouterLink,
   Schema,
   t,
@@ -11,7 +12,7 @@ import {
 import { isUndefined } from "@innoai-tech/lodash";
 import { styled } from "@innoai-tech/vueuikit";
 import { Markdown } from "@innoai-tech/vuemarkdown";
-import { Icon, Tooltip } from "@innoai-tech/vuematerial";
+import { Dialog, Icon, Tooltip } from "@innoai-tech/vuematerial";
 import { mdiHelpBox } from "@mdi/js";
 
 export const Token = styled("div")({
@@ -78,10 +79,6 @@ export const Description = styled<{
       const title = Schema.metaProp(props.schema, "title") ?? "";
       const description = Schema.metaProp(props.schema, "description") ?? "";
 
-      if (!(title || description)) {
-        return null;
-      }
-
       return (
         <Root>
           {title} {description ? (
@@ -232,6 +229,9 @@ const SchemaViewLink = component$<{
   schema: Type,
 }>((props) => {
   const node = SchemaRenderProvider.use();
+  const ident = IntentContextProvider.use();
+
+  const open$ = observableRef(false);
 
   return () => {
     let schema = props.schema;
@@ -242,15 +242,73 @@ const SchemaViewLink = component$<{
 
     const needID = schema.type == "intersection" || schema.type == "object" || schema.type == "union" || schema.type == "record" || schema.type == "array" || schema.type == "union";
 
+    const $inline = node.safe(id) && (
+      <>
+        <span>&nbsp;</span>
+        <SchemaView schema={schema} />
+      </>
+    );
+
     return (
       <SchemaRenderProvider value={node.child(id)}>
-        {needID && <RouterLink to={`#${id}`}><Token id={id}>{id}&nbsp;</Token></RouterLink>}
-        {node.safe(id) && <SchemaView schema={schema} />}
+        {needID ? (
+          ident.indent < 3 ? (
+            <>
+              <RouterLink to={`#${id}`}>
+                <Token id={id}>{id}</Token>
+              </RouterLink>
+              {ident.indent < 3 && $inline}
+            </>
+          ) : (
+            <>
+              <a href={`#${id}`}
+                 onClick={(e) => {
+                   e.preventDefault();
+                   open$.next(true);
+                 }}
+              >
+                <Token id={id}>{id}</Token>
+              </a>
+              {node.safe(id) && (
+                <Dialog
+                  isOpen={open$.value}
+                  onClose={() => {
+                    open$.next(false);
+                  }}
+                >
+                  <DialogContainer>
+                    <Line>
+                      <Token>{id}</Token>
+                      <IntentContextProvider value={{ indent: 0 }}>
+                        {$inline}
+                      </IntentContextProvider>
+                    </Line>
+                  </DialogContainer>
+                </Dialog>
+              )}
+            </>
+          )
+        ) : (
+          $inline
+        )}
       </SchemaRenderProvider>
     );
   };
 });
 
+const DialogContainer = styled("div")({
+  display: "flex",
+  containerStyle: "sys.surface",
+  height: "100vh",
+  width: "36vw",
+  roundedLeft: "sm",
+  px: 16,
+  py: 36,
+  top: 0,
+  right: 0,
+  position: "absolute",
+  overflow: "auto"
+});
 
 export const SchemaView = component$<{
   schema: Type,