feat(portal-next): display username + password for native kafka api k…

…ey access
gravitee-io · Dec 18, 2024 · 407511e · 407511e
1 parent b6e1705
commit 407511e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/gravitee-apim-portal-webui-next/src/components/api-access/api-access.component.html b/gravitee-apim-portal-webui-next/src/components/api-access/api-access.component.html
@@ -21,9 +21,7 @@
       <div class="m3-title-medium api-access__header" i18n="@@subscriptionDetailsApiAccessHeader">API access</div>
     </mat-card-header>
     <mat-card-content class="api-access__copy-code-content">
-      @if (planSecurity === 'API_KEY') {
-        <app-copy-code id="api-key" class="test-1" title="API Key" [text]="apiKey ?? ''" />
-      } @else if (planSecurity === 'OAUTH2' || planSecurity === 'JWT') {
+      @if (planSecurity === 'OAUTH2' || planSecurity === 'JWT') {
         <app-copy-code id="client-id" title="Client ID" [text]="clientId ?? ''" />
 
         @if (!!clientSecret) {
@@ -39,6 +37,9 @@
           [apiKeyConfigUsername]="apiKeyConfigUsername ?? ''"
           [clientId]="clientId ?? ''" />
       } @else if (planSecurity === 'KEY_LESS' || planSecurity === 'API_KEY') {
+        @if (planSecurity === 'API_KEY') {
+          <app-copy-code id="api-key" class="test-1" title="API Key" [text]="apiKey ?? ''" />
+        }
         <app-copy-code id="base-url" title="Base URL" [text]="entrypointUrl ?? ''" />
         <app-copy-code id="command-line" title="Command Line" [text]="curlCmd" />
       }

diff --git a/gravitee-apim-portal-webui-next/src/components/api-access/api-access.component.spec.ts b/gravitee-apim-portal-webui-next/src/components/api-access/api-access.component.spec.ts
@@ -125,9 +125,12 @@ describe('ApiAccessComponent', () => {
           component.apiKeyConfigUsername = 'hash-username';
 
           fixture.detectChanges();
-          expect(await apiKeyShown()).toBeTruthy();
+          expect(await apiKeyShown()).toBeFalsy();
           expect(await baseUrlShown()).toBeFalsy();
           expect(await commandLineShown()).toBeFalsy();
+
+          expect(await apiKeyUsernameShown()).toBeTruthy();
+          expect(await apiKeyPasswordShown()).toBeTruthy();
           expect(await plainConfigurationShown()).toBeTruthy();
           expect(await scram256ConfigurationShown()).toBeFalsy();
           expect(await scram512ConfigurationShown()).toBeFalsy();
@@ -244,6 +247,12 @@ describe('ApiAccessComponent', () => {
   async function apiKeyShown() {
     return !!(await getCopyCodeHarnessOrNullByTitle('API Key'));
   }
+  async function apiKeyUsernameShown() {
+    return !!(await getCopyCodeHarnessOrNullByTitle('Username'));
+  }
+  async function apiKeyPasswordShown() {
+    return !!(await getCopyCodeHarnessOrNullByTitle('Password'));
+  }
   async function baseUrlShown() {
     return !!(await getCopyCodeHarnessOrNullByTitle('Base URL'));
   }

diff --git a/.../src/components/api-access/native-kafka-api-access/native-kafka-api-access.component.html b/.../src/components/api-access/native-kafka-api-access/native-kafka-api-access.component.html
@@ -26,6 +26,17 @@
   </div>
 </div>
 
+@if (planSecurity() === 'API_KEY') {
+  <div class="native-kafka-api-access__section">
+    <div class="m3-title-medium" i18n="@@nativeKafkaApiAccessAuthentication">Authentication</div>
+    <div class="m3-body-medium" i18n="@@nativeKafkaApiAccessApiKeyHash">
+      Use the MD5 hash of the API Key as the username and the API Key as the password.
+    </div>
+    <app-copy-code id="native-kafka-api-key-username" title="Username" [text]="apiKeyConfigUsername()" />
+    <app-copy-code id="native-kafka-api-key-password" title="Password" [text]="apiKey()" />
+  </div>
+}
+
 <div class="native-kafka-api-access__section">
   <div class="m3-title-medium" i18n="@@nativeKafkaApiAccessReviewProperties">Review Kafka Properties</div>
   <div class="m3-body-medium" i18n="@@nativeKafkaApiAccessCreatePropertiesFile">