From 78461941b08e9a222b4d831c2e7d9271e8f731e5 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <leopoldthecuber@gmail.com>
Date: Tue, 10 Oct 2023 17:30:01 +0800
Subject: [PATCH] fix(plugin): field names with dashes

---
 src/components/EntityForm/EntityForm.vue | 23 +++++++++++++++++++++--
 src/pages/plugins/Form.vue               | 16 +++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/EntityForm/EntityForm.vue b/src/components/EntityForm/EntityForm.vue
index 8bd4119..ba1440b 100644
--- a/src/components/EntityForm/EntityForm.vue
+++ b/src/components/EntityForm/EntityForm.vue
@@ -497,8 +497,19 @@ export default {
 
     updateModel (parent, data) {
       Object.keys(data).forEach(key => {
-        const modelKey = parent ? `${parent}-${key}` : key
-        const scheme = this.schema[modelKey]
+        let modelKey = parent ? `${parent}-${key}` : key
+        let scheme = this.schema[modelKey]
+        // If `scheme` is undefined, it is either because the key is not the deepest nested key of the schema object
+        // or the field name has dashes in it and its schema key was converted to underscores during initiation.
+        if (!scheme) {
+          const underscoredModelKey = parent ? `${parent}-${key.replace(/-/g, '_')}` : key.replace(/-/g, '_')
+          // Here we check if the underscored key exists in the schema and the `fieldNameHasDashes` flag is true
+          if (this.schema[underscoredModelKey]?.fieldNameHasDashes) {
+            modelKey = underscoredModelKey
+            scheme = this.schema[modelKey]
+          }
+        }
+
         const value = data[key]
         const type = typeof value
 
@@ -667,6 +678,14 @@ export default {
         // to the dot notation that the Kong Admin API understands.
         let fieldNameDotNotation = convertToDotNotation(fieldName)
 
+        // If the field name originally has dashes, they were converted to underscores during initiation.
+        // Now we need to convert them back to dashes because the Admin API expects dashes
+        if (fieldSchema.fieldNameHasDashes) {
+          const [keyToBeConverted, ...rest] = fieldNameDotNotation.split('.').reverse()
+
+          fieldNameDotNotation = [keyToBeConverted.replace(/_/g, '-'), ...rest].reverse().join('.')
+        }
+
         if (fieldSchemaValueType === 'object-expand') {
           let key
 
diff --git a/src/pages/plugins/Form.vue b/src/pages/plugins/Form.vue
index 09f4195..b9b2584 100644
--- a/src/pages/plugins/Form.vue
+++ b/src/pages/plugins/Form.vue
@@ -563,7 +563,18 @@ export default {
         schema = schema.reduce((acc, current) => {
           const key = Object.keys(current)[0]
 
-          acc[key] = current[key]
+          // If the backend schema has dashes in the field name (e.g. config.response_headers.X-Cache-Status of the proxy-cache plugin),
+          // replace them with underscores because the shared form component treats dashes as separators for nested fields
+          if (key.match(/-/g)) {
+            acc[key.replace(/-/g, '_')] = {
+              ...current[key],
+              // A flag to indicate the field name has dashes originally and they are replaced with underscores.
+              // When submitting the form, the underscores should be replaced with dashes again
+              fieldNameHasDashes: true,
+            }
+          } else {
+            acc[key] = current[key]
+          }
 
           return acc
         }, {})
@@ -736,6 +747,9 @@ export default {
         }
 
         output[field].valueType = valueType
+        if (scheme.fieldNameHasDashes) {
+          output[field].fieldNameHasDashes = true
+        }
       })
 
       return output