feat: display auth strategy info in application view (#406)

cypress/e2e/specs/application_registration.spec.ts

@@ -1252,6 +1252,33 @@ describe('Application Registration', () => {
     cy.get('[data-testid="client-secret-table"] [data-testid="refresh-secret-button"]').should('not.exist')
     cy.get('.credentials-list').should('exist')
   })
+  it('app-reg-v2 - show auth strategy info for key-auth app', () => {
+    cy.mockLaunchDarklyFlags([
+      {
+        name: 'tdx-3531-app-reg-v2',
+        value: true
+      }
+    ])
+    const keyAuthApp = {
+      ...apps[0],
+      auth_strategy: {
+        id: 'key-auth-strat-id',
+        name: 'keyauthstrat',
+        credential_type: AuthStrategyKeyAuthCredentialTypeEnum.KeyAuth
+      }
+    }
+
+    cy.mockApplications([{ ...keyAuthApp }], 1)
+    mockApplicationWithCredAndReg({ ...keyAuthApp })
+
+    cy.visit('/my-apps')
+
+    cy.get('[data-testid="applications-table"] tbody tr').click()
+    cy.get('[data-testid="auth-strategy-card"]').should('exist')
+    cy.get('[data-testid="auth-strategy-auth-methods-label"]').should('not.exist')
+    cy.get('[data-testid="auth-strategy-title"]').should('exist').should('contain.text', keyAuthApp.auth_strategy.name)
+    cy.get('[data-testid="auth-strategy-credential-type"]').should('exist').should('contain.text', 'Key Auth')
+  })
   it('app-reg-v2 - does not show any tables if app is oidc ', () => {
     cy.mockLaunchDarklyFlags([
       {
@@ -1284,7 +1311,41 @@ describe('Application Registration', () => {
     cy.get('[data-testid="client-secret-table"] [data-testid="refresh-secret-button"]').should('not.exist')
     cy.get('.credentials-list').should('not.exist')
   })
+  it('app-reg-v2 - show auth strategy info for oidc app', () => {
+    cy.mockLaunchDarklyFlags([
+      {
+        name: 'tdx-3531-app-reg-v2',
+        value: true
+      }
+    ])
+    const oidcApp = {
+      ...apps[0],
+      auth_strategy: {
+        id: 'oidc-strat-id',
+        name: 'oidc-strat',
+        auth_methods: [
+          'client_credentials',
+          'session',
+          'bearer'
+        ],
+        credential_type: AuthStrategyClientCredentialsCredentialTypeEnum.SelfManagedClientCredentials
+      }
+    }
+
+    cy.mockApplications([{ ...oidcApp }], 1)
+    mockApplicationWithCredAndReg({ ...oidcApp })
 
+    cy.visit('/my-apps')
+
+    cy.get('[data-testid="applications-table"] tbody tr').click()
+    cy.get('[data-testid="auth-strategy-card"]').should('exist')
+    cy.get('[data-testid="auth-strategy-auth-methods-label"]').should('exist')
+    cy.get('[data-testid="auth-strategy-title"]').should('exist').should('contain.text', oidcApp.auth_strategy.name)
+    cy.get('[data-testid="auth-strategy-credential-type"]').should('exist').should('contain.text', 'Self Managed Client Credentials')
+    oidcApp.auth_strategy.auth_methods.forEach((method) => {
+      cy.get(`[data-testid="auth-method-${method}"]`).should('exist')
+    })
+  })
   it('app-reg-v2 - show dcr token table if app is DCR ', () => {
     cy.mockLaunchDarklyFlags([
       {
@@ -1341,6 +1402,41 @@ describe('Application Registration', () => {
 
     cy.get('[data-testid="application-secret-token-modal"]').should('not.exist')
   })
+  it('app-reg-v2 - show auth strategy info for dcr app', () => {
+    cy.mockLaunchDarklyFlags([
+      {
+        name: 'tdx-3531-app-reg-v2',
+        value: true
+      }
+    ])
+    const dcrApp = {
+      ...apps[0],
+      auth_strategy: {
+        id: 'okta-strat-id',
+        name: 'dcr-strat',
+        auth_methods: [
+          'bearer',
+          'client_credentials',
+          'session'
+        ],
+        credential_type: AuthStrategyClientCredentialsCredentialTypeEnum.ClientCredentials
+      }
+    }
+
+    cy.mockApplications([{ ...dcrApp }], 1)
+    mockApplicationWithCredAndReg({ ...dcrApp })
+
+    cy.visit('/my-apps')
+
+    cy.get('[data-testid="applications-table"] tbody tr').click()
+    cy.get('[data-testid="auth-strategy-card"]').should('exist')
+    cy.get('[data-testid="auth-strategy-auth-methods-label"]').should('exist')
+    cy.get('[data-testid="auth-strategy-title"]').should('exist').should('contain.text', dcrApp.auth_strategy.name)
+    cy.get('[data-testid="auth-strategy-credential-type"]').should('exist').should('contain.text', 'Client Credentials')
+    dcrApp.auth_strategy.auth_methods.forEach((method) => {
+      cy.get(`[data-testid="auth-method-${method}"]`).should('exist')
+    })
+  })
 
   describe('Credential management with DCR', () => {
     it('can refresh token of existing application with dcr', () => {

src/locales/ca_ES.ts

@@ -45,12 +45,14 @@ export const ca_ES: I18nType = {
     registerProductVersion: translationNeeded(en.productVersion.registerProductVersion)
   },
   authStrategyInfo: {
-    title: (authStrategyName: string) => translationNeeded(en.authStrategyInfo.title(authStrategyName)),
+    titleLabel: translationNeeded(en.authStrategyInfo.titleLabel),
+    credentialTypeLabel: translationNeeded(en.authStrategyInfo.credentialTypeLabel),
     registerBtnText: (productVersionName: string) => translationNeeded(en.authStrategyInfo.registerBtnText(productVersionName)),
     authMethods: translationNeeded(en.authStrategyInfo.authMethods),
     bearer: translationNeeded(en.authStrategyInfo.bearer),
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
+    selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
     session: translationNeeded(en.authStrategyInfo.session)
   },
   userDropdown: {

src/locales/de.ts

@@ -45,12 +45,14 @@ export const de: I18nType = {
     registerProductVersion: translationNeeded(en.productVersion.registerProductVersion)
   },
   authStrategyInfo: {
-    title: (authStrategyName: string) => translationNeeded(en.authStrategyInfo.title(authStrategyName)),
+    titleLabel: translationNeeded(en.authStrategyInfo.titleLabel),
+    credentialTypeLabel: translationNeeded(en.authStrategyInfo.credentialTypeLabel),
     registerBtnText: (productVersionName: string) => translationNeeded(en.authStrategyInfo.registerBtnText(productVersionName)),
     authMethods: translationNeeded(en.authStrategyInfo.authMethods),
     bearer: translationNeeded(en.authStrategyInfo.bearer),
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
+    selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
     session: translationNeeded(en.authStrategyInfo.session)
   },
   userDropdown: {

src/locales/en.ts

@@ -41,12 +41,14 @@ export const en = {
     registerProductVersion: 'Register Product version'
   },
   authStrategyInfo: {
-    title: (authStrategyName: string) => `Supported Application Auth Strategy: ${authStrategyName}`,
+    titleLabel: 'Supported Application Auth Strategy:',
+    credentialTypeLabel: 'Credential Type:',
     registerBtnText: (productVersionName: string) => `Register for ${productVersionName}`,
     authMethods: 'Auth Methods:',
     bearer: 'Bearer',
     keyAuth: 'Key Auth',
     clientCredentials: 'Client Credentials',
+    selfManagedClientCredentials: 'Self Managed Client Credentials',
     session: 'Session'
   },
   userDropdown: {

src/locales/es_ES.ts

@@ -45,12 +45,14 @@ export const es_ES: I18nType = {
     registerProductVersion: translationNeeded(en.productVersion.registerProductVersion)
   },
   authStrategyInfo: {
-    title: (authStrategyName: string) => translationNeeded(en.authStrategyInfo.title(authStrategyName)),
+    titleLabel: translationNeeded(en.authStrategyInfo.titleLabel),
+    credentialTypeLabel: translationNeeded(en.authStrategyInfo.credentialTypeLabel),
     registerBtnText: (productVersionName: string) => translationNeeded(en.authStrategyInfo.registerBtnText(productVersionName)),
     authMethods: translationNeeded(en.authStrategyInfo.authMethods),
     bearer: translationNeeded(en.authStrategyInfo.bearer),
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
+    selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
     session: translationNeeded(en.authStrategyInfo.session)
   },
   userDropdown: {

src/locales/fr.ts

@@ -45,12 +45,14 @@ export const fr: I18nType = {
     registerProductVersion: 'Enregistrer une version de produit'
   },
   authStrategyInfo: {
-    title: (authStrategyName: string) => translationNeeded(en.authStrategyInfo.title(authStrategyName)),
+    titleLabel: translationNeeded(en.authStrategyInfo.titleLabel),
+    credentialTypeLabel: translationNeeded(en.authStrategyInfo.credentialTypeLabel),
     registerBtnText: (productVersionName: string) => translationNeeded(en.authStrategyInfo.registerBtnText(productVersionName)),
     authMethods: translationNeeded(en.authStrategyInfo.authMethods),
     bearer: translationNeeded(en.authStrategyInfo.bearer),
     keyAuth: translationNeeded(en.authStrategyInfo.keyAuth),
     clientCredentials: translationNeeded(en.authStrategyInfo.clientCredentials),
+    selfManagedClientCredentials: translationNeeded(en.authStrategyInfo.selfManagedClientCredentials),
     session: translationNeeded(en.authStrategyInfo.session)
   },
   userDropdown: {

src/locales/i18n-type.d.ts

@@ -41,12 +41,14 @@ export interface I18nType {
     registerProductVersion: string;
   };
   authStrategyInfo: {
-    title: (authStrategyName: string) => string;
+    titleLabel: string;
+    credentialTypeLabel: string;
     registerBtnText: (productVersionName: string) => string;
     authMethods: string;
     bearer: string;
     keyAuth: string;
     clientCredentials: string;
+    selfManagedClientCredentials: string;
     session: string;
   };
   userDropdown: {

src/views/Applications/ApplicationDetail.vue

@@ -14,6 +14,56 @@
       v-if="currentState.matches('success')"
     >
       <div>
+        <KCard
+          v-if="appRegV2Enabled && application && application.auth_strategy"
+          class="auth-strategy-card"
+          data-testid="auth-strategy-card"
+        >
+          <template #body>
+            <span
+              class="label"
+              data-testid="auth-strategy-title"
+            >
+              {{ helpText.authStrategyInfo.titleLabel }}
+              <KBadge shape="rectangular">
+                {{ application.auth_strategy.name }}
+              </KBadge>
+            </span>
+            <span
+              class="label"
+              data-testid="auth-strategy-credential-type"
+            >
+              {{ helpText.authStrategyInfo.credentialTypeLabel }}
+              <KBadge shape="rectangular">
+                {{ authMethodLabelObj[application.auth_strategy.credential_type] }}
+              </KBadge>
+            </span>
+            <p
+              v-if="application.auth_strategy.credential_type !== 'key_auth'"
+              class="auth-methods-label"
+              data-testid="auth-strategy-auth-methods-label"
+            >
+              {{ helpText.authStrategyInfo.authMethods }}
+            </p>
+            <div class="info-container">
+              <KCard
+                v-if="application.auth_strategy.credential_type !== 'key_auth'"
+                class="badge-container"
+              >
+                <template #body>
+                  <KBadge
+                    v-for="(authMethod, index) in application.auth_strategy.auth_methods"
+                    :key="authMethod + index"
+                    :data-testid="`auth-method-${authMethod}`"
+                    shape="rectangular"
+                  >
+                    {{ authMethodLabelObj[authMethod] }}
+                  </KBadge>
+                </template>
+              </KCard>
+            </div>
+          </template>
+        </KCard>
         <PageTitle
           class="mb-5"
           :title="application.name"
@@ -137,6 +187,13 @@ export default defineComponent({
 
     const helpText = useI18nStore().state.helpText
     const $route = useRoute()
+    const authMethodLabelObj = {
+      bearer: helpText.authStrategyInfo.bearer,
+      session: helpText.authStrategyInfo.session,
+      client_credentials: helpText.authStrategyInfo.clientCredentials,
+      key_auth: helpText.authStrategyInfo.keyAuth,
+      self_managed_client_credentials: helpText.authStrategyInfo.selfManagedClientCredentials
+    }
     const id = computed(() => $route.params.application_id as string)
     const breadcrumbs = computed(() => ([{
       key: 'my-apps',
@@ -204,6 +261,8 @@ export default defineComponent({
     })
 
     return {
+      appRegV2Enabled,
+      authMethodLabelObj,
       analyticsCardTitle,
       currentState,
       errorMessage,
@@ -219,3 +278,40 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+  .auth-strategy-card {
+    --KCardBorder: 1px solid var(--section_colors-stroke);
+    --KCardBorderRadius: 4px;
+    --KCardPaddingX: 12px;
+    --KCardPaddingY: 12px;
+    margin-bottom: 12px;
+
+    .label {
+      &:not(:last-of-type) {
+        margin-right: 12px;
+      }
+    }
+
+    .label, .auth-methods-label {
+      margin-bottom: 4px;
+    }
+
+    .info-container {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      row-gap: 8px;
+    }
+
+    :deep(.k-badge) {
+      &:not(:last-child) {
+        margin-right: 4px;
+      }
+      background: var(--button_colors-primary-fill, var(--blue-500, #1155cb));
+      border: 1px solid transparent;
+      color: var(--button_colors-primary-text, #fff);
+    }
+  }
+</style>

src/views/Spec.vue

@@ -11,12 +11,15 @@
           data-testid="auth-strategy-card"
         >
           <template #body>
-            <p
-              class="title"
+            <span
+              class="label"
               data-testid="auth-strategy-title"
             >
-              {{ helpText.authStrategyInfo.title(currentVersion?.registration_configs?.[0].name) }}
-            </p>
+              {{ helpText.authStrategyInfo.titleLabel }}
+              <KBadge shape="rectangular">
+                {{ currentVersion?.registration_configs?.[0].name }}
+              </KBadge>
+            </span>
             <p class="auth-methods-label">
               {{ helpText.authStrategyInfo.authMethods }}
             </p>
@@ -594,7 +597,7 @@ export default defineComponent({
     --KCardPaddingY: 12px;
     margin-bottom: 4px;
 
-    .title, .auth-methods-label {
+    .label, .auth-methods-label {
       margin-bottom: 4px;
     }
 
@@ -606,15 +609,13 @@ export default defineComponent({
       row-gap: 8px;
     }
 
-    .badge-container {
-      :deep(.k-badge) {
-        &:not(:last-child) {
-          margin-right: 4px;
-        }
-        background: var(--button_colors-primary-fill, var(--blue-500, #1155cb));
-        border: 1px solid transparent;
-        color: var(--button_colors-primary-text, #fff);
+    :deep(.k-badge) {
+      &:not(:last-child) {
+        margin-right: 4px;
       }
+      background: var(--button_colors-primary-fill, var(--blue-500, #1155cb));
+      border: 1px solid transparent;
+      color: var(--button_colors-primary-text, #fff);
     }
   }
 </style>