From 51d0701a130fc1079b547f83f6ae77edaf747fbf Mon Sep 17 00:00:00 2001 From: Tian Tan Date: Wed, 27 Nov 2024 17:32:50 +0800 Subject: [PATCH] feat(plugin-form): backward compatibility for hideScopeSelection --- packages/core/forms/src/locales/en.json | 4 +- .../src/components/PluginForm.cy.ts | 72 ++++++++++++++++--- .../src/components/PluginForm.vue | 20 ++++-- 3 files changed, 77 insertions(+), 19 deletions(-) diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json index ae36a66ef9..07ea920544 100644 --- 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 index 981cda5110..9f21b686c3 100644 --- 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('', () => { 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('', () => { 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('', () => { 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('', () => { 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('', () => { 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('', () => { 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 index e350f1a822..1be426bd32 100644 --- 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, }) }