From 3979d7c842311031419c96ba5bd722632f248224 Mon Sep 17 00:00:00 2001
From: Xuan Gu <162244362+xuang7@users.noreply.github.com>
Date: Mon, 23 Feb 2026 09:50:45 -0800
Subject: [PATCH] update.

---
 .../markdown-description.component.html       | 24 +++++++++++--
 .../markdown-description.component.scss       |  3 +-
 .../markdown-description.component.ts         | 34 ++++++++++++++++---
 .../dataset-detail.component.html             |  6 +++-
 .../dataset-detail.component.ts               | 21 ++++++++++++
 5 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.html b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.html
index b1bfc94d467..d76163d59b5 100644
--- a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.html
+++ b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.html
@@ -18,7 +18,21 @@
 -->
 
 <!-- Preview mode -->
-<ng-container *ngIf="!isEditing">
+<ng-container *ngIf="currentMode === 'preview'">
+  <div
+    *ngIf="editable"
+    class="md-actions">
+    <button
+      nz-button
+      nzType="text"
+      nzSize="small"
+      (click)="enterEditMode()">
+      <i
+        nz-icon
+        nzType="edit"></i>
+      Edit
+    </button>
+  </div>
   <div class="preview-box">
     <div
       *ngIf="renderedDescription; else noDescription"
@@ -31,7 +45,7 @@
 </ng-container>
 
 <!-- Edit mode -->
-<ng-container *ngIf="isEditing">
+<ng-container *ngIf="currentMode === 'edit'">
   <div class="md-split">
     <div class="md-left">
       <div class="md-toolbar">
@@ -66,6 +80,12 @@
   </div>
 
   <div class="md-actions">
+    <button
+      nz-button
+      nzSize="small"
+      (click)="cancel()">
+      Cancel
+    </button>
     <button
       nz-button
       nzType="primary"
diff --git a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.scss b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.scss
index 27aad8bc9c1..e9fe780a115 100644
--- a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.scss
+++ b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.scss
@@ -19,7 +19,7 @@
 
 .preview-box {
   position: relative;
-  margin-top: 10px;
+  margin-top: 8px;
   max-height: 50vh;
   overflow-y: auto;
 }
@@ -27,6 +27,7 @@
 .md-actions {
   display: flex;
   justify-content: flex-end;
+  gap: 10px;
 }
 
 .md-split {
diff --git a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
index de4c0a9c847..ec9683bfb14 100644
--- a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
+++ b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
@@ -41,10 +41,12 @@ export class MarkdownDescriptionComponent implements OnInit, OnChanges {
   private modalData = inject(NZ_MODAL_DATA, { optional: true });
 
   @Input() description = "";
+  @Input() mode: "preview" | "edit" = "preview";
+  @Input() editable = false;
   @Output() descriptionChange = new EventEmitter<string>();
   @ViewChild("textarea") textareaRef!: ElementRef<HTMLTextAreaElement>;
 
-  isEditing = false;
+  currentMode: "preview" | "edit" = "preview";
   editingContent = "";
   renderedDescription = "";
 
@@ -74,15 +76,24 @@ export class MarkdownDescriptionComponent implements OnInit, OnChanges {
   ngOnInit(): void {
     if (this.modalData) {
       this.description = this.modalData.description ?? "";
-      this.isEditing = true;
+      this.editable = true;
     }
+    this.currentMode = this.modalData ? "edit" : this.mode;
     this.editingContent = this.description;
     this.renderMarkdown(this.description);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes["mode"] && !changes["mode"].firstChange && !this.modalData) {
+      this.currentMode = this.mode;
+      if (this.currentMode === "edit") {
+        this.editingContent = this.description;
+        this.renderMarkdown(this.description);
+      }
+    }
+
     if (changes["description"] && !changes["description"].firstChange) {
-      if (this.isEditing) {
+      if (this.currentMode === "edit") {
         return;
       }
       this.editingContent = this.description;
@@ -90,11 +101,26 @@ export class MarkdownDescriptionComponent implements OnInit, OnChanges {
     }
   }
 
+  enterEditMode(): void {
+    if (!this.editable) {
+      return;
+    }
+    this.editingContent = this.description;
+    this.renderMarkdown(this.description);
+    this.currentMode = "edit";
+  }
+
   save(): void {
     this.description = this.editingContent;
     this.descriptionChange.emit(this.description);
     this.renderMarkdown(this.description);
-    this.isEditing = false;
+    this.currentMode = this.modalData ? "edit" : this.mode;
+  }
+
+  cancel(): void {
+    this.editingContent = this.description;
+    this.renderMarkdown(this.description);
+    this.currentMode = "preview";
   }
 
   insert(action: { prefix: string; suffix: string; default: string }): void {
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 16397793c69..c5780be7a73 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
@@ -32,7 +32,11 @@ <h2 class="dataset-title">Dataset: {{datasetName}}</h2>
         </span>
       </ng-template>
     </nz-card-meta>
-    <texera-markdown-description [description]="datasetDescription"> </texera-markdown-description>
+    <texera-markdown-description
+      [description]="datasetDescription"
+      [editable]="userDatasetAccessLevel === 'WRITE'"
+      (descriptionChange)="onDatasetDescriptionChange($event)">
+    </texera-markdown-description>
     <div
       class="workflow-panel"
       style="padding-top: 30px">
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 f7eb492a9c0..5a7f0057593 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
@@ -733,4 +733,25 @@ export class DatasetDetailComponent implements OnInit {
         },
       });
   }
+
+  onDatasetDescriptionChange(description: string): void {
+    const updatedDescription = description ?? "";
+    const previousDescription = this.datasetDescription;
+
+    if (!this.did || this.datasetDescription === updatedDescription) {
+      return;
+    }
+
+    this.datasetDescription = updatedDescription;
+
+    this.datasetService
+      .updateDatasetDescription(this.did, updatedDescription)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        error: () => {
+          this.datasetDescription = previousDescription;
+          this.notificationService.error("Failed to update dataset description");
+        },
+      });
+  }
 }