[SM-470] fix SM edit secret spinner (#4958)

This commit is contained in:
Will Martin 2023-03-09 13:43:47 -05:00 committed by GitHub
parent 5caabd7157
commit 2b4a8705da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 34 deletions

View File

@ -1,38 +1,39 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="default">
<ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
<div bitDialogContent>
<div *ngIf="loading" class="tw-text-center">
<div bitDialogContent class="tw-relative">
<div
*ngIf="showSpinner"
class="tw-absolute tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-background-alt"
>
<i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
</div>
<ng-container *ngIf="!loading">
<div class="tw-flex tw-gap-4 tw-pt-4">
<bit-form-field class="tw-w-1/3">
<bit-label for="secret-name">{{ "name" | i18n }}</bit-label>
<input formControlName="name" bitInput />
</bit-form-field>
<bit-form-field class="tw-w-full">
<bit-label>{{ "value" | i18n }}</bit-label>
<textarea bitInput rows="4" formControlName="value"></textarea>
</bit-form-field>
</div>
<bit-form-field>
<bit-label>{{ "notes" | i18n }}</bit-label>
<textarea bitInput rows="4" formControlName="notes"></textarea>
<div class="tw-flex tw-gap-4 tw-pt-4">
<bit-form-field class="tw-w-1/3">
<bit-label for="secret-name">{{ "name" | i18n }}</bit-label>
<input formControlName="name" bitInput />
</bit-form-field>
<hr />
<bit-form-field class="tw-mt-3 tw-mb-0">
<bit-label>{{ "project" | i18n }}</bit-label>
<select bitInput name="project" formControlName="project">
<option value="">{{ "selectPlaceholder" | i18n }}</option>
<option *ngFor="let f of projects" [value]="f.id">
{{ f.name }}
</option>
</select>
<bit-form-field class="tw-w-full">
<bit-label>{{ "value" | i18n }}</bit-label>
<textarea bitInput rows="4" formControlName="value"></textarea>
</bit-form-field>
</ng-container>
</div>
<bit-form-field>
<bit-label>{{ "notes" | i18n }}</bit-label>
<textarea bitInput rows="4" formControlName="notes"></textarea>
</bit-form-field>
<hr />
<bit-form-field class="tw-mt-3 tw-mb-0">
<bit-label>{{ "project" | i18n }}</bit-label>
<select bitInput name="project" formControlName="project">
<option value="">{{ "selectPlaceholder" | i18n }}</option>
<option *ngFor="let f of projects" [value]="f.id">
{{ f.name }}
</option>
</select>
</bit-form-field>
</div>
<div bitDialogFooter class="tw-flex tw-gap-2">
<button type="submit" bitButton buttonType="primary" bitFormButton>

View File

@ -40,7 +40,7 @@ export class SecretDialogComponent implements OnInit {
project: new FormControl("", [Validators.required]),
});
protected loading = false;
private loading = true;
projects: ProjectListView[];
private destroy$ = new Subject<void>();
@ -55,10 +55,6 @@ export class SecretDialogComponent implements OnInit {
) {}
async ngOnInit() {
this.projects = await this.projectService
.getProjects(this.data.organizationId)
.then((projects) => projects.sort((a, b) => a.name.localeCompare(b.name)));
if (this.data.operation === OperationType.Edit && this.data.secretId) {
await this.loadData();
} else if (this.data.operation !== OperationType.Add) {
@ -69,10 +65,14 @@ export class SecretDialogComponent implements OnInit {
if (this.data.projectId) {
this.formGroup.get("project").setValue(this.data.projectId);
}
this.projects = await this.projectService
.getProjects(this.data.organizationId)
.then((projects) => projects.sort((a, b) => a.name.localeCompare(b.name)));
}
async loadData() {
this.loading = true;
this.formGroup.disable();
const secret: SecretView = await this.secretService.getBySecretId(this.data.secretId);
this.formGroup.setValue({
name: secret.name,
@ -81,6 +81,7 @@ export class SecretDialogComponent implements OnInit {
project: secret.projects[0]?.id ?? "",
});
this.loading = false;
this.formGroup.enable();
}
ngOnDestroy(): void {
@ -92,6 +93,10 @@ export class SecretDialogComponent implements OnInit {
return this.data.operation === OperationType.Add ? "newSecret" : "editSecret";
}
get showSpinner() {
return this.data.operation === OperationType.Edit && this.loading;
}
submit = async () => {
this.formGroup.markAllAsTouched();