feat(add-schema-in-query-view): Add the full schema details to the sc…

…hema query page (#66)

Co-authored-by: Broknloop <[email protected]>

src/main/js/routes/schema/schema.js

@@ -3,12 +3,15 @@ import {useOutletContext, useParams} from "react-router-dom";
 import TabView from "../../components/tabs/tab-view";
 import Preview from "./preview";
 import Query from "./query";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import {androidstudio} from "react-syntax-highlighter/dist/cjs/styles/hljs";
 
 function Schema() {
     const vespaState = useOutletContext()
     const params = useParams()
     const containerUrl = getQueryableContainer(vespaState)
     const schema = params.schema
+    const schemaDetails = findSchemaDetails(vespaState, schema)
 
     return (<>
         <TabView tabs={[
@@ -19,7 +22,14 @@ function Schema() {
             {
                 "header": "Data preview",
                 "content": <Preview containerUrl={containerUrl} schema={schema}/>
-            },]} />
+            },
+            {
+                "header": "Schema",
+                "content": <SyntaxHighlighter language="yaml" style={androidstudio}>
+                    {schemaDetails}
+                </SyntaxHighlighter>
+            }
+        ]} />
     </>)
 
     /* finds a valid container to issue the query */
@@ -35,6 +45,16 @@ function Schema() {
             return ""
         }
     }
+
+    function findSchemaDetails(vespaState, schema) {
+        for (let cluster of vespaState.content.clusters) {
+            for (let data of cluster.contentData) {
+                if (data.schema.schemaName === schema) {
+                    return data.schema.schemaContent
+                }
+            }
+        }
+    }
 }