feat(mitt-konto): Added link to CIAM self-service to support edit functionality. (TV-954)

Merge in TEA/mina-sidor-fa-web from feature/TV-954-CIAM-self-service-link to develop

Squashed commit of the following:

commit 86ce019f1cbe2b78fec6f07ce28318004daf3b3f
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Mon Dec 6 14:41:51 2021 +0100

    Added link to CIAM self-service

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html

@@ -12,7 +12,13 @@
       </header>
       <main class="my-account__contents" *ngIf="user$ | async as user; else loadingRef">
         <div class="my-account__block">
-          <h2>Personuppgifter</h2>
+          <h2>
+            Personuppgifter
+            <ui-link-button [uiHref]="selfServiceUrl" uiTarget="_blank" uiType="tertiary">
+              <ui-icon [uiType]="IconType.EDIT"></ui-icon>
+              Ändra personuppgifter
+            </ui-link-button>
+          </h2>
           <dl>
             <dt>Förnamn</dt>
             <dd>

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts

@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { UiIconType } from '@ui/icon/icon-type.enum';
+import { environment } from '@msfa-environment';
 import { Employee } from '@msfa-models/employee.model';
 import { Organization } from '@msfa-models/organization.model';
 import { Role } from '@msfa-models/role.model';
 import { UserService } from '@msfa-services/api/user.service';
 import { RoleService } from '@msfa-services/role.service';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
@@ -29,6 +30,7 @@ export class MyAccountComponent {
     )
   );
   allRoles: Role[] = this.roleService.allRoles;
+  selfServiceUrl = environment.ciam.selfServiceUrl;
   readonly IconType = UiIconType;
 
   constructor(private userService: UserService, private roleService: RoleService, private router: Router) {}

apps/mina-sidor-fa/src/app/shared/models/ciam.model.ts

@@ -2,5 +2,6 @@ export interface Ciam {
   clientId: string;
   loginUrl: string;
   logoutUrl: string;
+  selfServiceUrl: string;
   refreshUrl: string;
 }

apps/mina-sidor-fa/src/app/shared/models/environment.model.ts

@@ -1,4 +1,5 @@
 import { Feature } from '@msfa-enums/feature.enum';
+import { Ciam } from './ciam.model';
 
 export interface Environment {
   version?: string;
@@ -8,12 +9,7 @@ export interface Environment {
     headers: { [key: string]: string };
     skipHeadersOn: string[];
   };
-  ciam: {
+  ciam: Ciam;
-    clientId?: string;
-    loginUrl: string;
-    logoutUrl: string;
-    refreshUrl: string;
-  };
   activeFeatures: Feature[];
   elastic?: {
     serviceName: string;

apps/mina-sidor-fa/src/environments/ciam.ts

@@ -4,6 +4,7 @@ export const CIAM_TEST: Ciam = {
   clientId: '5d08c2e4-763e-42f6-b858-24e4773bb83d',
   loginUrl: 'https://ciam-test.arbetsformedlingen.se:8443/uas/oauth2/authorization?response_type=code&scope=openid',
   logoutUrl: 'https://ciam-test.arbetsformedlingen.se:8443/uas/logout',
+  selfServiceUrl: 'https://ciam-test.arbetsformedlingen.se:7443/eidm2/wf/self-service',
   refreshUrl: '/refreshToken',
 };
 
@@ -11,6 +12,7 @@ export const CIAM_PROD: Ciam = {
   clientId: '71010833-e445-4bbc-926a-775247b7a6e3',
   loginUrl: 'https://ciam.arbetsformedlingen.se/uas/oauth2/authorization?response_type=code&scope=openid',
   logoutUrl: 'https://ciam.arbetsformedlingen.se/uas/logout',
+  selfServiceUrl: 'https://ciam.arbetsformedlingen.se/eidm2/wf/self-service',
   refreshUrl: '/refreshToken',
 };
 
@@ -18,5 +20,6 @@ export const CIAM_MOCK: Ciam = {
   clientId: '',
   loginUrl: '/mock-login',
   logoutUrl: '/mock-login',
+  selfServiceUrl: 'https://ciam-test.arbetsformedlingen.se:7443/eidm2/wf/self-service',
   refreshUrl: '/refreshToken',
 };

libs/ui/src/link-button/link-button.component.html

@@ -9,7 +9,7 @@
 </a>
 
 <ng-template #externalLinkRef>
-  <a *ngIf="uiHref" [ngClass]="linkButtonClass" [attr.href]="uiHref">
+  <a *ngIf="uiHref" [ngClass]="linkButtonClass" [attr.href]="uiHref" [attr.target]="uiTarget">
     <ng-container *ngTemplateOutlet="contentRef"></ng-container>
   </a>
 </ng-template>

libs/ui/src/link-button/link-button.component.ts

@@ -14,6 +14,7 @@ export class LinkButtonComponent {
   @Input() uiFullWidth = false;
   @Input() uiRouterLink: string | string[];
   @Input() uiHref: string;
+  @Input() uiTarget: '_blank' | '_self' | '_parent' | '_top' | string = '_self';
   @Input() uiQueryParams: Params = null;
 
   roundedButtonTypes: UiLinkButtonType[] = [