feat(portal): select granted scopes in multiselect if present

package.json

@@ -33,7 +33,7 @@
     "@kong-ui-public/spec-renderer": "0.13.1",
     "@kong/kong-auth-elements": "2.8.0",
     "@kong/kongponents": "8.126.1",
-    "@kong/sdk-portal-js": "2.4.0",
+    "@kong/sdk-portal-js": "2.5.0",
     "@xstate/vue": "2.0.0",
     "axios": "1.6.0",
     "date-fns": "2.30.0",

src/components/ViewSpecRegistrationModal.vue

@@ -66,7 +66,8 @@
                   data-testid="available-scopes-select"
                   class="available-scopes-select"
                   :items="mappedAvailableScopes"
-                  :placeholder="helpText.applicationRegistration.availableScopesLabel"
+                  :loading="fetchingScopes"
+                  :placeholder="fetchingScopes ? helpText.applicationRegistration.fetchingScopesLabel : helpText.applicationRegistration.availableScopesLabel"
                   width="100%"
                   @change="handleChangedItem"
                 />
@@ -163,9 +164,11 @@ export default defineComponent({
     const selectedApplication = ref('')
     const availableScopes = ref([])
     const selectedScopes = ref([])
+    const alreadyGrantedScopes = ref([])
     const useDeveloperManagedScopes = useLDFeatureFlag(FeatureFlags.DeveloperManagedScopes, false)
     const applications = ref([])
     const key = ref(0)
+    const fetchingScopes = ref(false)
     const fetcherCacheKey = computed(() => key.value.toString())
 
     const mappedAvailableScopes = computed(() => {
@@ -174,9 +177,12 @@ export default defineComponent({
       }
 
       return availableScopes.value.map((scope) => {
+        const alreadySelected = alreadyGrantedScopes.value?.includes(scope)
+
         return {
           label: scope,
-          value: scope
+          value: scope,
+          selected: alreadySelected
         }
       })
     })
@@ -342,18 +348,42 @@ export default defineComponent({
       }
     })
 
-    watch([() => props.product, () => props.version], async () => {
+    watch([() => props.product, () => props.version, () => selectedApplication.value], async (newValues, oldValues) => {
       if (props.product && props.version && useDeveloperManagedScopes) {
-        await portalApiV2.value.service.versionsApi.getProductVersion({
-          productId: props.product.id,
-          productVersionId: props.version.id
-        }).then((res) => {
-          const registrationConfigs = res.data.registration_configs
-
-          if (registrationConfigs?.length && registrationConfigs[0].available_scopes) {
-            availableScopes.value = registrationConfigs[0].available_scopes
-          }
-        })
+        alreadyGrantedScopes.value = []
+        fetchingScopes.value = true
+        // Only make the getProductVersion request if we change productVersions
+        if (newValues[1] !== oldValues[1]) {
+          await portalApiV2.value.service.versionsApi.getProductVersion({
+            productId: props.product.id,
+            productVersionId: props.version.id
+          }).then((res) => {
+            fetchingScopes.value = false
+            const registrationConfigs = res.data.registration_configs
+
+            if (registrationConfigs?.length && registrationConfigs[0].available_scopes) {
+              availableScopes.value = registrationConfigs[0].available_scopes
+            }
+          }).finally(() => {
+            fetchingScopes.value = false
+          })
+        }
+
+        if (selectedApplication.value) {
+          fetchingScopes.value = true
+
+          await portalApiV2.value.service.applicationsApi.getApplicationProductVersionGrantedScopes({
+            applicationId: selectedApplication.value,
+            productVersionId: props.version.id
+          }).then((res) => {
+            const grantedScopesArr = res.data.scopes
+
+            alreadyGrantedScopes.value = grantedScopesArr
+            fetchingScopes.value = false
+          }).finally(() => {
+            fetchingScopes.value = false
+          })
+        }
       }
     })
 
@@ -376,6 +406,7 @@ export default defineComponent({
       mappedAvailableScopes,
       selectedScopes,
       rowAttrsFn,
+      fetchingScopes,
       fetcher,
       modalText,
       searchStr,

src/locales/ca_ES.ts

@@ -186,6 +186,7 @@ export const ca_ES: I18nType = {
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
     availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
+    fetchingScopesLabel: translationNeeded(en.applicationRegistration.fetchingScopesLabel),
     noApplications: 'Sense aplicacions',
     selectApplication: 'Seleccionar aplicació',
     createNewApplication: 'Crear nova aplicació +',

src/locales/de.ts

@@ -186,6 +186,7 @@ export const de: I18nType = {
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
     availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
+    fetchingScopesLabel: translationNeeded(en.applicationRegistration.fetchingScopesLabel),
     noApplications: 'Keine Applikationen',
     selectApplication: 'Applikation auswählen',
     createNewApplication: 'Neue Applikation anlegen +',

src/locales/en.ts

@@ -187,6 +187,7 @@ export const en = {
     searchPlaceholder: 'Search applications',
     cancelButton: 'Cancel',
     availableScopesLabel: 'Select scopes',
+    fetchingScopesLabel: 'Fetching scopes...',
     registeredApplicationsProduct: 'The following applications are already registered to this product:',
     modalApplicationRegistrationDefault: {
       title: (serviceName: string, productVersion: string) => `Register for ${serviceName} - ${productVersion}`,

src/locales/es_ES.ts

@@ -186,6 +186,7 @@ export const es_ES: I18nType = {
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
     availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
+    fetchingScopesLabel: translationNeeded(en.applicationRegistration.fetchingScopesLabel),
     noApplications: 'No hay aplicaciones',
     selectApplication: 'Seleccionar aplicación',
     createNewApplication: 'Crear aplicación nueva +',

src/locales/fr.ts

@@ -186,6 +186,7 @@ export const fr: I18nType = {
     noFoundApplications: translationNeeded(en.applicationRegistration.noFoundApplications),
     searchPlaceholder: translationNeeded(en.applicationRegistration.searchPlaceholder),
     availableScopesLabel: translationNeeded(en.applicationRegistration.availableScopesLabel),
+    fetchingScopesLabel: translationNeeded(en.applicationRegistration.fetchingScopesLabel),
     noApplications: 'Aucune application',
     selectApplication: 'Sélectionner une application',
     createNewApplication: 'Créer une nouvelle application +',

src/locales/i18n-type.d.ts

@@ -185,6 +185,7 @@ export interface I18nType {
     createNewApplication: string;
     createApplication: string;
     cancelButton: string;
+    fetchingScopesLabel: string;
     registeredApplicationsProduct: string;
     searchPlaceholder: string;
     availableScopesLabel: string;

src/services/PortalV2ApiService.ts

@@ -42,7 +42,7 @@ export default class PortalV2ApiService {
     registrationsApi: RegistrationsApi,
     documentationApi: DocumentationApi,
     versionsApi: VersionsApi,
-    applicationAnalyticsApi: ApplicationAnalyticsApi
+    applicationAnalyticsApi: ApplicationAnalyticsApi,
   }
 
   setAuthErrorCallback (authErrorCallback) {

yarn.lock

@@ -1084,10 +1084,10 @@
     v-calendar "^3.0.0-alpha.8"
     vue-draggable-next "^2.1.1"
 
-"@kong/sdk-portal-js@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.4.0.tgz#753f1fe5c4182a5ee7405fb5da68dbc38e1596a1"
-  integrity sha512-T287YI4oqyoFL6mk072ElmVJwTjBfzzouZQIkh3zs9PAmvn+xekx4CEV4D2OcGm9ECNRSrNZfibysKIwNtwqAg==
+"@kong/sdk-portal-js@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.5.0.tgz#bfa53c3fcb0fbd63cb54eea2e73443a34fab3fa6"
+  integrity sha512-nt74ub5WpLF2Vh/dVeHIycccaNr9wVOfcvDaGnoccfH41Pi5jtBa/5lJSEG2hMSRloRVAX8J6TRWT5vHNYCiKg==
   dependencies:
     axios "1.6.0"