chore(gui): add edit description button in workspace

frontend/src/app/workspace/component/menu/menu.component.html

@@ -141,6 +141,14 @@
             nz-icon
             nzType="download"></i>
         </button>
+        <button
+          (click)="onClickEditDescription()"
+          nz-button
+          title="change description">
+          <i
+            nz-icon
+            nzType="info-circle"></i>
+        </button>
       </nz-button-group>
       <ng-template #utilities>
         <nz-button-group>

frontend/src/app/workspace/component/menu/menu.component.ts

@@ -57,6 +57,7 @@ import { ComputingUnitSelectionComponent } from "../power-button/computing-unit-
 import { GuiConfigService } from "../../../common/service/gui-config.service";
 import { DashboardWorkflowComputingUnit } from "../../types/workflow-computing-unit";
 import { Privilege } from "../../../dashboard/type/share-access.interface";
+import { MarkdownDescriptionComponent } from "../../../dashboard/component/user/markdown-description/markdown-description.component";
 
 /**
  * MenuComponent is the top level menu bar that shows
@@ -607,6 +608,46 @@ export class MenuComponent implements OnInit, OnDestroy {
     saveAs(new Blob([workflowContentJson], { type: "text/plain;charset=utf-8" }), fileName);
   }
 
+  /**
+   * Calls Markdown Description Component
+   */
+  public onClickEditDescription(): void {
+    const currentWorkflow = this.workflowActionService.getWorkflow();
+    const currentDescription = currentWorkflow.description ?? "";
+
+    const modalRef = this.modalService.create<MarkdownDescriptionComponent>({
+      nzTitle: "Edit Workflow Description",
+      nzContent: MarkdownDescriptionComponent,
+      nzData: {
+        description: currentDescription,
+      },
+      nzWidth: "900px",
+      nzMaskClosable: true,
+      nzKeyboard: true,
+      nzClosable: true,
+      nzFooter: null,
+    });
+
+    const comp: MarkdownDescriptionComponent = modalRef.getContentComponent();
+
+    comp.descriptionChange
+      .pipe(untilDestroyed(this))
+      .subscribe((updatedDescription: string) => {
+        const updatedWorkflow: Workflow = {
+          ...currentWorkflow,
+          description: updatedDescription,
+        };
+
+        this.workflowActionService.setWorkflowMetadata(updatedWorkflow);
+
+        if (this.userService.isLogin()) {
+          this.persistWorkflow();
+        }
+
+        modalRef.close();
+      });
+  }
+
   /**
    * Returns true if there's any operator on the graph; false otherwise
    */