Add ability to rename daataset.

kamu-data · Aug 16, 2023 · a9dd115 · a9dd115
1 parent 0bc3b0b
commit a9dd115
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 7 deletions.
diff --git a/src/app/api/dataset.api.ts b/src/app/api/dataset.api.ts
@@ -11,6 +11,8 @@ import {
     DeleteDatasetMutation,
     GetDatasetSchemaGQL,
     GetDatasetSchemaQuery,
+    RenameDatasetGQL,
+    RenameDatasetMutation,
     UpdateReadmeGQL,
     UpdateReadmeMutation,
 } from "src/app/api/kamu.graphql.interface";
@@ -54,6 +56,7 @@ export class DatasetApi {
         private datasetSchemaGQL: GetDatasetSchemaGQL,
         private updateReadmeGQL: UpdateReadmeGQL,
         private deleteDatasetGQL: DeleteDatasetGQL,
+        private renameDatasetGQL: RenameDatasetGQL,
     ) {}
 
     public getDatasetMainData(params: {
@@ -254,4 +257,18 @@ export class DatasetApi {
                 }),
             );
     }
+
+    public renameDataset(datasetId: string, newName: string): Observable<RenameDatasetMutation | null | undefined> {
+        return this.renameDatasetGQL
+            .mutate({
+                datasetId,
+                newName,
+            })
+            .pipe(
+                first(),
+                map((result: MutationResult<RenameDatasetMutation>) => {
+                    return result.data;
+                }),
+            );
+    }
 }
diff --git a/...ataset-view/additional-components/settings-component/services/dataset-settings.service.ts b/...ataset-view/additional-components/settings-component/services/dataset-settings.service.ts
@@ -3,10 +3,11 @@ 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 { DeleteDatasetMutation, RenameDatasetMutation } 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";
+import { DatasetService } from "src/app/dataset-view/dataset.service";
 
 @Injectable({
     providedIn: "root",
@@ -16,6 +17,7 @@ export class DatasetSettingsService {
         private datasetApi: DatasetApi,
         private navigationService: NavigationService,
         private modalService: ModalService,
+        private datasetService: DatasetService,
     ) {}
 
     public deleteDataset(datasetId: string): Observable<void> {
@@ -37,4 +39,35 @@ export class DatasetSettingsService {
             }),
         );
     }
+
+    public renameDataset(accountName: string, datasetId: string, newName: string): Observable<void> {
+        return this.datasetApi.renameDataset(datasetId, newName).pipe(
+            map((data: RenameDatasetMutation | undefined | null) => {
+                console.log("data", data);
+                if (data?.datasets.byId?.rename.__typename === "RenameResultSuccess") {
+                    this.datasetService
+                        .requestDatasetMainData({
+                            accountName,
+                            datasetName: newName,
+                        })
+                        .subscribe();
+                    this.navigationService.navigateToDatasetView({
+                        accountName,
+                        datasetName: newName,
+                        tab: DatasetViewTypeEnum.Overview,
+                    });
+                } else {
+                    if (data) {
+                        promiseWithCatch(
+                            this.modalService.error({
+                                title: "Can't rename dataset",
+                                message: data.datasets.byId?.rename.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
@@ -53,7 +53,18 @@ <h2>General</h2>
                     />
                 </dd>
             </dl>
-            <button class="ms-4 rename-btn" type="button">Rename</button>
+            <button
+                class="ms-4 rename-btn"
+                type="button"
+                (click)="renameDataset()"
+                [disabled]="!renameDatasetForm.valid"
+            >
+                Rename
+            </button>
+            <div *ngIf="datasetName?.invalid && (datasetName?.touched || datasetName?.dirty)">
+                <span *ngIf="datasetName?.errors?.['required']" class="text-danger fs-12">Name is required</span>
+                <span *ngIf="datasetName?.errors?.['pattern']" class="text-danger fs-12">Invalid dataset name</span>
+            </div>
         </form>
         <div class="mt-4">
             <h2>Danger Zone</h2>

diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.sass b/src/app/dataset-view/additional-components/settings-component/settings.component.sass
@@ -10,6 +10,8 @@ p
     h2
         font-weight: 400
         margin: 0
+    dl
+        margin: 0
 
 .p-responsive
     padding-left: 16px

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
@@ -1,6 +1,6 @@
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { DatasetSettingsService } from "./services/dataset-settings.service";
-import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
 import { DatasetBasicsFragment } from "src/app/api/kamu.graphql.interface";
 import { promiseWithCatch } from "src/app/common/app.helpers";
 import { BaseComponent } from "src/app/common/base.component";
@@ -12,7 +12,7 @@ import { ModalService } from "src/app/components/modal/modal.service";
     styleUrls: ["./settings.component.sass"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SettingsTabComponent extends BaseComponent implements OnInit {
+export class SettingsTabComponent extends BaseComponent {
     @Input() public datasetBasics?: DatasetBasicsFragment;
     public renameDatasetForm: FormGroup;
 
@@ -31,15 +31,25 @@ export class SettingsTabComponent extends BaseComponent implements OnInit {
         });
     }
 
-    ngOnInit(): void {
-        console.log("yes");
+    public get datasetName() {
+        return this.renameDatasetForm.get("datasetName");
+    }
+
+    public renameDataset(): void {
+        const datasetId = this.datasetBasics?.id as string;
+        const accountName = this.getDatasetInfoFromUrl().accountName;
+        this.trackSubscription(
+            this.datasetSettingsService
+                .renameDataset(accountName, datasetId, this.datasetName?.value as string)
+                .subscribe(),
+        );
     }
 
     public deleteDataset(): void {
         promiseWithCatch(
             this.modalService.error({
                 title: "Delete",
-                message: "Do you want to delete dataset?",
+                message: "Do you want to delete a dataset?",
                 yesButtonText: "Ok",
                 noButtonText: "Cancel",
                 handler: (ok) => {