feat: add inline edit modes for dataset description

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"

frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.scss

@@ -19,14 +19,15 @@
 
 .preview-box {
   position: relative;
-  margin-top: 10px;
+  margin-top: 8px;
   max-height: 50vh;
   overflow-y: auto;
 }
 
 .md-actions {
   display: flex;
   justify-content: flex-end;
+  gap: 10px;
 }
 
 .md-split {

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,27 +76,51 @@ 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;
       this.renderMarkdown(this.description);
     }
   }
 
+  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 {

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">

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