Merge branch 'main' into chore/addRegion

Kong · Dec 5, 2024 · b28a3cf · b28a3cf
2 parents 9231ba1 + 893500f
commit b28a3cf
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 33 deletions.
diff --git a/packages/core/expressions/CHANGELOG.md b/packages/core/expressions/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.7](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-12-05)
+
+**Note:** Version bump only for package @kong-ui-public/expressions
+
+
+
+
+
 ## [0.5.6](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-11-28)
 
 **Note:** Version bump only for package @kong-ui-public/expressions

diff --git a/packages/core/expressions/package.json b/packages/core/expressions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/expressions",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "module": "./dist/expressions.es.js",
   "types": "dist/types/index.d.ts",

diff --git a/packages/core/forms/CHANGELOG.md b/packages/core/forms/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.9.0](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-12-05)
+
+
+### Features
+
+* **plugin-form:** disable scoped plugin toggle ([#1816](https://github.com/Kong/public-ui-components/issues/1816)) ([def603a](https://github.com/Kong/public-ui-components/commit/def603a1ec0c7beecbc24b713986785a1622f56c))
+
+
+
+
+
 ## [4.8.2](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-11-28)
 
 

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/forms",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "type": "module",
   "main": "./dist/forms.umd.js",
   "module": "./dist/forms.es.js",

diff --git a/packages/core/forms/src/components/FormGenerator.vue b/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 {

diff --git a/packages/core/forms/src/components/FormGroup.vue b/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,

diff --git a/packages/core/forms/src/components/fields/FieldAutoSuggest.vue b/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
     },

diff --git a/packages/core/forms/src/components/fields/FieldSelectionGroup.vue b/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>
diff --git a/packages/core/forms/src/locales/en.json b/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": {

diff --git a/packages/entities/entities-plugins/CHANGELOG.md b/packages/entities/entities-plugins/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.8.0](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-12-05)
+
+
+### Features
+
+* **plugin-form:** disable scoped plugin toggle ([#1816](https://github.com/Kong/public-ui-components/issues/1816)) ([def603a](https://github.com/Kong/public-ui-components/commit/def603a1ec0c7beecbc24b713986785a1622f56c))
+
+
+
+
+
 ## [9.7.1](https://github.com/Kong/public-ui-components/compare/@kong-ui-public/[email protected]...@kong-ui-public/[email protected]) (2024-12-04)
 
 

diff --git a/packages/entities/entities-plugins/package.json b/packages/entities/entities-plugins/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/entities-plugins",
-  "version": "9.7.1",
+  "version": "9.8.0",
   "type": "module",
   "main": "./dist/entities-plugins.umd.js",
   "module": "./dist/entities-plugins.es.js",

diff --git a/packages/entities/entities-plugins/src/components/PluginForm.cy.ts b/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()