Adding timestamp to comment. fixes #11702

packages/plugin-ext/src/common/plugin-api-rpc-model.ts

@@ -660,6 +660,8 @@ export interface Comment {
     readonly contextValue?: string;
     readonly label?: string;
     readonly mode?: CommentMode;
+    /** Timestamp serialized as ISO date string via Date.prototype.toISOString */
+    readonly timestamp?: string;
 }
 
 export enum CommentThreadCollapsibleState {

packages/plugin-ext/src/main/browser/comments/comment-thread-widget.tsx

@@ -479,6 +479,7 @@ export class ReviewComment<P extends ReviewComment.Props = ReviewComment.Props>
             <div className={'review-comment-contents'}>
                 <div className={'comment-title monaco-mouse-cursor-text'}>
                     <strong className={'author'}>{comment.userName}</strong>
+                    <small className={'timestamp'}>{this.localeDate(comment.timestamp)}</small>
                     <span className={'isPending'}>{comment.label}</span>
                     <div className={'theia-comments-inline-actions-container'}>
                         <div className={'theia-comments-inline-actions'} role={'toolbar'}>
@@ -498,6 +499,16 @@ export class ReviewComment<P extends ReviewComment.Props = ReviewComment.Props>
             </div>
         </div>;
     }
+    protected localeDate(timestamp: string | undefined): string {
+        if (timestamp === undefined) {
+            return '';
+        }
+        const date = new Date(timestamp);
+        if (!isNaN(date.getTime())) {
+            return date.toLocaleString();
+        }
+        return '';
+    }
 }
 
 namespace CommentBody {

packages/plugin-ext/src/main/browser/style/comments.css

@@ -149,6 +149,12 @@
     line-height: var(--theia-content-line-height);
 }
 
+.monaco-editor .review-widget .body .review-comment .review-comment-contents .timestamp {
+    line-height: var(--theia-content-line-height);
+    margin: 0 5px 0 5px;
+    padding: 0 2px 0 2px;
+}
+
 .monaco-editor .review-widget .body .review-comment .review-comment-contents .isPending {
     margin: 0 5px 0 5px;
     padding: 0 2px 0 2px;

packages/plugin-ext/src/plugin/comments.ts

@@ -491,6 +491,7 @@ function convertToModeComment(thread: ExtHostCommentThread, commentController: C
     }
 
     const iconPath = theiaComment.author && theiaComment.author.iconPath ? theiaComment.author.iconPath.toString() : undefined;
+    const date = theiaComment.timestamp ? theiaComment.timestamp.toISOString() : undefined;
 
     return {
         mode: theiaComment.mode,
@@ -500,6 +501,7 @@ function convertToModeComment(thread: ExtHostCommentThread, commentController: C
         userName: theiaComment.author.name,
         userIconPath: iconPath,
         label: theiaComment.label,
+        timestamp: date,
     };
 }
 

packages/plugin/src/theia.d.ts

@@ -12084,6 +12084,11 @@ export module '@theia/plugin' {
          * Label will be rendered next to authorName if exists.
          */
         label?: string;
+
+        /**
+         * Optional timestamp.
+         */
+        timestamp?: Date;
     }
 
     /**