feat(applications): show granted scopes if present (#320)

Kong · Nov 27, 2023 · ae9bea9 · ae9bea9
1 parent 0d320e8
commit ae9bea9
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 19 deletions.
diff --git a/cypress/e2e/specs/application_registration.spec.ts b/cypress/e2e/specs/application_registration.spec.ts
@@ -303,6 +303,96 @@ describe('Application Registration', () => {
       .should('not.exist')
   })
 
+  it('shows granted scopes if present ', () => {
+    cy.mockApplications(apps, 1)
+    cy.visit('/my-apps')
+
+    mockApplicationWithCredAndReg(apps[0], [], [
+      {
+        id: 'regId',
+        product_id: 'id',
+        product_name: 'mockbin',
+        product_version_id: 'pvid',
+        product_version_name: 'version_name',
+        application_id: apps[0].id,
+        status: 'approved',
+        created_at: '2023-11-24T17:35:52.765Z',
+        updated_at: '2023-11-24T17:49:32.719Z',
+        granted_scopes: [
+          'scope1',
+          'scope2'
+        ]
+      }
+    ])
+    cy.get('[data-testid="applications-table"] tbody tr')
+      .contains(apps[0].name)
+      .click()
+
+    cy.get('[data-testid="granted-scope1"]').should('exist')
+    cy.get('[data-testid="granted-scope2"]').should('exist')
+    cy.get('[data-testid="show-more-scopes"]').should('not.exist')
+  })
+
+  it('shows granted scopes if present - show more badge exists', () => {
+    cy.mockApplications(apps, 1)
+    cy.visit('/my-apps')
+
+    mockApplicationWithCredAndReg(apps[0], [], [
+      {
+        id: 'regId',
+        product_id: 'id',
+        product_name: 'mockbin',
+        product_version_id: 'pvid',
+        product_version_name: 'version_name',
+        application_id: apps[0].id,
+        status: 'approved',
+        created_at: '2023-11-24T17:35:52.765Z',
+        updated_at: '2023-11-24T17:49:32.719Z',
+        granted_scopes: [
+          'scope1',
+          'scope2',
+          'scope3',
+          'scope4'
+        ]
+      }
+    ])
+    cy.get('[data-testid="applications-table"] tbody tr')
+      .contains(apps[0].name)
+      .click()
+
+    cy.get('[data-testid="granted-scope1"]').should('exist')
+    cy.get('[data-testid="granted-scope2"]').should('exist')
+    cy.get('[data-testid="show-more-scopes"]').should('exist').click().then(() => {
+      cy.get('[data-testid="granted-scope4"]').should('exist')
+    })
+  })
+
+  it('does not show granted scopes if not in response ', () => {
+    cy.mockApplications(apps, 1)
+    cy.visit('/my-apps')
+
+    mockApplicationWithCredAndReg(apps[0], [], [
+      {
+        id: 'regId',
+        product_id: 'id',
+        product_name: 'mockbin',
+        product_version_id: 'pvid',
+        product_version_name: 'version_name',
+        application_id: apps[0].id,
+        status: 'approved',
+        created_at: '2023-11-24T17:35:52.765Z',
+        updated_at: '2023-11-24T17:49:32.719Z'
+      }
+    ])
+    cy.get('[data-testid="applications-table"] tbody tr')
+      .contains(apps[0].name)
+      .click()
+
+    cy.get('[data-testid="products-list"]')
+      .should('not.include.text', 'Scopes')
+    cy.get('.badge-container').should('not.exist')
+  })
+
   describe('Credentials Management', () => {
     it("doesn't display unhashed credentials column", () => {
       cy.mockApplications(apps, 4)

diff --git a/src/components/ScopeBadges.vue b/src/components/ScopeBadges.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="badge-container">
+    <KBadge
+      v-for="scope in showItems"
+      :key="(scope as string)"
+      :data-testid="`granted-${scope}`"
+      class="scope-badge"
+    >
+      {{ scope }}
+    </KBadge>
+    <KBadge
+      v-if="!showRest && hiddenItems.length"
+      data-testid="show-more-scopes"
+      @click.stop="handleShowMore"
+    >
+      <span>
+        {{ helpText.showMoreLabel(hiddenItems.length.toString()) }}
+      </span>
+    </KBadge>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useI18nStore } from '@/stores'
+
+export default defineComponent({
+  name: 'ScopesBadge',
+  props: {
+    scopes: {
+      type: Array,
+      required: true
+    }
+  },
+  setup (props) {
+    const showRest = ref(false)
+    const helpText = useI18nStore().state.helpText.productList
+    const initialItems = props.scopes.slice(0, 3)
+    const showItems = ref(initialItems)
+    const hiddenItems = props.scopes.slice(3)
+    const allItems = props.scopes
+
+    const handleShowMore = () => {
+      showRest.value = true
+      showItems.value = allItems
+    }
+
+    return {
+      helpText,
+      initialItems,
+      allItems,
+      showItems,
+      handleShowMore,
+      hiddenItems,
+      showRest
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  .badge-container {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 250px;
+    row-gap: 6px;
+
+    :not(:last-child) {
+      margin-right: 4px;
+    }
+  }
+</style>
diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
@@ -359,7 +359,7 @@ export default defineComponent({
             productVersionId: props.version.id
           }).then((res) => {
             fetchingScopes.value = false
-            const registrationConfigs = res.data.registration_configs
+            const registrationConfigs = res.data?.registration_configs
 
             if (registrationConfigs?.length && registrationConfigs[0].available_scopes) {
               availableScopes.value = registrationConfigs[0].available_scopes
@@ -379,6 +379,7 @@ export default defineComponent({
             const grantedScopesArr = res.data.scopes
 
             alreadyGrantedScopes.value = grantedScopesArr
+            selectedScopes.value = grantedScopesArr
             fetchingScopes.value = false
           }).finally(() => {
             fetchingScopes.value = false

diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts
@@ -154,6 +154,7 @@ export const ca_ES: I18nType = {
   },
   productList: {
     titleProducts: 'Productes',
+    showMoreLabel: (items: string) => translationNeeded(en.productList.showMoreLabel(items)),
     actions: {
       unregister: 'Anul·lar el registre'
     },
@@ -166,6 +167,7 @@ export const ca_ES: I18nType = {
       nameProduct: 'Producte',
       version: 'Versió',
       status: 'Estat',
+      scopes: translationNeeded(en.productList.labels.scopes),
       actions: 'Accions'
     }
   },

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -154,6 +154,7 @@ export const de: I18nType = {
   },
   productList: {
     titleProducts: 'Produkte',
+    showMoreLabel: (items: string) => translationNeeded(en.productList.showMoreLabel(items)),
     actions: {
       unregister: 'Registrierung aufheben'
     },
@@ -166,6 +167,7 @@ export const de: I18nType = {
       nameProduct: 'Produkt',
       version: 'Version',
       status: 'Status',
+      scopes: translationNeeded(en.productList.labels.scopes),
       actions: 'Aktionen'
     }
   },

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -150,6 +150,7 @@ export const en = {
   },
   productList: {
     titleProducts: 'Products',
+    showMoreLabel: (items: string) => `+ ${items} more`,
     actions: {
       unregister: 'Unregister'
     },
@@ -162,6 +163,7 @@ export const en = {
       nameProduct: 'Product',
       version: 'Version',
       status: 'Status',
+      scopes: 'Scopes',
       actions: 'Actions'
     }
   },

diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts
@@ -154,6 +154,7 @@ export const es_ES: I18nType = {
   },
   productList: {
     titleProducts: 'Productos',
+    showMoreLabel: (items: string) => translationNeeded(en.productList.showMoreLabel(items)),
     actions: {
       unregister: 'Cancelar registro'
     },
@@ -166,6 +167,7 @@ export const es_ES: I18nType = {
       nameProduct: 'Producto',
       version: 'Versión',
       status: 'Estado',
+      scopes: translationNeeded(en.productList.labels.scopes),
       actions: 'Acciones'
     }
   },

diff --git a/src/locales/fr.ts b/src/locales/fr.ts
@@ -154,6 +154,7 @@ export const fr: I18nType = {
   },
   productList: {
     titleProducts: 'Produits',
+    showMoreLabel: (items: string) => translationNeeded(en.productList.showMoreLabel(items)),
     actions: {
       unregister: 'Désenregistrer'
     },
@@ -166,6 +167,7 @@ export const fr: I18nType = {
       nameProduct: 'Produit',
       version: 'Version',
       status: 'Statut',
+      scopes: translationNeeded(en.productList.labels.scopes),
       actions: 'Actions'
     }
   },

diff --git a/src/locales/i18n-type.d.ts b/src/locales/i18n-type.d.ts
@@ -150,6 +150,7 @@ export interface I18nType {
   },
   productList: {
     titleProducts: string;
+    showMoreLabel: (items: string) => string,
     actions: {
       unregister: string;
     };
@@ -163,6 +164,7 @@ export interface I18nType {
       version: string;
       status: string;
       actions: string;
+      scopes: string;
     };
   };
   dcrAuthentication: {