From c1bdfec9edb0a54c32704b896371fbf7c3fd3afc Mon Sep 17 00:00:00 2001 From: Dmitriy Borzenko Date: Wed, 16 Aug 2023 20:15:47 +0300 Subject: [PATCH] Add ability to delete the dataset. --- src/app/api/dataset.api.ts | 16 +++++++ .../modal/modal-dialog.component.ts | 4 +- .../services/dataset-settings.service.spec.ts | 16 +++++++ .../services/dataset-settings.service.ts | 40 ++++++++++++++++ .../settings.component.html | 29 +++++++----- .../settings-component/settings.component.ts | 46 ++++++++++++++++++- src/app/dataset-view/dataset.component.html | 2 +- 7 files changed, 137 insertions(+), 16 deletions(-) create mode 100644 src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.spec.ts create mode 100644 src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.ts diff --git a/src/app/api/dataset.api.ts b/src/app/api/dataset.api.ts index d72a8b9ae..086c0c8b3 100644 --- a/src/app/api/dataset.api.ts +++ b/src/app/api/dataset.api.ts @@ -7,6 +7,8 @@ import { DatasetByAccountAndDatasetNameGQL, DatasetByAccountAndDatasetNameQuery, DatasetKind, + DeleteDatasetGQL, + DeleteDatasetMutation, GetDatasetSchemaGQL, GetDatasetSchemaQuery, UpdateReadmeGQL, @@ -51,6 +53,7 @@ export class DatasetApi { private commitEventToDatasetGQL: CommitEventToDatasetGQL, private datasetSchemaGQL: GetDatasetSchemaGQL, private updateReadmeGQL: UpdateReadmeGQL, + private deleteDatasetGQL: DeleteDatasetGQL, ) {} public getDatasetMainData(params: { @@ -238,4 +241,17 @@ export class DatasetApi { }), ); } + + public deleteDataset(datasetId: string): Observable { + return this.deleteDatasetGQL + .mutate({ + datasetId, + }) + .pipe( + first(), + map((result: MutationResult) => { + return result.data; + }), + ); + } } diff --git a/src/app/components/modal/modal-dialog.component.ts b/src/app/components/modal/modal-dialog.component.ts index 1d92207e7..cd6a78957 100755 --- a/src/app/components/modal/modal-dialog.component.ts +++ b/src/app/components/modal/modal-dialog.component.ts @@ -90,9 +90,9 @@ export class ModalDialogComponent extends DynamicComponent { } } - computeWidth(): number { + computeWidth(): string { const buttonsCount = this.getContextButtonsCount(); - return buttonsCount ? 100 / buttonsCount : 100; + return `${100 / buttonsCount}%`; } private getContextButtonsCount(): number { diff --git a/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.spec.ts b/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.spec.ts new file mode 100644 index 000000000..1d4e60599 --- /dev/null +++ b/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DatasetSettingsService } from './dataset-settings.service'; + +describe('DatasetSettingsService', () => { + let service: DatasetSettingsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DatasetSettingsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.ts b/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.ts new file mode 100644 index 000000000..8af96b8ed --- /dev/null +++ b/src/app/dataset-view/additional-components/settings-component/services/dataset-settings.service.ts @@ -0,0 +1,40 @@ +import { Observable } from "rxjs"; +import { NavigationService } from "src/app/services/navigation.service"; +import { Injectable } from "@angular/core"; +import { DatasetApi } from "src/app/api/dataset.api"; +import { map } from "rxjs/operators"; +import { DeleteDatasetMutation } from "src/app/api/kamu.graphql.interface"; +import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface"; +import { promiseWithCatch } from "src/app/common/app.helpers"; +import { ModalService } from "src/app/components/modal/modal.service"; + +@Injectable({ + providedIn: "root", +}) +export class DatasetSettingsService { + constructor( + private datasetApi: DatasetApi, + private navigationService: NavigationService, + private modalService: ModalService, + ) {} + + public deleteDataset(datasetId: string): Observable { + return this.datasetApi.deleteDataset(datasetId).pipe( + map((data: DeleteDatasetMutation | undefined | null) => { + if (data?.datasets.byId?.delete.__typename === "DeleteResultSuccess") { + this.navigationService.navigateToSearch(); + } else { + if (data) { + promiseWithCatch( + this.modalService.error({ + title: "Can't delete", + message: data.datasets.byId?.delete.message, + yesButtonText: "Ok", + }), + ); + } + } + }), + ); + } +} diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.html b/src/app/dataset-view/additional-components/settings-component/settings.component.html index 786a58c48..2bd26e430 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.html +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.html @@ -38,16 +38,23 @@

General

-
-
- -
-
- -
-
- - +
+
+
+ +
+
+ +
+
+ +

Danger Zone

@@ -55,7 +62,7 @@

Danger Zone

Delete this dataset

Once you delete a dataset, there is no going back. Please be certain.

- +
diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.ts b/src/app/dataset-view/additional-components/settings-component/settings.component.ts index 694e1d13d..8fb7822b8 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.ts +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.ts @@ -1,5 +1,10 @@ -import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { DatasetSettingsService } from "./services/dataset-settings.service"; +import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core"; +import { DatasetBasicsFragment, Organization } from "src/app/api/kamu.graphql.interface"; +import { promiseWithCatch } from "src/app/common/app.helpers"; import { BaseComponent } from "src/app/common/base.component"; +import { ModalService } from "src/app/components/modal/modal.service"; @Component({ selector: "app-settings-tab", @@ -7,4 +12,41 @@ import { BaseComponent } from "src/app/common/base.component"; styleUrls: ["./settings.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class SettingsTabComponent extends BaseComponent {} +export class SettingsTabComponent extends BaseComponent implements OnInit { + @Input() public datasetBasics?: DatasetBasicsFragment; + public renameDatasetForm: FormGroup; + constructor( + private fb: FormBuilder, + private datasetSettingsService: DatasetSettingsService, + private modalService: ModalService, + ) { + super(); + } + + ngOnInit(): void { + this.renameDatasetForm = this.fb.group({ + datasetName: [ + this.datasetBasics?.name, + // eslint-disable-next-line @typescript-eslint/unbound-method + [Validators.required, Validators.pattern(/^([a-zA-Z0-9][a-zA-Z0-9-]*)+(\.[a-zA-Z0-9][a-zA-Z0-9-]*)*$/)], + ], + }); + } + + public deleteDataset(): void { + promiseWithCatch( + this.modalService.error({ + title: "Delete", + message: "Do you want to delete dataset?", + yesButtonText: "Ok", + noButtonText: "Cancel", + handler: (ok) => { + if (ok) { + const datasetId = this.datasetBasics?.id as string; + this.trackSubscription(this.datasetSettingsService.deleteDataset(datasetId).subscribe()); + } + }, + }), + ); + } +} diff --git a/src/app/dataset-view/dataset.component.html b/src/app/dataset-view/dataset.component.html index 2f5f39849..123b2d528 100644 --- a/src/app/dataset-view/dataset.component.html +++ b/src/app/dataset-view/dataset.component.html @@ -50,7 +50,7 @@ > - +