vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

migrate policy edit component (#8914)

This commit is contained in:
vinith-kovan 2024-05-22 18:50:06 +05:30 committed by GitHub
parent ca62f0cfa3
commit a5bfff891b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 88 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/src/app/admin-console/organizations/policies/policies.component.ts
View File

@ -1,18 +1,19 @@
import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { ActivatedRoute } from "@angular/router";
import { lastValueFrom } from "rxjs";
import { first } from "rxjs/operators";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
import { DialogService } from "@bitwarden/components";
import { PolicyListService } from "../../core/policy-list.service";
import { BasePolicy } from "../policies";
import { PolicyEditComponent } from "./policy-edit.component";
import { PolicyEditComponent, PolicyEditDialogResult } from "./policy-edit.component";
@Component({
selector: "app-org-policies",
@ -33,11 +34,10 @@ export class PoliciesComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private modalService: ModalService,
private organizationService: OrganizationService,
private policyApiService: PolicyApiServiceAbstraction,
private policyListService: PolicyListService,
private router: Router,
private dialogService: DialogService,
) {}
async ngOnInit() {
@ -83,21 +83,17 @@ export class PoliciesComponent implements OnInit {
}
async edit(policy: BasePolicy) {
const [modal] = await this.modalService.openViewRef(
PolicyEditComponent,
this.editModalRef,
(comp) => {
comp.policy = policy;
comp.organizationId = this.organizationId;
comp.policiesEnabledMap = this.policiesEnabledMap;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onSavedPolicy.subscribe(() => {
modal.close();
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.load();
});
const dialogRef = PolicyEditComponent.open(this.dialogService, {
data: {
policy: policy,
organizationId: this.organizationId,
policiesEnabledMap: this.policiesEnabledMap,
},
);
});
const result = await lastValueFrom(dialogRef.closed);
if (result === PolicyEditDialogResult.Saved) {
await this.load();
}
}
}

53
apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html
View File

@ -1,49 +1,28 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form
class="modal-content"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="modal-header">
<h1 class="modal-title" id="policiesEditTitle">
{{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<form [formGroup]="formGroup" [bitSubmit]="submit" [appApiAction]="formPromise">
<bit-dialog [loading]="loading">
<span bitDialogTitle>{{ "editPolicy" | i18n }} - {{ policy.name | i18n }}</span>
<div class="modal-body">
<div class="modal-body" *ngIf="loading">
<ng-container bitDialogContent>
<div *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div>
<div [hidden]="loading">
<p>{{ policy.description | i18n }}</p>
<p bitTypography="body1">{{ policy.description | i18n }}</p>
<ng-template #policyForm></ng-template>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" bitFormButton type="submit">
{{ "save" | i18n }}
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
<button bitButton buttonType="secondary" bitDialogClose type="button">
{{ "cancel" | i18n }}
</button>
</div>
</form>
</div>
</div>
</ng-container>
</bit-dialog>
</form>

73
apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
View File

@ -1,33 +1,34 @@
import {
ChangeDetectorRef,
Component,
EventEmitter,
Input,
Output,
ViewChild,
ViewContainerRef,
} from "@angular/core";
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { ChangeDetectorRef, Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { DialogService } from "@bitwarden/components";
import { BasePolicy, BasePolicyComponent } from "../policies";
export type PolicyEditDialogData = {
/** Returns policy abstracts. */
policy: BasePolicy;
/** Returns a unique organization id */
organizationId: string;
/** A map indicating whether each policy type is enabled or disabled. */
policiesEnabledMap: Map<PolicyType, boolean>;
};
export enum PolicyEditDialogResult {
Saved = "saved",
}
@Component({
selector: "app-policy-edit",
templateUrl: "policy-edit.component.html",
})
export class PolicyEditComponent {
@Input() policy: BasePolicy;
@Input() organizationId: string;
@Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
@Output() onSavedPolicy = new EventEmitter();
@ViewChild("policyForm", { read: ViewContainerRef, static: true })
policyFormRef: ViewContainerRef;
@ -39,22 +40,29 @@ export class PolicyEditComponent {
policyComponent: BasePolicyComponent;
private policyResponse: PolicyResponse;
formGroup = this.formBuilder.group({
enabled: [this.enabled],
});
constructor(
@Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
private policyApiService: PolicyApiServiceAbstraction,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private cdr: ChangeDetectorRef,
private logService: LogService,
private formBuilder: FormBuilder,
private dialogRef: DialogRef<PolicyEditDialogResult>,
) {}
get policy(): BasePolicy {
return this.data.policy;
}
async ngAfterViewInit() {
await this.load();
this.loading = false;
this.policyComponent = this.policyFormRef.createComponent(this.policy.component)
this.policyComponent = this.policyFormRef.createComponent(this.data.policy.component)
.instance as BasePolicyComponent;
this.policyComponent.policy = this.policy;
this.policyComponent.policy = this.data.policy;
this.policyComponent.policyResponse = this.policyResponse;
this.cdr.detectChanges();
@ -63,8 +71,8 @@ export class PolicyEditComponent {
async load() {
try {
this.policyResponse = await this.policyApiService.getPolicy(
this.organizationId,
this.policy.type,
this.data.organizationId,
this.data.policy.type,
);
} catch (e) {
if (e.statusCode === 404) {
@ -75,30 +83,29 @@ export class PolicyEditComponent {
}
}
async submit() {
submit = async () => {
let request: PolicyRequest;
try {
request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
request = await this.policyComponent.buildRequest(this.data.policiesEnabledMap);
} catch (e) {
this.platformUtilsService.showToast("error", null, e.message);
return;
}
try {
this.formPromise = this.policyApiService.putPolicy(
this.organizationId,
this.policy.type,
this.data.organizationId,
this.data.policy.type,
request,
);
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("editedPolicyId", this.i18nService.t(this.policy.name)),
this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
);
this.onSavedPolicy.emit();
} catch (e) {
this.logService.error(e);
}
}
this.dialogRef.close(PolicyEditDialogResult.Saved);
};
static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
return dialogService.open<PolicyEditDialogResult>(PolicyEditComponent, config);
};
}