[TASK] Remove jQuery from workspaces comment view

Resolves: #102435
Related: #102431
Releases: main
Change-Id: Ic8e815f74af3de60d996f242f886d4441dd76aa6
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/81832
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/workspaces/backend.ts

@@ -49,14 +49,7 @@ enum Identifiers {
 }
 
 type Diff = { field: string, label: string, content: string, html: string };
-type Comment = {
-  user_comment: string;
-  previous_stage_title: string;
-  stage_title: string;
-  tstamp: number;
-  user_username: string;
-  user_avatar: string
-}
+
 type History = {
   differences: string | Diff[];
   datetime: string;
@@ -93,6 +86,7 @@ class Backend extends Workspaces {
     super();
 
     topLevelModuleImport('@typo3/workspaces/renderable/send-to-stage-form.js');
+    topLevelModuleImport('@typo3/workspaces/renderable/comment-view.js');
 
     DocumentService.ready().then((): void => {
       this.getElements();
@@ -144,36 +138,11 @@ class Backend extends Workspaces {
    * @param {Object} comments
    * @return {$}
    */
-  private static generateCommentView(comments: Comment[]): JQuery {
-    const $comments = $('<div />');
-
-    for (const comment of comments) {
-      const $panel = $('<div />', { class: 'panel panel-default' });
-
-      if (comment.user_comment.length > 0) {
-        $panel.append(
-          $('<div />', { class: 'panel-body' }).html(comment.user_comment),
-        );
-      }
-
-      $panel.append(
-        $('<div />', { class: 'panel-footer' }).append(
-          $('<span />', { class: 'badge badge-success me-2' }).text(comment.previous_stage_title + ' > ' + comment.stage_title),
-          $('<span />', { class: 'badge badge-info' }).text(comment.tstamp),
-        ),
-      );
-
-      $comments.append(
-        $('<div />', { class: 'media' }).append(
-          $('<div />', { class: 'media-left text-center' }).text(comment.user_username).prepend(
-            $('<div />').html(comment.user_avatar),
-          ),
-          $('<div />', { class: 'media-body' }).append($panel),
-        ),
-      );
-    }
+  private static generateCommentView(comments: any[]): HTMLElement {
+    const commentView = document.createElement('typo3-workspaces-comment-view');
+    commentView.comments = comments;
 
-    return $comments;
+    return commentView;
   }
 
   /**

Build/Sources/TypeScript/workspaces/renderable/comment-view.ts

@@ -0,0 +1,78 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
+
+type Comment = {
+  user_comment: string;
+  previous_stage_title: string;
+  stage_title: string;
+  tstamp: number;
+  user_username: string;
+  user_avatar: string
+}
+
+@customElement('typo3-workspaces-comment-view')
+export class CommentViewElement extends LitElement {
+  @property({ type: Array })
+  public comments: Comment[] = [];
+
+  protected createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div>
+        ${repeat(this.comments, (comment) => comment.tstamp, (comment) => this.renderComment(comment))}
+      </div>
+    `;
+  }
+
+  protected renderComment(comment: Comment): TemplateResult {
+    return html`
+      <div class="media">
+        <div class="media-left text-center">
+          <div>
+            ${unsafeHTML(comment.user_avatar)}
+          </div>
+          ${comment.user_username}
+        </div>
+        <div class="panel panel-default">
+          ${comment.user_comment ? html`
+          <div class="panel-body">
+            ${comment.user_comment}
+          </div>
+        ` : nothing}
+          <div class="panel-footer">
+            <span class="badge badge-success me-2">
+              ${comment.previous_stage_title} > ${comment.stage_title}
+            </span>
+            <span class="badge badge-info">
+              ${comment.tstamp}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-comment-view': CommentViewElement;
+  }
+}