fix(spec): disable register when disabled TDX-4796 (#532)

Co-authored-by: henri pietila <henri@konhghq.com>

cypress/e2e/fixtures/consts.ts

@@ -7,21 +7,31 @@ const versions: ProductVersion[] = [
     id: '1afac832-5b2a-474c-a56d-c241364f41cf',
     name: 'v1-beta',
     deprecated: false,
-    registration_configs: [{ name: 'key-auth' }]
+    registration_configs: [{
+      id: crypto.randomUUID(),
+      credential_type: 'key_auth',
+      name: 'key-auth',
+      registration_enabled: true,
+      registration_auto_approve: true
+    }]
   }
 ]
 
 const keyAuthRegConfig: RegistrationConfiguration = {
   name: 'key auth auth strategy',
   credential_type: 'key_auth',
-  id: 'd668b397-8a0d-482d-9b97-9e05cbfc7618'
+  id: 'd668b397-8a0d-482d-9b97-9e05cbfc7618',
+  registration_enabled: true,
+  registration_auto_approve: true
 }
 
 const oidcAuthRegConfig: RegistrationConfiguration = {
   auth_methods: ['bearer', 'client_credentials'],
   name: 'oidc auth strategy',
   credential_type: 'client_credentials',
-  id: '7b651144-0b48-431a-af9b-58604adc9268'
+  id: '7b651144-0b48-431a-af9b-58604adc9268',
+  registration_enabled: true,
+  registration_auto_approve: true
 }
 
 const versionWithOidcAuthStrategy: ProductVersion = {
@@ -42,6 +52,16 @@ const versionWithKeyAuthAuthStrategy: ProductVersion = {
   ]
 }
 
