diff --git a/frontend/src/app/workspace/component/menu/menu.component.html b/frontend/src/app/workspace/component/menu/menu.component.html
index 7433ccab67b..c1c8e8662c3 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.html
+++ b/frontend/src/app/workspace/component/menu/menu.component.html
@@ -141,6 +141,14 @@
nz-icon
nzType="download">
+
diff --git a/frontend/src/app/workspace/component/menu/menu.component.ts b/frontend/src/app/workspace/component/menu/menu.component.ts
index 8ee4cf622d5..da50131ca7e 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.ts
+++ b/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({
+ 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
*/