fix(entities-plugins): issues in KM (#1009)

* fix(entities-plugins): issues in KM * test(*): fix test cases * test(*): fix test cases * feat(*): supoprt vault-auth * fix(*): endpoint for portal developers * fix(*): custom credential schema * fix(*): developer credential endpoint * fix(*): plugin form styles * fix(*): plugin form styles * fix(*): update comment
Kong · Dec 23, 2023 · fc47c0e · fc47c0e
1 parent 6efd3c2
commit fc47c0e
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 48 deletions.
diff --git a/packages/core/forms/src/forms/ACMEForm.vue b/packages/core/forms/src/forms/ACMEForm.vue
@@ -390,4 +390,8 @@ const onChangeStorage = (payload: string, schema: string): void => {
 .description {
   margin-bottom: 12px;
 }
+
+:deep(.k-tabs ul[role="tablist"]) {
+  margin-bottom: 32px;
+}
 </style>
diff --git a/packages/core/forms/src/forms/ExitTransformer.vue b/packages/core/forms/src/forms/ExitTransformer.vue
@@ -60,12 +60,22 @@ const finalSchema = computed((): Object => {
       f.type = 'array'
       f.valueArrayType = 'array'
       f.itemContainerComponent = 'FieldArrayItem'
-      f.fieldClasses = 'w-100'
-      f.fieldItemsClasses = 'w-100 mt-2 mb-2'
+      f.fieldClasses = 'exit-transformer-array-item-container'
+      f.fieldItemsClasses = 'exit-transformer-array-item'
       f.inputAttributes = { ...f.inputAttributes, type: 'textarea' }
     }
     return f
   })
   return final
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.exit-transformer-array-item-container) {
+  width: 100%;
+}
+
+:deep(.exit-transformer-array-item) {
+  margin-top: 8px;
+}
+</style>
diff --git a/packages/core/forms/src/forms/OIDCForm.vue b/packages/core/forms/src/forms/OIDCForm.vue
@@ -322,6 +322,10 @@ export default {
     margin-top: 24px;
   }
 
+  .k-input-switch .k-label {
+    margin-top: 0;
+  }
+
   .auth-method-container {
     display: flex;
     flex-wrap: wrap;
@@ -383,4 +387,17 @@ export default {
     width: 300px;
   }
 }
+
+:deep(.auth-array-item-container) {
+  width: 100%;
+}
+
+:deep(.auth-array-item) {
+  display: flex;
+  margin-top: 8px;
+}
+
+:deep(.k-button.auth-array-item-new) {
+  margin-top: 24px;
+}
 </style>
diff --git a/packages/core/forms/src/forms/PostFunction.vue b/packages/core/forms/src/forms/PostFunction.vue
@@ -60,12 +60,22 @@ const finalSchema = computed((): Object => {
       f.type = 'array'
       f.valueArrayType = 'array'
       f.itemContainerComponent = 'FieldArrayItem'
-      f.fieldClasses = 'w-100'
-      f.fieldItemsClasses = 'w-100 mt-2 mb-2'
+      f.fieldClasses = 'post-function-array-item-container'
+      f.fieldItemsClasses = 'post-function-array-item'
       f.inputAttributes = { ...f.inputAttributes, type: 'textarea' }
     }
     return f
   })
   return final
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.post-function-array-item-container) {
+  width: 100%;
+}
+
+:deep(.post-function-array-item) {
+  margin-top: 8px;
+}
+</style>
diff --git a/packages/core/forms/src/forms/schemas/OIDCAuth.js b/packages/core/forms/src/forms/schemas/OIDCAuth.js
@@ -37,11 +37,11 @@ export default {
     valueType: 'string',
     valueArrayType: 'array',
     itemContainerComponent: 'FieldArrayItem',
-    fieldClasses: 'w-100',
-    fieldItemsClasses: 'd-flex mt-2 w-90',
+    fieldClasses: 'auth-array-item-container',
+    fieldItemsClasses: 'auth-array-item',
     inputAttributes: { class: 'form-control', style: { minWidth: '200px' } },
     validator: 'array',
-    styleClasses: 'w-100',
+    newElementButtonLabelClasses: 'auth-array-item-new',
     newElementButtonLabel: '+ Add',
   }, {
     inputType: 'text',
@@ -51,11 +51,11 @@ export default {
     valueType: 'string',
     valueArrayType: 'array',
     itemContainerComponent: 'FieldArrayItem',
-    fieldClasses: 'w-100',
-    fieldItemsClasses: 'd-flex mt-2 w-90',
+    fieldClasses: 'auth-array-item-container',
+    fieldItemsClasses: 'auth-array-item',
     inputAttributes: { class: 'form-control', style: { minWidth: '200px' } },
     validator: 'array',
-    styleClasses: 'w-100',
+    newElementButtonLabelClasses: 'auth-array-item-new',
     newElementButtonLabel: '+ Add',
   }, {
     inputType: 'text',
@@ -65,11 +65,11 @@ export default {
     valueType: 'string',
     valueArrayType: 'array',
     itemContainerComponent: 'FieldArrayItem',
-    fieldClasses: 'w-100',
-    fieldItemsClasses: 'd-flex mt-2 w-90',
+    fieldClasses: 'auth-array-item-container',
+    fieldItemsClasses: 'auth-array-item',
     inputAttributes: { class: 'form-control', style: { minWidth: '200px' } },
     validator: 'array',
-    styleClasses: 'w-100',
+    newElementButtonLabelClasses: 'auth-array-item-new',
     newElementButtonLabel: '+ Add',
   }],
 }
