[SM-383] add create access token button (#4547)

* rebase to master; add create access token button

* add static method to access-tokens component

bitwarden_license/bit-web/src/app/secrets-manager/layout/no-items.component.html

@@ -4,13 +4,13 @@
   <div class="tw-max-w-sm">
     <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
     <h3 class="tw-font-semibold">
-      <ng-content select="[title]"></ng-content>
+      <ng-content select="[slot=title]"></ng-content>
     </h3>
     <p>
-      <ng-content select="[description]"></ng-content>
+      <ng-content select="[slot=description]"></ng-content>
     </p>
   </div>
   <div class="tw-space-x-2">
-    <ng-content select="[bitButton]"></ng-content>
+    <ng-content select="[slot=button]"></ng-content>
   </div>
 </div>

bitwarden_license/bit-web/src/app/secrets-manager/projects/projects-list/projects-list.component.html

@@ -3,9 +3,9 @@
 </div>
 
 <sm-no-items *ngIf="projects?.length == 0">
-  <ng-container title>{{ "projectsNoItemsTitle" | i18n }}</ng-container>
-  <ng-container description>{{ "projectsNoItemsMessage" | i18n }}</ng-container>
-  <button bitButton buttonType="secondary" (click)="newProjectEvent.emit()">
+  <ng-container slot="title">{{ "projectsNoItemsTitle" | i18n }}</ng-container>
+  <ng-container slot="description">{{ "projectsNoItemsMessage" | i18n }}</ng-container>
+  <button slot="button" bitButton buttonType="secondary" (click)="newProjectEvent.emit()">
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newProject" | i18n }}
   </button>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html

@@ -3,9 +3,9 @@
 </div>
 
 <sm-no-items *ngIf="tokens?.length == 0">
-  <ng-container title>{{ "accessTokensNoItemsTitle" | i18n }}</ng-container>
-  <ng-container description>{{ "accessTokensNoItemsDesc" | i18n }}</ng-container>
-  <button bitButton buttonType="secondary" (click)="newAccessTokenEvent.emit()">
+  <ng-container slot="title">{{ "accessTokensNoItemsTitle" | i18n }}</ng-container>
+  <ng-container slot="description">{{ "accessTokensNoItemsDesc" | i18n }}</ng-container>
+  <button slot="button" bitButton buttonType="secondary" (click)="newAccessTokenEvent.emit()">
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "createAccessToken" | i18n }}
   </button>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-tokens.component.ts

@@ -4,14 +4,10 @@ import { combineLatestWith, Observable, startWith, switchMap } from "rxjs";
 
 import { DialogService } from "@bitwarden/components";
 
-import { ServiceAccountView } from "../../models/view/service-account.view";
 import { AccessTokenView } from "../models/view/access-token.view";
 
 import { AccessService } from "./access.service";
-import {
-  AccessTokenOperation,
-  AccessTokenCreateDialogComponent,
-} from "./dialogs/access-token-create-dialog.component";
+import { AccessTokenCreateDialogComponent } from "./dialogs/access-token-create-dialog.component";
 
 @Component({
   selector: "sm-access-tokens",
@@ -45,17 +41,11 @@ export class AccessTokenComponent implements OnInit {
     return await this.accessService.getAccessTokens(this.organizationId, this.serviceAccountId);
   }
 
-  async openNewAccessTokenDialog() {
-    // TODO once service account names are implemented in service account contents page pass in here.
-    const serviceAccountView = new ServiceAccountView();
-    serviceAccountView.id = this.serviceAccountId;
-    serviceAccountView.name = "placeholder";
-
-    this.dialogService.open<unknown, AccessTokenOperation>(AccessTokenCreateDialogComponent, {
-      data: {
-        organizationId: this.organizationId,
-        serviceAccountView: serviceAccountView,
-      },
-    });
+  protected openNewAccessTokenDialog() {
+    AccessTokenCreateDialogComponent.openNewAccessTokenDialog(
+      this.dialogService,
+      this.serviceAccountId,
+      this.organizationId
+    );
   }
 }

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/dialogs/access-token-create-dialog.component.ts

@@ -82,4 +82,22 @@ export class AccessTokenCreateDialogComponent implements OnInit {
       },
     });
   }
