From 3675fc1f7a13aadd4d9b88747633ab1d60d48927 Mon Sep 17 00:00:00 2001 From: David Ma <40131297+davidma415@users.noreply.github.com> Date: Tue, 27 Feb 2024 09:42:51 -0700 Subject: [PATCH] refactor: show granted scopes at app level (#428) --- .../specs/application_registration.spec.ts | 70 ++++++------------- src/components/ScopeBadges.vue | 9 ++- src/locales/ca_ES.ts | 2 +- src/locales/de.ts | 2 +- src/locales/en.ts | 4 +- src/locales/es_ES.ts | 2 +- src/locales/fr.ts | 2 +- src/locales/i18n-type.d.ts | 2 +- src/views/Applications/ApplicationDetail.vue | 20 +++++- src/views/Applications/ProductList.vue | 31 +------- 10 files changed, 56 insertions(+), 88 deletions(-) diff --git a/cypress/e2e/specs/application_registration.spec.ts b/cypress/e2e/specs/application_registration.spec.ts index de71afed..3652bc4c 100644 --- a/cypress/e2e/specs/application_registration.spec.ts +++ b/cypress/e2e/specs/application_registration.spec.ts @@ -597,23 +597,15 @@ describe('Application Registration', () => { 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' - ] - } - ]) + const app = { + ...apps[0], + scopes: [ + 'scope1', + 'scope2' + ] + } + + mockApplicationWithCredAndReg(app, []) cy.get('[data-testid="applications-table"] tbody tr') .contains(apps[0].name) .click() @@ -627,25 +619,17 @@ describe('Application Registration', () => { 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' - ] - } - ]) + const app = { + ...apps[0], + scopes: [ + 'scope1', + 'scope2', + 'scope3', + 'scope4' + ] + } + + mockApplicationWithCredAndReg(app, [], []) cy.get('[data-testid="applications-table"] tbody tr') .contains(apps[0].name) .click() @@ -661,19 +645,7 @@ describe('Application Registration', () => { 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' - } - ]) + mockApplicationWithCredAndReg(apps[0], [], []) cy.get('[data-testid="applications-table"] tbody tr') .contains(apps[0].name) .click() diff --git a/src/components/ScopeBadges.vue b/src/components/ScopeBadges.vue index 5b400120..59b186cc 100644 --- a/src/components/ScopeBadges.vue +++ b/src/components/ScopeBadges.vue @@ -5,12 +5,14 @@ :key="(scope as string)" :data-testid="`granted-${scope}`" class="scope-badge" + shape="rectangular" > {{ scope }} @@ -62,11 +64,16 @@ export default defineComponent({ .badge-container { display: flex; flex-wrap: wrap; - max-width: 250px; row-gap: 6px; :not(:last-child) { margin-right: 4px; } + + :deep(.k-badge) { + background: var(--button_colors-primary-fill, var(--blue-500, #1155cb)); + border: 1px solid transparent; + color: var(--button_colors-primary-text, #fff); + } } diff --git a/src/locales/ca_ES.ts b/src/locales/ca_ES.ts index 854435ed..018105c9 100644 --- a/src/locales/ca_ES.ts +++ b/src/locales/ca_ES.ts @@ -117,6 +117,7 @@ export const ca_ES: I18nType = { applicationName: "Nom de l'aplicació ", authStrategy: translationNeeded(en.application.authStrategy), authStrategyWarning: translationNeeded(en.application.authStrategyWarning), + grantedScopes: translationNeeded(en.application.grantedScopes), clientID: 'ID de client: ', clientSecret: 'Clau secreta de client: ', reqField: ' indica un camp obligatori', @@ -181,7 +182,6 @@ 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 index 8ef94b28..244509b1 100644 --- a/src/locales/de.ts +++ b/src/locales/de.ts @@ -117,6 +117,7 @@ export const de: I18nType = { applicationName: 'Name der Applikation', authStrategy: translationNeeded(en.application.authStrategy), authStrategyWarning: translationNeeded(en.application.authStrategyWarning), + grantedScopes: translationNeeded(en.application.grantedScopes), clientID: translationNeeded(en.application.clientID), clientSecret: translationNeeded(en.application.clientSecret), reqField: ' Pflichtfeld', @@ -181,7 +182,6 @@ 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 index a256f981..2adb0461 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -113,6 +113,7 @@ export const en = { applicationName: 'Application Name ', authStrategy: 'Auth Strategy', authStrategyWarning: 'You cannot create an application as this developer portal has no available application auth strategies. Please contact a developer portal admin.', + grantedScopes: 'Granted Scopes:', clientID: 'Client ID: ', clientSecret: 'Client Secret: ', reqField: ' indicates required field', @@ -177,7 +178,6 @@ export const en = { nameProduct: 'Product', version: 'Version', status: 'Status', - scopes: 'Scopes', actions: 'Actions' } }, @@ -202,7 +202,7 @@ export const en = { createApplication: 'Create an Application', searchPlaceholder: 'Search applications', cancelButton: 'Cancel', - filterScopes: 'filter...', + filterScopes: 'Filter...', availableScopesLabel: 'Select scopes', fetchingScopesLabel: 'Fetching scopes...', registeredApplicationsProduct: 'The following applications are already registered to this product:', diff --git a/src/locales/es_ES.ts b/src/locales/es_ES.ts index 45a6548f..21529736 100644 --- a/src/locales/es_ES.ts +++ b/src/locales/es_ES.ts @@ -117,6 +117,7 @@ export const es_ES: I18nType = { applicationName: 'Nombre de la aplicación ', authStrategy: translationNeeded(en.application.authStrategy), authStrategyWarning: translationNeeded(en.application.authStrategyWarning), + grantedScopes: translationNeeded(en.application.grantedScopes), clientID: 'ID de cliente: ', clientSecret: 'Clave secreta de cliente: ', reqField: ' indica campo obligatorio', @@ -181,7 +182,6 @@ 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 index 7654efdb..623ebb23 100644 --- a/src/locales/fr.ts +++ b/src/locales/fr.ts @@ -117,6 +117,7 @@ export const fr: I18nType = { applicationName: 'Nom de l\'application ', authStrategy: translationNeeded(en.application.authStrategy), authStrategyWarning: translationNeeded(en.application.authStrategyWarning), + grantedScopes: translationNeeded(en.application.grantedScopes), clientID: 'Client ID : ', clientSecret: 'Client Secret : ', reqField: ' indique un champ obligatoire', @@ -181,7 +182,6 @@ 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 index 6cd1c996..4350f061 100644 --- a/src/locales/i18n-type.d.ts +++ b/src/locales/i18n-type.d.ts @@ -116,6 +116,7 @@ export interface I18nType { clientID: string; clientSecret: string; reqField: string; + grantedScopes: string; redirectUriLabel: string; applicationCredentials: string; applicationSecret: string; @@ -178,7 +179,6 @@ export interface I18nType { version: string; status: string; actions: string; - scopes: string; }; }; dcrAuthentication: { diff --git a/src/views/Applications/ApplicationDetail.vue b/src/views/Applications/ApplicationDetail.vue index a4d1cffa..b46de122 100644 --- a/src/views/Applications/ApplicationDetail.vue +++ b/src/views/Applications/ApplicationDetail.vue @@ -118,6 +118,14 @@ > {{ helpText.application.referenceId(application.reference_id) }} +
+ {{ helpText.application.grantedScopes }} + +
@@ -178,6 +186,7 @@ import CredentialsList from './CredentialsList.vue' import ProductList from './ProductList.vue' import DcrAuthenticationTable from './DcrAuthenticationTable.vue' import AnalyticsMetricsCard from '@/components/vitals/AnalyticsMetricsCard.vue' +import ScopeBadges from '@/components/ScopeBadges.vue' import { useI18nStore, useAppStore } from '@/stores' import { PortalTimeframeKeys } from '@/types/vitals' @@ -192,7 +201,7 @@ import { CredentialType } from '@kong/sdk-portal-js' export default defineComponent({ name: 'ApplicationDetail', - components: { AnalyticsMetricsCard, PageTitle, CredentialsList, ProductList, DcrAuthenticationTable }, + components: { AnalyticsMetricsCard, PageTitle, CredentialsList, ProductList, DcrAuthenticationTable, ScopeBadges }, setup () { const errorMessage = ref('') @@ -328,4 +337,13 @@ export default defineComponent({ color: var(--button_colors-primary-text, #fff); } } + + .granted-scopes { + display: flex; + justify-content: flex-end; + + .label { + margin-right: 4px; + } + } diff --git a/src/views/Applications/ProductList.vue b/src/views/Applications/ProductList.vue index 21d6300b..d3bddb64 100644 --- a/src/views/Applications/ProductList.vue +++ b/src/views/Applications/ProductList.vue @@ -8,7 +8,6 @@ -