Add ability to delete the dataset.

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<DeleteDatasetMutation | null | undefined> {
+        return this.deleteDatasetGQL
+            .mutate({
+                datasetId,
+            })
+            .pipe(
+                first(),
+                map((result: MutationResult<DeleteDatasetMutation>) => {
+                    return result.data;
+                }),
+            );
+    }
 }

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 {

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();
+  });
+});

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<void> {
+        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",
+                            }),
+                        );
+                    }
+                }
+            }),
+        );
+    }
+}

src/app/dataset-view/additional-components/settings-component/settings.component.html

@@ -38,24 +38,31 @@
     <div class="content-container">
         <h2>General</h2>
         <mat-divider class="mt-1 w-75 mb-2"></mat-divider>
-        <dl class="form-group d-inline-block mt-3">
-            <dt class="input-label mb-2">
-                <label for="rename-field">Dataset name</label>
-            </dt>
-            <dd>
-                <input type="text" name="new_name" class="form-control" id="rename-field" maxlength="100" />
-            </dd>
-        </dl>
-        <button class="ms-4 rename-btn" type="button">Rename</button>
-
+        <form [formGroup]="renameDatasetForm">
+            <dl class="form-group d-inline-block mt-3">
+                <dt class="input-label mb-2">
+                    <label for="rename-field">Dataset name</label>
+                </dt>
+                <dd>
+                    <input
+                        formControlName="datasetName"
+                        type="text"
+                        name="new_name"
+                        class="form-control"
+                        id="rename-field"
+                    />
+                </dd>
+            </dl>
+            <button class="ms-4 rename-btn" type="button">Rename</button>
+        </form>
         <div class="mt-4">
             <h2>Danger Zone</h2>
             <div class="danger-zone__content d-flex justify-content-between align-items-center w-75 mt-2">
                 <div class="danger-zone__description">
                     <p class="description">Delete this dataset</p>
                     <p class="hint mt-2">Once you delete a dataset, there is no going back. Please be certain.</p>
                 </div>
-                <button type="button">Delete this dataset</button>
+                <button type="button" (click)="deleteDataset()">Delete this dataset</button>
             </div>
         </div>
     </div>

src/app/dataset-view/additional-components/settings-component/settings.component.ts

@@ -1,10 +1,52 @@
-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",
     templateUrl: "./settings.component.html",
     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());
+                    }
+                },
+            }),
+        );
+    }
+}

src/app/dataset-view/dataset.component.html

@@ -50,7 +50,7 @@
                 ></app-metadata>
             </ng-template>
             <ng-template [ngIf]="isDatasetViewTypeSettings">
-                <app-settings-tab></app-settings-tab>
+                <app-settings-tab [datasetBasics]="datasetBasics"></app-settings-tab>
             </ng-template>
         </div>
     </div>