feat(gui): Add Markdown Support for Descriptions

core/gui/angular.json

@@ -29,10 +29,15 @@
               "node_modules/jointjs/css/themes/default.css",
               "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "node_modules/ng-zorro-antd/resizable/style/index.min.css",
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css",
+              "node_modules/font-awesome/css/font-awesome.css",
               "src/styles.scss"
             ],
             "scripts": [
-              "./node_modules/marked/marked.min.js"
+              "./node_modules/marked/marked.min.js",
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/bootstrap-markdown/js/bootstrap-markdown.js"
             ],
             "customWebpackConfig": {
               "path": "./custom-webpack.config.js"

core/gui/package.json

@@ -46,7 +46,9 @@
     "@types/lodash-es": "4.17.4",
     "@types/plotly.js-basic-dist-min": "2.12.4",
     "ajv": "8.10.0",
+    "angular-markdown-editor": "^3.1.1",
     "backbone": "1.4.1",
+    "bootstrap": "^5.3.8",
     "content-disposition": "0.5.4",
     "dagre": "0.8.5",
     "deep-map": "2.0.0",
@@ -56,6 +58,7 @@
     "fuse.js": "6.5.3",
     "html2canvas": "1.4.1",
     "jointjs": "3.5.4",
+    "jquery": "^3.7.1",
     "js-abbreviation-number": "1.4.0",
     "jszip": "3.10.1",
     "lodash-es": "4.17.21",
@@ -70,7 +73,7 @@
     "ngx-file-drop": "16.0.0",
     "ngx-image-viewer": "1.0.13",
     "ngx-json-viewer": "3.2.1",
-    "ngx-markdown": "16.0.0",
+    "ngx-markdown": "^20.1.0",
     "papaparse": "5.4.1",
     "path-browserify": "1.0.1",
     "plotly.js-basic-dist-min": "2.29.0",
@@ -111,11 +114,13 @@
     "@nrwl/nx-cloud": "19.1.0",
     "@nx/angular": "20.0.3",
     "@types/backbone": "1.4.15",
+    "@types/bootstrap": "^5",
     "@types/content-disposition": "0",
     "@types/dagre": "0.7.47",
     "@types/file-saver": "2.0.5",
     "@types/graphlib": "2.1.8",
     "@types/jasmine": "4.6.4",
+    "@types/jquery": "^3",
     "@types/json-schema": "7.0.9",
     "@types/lodash": "4.14.179",
     "@types/node": "18.15.5",

core/gui/src/app/app.module.ts

@@ -172,6 +172,8 @@ import { AdminSettingsComponent } from "./dashboard/component/admin/settings/adm
 import { catchError, of } from "rxjs";
 import { FormlyRepeatDndComponent } from "./common/formly/repeat-dnd/repeat-dnd.component";
 import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+import { MarkdownDescriptionComponent } from "./dashboard/component/user/markdown-description/markdown-description.component";
+import { AngularMarkdownEditorModule } from "angular-markdown-editor";
 
 registerLocaleData(en);
 
@@ -264,6 +266,7 @@ registerLocaleData(en);
     HubSearchResultComponent,
     ComputingUnitSelectionComponent,
     AdminSettingsComponent,
+    MarkdownDescriptionComponent,
   ],
   imports: [
     BrowserModule,
@@ -330,6 +333,7 @@ registerLocaleData(en);
     NzDividerModule,
     NzProgressModule,
     NzInputNumberModule,
+    AngularMarkdownEditorModule.forRoot(),
   ],
   providers: [
     provideNzI18n(en_US),

core/gui/src/app/dashboard/component/user/list-item/list-item.component.html

@@ -60,9 +60,9 @@
 
     <div
       nz-col
-      nzFlex="30px"
-      *ngIf="isPrivateSearch">
-      <div class="edit-button">
+      nzFlex="30px">
+      <div class="edit-button"
+           *ngIf="isPrivateSearch">
         <button
           nz-button
           nzType="text"
@@ -78,11 +78,11 @@
         <button
           nz-button
           nzType="text"
-          title="Edit Description"
-          (click)="onEditDescription();$event.stopPropagation()">
+          title="View/Edit Description"
+          (click)="toggleDescription();$event.stopPropagation()">
           <i
             nz-icon
-            nzType="form"></i>
+            nzType="file-text"></i>
         </button>
       </div>
     </div>
@@ -108,9 +108,9 @@
 
       <div
         class="resource-description truncate-single-line"
-        (click)="onEditDescription();$event.stopPropagation()"
+        (click)="toggleDescription();$event.stopPropagation()"
         *ngIf="!editingDescription">
-        {{ entry.description ? entry.description.slice(0, 200) : (hovering) ? 'Write a description...' : '' }}
+        {{ getCleanDescription() }}
       </div>
       <textarea
         *ngIf="editingDescription"
@@ -193,6 +193,13 @@
   <div
     *ngIf="isPrivateSearch"
     class="button-group">
+    <button
+      nz-button
+      nzType="text"
+      title="Description"
+      (click)="toggleDescription()">
+      <i nz-icon nzType="file-text"></i>
+    </button>
     <button
       *ngIf="entry.type==='workflow'"
       nz-button
@@ -245,4 +252,19 @@
         nzType="delete"></i>
     </button>
   </div>
+
+  <div *ngIf="showDescription" class="list-item-description"
+       [class.description-hoverable]="!editingDescription"
+       (mouseenter)="hovering = true; $event.stopPropagation()"
+       (mouseleave)="hovering = false; $event.stopPropagation()">
+    <texera-markdown-description
+      [description]="entry.description || ''"
+      [entityName]="entry.name"
+      [entityType]="entry.type"
+      [editable]="canEdit"
+      (descriptionChange)="confirmUpdateCustomDescription($event)"
+      (editingStateChange)="onDescriptionEditingStateChange($event)"
+      (closeDescription)="toggleDescription()">
+    </texera-markdown-description>
+  </div>
 </nz-card>

core/gui/src/app/dashboard/component/user/list-item/list-item.component.scss

@@ -101,7 +101,7 @@
   height: 70px;
   min-width: 150px;
   right: 0;
-  bottom: 0;
+  top: 0;
   justify-content: right;
   align-items: center;
   transition: none;

core/gui/src/app/dashboard/component/user/list-item/list-item.component.ts

@@ -78,6 +78,8 @@ export class ListItemComponent implements OnChanges {
   @Input() editable = false;
   private _entry?: DashboardEntry;
   hovering: boolean = false;
+  @ViewChild('markdownDescriptionComponent') markdownDescriptionComponent!: any;
+  public showDescription: boolean = false;
 
   @Input()
   get entry(): DashboardEntry {
@@ -104,7 +106,7 @@ export class ListItemComponent implements OnChanges {
     private hubService: HubService,
     private downloadService: DownloadService,
     private cdr: ChangeDetectorRef,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
   ) {}
 
   initializeEntry() {
@@ -198,6 +200,56 @@ export class ListItemComponent implements OnChanges {
     }
   }
 
+  get canEdit(): boolean {
+    if (this.entry.type === 'workflow') {
+      return this.entry.workflow?.isOwner ?? false;
+    } else if (this.entry.type === 'dataset') {
+      return this.entry.dataset?.isOwner ?? false;
+    }
+    return false;
+  }
+
+  toggleDescription(): void {
+    this.showDescription = !this.showDescription;
+
+    if (this.showDescription) {
+      // Force the component to start in preview mode, not edit mode
+      setTimeout(() => {
+        if (this.markdownDescriptionComponent) {
+          this.markdownDescriptionComponent.togglePreview()
+        }
+      }, 50);
+    }
+  }
+
+  public onDescriptionEditingStateChange(isEditing: boolean): void {
+    this.editingDescription = isEditing;
+    this.cdr.markForCheck();
+  }
+
+  getCleanDescription(): string {
+    if (!this.entry.description) {
+      return this.hovering ? 'Write a description...' : '';
+    }
+
+    let cleanText = this.entry.description
+      .replace(/```[\s\S]*?```/g, ' ') // Remove code blocks
+      .replace(/`([^`]+)`/g, '$1') // Remove inline code backticks
+      .replace(/#{1,6}\s+/g, '') // Remove headers
+      .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
+      .replace(/\*/g, '') // Remove asterisks
+      .replace(/\*(.*?)\*/g, '$1') // Remove italic
+      .replace(/\[(.*?)\]\(.*?\)/g, '$1') // Remove links
+      .replace(/>\s+/g, '') // Remove blockquotes
+      .replace(/\n+/g, ' ') // Replace newlines with spaces
+      .replace(/\s+/g, ' ') // Collapse multiple spaces
+      .trim();
+
+    return cleanText.length > 200
+      ? cleanText.slice(0, 200) + '...'
+      : cleanText;
+  }
+
   public onClickDownload = (): void => {
     if (!this.entry.id) return;
 

core/gui/src/app/dashboard/component/user/markdown-description/markdown-description.component.html

@@ -0,0 +1,84 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="markdown-description-container" [ngClass]="{'inline-mode': showInline, 'block-mode': !showInline}">
+
+  <div *ngIf="loading" class="loading-spinner">
+    <nz-spin nzSize="small"></nz-spin>
+  </div>
+
+  <div *ngIf="!loading" class="description-editor" style="margin-top: 16px;">
+    <div class="editor-header">
+      <h4>{{entityName}} Description</h4>
+      <div *ngIf="editable" class="editor-actions">
+        <button
+          nz-button
+          nzType="default"
+          nzSize="small"
+          (click)="togglePreview()"
+          title="Toggle Preview">
+          <i nz-icon [nzType]="isPreviewMode ? 'edit' : 'eye'" nzTheme="outline"></i>
+          {{ isPreviewMode ? 'Edit' : 'Preview' }}
+        </button>
+        <button
+          nz-button
+          nzType="default"
+          nzSize="small"
+          (click)="cancelEditing()"
+          [disabled]="false">
+          <i nz-icon nzType="close" nzTheme="outline"></i>
+          Close
+        </button>
+        <button
+          nz-button
+          nzType="primary"
+          nzSize="small"
+          (click)="saveDescription()"
+          [disabled]="!hasUnsavedChanges">
+          <i nz-icon nzType="save" nzTheme="outline"></i>
+          Save
+        </button>
+      </div>
+    </div>
+
+    <div class="markdown-editor-container">
+      <div *ngIf="isPreviewMode" class="preview-container">
+        <div class="preview-content" [innerHTML]="renderedDescription"></div>
+      </div>
+
+      <ng-container *ngIf="!isPreviewMode">
+        <div class="markdown-editor-wrapper">
+          <angular-markdown-editor
+            textareaId="markdownDescriptionEditor"
+            [options]="editorOptions"
+            name="editingContent"
+            [(ngModel)]="editingContent"
+            (onChange)="onMarkdownEditorChange($event)"
+            class="enhanced-markdown-editor">
+          </angular-markdown-editor>
+        </div>
+        <div class="editor-help">
+          <small class="help-text">
+            <i nz-icon nzType="info-circle" nzTheme="outline"></i>
+            Use the toolbar above or Markdown syntax.
+          </small>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</div>