feat(plugin-form): backward compatibility for hideScopeSelection

Kong · Dec 4, 2024 · 51d0701 · 51d0701
1 parent 5816530
commit 51d0701
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 19 deletions.
diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json
@@ -1,8 +1,8 @@
 {
   "general": {
     "packageName": "forms",
-    "disable_global_radio": "Plugin is defaulted to 'Scoped' when configured under {scope}. If you want to configure a global plugin, please navigate to the plugin list page for plugin creation/edition.",
-    "disable_source_scope_change": "Change of {scope} is not available when configuring a plugin under {scope}. If you need to select another {scope}, please navigate to the plugin list page for plugin creation/edition."
+    "disable_global_radio": "The plugin is set to 'Scoped' by default when configured under a {scope}. To configure a global plugin, navigate to the plugin list page.",
+    "disable_source_scope_change": "Changing the {scope} is not allowed when configuring a plugin under it."
   },
   "post-function": {
     "tags": {

diff --git a/packages/entities/entities-plugins/src/components/PluginForm.cy.ts b/packages/entities/entities-plugins/src/components/PluginForm.cy.ts
@@ -391,7 +391,7 @@ describe('<PluginForm />', () => {
       cy.get('#config-discovery_uris-timeout_ms-0').should('have.attr', 'type', 'number').and('have.value', '5000')
     })
 
-    it('should disable scope selection when hideScopeSelection is true', () => {
+    it('should hide scope selection when hideScopeSelection is true', () => {
       interceptKMSchema()
 
       cy.mount(PluginForm, {
@@ -407,9 +407,35 @@ describe('<PluginForm />', () => {
       cy.wait('@getPluginSchema')
       cy.get('.kong-ui-entities-plugin-form-container').should('be.visible')
 
-      cy.get('.field-selectionGroup').should('exist')
-      cy.get('.Global-check input').should('be.disabled')
-      cy.get('.Scoped-check input').should('be.disabled')
+      cy.get('.field-selectionGroup').should('not.exist')
+    })
+
+    it('should disable scope selection when disableScopeSelection is true', () => {
+      // provide serviceId
+      const config: KongManagerPluginFormConfig = { ...baseConfigKM, entityId: scopedService.id, entityType: 'services' }
+      interceptKMSchema()
+      interceptKMScopedEntity({ entityType: config.entityType! })
+
+      cy.mount(PluginForm, {
+        global: { components: { VueFormGenerator } },
+        props: {
+          config,
+          pluginType: 'cors',
+          disableScopeSelection: true,
+        },
+        router,
+      })
+
+      cy.wait(['@getPluginSchema', '@getScopedEntity']).then(() => {
+        cy.get('.kong-ui-entities-plugin-form-container').should('be.visible')
+
+        cy.get('.Global-check input').should('be.disabled')
+        cy.get('.Scoped-check input').should('be.visible').and('be.disabled')
+        cy.get('.Scoped-check input').should('have.value', '1')
+        cy.get('.field-selectionGroup .field-AutoSuggest').should('be.visible')
+        cy.get('#service-id').should('be.visible').and('be.disabled')
+        cy.getTestId(`select-item-${scopedService.id}`).find('.selected').should('exist')
+      })
     })
 
     it('should hide form buttons when isWizardStep is true', () => {
@@ -487,7 +513,7 @@ describe('<PluginForm />', () => {
         cy.get('.Scoped-check input').should('be.visible')
         cy.get('.Scoped-check input').should('have.value', '1')
         cy.get('.field-selectionGroup .field-AutoSuggest').should('be.visible')
-        cy.get('#service-id').should('be.visible').should('be.disabled')
+        cy.get('#service-id').should('be.visible')
         cy.getTestId(`select-item-${scopedService.id}`).find('.selected').should('exist')
       })
     })
@@ -1246,7 +1272,7 @@ describe('<PluginForm />', () => {
       cy.get('#config-discovery_uris-timeout_ms-0').should('have.attr', 'type', 'number').and('have.value', '5000')
     })
 
-    it('should disable scope selection when hideScopeSelection is true', () => {
+    it('should hide scope selection when hideScopeSelection is true', () => {
       interceptKonnectSchema()
 
       cy.mount(PluginForm, {
@@ -1262,9 +1288,35 @@ describe('<PluginForm />', () => {
       cy.wait('@getPluginSchema')
       cy.get('.kong-ui-entities-plugin-form-container').should('be.visible')
 
-      cy.get('.field-selectionGroup').should('exist')
-      cy.get('.Global-check input').should('be.disabled')
-      cy.get('.Scoped-check input').should('be.disabled')
+      cy.get('.field-selectionGroup').should('not.exist')
+    })
+
+    it('should disable scope selection when disableScopeSelection is true', () => {
+      // provide serviceId
+      const config: KonnectPluginFormConfig = { ...baseConfigKonnect, entityId: scopedService.id, entityType: 'services' }
+      interceptKonnectSchema()
+      interceptKonnectScopedEntity({ entityType: config.entityType! })
+
+      cy.mount(PluginForm, {
+        global: { components: { VueFormGenerator } },
+        props: {
+          config,
+          pluginType: 'cors',
+          disableScopeSelection: true,
+        },
+        router,
+      })
+
+      cy.wait(['@getPluginSchema', '@getScopedEntity']).then(() => {
+        cy.get('.kong-ui-entities-plugin-form-container').should('be.visible')
+
+        cy.get('.Global-check input').should('be.disabled')
+        cy.get('.Scoped-check input').should('be.visible').and('be.disabled')
+        cy.get('.Scoped-check input').should('have.value', '1')
+        cy.get('.field-selectionGroup .field-AutoSuggest').should('be.visible')
+        cy.get('#service-id').should('be.visible').and('be.disabled')
+        cy.getTestId(`select-item-${scopedService.id}`).find('.selected').should('exist')
+      })
     })
 
     it('should hide form buttons when isWizardStep is true', () => {
@@ -1339,7 +1391,7 @@ describe('<PluginForm />', () => {
         cy.get('.Scoped-check input').should('be.visible')
         cy.get('.Scoped-check input').should('have.value', '1')
         cy.get('.field-selectionGroup .field-AutoSuggest').should('be.visible')
-        cy.get('#service-id').should('be.visible').should('be.disabled')
+        cy.get('#service-id').should('be.visible')
         cy.getTestId(`select-item-${scopedService.id}`).find('.selected').should('exist')
       })
     })

diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
@@ -218,6 +218,12 @@ const props = defineProps({
     default: false,
   },
 
+  /** Disable scope selection due to the plugin is configured under an entity */
+  disableScopeSelection: {
+    type: Boolean,
+    default: false,
+  },
+
   /** Credentials use */
   credential: {
     type: Boolean,
@@ -443,8 +449,8 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
   },
   // plugin scoping
   selectionGroup: {
-    type: 'selectionGroup',
-    disabled: props.hideScopeSelection,
+    type: !props.hideScopeSelection ? 'selectionGroup' : props.hideScopeSelection || (formType.value === EntityBaseFormType.Create && props.config.entityId) ? 'foreign' : 'selectionGroup',
+    disabled: props.disableScopeSelection,
     inputType: 'hidden',
     styleClasses: 'hide-label',
     fields: [
@@ -908,7 +914,7 @@ const initScopeFields = (): void => {
   const supportConsumerGroupScope = props.config.disableConsumerGroupScope
     ? false
     : (PLUGIN_METADATA[props.pluginType]?.scope.includes(PluginScope.CONSUMER_GROUP) ?? true)
-  // disable the scoped field
+  // check whether the plugin is scoped
   const consumerScoped = (props.config.entityType === 'consumers' && !!props.config.entityId) || !!record.value?.consumer?.id
   const consumerGroupScoped = (props.config.entityType === 'consumer_groups' && !!props.config.entityId) || !!record.value?.consumer_group?.id
   const serviceScoped = (props.config.entityType === 'services' && !!props.config.entityId) || !!record.value?.service?.id
@@ -929,7 +935,7 @@ const initScopeFields = (): void => {
         fields: ['name', 'id'],
       },
       help: t('plugins.form.scoping.gateway_service.help'),
-      disabled: serviceScoped,
+      disabled: serviceScoped && props.disableScopeSelection, // disable service selection if the plugin is already scoped under service
     })
   }
 
@@ -946,7 +952,7 @@ const initScopeFields = (): void => {
         primaryField: 'id',
       },
       help: t('plugins.form.scoping.route.help'),
-      disabled: routeScoped,
+      disabled: routeScoped && props.disableScopeSelection,
     })
   }
 
@@ -962,7 +968,7 @@ const initScopeFields = (): void => {
         primaryField: 'username',
       },
       help: t('plugins.form.scoping.consumer.help'),
-      disabled: consumerScoped,
+      disabled: consumerScoped && props.disableScopeSelection,
     })
   }
 
@@ -979,7 +985,7 @@ const initScopeFields = (): void => {
         primaryField: 'name',
       },
       help: t('plugins.form.scoping.consumer_group.help'),
-      disabled: consumerGroupScoped,
+      disabled: consumerGroupScoped && props.disableScopeSelection,
     })
   }