+const versionWithRegistrationDisabled: ProductVersion = {
+  ...versions[0],
+  registration_configs: [
+    {
+      ...keyAuthRegConfig,
+      registration_enabled: false
+    }
+  ]
+}
+
 const product: Product = {
   created_at: '2022-03-23T14:52:41.893Z',
   updated_at: '2022-03-23T14:52:41.893Z',
@@ -190,11 +210,12 @@ const defaultContext: PortalContext = {
   oidc_auth_enabled: false,
   featureset_id: '6202956f054d96149719eed0',
   rbac_enabled: false,
-  allowed_time_period: '2022-03-25T13:15:02.104Z'
+  allowed_time_period: '2022-03-25T13:15:02.104Z',
+  name: 'best portal'
 }
 
 const productRegistrations: GetRegistrationResponse[] = [
   productRegistration
 ]
 
-export { versions, product, productVersion, productRegistration, versionWithOidcAuthStrategy, versionWithKeyAuthAuthStrategy, productRegistrations, apps, defaultContext }
+export { versions, product, productVersion, productRegistration, versionWithOidcAuthStrategy, versionWithKeyAuthAuthStrategy, versionWithRegistrationDisabled, productRegistrations, apps, defaultContext }

cypress/e2e/specs/application_registration.spec.ts

@@ -1,5 +1,5 @@
 import { AuthStrategyKeyAuthCredentialTypeEnum, CredentialCreationResponse, GetApplicationResponse, ListCredentialsResponse, ListCredentialsResponseDataInner, ListRegistrationsResponse } from '@kong/sdk-portal-js'
-import { product, versions, productRegistration, apps, productWithKeyAuthAppAuthStrategy, appWithAuthStrategy, versionWithKeyAuthAuthStrategy, versionWithOidcAuthStrategy, oidcApp, dcrApp } from '../fixtures/consts'
+import { product, versions, productRegistration, apps, productWithKeyAuthAppAuthStrategy, appWithAuthStrategy, versionWithKeyAuthAuthStrategy, versionWithOidcAuthStrategy, oidcApp, dcrApp, versionWithRegistrationDisabled } from '../fixtures/consts'
 
 const mockApplicationWithCredAndReg = (
   data: GetApplicationResponse,
@@ -848,6 +848,25 @@ describe('Application Registration', () => {
         'You will be notified upon approval'
       )
     })
+    it('registration disabled if registration disabled on auth strategy', () => {
+        cy.mockProductDocument()
+        cy.mockProduct(product.id, product, [versionWithRegistrationDisabled])
+        cy.mockProductVersionApplicationRegistration(versionWithRegistrationDisabled)
+        cy.mockGetProductDocuments(product.id)
+        cy.mockProductOperations(product.id, versions[0].id)
+        cy.mockProductVersionSpec(product.id, versions[0].id)
+        cy.mockRegistrations('*', []) // mock with empty so that we add one.
+
+        cy.viewport(1440, 900)
+        cy.visit(`/spec/${product.id}`)
+        cy.get('.swagger-ui', { timeout: 12000 })
+
+        cy.mockApplications(apps, 4)
+        cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
+        cy.mockGrantedScopes(versions[0].id, apps[0].id, ['scope1', 'scope2'])
+
+        cy.get('[data-testid="app-reg-v2-register-btn"]').should('be.disabled')
+    })
     it('shows information about application auth strategy (key-auth)', () => {
       cy.mockProductDocument()
       cy.mockProduct(product.id, product, [versionWithKeyAuthAuthStrategy])

cypress/e2e/support/mock-commands.ts

@@ -410,7 +410,7 @@ Cypress.Commands.add('mockProductVersionApplicationRegistration', (version, conf
     'GET',
     `**/api/v2/application_registrations/product_versions/${version.id}`, {
       body: {
-        auth_config: { name: 'key-auth', config: {} },
+        auth_config: { name: 'key-auth', registration_enabled: true, config: {} },
         auto_approve: false,
         created_at: '2022-03-25T10:56:27.268Z',
         errors: [],

package.json

@@ -35,7 +35,7 @@
     "@kong-ui-public/spec-renderer": "2.1.23",
     "@kong/kong-auth-elements": "2.12.6",
     "@kong/kongponents": "8.127.0",
-    "@kong/sdk-portal-js": "2.11.1",
+    "@kong/sdk-portal-js": "2.14.0",
     "@xstate/vue": "2.0.0",
     "axios": "1.6.7",
     "date-fns": "3.3.0",

src/locales/ca_ES.ts

@@ -54,7 +54,8 @@ export const ca_ES: I18nType = {
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
     selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
-    session: translationNeeded(en.authStrategyInfo.session)
+    session: translationNeeded(en.authStrategyInfo.session),
+    disabled: translationNeeded(en.authStrategyInfo.disabled)
   },
   userDropdown: {
     myApps: 'Les meves aplicacions',

src/locales/de.ts

@@ -54,7 +54,8 @@ export const de: I18nType = {
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
     selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
-    session: translationNeeded(en.authStrategyInfo.session)
+    session: translationNeeded(en.authStrategyInfo.session),
+    disabled: translationNeeded(en.authStrategyInfo.disabled)
   },
   userDropdown: {
     myApps: 'Meine Applikationen',

src/locales/en.ts

@@ -50,7 +50,8 @@ export const en = {
     keyAuth: 'Key Auth',
     clientCredentials: 'Client Credentials',
     selfManagedClientCredentials: 'Self Managed',
-    session: 'Session'
+    session: 'Session',
+    disabled: 'Registration for this product version is not enabled'
   },
   userDropdown: {
     myApps: 'My Apps',

src/locales/es_ES.ts

@@ -54,7 +54,8 @@ export const es_ES: I18nType = {
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
     selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
-    session: translationNeeded(en.authStrategyInfo.session)
+    session: translationNeeded(en.authStrategyInfo.session),
+    disabled: translationNeeded(en.authStrategyInfo.disabled)
   },
   userDropdown: {
     myApps: 'Mis aplicaciones',

src/locales/fr.ts

@@ -54,7 +54,8 @@ export const fr: I18nType = {
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
     selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
-    session: translationNeeded(en.authStrategyInfo.session)
+    session: translationNeeded(en.authStrategyInfo.session),
+    disabled: translationNeeded(en.authStrategyInfo.disabled)
   },
   userDropdown: {
     myApps: 'Mes Applications',

src/locales/i18n-type.d.ts

@@ -51,6 +51,7 @@ export interface I18nType {
     clientCredentials: string;
     selfManagedClientCredentials: string;
     session: string;
+    disabled: string;
   };
   userDropdown: {
     myApps: string;

src/views/ProductShell.vue

@@ -116,7 +116,7 @@ async function fetchDocumentTree () {
         headers: {
           accept: DocumentContentTypeEnum.VndKonnectDocumentTreejson
         }
-      }) as AxiosResponse<ListDocumentsTree, any>
+      }) as any as AxiosResponse<ListDocumentsTree, any>
 
       productStore.setDocumentTree((res.data).data)
     }

src/views/Spec.vue

@@ -6,7 +6,7 @@
     <div class="container max-w-screen-2xl px-5 md:px-0">
       <div class="swagger-ui has-sidebar breadcrumbs">
         <KCard
-          v-if="applicationRegistrationEnabled && currentVersion?.registration_configs?.length && !isPublic"
+          v-if="currentVersion?.registration_configs?.length && !isPublic"
           class="auth-strategy-card"
           data-testid="auth-strategy-card"
         >
@@ -44,14 +44,25 @@
                   </KBadge>
                 </template>
               </KCard>
-              <KButton
-                appearance="primary"
-                class="register-btn"
-                data-testid="app-reg-v2-register-btn"
-                @click="triggerViewSpecRegistrationModal"
+              <KTooltip
+                trigger="hover"
               >
-                {{ helpText.authStrategyInfo.registerBtnText(currentVersion?.name) }}
-              </KButton>
+                <KButton
+                  :disabled="!applicationRegistrationEnabled"
+                  appearance="primary"
+                  class="register-btn"
+                  data-testid="app-reg-v2-register-btn"
+                  @click="triggerViewSpecRegistrationModal"
+                >
+                  {{ helpText.authStrategyInfo.registerBtnText(currentVersion?.name) }}
+                </KButton>
+                <template
+                  v-if="!applicationRegistrationEnabled"
+                  #content
+                >
+                  {{ helpText.authStrategyInfo.disabled }}
+                </template>
+              </KTooltip>
             </div>
           </template>
         </KCard>
@@ -197,7 +208,7 @@ export default defineComponent({
     ]
 
     const applicationRegistrationEnabled = computed(() => {
-      return Boolean(currentVersion.value?.registration_configs?.length && isAllowedToRegister.value)
+      return currentVersion.value?.registration_configs.some(config => config.registration_enabled) && isAllowedToRegister.value
     })
 
     const helpText = useI18nStore().state.helpText

yarn.lock

@@ -1169,10 +1169,10 @@
     v-calendar "3.0.0-alpha.8"
     vue-draggable-next "^2.2.1"
 
-"@kong/sdk-portal-js@2.11.1":
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.11.1.tgz#16354d96a0e3a2c91d403990686e4235caa8787a"
-  integrity sha512-uvsZ9yyznAAvMcG501EmbYxYOEo/avN3tLeqxi8M5ycJxAlaYM+WTkRD1cgyvDsP8LnP8M5VyOa/r7I59sJqiQ==
+"@kong/sdk-portal-js@2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@kong/sdk-portal-js/-/sdk-portal-js-2.14.0.tgz#f39c01a3de23270fef1ca8ad5a8e52e9a69eb6b0"
+  integrity sha512-3ZJckN0Ei1ul3k+U5wuzmlA/K2ZRw2uQmYtO0UUPfD9G5A5eiOAWvJWrHCIBYk407DOVUjto2TdCAyFnjpjpWg==
   dependencies:
     axios "1.6.0"