feat(entities-config-editor): migrate from PoC

packages/core/entities-config-editor/package.json

@@ -41,6 +41,8 @@
   "devDependencies": {
     "@kong/design-tokens": "1.17.3",
     "@kong/kongponents": "9.25.0",
+    "uuid": "^10.0.0",
+    "vscode-json-languageservice": "^5.4.4",
     "vue": "^3.5.13"
   },
   "repository": {
@@ -58,10 +60,11 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "200KB"
+    "errorLimit": "2048KB"
   },
   "peerDependencies": {
     "@kong/kongponents": "9.25.0",
+    "monaco-editor": "^0.52.2",
     "vue": "^3.5.13"
   }
 }

packages/core/entities-config-editor/sandbox/App.vue

@@ -1,12 +1,86 @@
 <template>
   <div class="sandbox-container">
-    <main>
-      <p>This is the component sandbox.</p>
-      <EntitiesConfigEditor />
-    </main>
+    <div class="stage-container">
+      <KCard class="controls-card">
+        <div class="controls">
+          <KSelect
+            v-model="language"
+            :items="LANGUAGE_SELECT_ITEMS"
+            label="Language"
+          />
+
+          <KSelect
+            v-model="entityKind"
+            :items="ENTITY_KIND"
+            label="Entity Kind"
+          />
+        </div>
+      </KCard>
+
+      <div class="editor-container">
+        <Suspense>
+          <EntitiesConfigEditor
+            :language="language"
+            :lua-schema="luaSchema"
+          />
+        </Suspense>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { EntitiesConfigEditor } from '../src'
+import type { SelectItem } from '@kong/kongponents'
+import { ref, watch } from 'vue'
+import EntitiesConfigEditor from '../src/components/EntitiesConfigEditor.vue'
+import type { EditorLanguage } from '../src/types'
+
+const LANGUAGE_SELECT_ITEMS: SelectItem[] = [
+  { label: 'JSON', value: 'json' },
+  { label: 'YAML', value: 'yaml' },
+]
+
+const ENTITY_KIND: SelectItem[] = [
+  { label: 'Service', value: 'services' },
+  { label: 'Route', value: 'routes' },
+  { label: 'Consumer', value: 'consumers' },
+  { label: 'Plugin', value: 'plugins' },
+  { label: 'Upstream', value: 'upstreams' },
+  { label: 'Target', value: 'targets' },
+  { label: 'Certificate', value: 'certificates' },
+  { label: 'SNI', value: 'snis' },
+]
+
+const language = ref<EditorLanguage>('json')
+const entityKind = ref('services')
+
+const luaSchema = ref(undefined)
+
+watch(entityKind, async (kind) => {
+  luaSchema.value = (await import (`./fixture/${kind}.json`)).default
+}, { immediate: true })
 </script>
+
+<style lang="scss" scoped>
+.stage-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+
+  .controls-card {
+    margin-bottom: 8px;
+  }
+
+  .controls {
+    width: 100%;
+    max-width: 800px;
+    gap: 18px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .editor-container {
+    height: 800px;
+  }
+}
+</style>

packages/core/entities-config-editor/sandbox/fixture/ca_certificates.json

@@ -0,0 +1,38 @@
+{
+  "fields": [
+    {
+      "id": {
+        "description": "A string representing a UUID (universally unique identifier).",
+        "uuid": true,
+        "type": "string",
+        "auto": true
+      }
+    },
+    {
+      "created_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    {
+      "updated_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    { "cert": { "description": "A string representing a certificate.", "type": "string", "required": true } },
+    { "cert_digest": { "description": "The digest of the CA certificate.", "type": "string", "unique": true } },
+    {
+      "tags": {
+        "description": "A set of strings representing tags.",
+        "elements": { "description": "A string representing a tag.", "type": "string", "required": true },
+        "type": "set"
+      }
+    }
+  ],
+  "entity_checks": [{ "custom_entity_check": { "field_sources": ["cert"] } }]
+}

packages/core/entities-config-editor/sandbox/fixture/certificates.json

@@ -0,0 +1,86 @@
+{
+  "fields": [
+    {
+      "id": {
+        "description": "A string representing a UUID (universally unique identifier).",
+        "uuid": true,
+        "type": "string",
+        "auto": true
+      }
+    },
+    {
+      "created_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    {
+      "updated_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    {
+      "cert": {
+        "description": "A string representing a certificate.",
+        "referenceable": true,
+        "type": "string",
+        "required": true
+      }
+    },
+    {
+      "key": {
+        "description": "A string representing a key.",
+        "referenceable": true,
+        "type": "string",
+        "encrypted": true,
+        "required": true
+      }
+    },
+    {
+      "cert_alt": {
+        "description": "A string representing a certificate.",
+        "referenceable": true,
+        "type": "string",
+        "required": false
+      }
+    },
+    {
+      "key_alt": {
+        "description": "A string representing a key.",
+        "referenceable": true,
+        "type": "string",
+        "encrypted": true,
+        "required": false
+      }
+    },
+    {
+      "tags": {
+        "description": "A set of strings representing tags.",
+        "elements": { "description": "A string representing a tag.", "type": "string", "required": true },
+        "type": "set"
+      }
+    },
+    {
+      "snis": {
+        "transient": true,
+        "elements": {
+          "type": "string",
+          "description": "A string representing a wildcard host name, such as *.example.com."
+        },
+        "type": "array",
+        "required": false
+      }
+    }
+  ],
+  "entity_checks": [
+    { "mutually_required": ["cert_alt", "key_alt"] },
+    { "custom_entity_check": { "field_sources": ["cert", "key"] } },
+    { "custom_entity_check": { "field_sources": ["cert_alt", "key_alt"] } },
+    { "custom_entity_check": { "field_sources": ["cert", "cert_alt"] } }
+  ]
+}

packages/core/entities-config-editor/sandbox/fixture/consumers.json

@@ -0,0 +1,61 @@
+{
+  "fields": [
+    {
+      "id": {
+        "description": "A string representing a UUID (universally unique identifier).",
+        "uuid": true,
+        "type": "string",
+        "auto": true
+      }
+    },
+    {
+      "created_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    {
+      "updated_at": {
+        "description": "An integer representing an automatic Unix timestamp in seconds.",
+        "timestamp": true,
+        "type": "integer",
+        "auto": true
+      }
+    },
+    {
+      "username": {
+        "description": "The unique username of the Consumer. You must send at least one of username or custom_id with the request.",
+        "indexed": true,
+        "type": "string",
+        "unique": true
+      }
+    },
+    {
+      "custom_id": {
+        "description": "Stores the existing unique ID of the consumer. You must send at least one of username or custom_id with the request.",
+        "indexed": true,
+        "type": "string",
+        "unique": true
+      }
+    },
+    { "type": { "indexed": true, "default": 0, "type": "integer", "required": true } },
+    {
+      "tags": {
+        "description": "A set of strings representing tags.",
+        "elements": { "description": "A string representing a tag.", "type": "string", "required": true },
+        "type": "set"
+      }
+    },
+    {
+      "username_lower": {
+        "db_export": false,
+        "description": "The lowercase representation of a username",
+        "type": "string",
+        "prefix_ws": true
+      }
+    }
+  ],
+  "entity_checks": [{ "at_least_one_of": ["custom_id", "username"] }]
+}