diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html index 3c2a0316170..f50dcbd0a63 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html @@ -74,47 +74,6 @@

Dataset: {{datasetName}}

nzTheme="outline"> {{ formatCount(likeCount) }} - - - - -
-
Quick Settings
-
- Visibility: - -
-
- Downloadable: - -
-
- Dataset: {{datasetName}}
+ [editable]="false" + [enableViewMore]="true">
- - - -
-
-

- - {{ currentDisplayedFileName }} + + + + + +
+
+

+ + {{ currentDisplayedFileName }} + + + + + + + {{ formatSize(currentFileSize) }} + +

+
+
- - - - - {{ formatSize(currentFileSize) }} - -

-
-
- - - - - -
-
- - - - - - - - -
- -
- -
- - -
-
Choose a Version:
-
- - - -
- -
+
-
+ nzType="compress"> + + +
- + nzType="right"> + + + +
- - - - - - - - - - + + - + + + + + +
+ +
+ +
+ - - -
- {{ fileName }} + nzHeader="Current Versions" + nzActive="true"> +
+
Choose a Version:
+
+ + +
- + +
+ + Version Size: {{ formatSize(currentDatasetVersionSize) }} +
+
+ + Created at: {{ selectedVersionCreationTime }} +
+ +
+ + + - - + + -
-
-
- {{ task.status }}: {{ task.filePath }} - +
+ + + + + + +
+
+
+ {{ task.status }}: {{ task.filePath }} + -
+ (click)="onClickAbortUploadProgress(task)"> + + +
-
- - - {{ formatSpeed(task.uploadSpeed) }} - - {{ formatTime(task.totalTime ?? 0) }} elapsed, - {{ formatTime(task.estimatedTimeRemaining ?? 0) }} left - +
+ + + {{ formatSpeed(task.uploadSpeed) }} - + {{ formatTime(task.totalTime ?? 0) }} elapsed, + {{ formatTime(task.estimatedTimeRemaining ?? 0) }} left + - - Upload time: {{ formatTime(task.totalTime ?? 0) }} - + + Upload time: {{ formatTime(task.totalTime ?? 0) }} + +
+
-
-
- + - + + + + + + + - + +
+
+ + +
+
+ +
+
+
+ + + + +
+ +

General

- - +
+
+ +

Lowercase letters, numbers and hyphens.

+
+
+ + +
+
-
-
- - -
-
- -
+ + +
+ +
Shown on cards and the Metadata tab.
+ + +
+ + + +

Access & visibility

+ +
+
+ +

+ {{ datasetIsPublic ? "Public — anyone can view this dataset." : "Private — only you and invited + collaborators can see this dataset." }} +

+
+
+ +
+
+ + + +
+
+ +

+ {{ datasetIsDownloadable ? "Viewers can download this dataset." : "Viewers can browse files but cannot + download them." }} +

+
+
+
- - +
+ + + +

Delete

+ +
+
+ +

This permanently deletes the dataset and all of its versions.