+
+  static openNewAccessTokenDialog(
+    dialogService: DialogService,
+    serviceAccountId: string,
+    organizationId: string
+  ) {
+    // TODO once service account names are implemented in service account contents page pass in here.
+    const serviceAccountView = new ServiceAccountView();
+    serviceAccountView.id = serviceAccountId;
+    serviceAccountView.name = "placeholder";
+
+    return dialogService.open<unknown, AccessTokenOperation>(AccessTokenCreateDialogComponent, {
+      data: {
+        organizationId: organizationId,
+        serviceAccountView: serviceAccountView,
+      },
+    });
+  }
 }

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-account.component.html

@@ -14,5 +14,9 @@
     <bit-tab-link [route]="['people']">{{ "people" | i18n }}</bit-tab-link>
     <bit-tab-link [route]="['access']">{{ "accessTokens" | i18n }}</bit-tab-link>
   </bit-tab-nav-bar>
+  <button slot="secondary" bitButton buttonType="secondary" (click)="openNewAccessTokenDialog()">
+    <i class="bwi bwi-plus" aria-hidden="true"></i>
+    {{ "createAccessToken" | i18n }}
+  </button>
 </sm-header>
 <router-outlet></router-outlet>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-account.component.ts

@@ -2,6 +2,9 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { switchMap } from "rxjs";
 
+import { DialogService } from "@bitwarden/components";
+
+import { AccessTokenCreateDialogComponent } from "./access/dialogs/access-token-create-dialog.component";
 import { ServiceAccountService } from "./service-account.service";
 
 @Component({
@@ -9,19 +12,34 @@ import { ServiceAccountService } from "./service-account.service";
   templateUrl: "./service-account.component.html",
 })
 export class ServiceAccountComponent {
+  private organizationId: string;
+  private serviceAccountId: string;
+
   /**
    * TODO: remove when a server method is available that fetches a service account by ID
    */
   protected serviceAccount$ = this.route.params.pipe(
-    switchMap((params) =>
-      this.serviceAccountService
+    switchMap((params) => {
+      this.serviceAccountId = params.serviceAccountId;
+      this.organizationId = params.organizationId;
+
+      return this.serviceAccountService
         .getServiceAccounts(params.organizationId)
-        .then((saList) => saList.find((sa) => sa.id === params.serviceAccountId))
-    )
+        .then((saList) => saList.find((sa) => sa.id === params.serviceAccountId));
+    })
   );
 
   constructor(
     private route: ActivatedRoute,
-    private serviceAccountService: ServiceAccountService
+    private serviceAccountService: ServiceAccountService,
+    private dialogService: DialogService
   ) {}
+
+  protected openNewAccessTokenDialog() {
+    AccessTokenCreateDialogComponent.openNewAccessTokenDialog(
+      this.dialogService,
+      this.serviceAccountId,
+      this.organizationId
+    );
+  }
 }

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -3,9 +3,9 @@
 </div>
 
 <sm-no-items *ngIf="secrets?.length == 0">
-  <ng-container title>{{ "secretsNoItemsTitle" | i18n }}</ng-container>
-  <ng-container description>{{ "secretsNoItemsMessage" | i18n }}</ng-container>
-  <button bitButton buttonType="secondary" (click)="newSecretEvent.emit()">
+  <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
+  <ng-container slot="description">{{ "secretsNoItemsMessage" | i18n }}</ng-container>
+  <button slot="button" bitButton buttonType="secondary" (click)="newSecretEvent.emit()">
     <i class="bwi bwi-plus" aria-hidden="true"></i>
     {{ "newSecret" | i18n }}
   </button>