[SM-474] Service Account - People Tab (#4689)

* Init service layer changes

* refactor service to inherit abstract

* refactor access-selector component

* update access selector in projects

* add service accounts access selector

* update i18n

* fix delete action; use useExisting in providers

* update static permissions

* service account people should be readwrite on creation

* use setter instead of observable input

* remove warning callout

* remove abstract service

* truncate name in table

* remove extra comments

* use map instead of forEach

* refactor view factories

* update SA people copy

* map list responses

---------

Co-authored-by: William Martin <contact@willmartian.com>

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-people.component.ts

@@ -1,7 +1,106 @@
-import { Component } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { map, Observable, startWith, Subject, switchMap, takeUntil } from "rxjs";
+
+import { SelectItemView } from "@bitwarden/components";
+
+import {
+  GroupProjectAccessPolicyView,
+  ProjectAccessPoliciesView,
+  UserProjectAccessPolicyView,
+} from "../../models/view/access-policy.view";
+import { AccessPolicyService } from "../../shared/access-policies/access-policy.service";
+import {
+  AccessSelectorComponent,
+  AccessSelectorRowView,
+} from "../../shared/access-policies/access-selector.component";
 
 @Component({
   selector: "sm-project-people",
   templateUrl: "./project-people.component.html",
 })
-export class ProjectPeopleComponent {}
+export class ProjectPeopleComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  private organizationId: string;
+  private projectId: string;
+
+  protected rows$: Observable<AccessSelectorRowView[]> =
+    this.accessPolicyService.projectAccessPolicyChanges$.pipe(
+      startWith(null),
+      switchMap(() =>
+        this.accessPolicyService.getProjectAccessPolicies(this.organizationId, this.projectId)
+      ),
+      map((policies) => {
+        const rows: AccessSelectorRowView[] = [];
+        policies.userAccessPolicies.forEach((policy) => {
+          rows.push({
+            type: "user",
+            name: policy.organizationUserName,
+            granteeId: policy.organizationUserId,
+            accessPolicyId: policy.id,
+            read: policy.read,
+            write: policy.write,
+            icon: AccessSelectorComponent.userIcon,
+          });
+        });
+
+        policies.groupAccessPolicies.forEach((policy) => {
+          rows.push({
+            type: "group",
+            name: policy.groupName,
+            granteeId: policy.groupId,
+            accessPolicyId: policy.id,
+            read: policy.read,
+            write: policy.write,
+            icon: AccessSelectorComponent.groupIcon,
+          });
+        });
+        return rows;
+      })
+    );
+
+  protected handleCreateAccessPolicies(selected: SelectItemView[]) {
+    const projectAccessPoliciesView = new ProjectAccessPoliciesView();
+    projectAccessPoliciesView.userAccessPolicies = selected
+      .filter((selection) => AccessSelectorComponent.getAccessItemType(selection) === "user")
+      .map((filtered) => {
+        const view = new UserProjectAccessPolicyView();
+        view.grantedProjectId = this.projectId;
+        view.organizationUserId = filtered.id;
+        view.read = true;
+        view.write = false;
+        return view;
+      });
+
+    projectAccessPoliciesView.groupAccessPolicies = selected
+      .filter((selection) => AccessSelectorComponent.getAccessItemType(selection) === "group")
+      .map((filtered) => {
+        const view = new GroupProjectAccessPolicyView();
+        view.grantedProjectId = this.projectId;
+        view.groupId = filtered.id;
+        view.read = true;
+        view.write = false;
+        return view;
+      });
+
+    return this.accessPolicyService.createProjectAccessPolicies(
+      this.organizationId,
+      this.projectId,
+      projectAccessPoliciesView
+    );
+  }
+
+  constructor(private route: ActivatedRoute, private accessPolicyService: AccessPolicyService) {}
+
+  ngOnInit(): void {
+    this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
+      this.organizationId = params.organizationId;
+      this.projectId = params.projectId;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}