feat: schema model render [KHCP-11676]

src/components/Document/DocumentComponent.vue

@@ -3,6 +3,7 @@
     :is="docComponent(serviceNode)"
     v-if="serviceNode"
     :data="serviceNode.data"
+    :title="serviceNode.name"
   />
 </template>
 

src/components/Document/ModelNode.vue

@@ -1,18 +1,60 @@
 <template>
-  Model
-  <br>
-  {{ data }}
+  <h3>
+    {{ title }} <code v-if="data.type">{{ data.type }}</code>
+  </h3>
+  <p v-if="data.description">
+    {{ data.description }}
+  </p>
+  <p v-if="data.example || data.examples">
+    Example: {{ data.example || data.examples }}
+  </p>
+  <p v-if="data.enum">
+    <span>Allowed values: </span> {{ data.enum }}
+  </p>
+
+  <ModelProperties
+    v-if="modelPropertiesProps"
+    :properties="modelPropertiesProps.properties"
+    :required-fields="modelPropertiesProps.required"
+  />
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { INode } from '@stoplight/types'
+import { computed, toRefs } from 'vue'
+import ModelProperties from './ModelProperties.vue'
+
+import { isValidSchemaObject } from '@/utils'
+
+import type{ PropType } from 'vue'
+import type { SchemaObject } from '@/types'
 
-// TODO: type def is missing for model need to add
-defineProps({
+const props = defineProps({
   data: {
-    type: Object as PropType<INode>,
+    type: Object as PropType<SchemaObject>,
+    required: true,
+  },
+  title: {
+    type: String,
     required: true,
   },
 })
+
+const modelPropertiesProps = computed(() => {
+  const { data } = toRefs(props)
+  let computedObj: Partial<SchemaObject> | null = null
+
+  /**
+   * We have to enumerate over the properties of the Schema Model and render them out via `ModelProperties` component.
+   * For this, we need to compute the properties and required fields of the Schema Model.
+   * If the top level Schema Model is an object, we can directly use the `properties` field of the object.
+   * If it's an array, we need to derive the properties from the `items` field of the Schema Model.
+   */
+  if (data.value.type === 'object' && data.value.properties && Reflect.ownKeys(data.value.properties).length) {
+    computedObj = { properties: data.value.properties, required: data.value.required }
+  } else if (data.value.type === 'array' && isValidSchemaObject(data.value.items)) {
+    computedObj = { properties: data.value.items.properties, required: data.value.items.required }
+  }
+
+  return computedObj
+})
 </script>

src/components/Document/ModelProperties.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    v-for="(property, key) in properties"
+    :key="key"
+    class="model-property"
+  >
+    <template v-if="isValidSchemaObject(property)">
+      <div class="property-info">
+        <code>{{ key }}</code>
+        <span class="property-type">
+          {{ property.type ?? '' }}
+          {{ isValidSchemaObject(property.items) && property.items.type ? `[${property.items.type}]` : '' }}
+          {{ property.format ? `(${property.format})` : '' }}
+        </span>
+        <span
+          v-if="requiredFields?.includes(key.toString())"
+          class="required-property"
+        >
+          required
+        </span>
+      </div>
+      <p v-if="property.description">
+        {{ property.description }}
+      </p>
+      <p v-if="property.example">
+        <span>Example: </span> {{ property.example }}
+      </p>
+      <p v-if="property.enum">
+        Allowed values: {{ property.enum }}
+      </p>
+
+      <template v-if="isValidSchemaObject(property.items)">
+        <p v-if="property.items.type === 'string' && (property.items.enum || property.items.pattern)">
+          <span v-if="property.items.enum">Allowed values: {{ property.items.enum }}</span>
+          <span v-else-if="property.items.pattern">Allowed pattern: <code>{{ property.items.pattern }}</code></span>
+        </p>
+        <p v-else-if="property.items.type === 'integer' && (property.items.maximum || property.items.minimum)">
+          <span v-if="property.items.maximum">Max: {{ property.items.maximum }}</span>
+          <span v-if="property.items.maximum && property.items.minimum">|</span>
+          <span v-if="property.items.minimum"> Min: {{ property.items.minimum }}</span>
+        </p>
+        <details v-else-if="isNestedObj(property.items)">
+          <summary>Properties of items in <code>{{ key }}</code></summary>
+          <ModelProperties
+            :properties="property.items.properties"
+            :required-fields="property.items.required"
+          />
+        </details>
+      </template>
+
+      <details v-if="isNestedObj(property)">
+        <summary>Properties of <code>{{ key }}</code></summary>
+        <ModelProperties
+          :properties="property.properties"
+          :required-fields="property.required"
+        />
+      </details>
+    </template>
+
+    <div v-else>
+      <code>{{ key }}</code>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { isValidSchemaObject } from '@/utils'
+import type { SchemaObject } from '@/types'
+
+defineProps({
+  properties: {
+    type: Object as PropType<SchemaObject['properties']>,
+    required: true,
+  },
+  requiredFields: {
+    type: Array as PropType<SchemaObject['required']>,
+    default: () => [],
+  },
+})
+
+const isNestedObj = (property: SchemaObject) => property.type === 'object' && property.properties && Reflect.ownKeys(property.properties).length
+</script>
+
+<style lang="scss" scoped>
+.model-property {
+  border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+  padding: var(--kui-space-50, $kui-space-50) var(--kui-space-80, $kui-space-80);
+
+  &>:not(:first-child) {
+    margin-top: var(--kui-space-40, $kui-space-40);
+  }
+}
+
+.property-info>:not(:first-child) {
+  margin-left: var(--kui-space-40, $kui-space-40);
+}
+
+.property-type {
+  color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
+  font-size: var(--kui-font-size-20, $kui-font-size-20);
+}
+
+.required-property {
+  color: var(--kui-color-text-danger, $kui-color-text-danger);
+  font-size: var(--kui-font-size-20, $kui-font-size-20);
+}
+</style>

src/components/SpecRenderer.vue

@@ -75,7 +75,7 @@ aside {
   background-color: lightblue;
   flex: 1;
   overflow: visible;
-  padding-left: $kui-space-60;
+  padding-left: var(--kui-space-60, $kui-space-60);
 }
 .wrapper {
   display: flex;

src/types/spec-renderer.ts

@@ -1,3 +1,13 @@
+import type { SchemaObject as OAS31SchemaObject, ReferenceObject as OAS31ReferenceObject } from 'openapi3-ts/oas31'
+
 export interface SpecRendererProps {
   modelValue: string
 }
+
+/**
+ * Wrapper types so that we don't import/use types from a 3rd party library, like openapi3-ts, directly in our code.
+ * This way it'll be easy to replace out this library with some other library, or even our own implementation,
+ * without requiring major refactoring.
+ */
+export interface SchemaObject extends OAS31SchemaObject {}
+export interface ReferenceObject extends OAS31ReferenceObject {}

src/utils/schema-parser.ts

@@ -1,4 +1,5 @@
 import composables from '../composables'
+import type { SchemaObject, ReferenceObject } from '@/types'
 
 const {
   parse,
@@ -8,10 +9,18 @@ const {
   validationResults,
 } = composables.useSchemaParser()
 
+/**
+ * Type guard for verifying object is of type SchemaObject
+ */
+function isValidSchemaObject(candidate?: SchemaObject | ReferenceObject): candidate is SchemaObject {
+  return Boolean(candidate && !Object.prototype.hasOwnProperty.call(candidate, '$ref'))
+}
+
 export {
   parse,
   parsedDocument,
   jsonDocument,
   tableOfContents,
   validationResults,
+  isValidSchemaObject,
 }