+
+
+ +
+
+
- - + + diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss index d5ef708f889..b5bbf7dfced 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss @@ -347,3 +347,80 @@ nz-select { border-radius: 8px; margin-right: 80px; } + +nz-tabs { + margin-top: 6px; +} + +::ng-deep .ant-tabs-nav { + padding-left: 16px; +} + +// The Settings tab shares the tab area's bounded height with the Data Card +// tab. Give its content its own scroll region (mirroring the height:100% + +// overflow-y:auto pattern used by other dashboard pages) so both cards can +// be scrolled fully into view, with bottom padding for breathing room below +// the last card. +.settings-tab-content { + height: 100%; + overflow-y: auto; + padding-bottom: 24px; +} + +.settings-general-card { + max-width: 700px; + margin: 24px auto 0; + border-radius: 16px; + border: 1px solid #d9d9d9; + + .settings-card-title { + font-weight: 600; + margin-bottom: 20px; + } + + .settings-field-label { + display: block; + font-weight: 600; + } + + .settings-field-hint { + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + margin-bottom: 8px; + } + + .settings-name-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + + .settings-name-label label { + font-weight: 600; + } + + .settings-hint { + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + margin: 4px 0 0; + } + + .settings-name-controls { + display: flex; + gap: 8px; + flex-shrink: 0; + + input { + border-radius: 8px; + } + + button { + border-radius: 8px; + } + } + } +} + +::ng-deep .settings-general-card button { + border-radius: 8px; +} diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.spec.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.spec.ts index 91d8acce94e..3b40c12d095 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.spec.ts +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.spec.ts @@ -18,7 +18,7 @@ */ import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { ActivatedRoute } from "@angular/router"; +import { ActivatedRoute, Router } from "@angular/router"; import { of, Subject, throwError } from "rxjs"; import { NzModalService } from "ng-zorro-antd/modal"; import { MarkdownService } from "ngx-markdown"; @@ -38,6 +38,7 @@ import { Dataset, DatasetVersion } from "../../../../../common/type/dataset"; import { DashboardDataset } from "../../../../type/dashboard-dataset.interface"; import { HttpErrorResponse } from "@angular/common/http"; import { format } from "date-fns"; +import { USER_DATASET } from "../../../../../app-routing.constant"; describe("DatasetDetailComponent upload queue", () => { let fixture: ComponentFixture; @@ -429,6 +430,8 @@ describe("DatasetDetailComponent behavior", () => { updateDatasetDownloadable: vi.fn(() => of({})), updateDatasetCoverImage: vi.fn(() => of({})), updateDatasetDescription: vi.fn(() => of({})), + updateDatasetName: vi.fn(() => of({})), + deleteDatasets: vi.fn(() => of({})), deleteDatasetFile: vi.fn(() => of({})), getDatasetDiff: vi.fn(() => of([])), multipartUpload: vi.fn(() => of()), @@ -1036,4 +1039,144 @@ describe("DatasetDetailComponent behavior", () => { expect(component.trackByTask(0, task)).toBe("owner/data/file.csv"); }); }); + + describe("onSaveDatasetName", () => { + it("seeds editedDatasetName from the loaded dataset name", () => { + datasetServiceStub.getDataset.mockReturnValue( + of(makeDashboardDataset({ dataset: makeDataset({ name: "seed-name" }) })) + ); + createComponent(); + component.did = 5; + component.retrieveDatasetInfo(); + + expect(component.editedDatasetName).toBe("seed-name"); + }); + + it("persists a valid name unchanged and toasts success", () => { + datasetServiceStub.updateDatasetName.mockReturnValue(of({})); + createComponent(); + component.did = 5; + // Mixed case, hyphen and underscore are all valid: the name must be saved + // verbatim, not rewritten. + component.editedDatasetName = "My-Cool_Dataset"; + + component.onSaveDatasetName(); + + expect(datasetServiceStub.updateDatasetName).toHaveBeenCalledWith(5, "My-Cool_Dataset"); + expect(component.datasetName).toBe("My-Cool_Dataset"); + expect(component.editedDatasetName).toBe("My-Cool_Dataset"); + expect(notificationServiceStub.success).toHaveBeenCalledWith("Dataset name updated to 'My-Cool_Dataset'"); + }); + + it("rejects an invalid name with a validation error and does not call the rename API", () => { + createComponent(); + component.did = 5; + component.datasetName = "original"; + component.editedDatasetName = "My Cool Dataset"; // spaces are not allowed + + component.onSaveDatasetName(); + + expect(datasetServiceStub.updateDatasetName).not.toHaveBeenCalled(); + expect(component.datasetName).toBe("original"); + expect(notificationServiceStub.error).toHaveBeenCalledWith( + "Invalid dataset name: only letters, numbers, underscores, and hyphens are allowed (max 128 characters)" + ); + }); + + it("toasts an error and leaves the name unchanged when the rename fails", () => { + datasetServiceStub.updateDatasetName.mockReturnValue(throwError(() => new Error("boom"))); + createComponent(); + component.did = 5; + component.datasetName = "original"; + component.editedDatasetName = "new-name"; + + component.onSaveDatasetName(); + + expect(component.datasetName).toBe("original"); + expect(notificationServiceStub.error).toHaveBeenCalledWith("boom"); + }); + + it("does nothing when there is no did", () => { + createComponent(); + component.did = undefined; + component.editedDatasetName = "whatever"; + + component.onSaveDatasetName(); + + expect(datasetServiceStub.updateDatasetName).not.toHaveBeenCalled(); + }); + }); + + describe("onDeleteDataset", () => { + it("deletes the dataset, toasts success and navigates back to the dataset list", () => { + datasetServiceStub.deleteDatasets.mockReturnValue(of({})); + createComponent(); + const navigateSpy = vi.spyOn(TestBed.inject(Router), "navigate").mockResolvedValue(true); + component.did = 5; + component.datasetName = "DS"; + + component.onDeleteDataset(); + + expect(datasetServiceStub.deleteDatasets).toHaveBeenCalledWith(5); + expect(notificationServiceStub.success).toHaveBeenCalledWith("Dataset DS was deleted"); + expect(navigateSpy).toHaveBeenCalledWith([USER_DATASET]); + }); + + it("toasts an error and does not navigate when the deletion fails", () => { + datasetServiceStub.deleteDatasets.mockReturnValue(throwError(() => new Error("boom"))); + createComponent(); + const navigateSpy = vi.spyOn(TestBed.inject(Router), "navigate").mockResolvedValue(true); + component.did = 5; + + component.onDeleteDataset(); + + expect(notificationServiceStub.error).toHaveBeenCalledWith("boom"); + expect(navigateSpy).not.toHaveBeenCalled(); + }); + + it("does nothing when there is no did", () => { + createComponent(); + const navigateSpy = vi.spyOn(TestBed.inject(Router), "navigate").mockResolvedValue(true); + component.did = undefined; + + component.onDeleteDataset(); + + expect(datasetServiceStub.deleteDatasets).not.toHaveBeenCalled(); + expect(navigateSpy).not.toHaveBeenCalled(); + }); + }); + + describe("delete button disabled state", () => { + // The Settings tab (and its Delete card) only render for WRITE access; the + // delete button itself is owner-only, mirroring the Downloadable switch's + // [nzDisabled]="!isOwner". Renders WRITE access with the given ownership, + // activates the (inactive) Settings tab so its pane is in the DOM, then + // returns the delete button element. + const renderDeleteButton = (isOwner: boolean): HTMLButtonElement => { + datasetServiceStub.getDataset.mockReturnValue(of(makeDashboardDataset({ accessPrivilege: "WRITE", isOwner }))); + createComponent(); + fixture.detectChanges(); + + const tabButtons: NodeListOf = fixture.nativeElement.querySelectorAll(".ant-tabs-tab-btn"); + const settingsTab = Array.from(tabButtons).find(tab => tab.textContent?.includes("Settings")); + settingsTab?.click(); + fixture.detectChanges(); + + return fixture.nativeElement.querySelector('button[title="Delete"]') as HTMLButtonElement; + }; + + it("disables the delete button for a non-owner with write access", () => { + const button = renderDeleteButton(false); + + expect(button).toBeTruthy(); + expect(button.disabled).toBe(true); + }); + + it("enables the delete button for the owner", () => { + const button = renderDeleteButton(true); + + expect(button).toBeTruthy(); + expect(button.disabled).toBe(false); + }); + }); }); diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts index bdef5e01681..3581459670b 100644 --- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts +++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts @@ -18,9 +18,15 @@ */ import { Component, EventEmitter, OnInit, Output, ViewChild } from "@angular/core"; -import { ActivatedRoute } from "@angular/router"; +import { ActivatedRoute, Router } from "@angular/router"; +import { USER_DATASET } from "../../../../../app-routing.constant"; +import { extractErrorMessage } from "../../../../../common/util/error"; import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; -import { DatasetService, MultipartUploadProgress } from "../../../../service/user/dataset/dataset.service"; +import { + DatasetService, + MultipartUploadProgress, + validateDatasetName, +} from "../../../../service/user/dataset/dataset.service"; import { NzResizeEvent, NzResizableDirective, NzResizeHandleComponent } from "ng-zorro-antd/resizable"; import { DatasetFileNode, @@ -51,7 +57,7 @@ import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patc import { NzIconDirective } from "ng-zorro-antd/icon"; import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space"; import { NzButtonComponent } from "ng-zorro-antd/button"; -import { NzPopoverDirective } from "ng-zorro-antd/popover"; +import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm"; import { NzSwitchComponent } from "ng-zorro-antd/switch"; import { FormsModule } from "@angular/forms"; import { MarkdownDescriptionComponent } from "../../markdown-description/markdown-description.component"; @@ -68,6 +74,7 @@ import { NzProgressComponent } from "ng-zorro-antd/progress"; import { UserDatasetStagedObjectsListComponent } from "./user-dataset-staged-objects-list/user-dataset-staged-objects-list.component"; import { NzInputDirective } from "ng-zorro-antd/input"; import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling"; +import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs"; export const THROTTLE_TIME_MS = 1000; export const ABORT_RETRY_MAX_ATTEMPTS = 10; @@ -88,7 +95,7 @@ export const ABORT_RETRY_BACKOFF_BASE_MS = 100; NzIconDirective, NzSpaceCompactItemDirective, NzButtonComponent, - NzPopoverDirective, + NzPopconfirmDirective, NzSwitchComponent, FormsModule, MarkdownDescriptionComponent, @@ -114,11 +121,14 @@ export const ABORT_RETRY_BACKOFF_BASE_MS = 100; CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, + NzTabsComponent, + NzTabComponent, ], }) export class DatasetDetailComponent implements OnInit { public did: number | undefined; public datasetName: string = ""; + public editedDatasetName: string = ""; public datasetDescription: string = ""; public datasetCreationTime: string = ""; public datasetCreationTimeTooltip: string = ""; @@ -194,6 +204,7 @@ export class DatasetDetailComponent implements OnInit { constructor( private route: ActivatedRoute, + private router: Router, private modalService: NzModalService, private datasetService: DatasetService, private notificationService: NotificationService, @@ -359,6 +370,7 @@ export class DatasetDetailComponent implements OnInit { .subscribe(dashboardDataset => { const dataset = dashboardDataset.dataset; this.datasetName = dataset.name; + this.editedDatasetName = dataset.name; this.datasetDescription = dataset.description; this.userDatasetAccessLevel = dashboardDataset.accessPrivilege; this.datasetIsPublic = dataset.isPublic; @@ -917,6 +929,52 @@ export class DatasetDetailComponent implements OnInit { }); } + onSaveDatasetName(): void { + if (!this.did) { + return; + } + // Reject invalid names outright instead of silently rewriting them, matching + // the shared validation used by the other rename entry points (PR #6426). + const name = this.editedDatasetName; + const nameError = validateDatasetName(name); + if (nameError) { + this.notificationService.error(nameError); + return; + } + + this.datasetService + .updateDatasetName(this.did, name) + .pipe(untilDestroyed(this)) + .subscribe({ + next: () => { + this.datasetName = name; + this.editedDatasetName = name; + this.notificationService.success(`Dataset name updated to '${name}'`); + }, + error: (err: unknown) => { + this.notificationService.error(extractErrorMessage(err)); + }, + }); + } + + onDeleteDataset(): void { + if (!this.did) { + return; + } + this.datasetService + .deleteDatasets(this.did) + .pipe(untilDestroyed(this)) + .subscribe({ + next: () => { + this.notificationService.success(`Dataset ${this.datasetName} was deleted`); + this.router.navigate([USER_DATASET]); + }, + error: (err: unknown) => { + this.notificationService.error(extractErrorMessage(err)); + }, + }); + } + async copyCurrentFilePath(): Promise { if (!this.currentDisplayedFileName) { return;