fix(console): app details (#7827)

* cleanup app urls

* fix app details

* styles and specific urls

* lint

* explicit urls

* deterministic order

* lint

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -422,19 +422,21 @@
         </ng-container>
         <ng-container *ngIf="currentSetting === 'urls'">
           <cnsl-card title=" {{ 'APP.URLS' | translate }}">
-            <cnsl-info-section *ngIf="(apiMap$ | async)?.issuer as issuer">
+            <cnsl-info-section *ngIf="issuer$ | async as issuer">
               <div
                 class="link"
                 [innerHtml]="'APP.OIDC.WELLKNOWN' | translate: { url: issuer + '/.well-known/openid-configuration' }"
               ></div>
             </cnsl-info-section>
-            <cnsl-copy-row
+            <ng-container *ngIf="app?.apiConfig && apiURLs$ | async as apiURLs">
-              labelMinWidth="220px"
+              <cnsl-copy-row
-              *ngFor="let apiUrl of apiMap$ | async | keyvalue"
+                labelMinWidth="220px"
-              [label]="apiUrl.key"
+                *ngFor="let apiUrl of apiURLs"
-              [value]="apiUrl.value"
+                [label]="apiUrl[0]"
-            ></cnsl-copy-row>
+                [value]="apiUrl[1]"
-            <ng-container *ngIf="app?.samlConfig && samlMap$ | async as samlMap">
+              ></cnsl-copy-row>
+            </ng-container>
+            <ng-container *ngIf="app?.samlConfig && samlURLs$ | async as samlMap">
               <cnsl-copy-row
                 labelMinWidth="220px"
                 *ngIf="samlMap['samlCertificateURL'] as url"
@@ -456,14 +458,9 @@
                 [value]="url"
               ></cnsl-copy-row>
             </ng-container>
-            <ng-container *ngIf="!app?.samlConfig">
+            <ng-container *ngIf="app?.oidcConfig && wellknownURLs$ | async as wellKnownURLs">
-              <ng-container *ngFor="let wellknown of wellknownMap$ | async | keyvalue">
+              <ng-container *ngFor="let wellknown of wellKnownURLs">
-                <cnsl-copy-row
+                <cnsl-copy-row labelMinWidth="220px" [label]="wellknown[0]" [value]="wellknown[1]"></cnsl-copy-row>
-                  labelMinWidth="220px"
-                  *ngIf="wellknown.key.endsWith('endpoint') || wellknown.key.toString() === 'jwks_uri'"
-                  [label]="wellknown.key"
-                  [value]="wellknown.value"
-                ></cnsl-copy-row>
               </ng-container>
             </ng-container>
           </cnsl-card>

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -304,8 +304,9 @@
   text-decoration: none;
   color: inherit;
   font-family: inherit;
-
+  text-decoration: underline;
-  &:hover {
+}
-    text-decoration: underline;
+
-  }
+.download-button {
+  margin-left: 1rem;
 }

console/src/app/pages/projects/apps/app-detail/app-detail.component.ts

@@ -8,7 +8,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Buffer } from 'buffer';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
-import { Subject, Subscription } from 'rxjs';
+import { mergeMap, Subject, Subscription } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
@@ -80,30 +80,27 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public appId: string = '';
   public app?: App.AsObject;
 
-  public environmentMap$ = this.envSvc.env.pipe(
+  public apiURLs$ = this.envSvc.env.pipe(
-    map((env) => {
+    mergeMap((env) =>
-      return {
+      this.wellknownURLs$.pipe(
-        issuer: env.issuer,
+        map((wellknown) => {
-        adminServiceUrl: `${env.api}/admin/v1`,
+          return [
-        mgmtServiceUrl: `${env.api}/management/v1`,
+            ['Issuer', env.issuer],
-        authServiceUrl: `${env.api}/auth/v1`,
+            ['Admin Service URL', `${env.api}/admin/v1`],
-        samlCertificateURL: `${env.issuer}/saml/v2/certificate`,
+            ['Management Service URL', `${env.api}/management/v1`],
-        samlSSO: `${env.issuer}/saml/v2/SSO`,
+            ['Auth Service URL', `${env.api}/auth/v1`],
-        samlSLO: `${env.issuer}/saml/v2/SLO`,
+            ...wellknown.filter(
-      };
+              ([k, v]) => k === 'Revocation Endpoint' || k === 'JKWS URI' || k === 'Introspection Endpoint',
-    }),
+            ),
+          ];
+        }),
+      ),
+    ),
   );
-  public apiMap$ = this.envSvc.env.pipe(
+
-    map((env) => {
+  public issuer$ = this.apiURLs$.pipe(map((urls) => urls.find(([k, v]) => k === 'Issuer')?.[1]));
-      return {
+
-        issuer: env.issuer,
+  public samlURLs$ = this.envSvc.env.pipe(
-        adminServiceUrl: `${env.api}/admin/v1`,
-        mgmtServiceUrl: `${env.api}/management/v1`,
-        authServiceUrl: `${env.api}/auth/v1`,
-      };
-    }),
-  );
-  public samlMap$ = this.envSvc.env.pipe(
     map((env) => {
       return {
         samlCertificateURL: `${env.issuer}/saml/v2/certificate`,
@@ -112,7 +109,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       };
     }),
   );
-  public wellknownMap$ = this.envSvc.wellknown;
+
+  public wellknownURLs$ = this.envSvc.wellknown.pipe(
+    map((wellknown) => {
+      return [
+        ['Authorization Endpoint', wellknown.authorization_endpoint],
+        ['Device Authorization Endpoint', wellknown.device_authorization_endpoint],
+        ['End Session Endpoint', wellknown.end_session_endpoint],
+        ['Introspection Endpoint', wellknown.introspection_endpoint],
+        ['JKWS URI', wellknown.jwks_uri],
+        ['Revocation Endpoint', wellknown.revocation_endpoint],
+        ['Token Endpoint', wellknown.token_endpoint],
+        ['Userinfo Endpoint', wellknown.userinfo_endpoint],
+      ];
+    }),
+  );
 
   public oidcResponseTypes: OIDCResponseType[] = [
     OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
@@ -217,9 +228,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
       if (!this.app) {
         this.app = new App().toObject();
       }
-      if (!this.app.samlConfig) {
-        this.app.samlConfig = new SAMLConfig().toObject();
-      }
 
       let minimalMetadata =
         this.entityId?.value && this.acsURL?.value
@@ -231,6 +239,14 @@ export class AppDetailComponent implements OnInit, OnDestroy {
 </md:EntityDescriptor>`
           : '';
 
+      if (!minimalMetadata && !this.metadataUrl?.value) {
+        return;
+      }
+
+      if (!this.app.samlConfig) {
+        this.app.samlConfig = new SAMLConfig().toObject();
+      }
+
       if (minimalMetadata) {
         const base64 = Buffer.from(minimalMetadata, 'utf-8').toString('base64');
         this.app.samlConfig.metadataXml = base64;

console/src/app/services/environment.service.ts

@@ -18,10 +18,13 @@ export interface Environment {
 
 interface WellKnown {
   authorization_endpoint: string;
+  device_authorization_endpoint: string;
   end_session_endpoint: string;
   introspection_endpoint: string;
   token_endpoint: string;
   userinfo_endpoint: string;
+  jwks_uri: string;
+  revocation_endpoint: string;
 }
 @Injectable({
   providedIn: 'root',