feat(plugin-form): disable scoped plugin toggle (#1816)

* feat(plugin-form): disable scoped plugin toggle

* test(plugin-form): adapt scope behavior change

* chore(form): clear redundant spaces

* chore(plugin-form): css correction and code refactoring

* feat(plugin-form): backward compatibility for hideScopeSelection

* chore(pluginform): change of description

packages/core/forms/src/components/FormGenerator.vue

@@ -599,9 +599,18 @@ export default {
     width: 10px;
   }
 
+  &:disabled {
+    background-color: $kui-color-background-disabled;
+    border-color: $kui-color-border-neutral-weak;
+  }
+
   &:checked:after {
     background-color: currentColor;
   }
+
+  &:checked:disabled:after {
+    background-color: $kui-color-background-neutral-weak;
+  }
 }
 
 .vue-form-generator {

packages/core/forms/src/components/FormGroup.vue

@@ -282,13 +282,6 @@ $errorColor: #f00;
     display: none;
   }
 
-  &.disabled {
-    > label {
-      color: #666;
-      font-style: italic;
-    }
-  }
-
   &.error {
     input:not([type="checkbox"]),
     textarea,

packages/core/forms/src/components/fields/FieldAutoSuggest.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="field-wrap autosuggest">
+  <component
+    :is="schema.disabled ? 'k-tooltip': 'div'"
+    class="field-wrap autosuggest"
+    max-width="300"
+    :text="t('general.disable_source_scope_change', { scope })"
+  >
     <KSelect
       :id="schema.model"
       ref="suggestion"
       v-model="idValue"
       clearable
+      :disabled="schema.disabled"
       enable-filtering
       :filter-function="() => true"
       :items="items"
@@ -37,14 +43,16 @@
         </div>
       </template>
     </KSelect>
-  </div>
+  </component>
 </template>
 
 <script>
 import { FORMS_API_KEY } from '../../const'
 import abstractField from './abstractField'
 import debounce from 'lodash-es/debounce'
 import { isValidUuid } from '../../utils/isValidUuid'
+import { createI18n } from '@kong-ui-public/i18n'
+import english from '../../locales/en.json'
 
 const requestResultsLimit = 50
 const fieldStates = {
@@ -78,6 +86,13 @@ export default {
   inject: [FORMS_API_KEY],
   emits: ['model-updated'],
 
+  setup() {
+    const { t } = createI18n('en-us', english)
+    return {
+      t,
+    }
+  },
+
   data() {
     return {
       suggestions: [],
@@ -99,6 +114,9 @@ export default {
     entity() {
       return this.schema.entity
     },
+    scope() {
+      return this.schema.label.toLowerCase()
+    },
     bypassSearch() {
       return this.$route && this.$route.query && this.$route.query.no_search
     },

packages/core/forms/src/components/fields/FieldSelectionGroup.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="selection-group">
     <!-- Radio button -->
-    <div class="form-group horizontal-radios">
-      <div class="radio-group">
-        <div
-          v-for="(option, i) in schema.fields"
-          :key="i"
-          class="option-group"
-        >
-          <label
-            class="k-label"
-            :class="`${option.label}-check`"
+    <component
+      :is="$props.disabled? 'k-tooltip' : 'div'"
+      max-width="300"
+      :text="t('general.disable_global_radio', { scope })"
+    >
+      <div
+        class="form-group horizontal-radios"
+      >
+        <div class="radio-group">
+          <div
+            v-for="(option, i) in schema.fields"
+            :key="i"
+            class="option-group"
+            :class="{ 'radio-disabled': $props.disabled }"
           >
-            <input
-              v-model="checkedGroup"
-              class="k-input"
-              type="radio"
-              :value="i"
+            <label
+              class="k-label"
+              :class="`${option.label}-check`"
             >
-            {{ option.label }}
-            <div class="control-help">{{ option.description }}</div>
-          </label>
+              <input
+                v-model="checkedGroup"
+                class="k-input"
+                :disabled="$props.disabled"
+                type="radio"
+                :value="i"
+              >
+              {{ option.label }}
+              <div class="control-help">{{ option.description }}</div>
+            </label>
+          </div>
         </div>
       </div>
-    </div>
+    </component>
 
     <div
       v-for="(option, i) in schema.fields"
@@ -50,17 +60,27 @@
 
 <script>
 import abstractField from './abstractField'
+import { createI18n } from '@kong-ui-public/i18n'
+import english from '../../locales/en.json'
 
 export default {
   mixins: [abstractField],
 
   emits: ['model-updated'],
 
+  setup() {
+    const { t } = createI18n('en-us', english)
+    return {
+      t,
+    }
+  },
+
   data() {
     return {
       checkedGroup: null,
       fieldModel: { ...this.model }, // keep local copy of original model
       fieldSchema: [],
+      scope: 'scope',
     }
   },
 
@@ -92,6 +112,7 @@ export default {
         if (this.model[subField.model]) {
           this.checkedGroup = i
           this.fieldSchema.push(subField.model)
+          this.scope = subField.label?.toLowerCase()
         }
       })
     })
@@ -157,6 +178,10 @@ export default {
       flex-direction: row;
       gap: $kui-space-80;
     }
+
+    .radio-disabled {
+      cursor: not-allowed;
+    }
   }
 }
 </style>

packages/core/forms/src/locales/en.json

@@ -1,6 +1,8 @@
 {
   "general": {
-    "packageName": "forms"
+    "packageName": "forms",
+    "disable_global_radio": "The plugin is set to 'Scoped' by default when configured under a {scope}. To configure a global plugin, navigate to the global plugin list page.",
+    "disable_source_scope_change": "Changing the {scope} is not allowed when configuring a plugin under it."
   },
   "post-function": {
     "tags": {

packages/entities/entities-plugins/src/components/PluginForm.cy.ts

@@ -410,6 +410,34 @@ describe('<PluginForm />', () => {
       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', () => {
       interceptKMSchema()
 
@@ -1263,6 +1291,34 @@ describe('<PluginForm />', () => {
       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', () => {
       interceptKonnectSchema()
 

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,
@@ -444,6 +450,7 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
   // plugin scoping
   selectionGroup: {
     type: !props.hideScopeSelection ? 'selectionGroup' : props.hideScopeSelection || (formType.value === EntityBaseFormType.Create && props.config.entityId) ? 'foreign' : 'selectionGroup',
+    disabled: props.disableScopeSelection,
     inputType: 'hidden',
     styleClasses: 'hide-label',
     fields: [
@@ -907,6 +914,11 @@ const initScopeFields = (): void => {
   const supportConsumerGroupScope = props.config.disableConsumerGroupScope
     ? false
     : (PLUGIN_METADATA[props.pluginType]?.scope.includes(PluginScope.CONSUMER_GROUP) ?? true)
+  // 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
+  const routeScoped = (props.config.entityType === 'routes' && !!props.config.entityId) || !!record.value?.route?.id
 
   const scopeEntityArray = []
 
@@ -923,6 +935,7 @@ const initScopeFields = (): void => {
         fields: ['name', 'id'],
       },
       help: t('plugins.form.scoping.gateway_service.help'),
+      disabled: serviceScoped && props.disableScopeSelection, // disable service selection if the plugin is already scoped under service
     })
   }
 
@@ -939,6 +952,7 @@ const initScopeFields = (): void => {
         primaryField: 'id',
       },
       help: t('plugins.form.scoping.route.help'),
+      disabled: routeScoped && props.disableScopeSelection,
     })
   }
 
@@ -954,6 +968,7 @@ const initScopeFields = (): void => {
         primaryField: 'username',
       },
       help: t('plugins.form.scoping.consumer.help'),
+      disabled: consumerScoped && props.disableScopeSelection,
     })
   }
 
@@ -970,6 +985,7 @@ const initScopeFields = (): void => {
         primaryField: 'name',
       },
       help: t('plugins.form.scoping.consumer_group.help'),
+      disabled: consumerGroupScoped && props.disableScopeSelection,
     })
   }