diff --git a/packages/core/forms/src/generator/FormGenerator.vue b/packages/core/forms/src/generator/FormGenerator.vue
@@ -374,7 +374,6 @@ export default {
       }
     }
     .label {
-      background-color: $kui-color-background-neutral-weakest;
       box-shadow: none;
       &:before,
       &:after {

diff --git a/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue b/packages/core/forms/src/generator/fields/advanced/FieldMetric.vue
@@ -73,7 +73,7 @@ export default {
     cursor: pointer;
     display: flex;
     height: 45px;
-    padding: 0 16px 0 5px;
+    padding: 0 16px;
     position: relative;
     transition: transform .2s cubic-bezier(0.41,0.35,1,0.28) 0s, background-color .2s ease-in;
     width: 100%;

diff --git a/packages/core/forms/src/generator/fields/optional/fieldSwitch.vue b/packages/core/forms/src/generator/fields/optional/fieldSwitch.vue
@@ -61,6 +61,7 @@ $field-switch-height: 30px;
     height: inherit;
     position: relative;
     text-transform: uppercase;
+    width: 100%;
   }
   .label:before,
   .label:after {
@@ -87,7 +88,6 @@ $field-switch-height: 30px;
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
   }
   input:checked ~ .label {
-    background: #e1b42b;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
   }
   input:checked ~ .label:before {

diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md
@@ -119,6 +119,14 @@ Manually toggle visibility of plugin scope selection control.
 
 A boolean indicating whether the form is being used to create a plugin or an auth credential.
 
+#### `developer`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+*Specific to Kong Manager*. A boolean indicating whether the form is being used to create or update a plugin for a portal developer.
+
 #### `isWizardStep`
 
 - type: `Boolean`

diff --git a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue b/packages/entities/entities-plugins/src/components/PluginEntityForm.vue
@@ -76,7 +76,6 @@ const props = defineProps({
       if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
       if (config.app === 'konnect' && !config.controlPlaneId) return false
       if (config.app === 'kongManager' && typeof config.workspace !== 'string') return false
-      if (!config.cancelRoute || !config.backRoute) return false
       return true
     },
   },
@@ -416,6 +415,9 @@ const getModel = (): Record<string, any> => {
 // fired whenever the form data is modified
 const onModelUpdated = (model: Record<string, any>, schema: string) => {
   const newData = { [schema]: model }
+  if (typeof props.schema[schema]?.modelTransformer === 'function') {
+    newData[schema] = props.schema[schema].modelTransformer(model)
+  }
   const newModel = Object.assign({}, formModel, newData)
 
   Object.assign(formModel, newModel)
@@ -433,8 +435,11 @@ const updateModel = (data: Record<string, any>, parent?: string) => {
     let modelKey = parent ? `${parent}-${key}` : key
     let scheme = props.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` is undefined, it is because
+    // 1. the key is not the deepest nested key of the schema object
+    // 2. or the field name has dashes in it and its schema key was converted to underscores during initiation
+    // 3. or `parent` is already a schema key and `key` is a nested key of its value object
+    // For reasons 2 and 3, we need special logic to find the correct schema key
     if (!scheme) {
       const underscoredModelKey = parent ? `${parent}-${key.replace(/-/g, '_')}` : key.replace(/-/g, '_')
 
@@ -443,6 +448,12 @@ const updateModel = (data: Record<string, any>, parent?: string) => {
         modelKey = underscoredModelKey
         scheme = props.schema[modelKey]
       }
+
+      // Here we check if `parent` is a schema key and `key` is a nested key of its value object
+      if (parent && props.schema[parent]?.keyFromObject === key) {
+        modelKey = parent
+        scheme = props.schema[modelKey]
+      }
     }
 
     const value = data[key]
@@ -629,10 +640,14 @@ onBeforeMount(() => {
       display: none;
     }
 
-    .form-group hr.divider,
+    .form-group hr.divider {
+      border-color: $kui-color-border;
+      opacity: .3;
+    }
+
     .form-group hr.wide-divider {
       border-color: $kui-color-border;
-      opacity: .2;
+      opacity: .6;
     }
 
     .form-group label {

diff --git a/packages/entities/entities-plugins/src/components/PluginForm.cy.ts b/packages/entities/entities-plugins/src/components/PluginForm.cy.ts
@@ -121,11 +121,17 @@ describe('<PluginForm />', () => {
       alias?: string
       status?: number
       credential?: boolean
+      entityType?: string
       entityId?: string
     }) => {
-      const url = params?.credential
-        ? `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/consumers/${params.entityId}/acls/${params.id}`
-        : `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/plugins/${params.id}`
+      let url: string
+      if (params?.credential) {
+        url = `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/consumers/${params.entityId}/acls/${params.id}`
+      } else if (params?.entityType && params?.entityId) {
+        url = `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/${params.entityType}/${params.entityId}/plugins/${params.id}`
+      } else {
+        url = `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/plugins/${params.id}`
+      }
 
       cy.intercept(
         {
@@ -354,7 +360,13 @@ describe('<PluginForm />', () => {
     it('should show edit form', () => {
       const config = { ...baseConfigKM, entityId: scopedService.id, entityType: 'services' }
       interceptKMSchema()
-      interceptKMOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKMOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
       interceptKMScopedEntity({ entityType: config.entityType })
 
       cy.mount(PluginForm, {
@@ -397,9 +409,21 @@ describe('<PluginForm />', () => {
       const config = { ...baseConfigKM, entityId: scopedService.id, entityType: 'services' }
       interceptKMSchema()
       interceptKMScopedEntity({ entityType: config.entityType })
-      interceptKMOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKMOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
       interceptKMValidatePlugin()
-      interceptKMOperatePlugin({ method: 'PATCH', alias: 'updatePlugin', id: plugin1.id })
+      interceptKMOperatePlugin({
+        method: 'PATCH',
+        alias: 'updatePlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
 
       cy.mount(PluginForm, {
         global: { components: { VueFormGenerator } },
@@ -454,7 +478,13 @@ describe('<PluginForm />', () => {
       const config = { ...baseConfigKM, entityId: scopedService.id, entityType: 'services' }
       interceptKMSchema()
       interceptKMScopedEntity({ entityType: config.entityType })
-      interceptKMOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKMOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
 
       cy.mount(PluginForm, {
         global: { components: { VueFormGenerator } },
@@ -721,11 +751,17 @@ describe('<PluginForm />', () => {
       alias?: string
       status?: number
       credential?: boolean
+      entityType?: string
       entityId?: string
     }) => {
-      const url = params?.credential
-        ? `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/consumers/${params.entityId}/acls/${params.id}`
-        : `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/plugins/${params.id}`
+      let url: string
+      if (params?.credential) {
+        url = `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/consumers/${params.entityId}/acls/${params.id}`
+      } else if (params?.entityType && params?.entityId) {
+        url = `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/${params.entityType}/${params.entityId}/plugins/${params.id}`
+      } else {
+        url = `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/plugins/${params.id}`
+      }
 
       cy.intercept(
         {
@@ -974,7 +1010,13 @@ describe('<PluginForm />', () => {
     it('should show edit form', () => {
       const config = { ...baseConfigKonnect, entityId: scopedService.id, entityType: 'services' }
       interceptKonnectSchema()
-      interceptKonnectOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKonnectOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
       interceptKonnectScopedEntity({ entityType: config.entityType })
 
       cy.mount(PluginForm, {
@@ -1018,9 +1060,21 @@ describe('<PluginForm />', () => {
       const config = { ...baseConfigKonnect, entityId: scopedService.id, entityType: 'services' }
       interceptKonnectSchema()
       interceptKonnectScopedEntity({ entityType: config.entityType })
-      interceptKonnectOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKonnectOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
       interceptKonnectValidatePlugin()
-      interceptKonnectOperatePlugin({ method: 'PUT', alias: 'updatePlugin', id: plugin1.id })
+      interceptKonnectOperatePlugin({
+        method: 'PUT',
+        alias: 'updatePlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
 
       cy.mount(PluginForm, {
         global: { components: { VueFormGenerator } },
@@ -1074,7 +1128,13 @@ describe('<PluginForm />', () => {
       const config = { ...baseConfigKonnect, entityId: scopedService.id, entityType: 'services' }
       interceptKonnectSchema()
       interceptKonnectScopedEntity({ entityType: config.entityType })
-      interceptKonnectOperatePlugin({ method: 'GET', alias: 'getPlugin', id: plugin1.id })
+      interceptKonnectOperatePlugin({
+        method: 'GET',
+        alias: 'getPlugin',
+        id: plugin1.id,
+        entityId: scopedService.id,
+        entityType: 'services',
+      })
 
       cy.mount(PluginForm, {
         global: { components: { VueFormGenerator } },