Refactor Comments as Antd <Tree/>

CHANGELOG.unreleased.md

@@ -24,6 +24,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - In the time tracking view, all annotations and tasks can be shown for each user by expanding the table. The individual time spans spent with a task or annotating an explorative annotation can be accessed via CSV export. The detail view including a chart for the individual spans has been removed. [#7733](https://github.com/scalableminds/webknossos/pull/7733)
 - Slightly refactored the `<FixExpandleTable/>`component to use columns as props. [#7772](https://github.com/scalableminds/webknossos/pull/7772)
 - The config value `datastore.localFolderWhitelist` can now be set for each datastore individually. [#7800](https://github.com/scalableminds/webknossos/pull/7800)
+- Replaced skeleton comment tab component with antd's `<Tree />`component. [#7802](https://github.com/scalableminds/webknossos/pull/7802)
 
 ### Fixed
 - Fixed a bug where a toast that was reopened had a flickering effect during the reopening animation. [#7793](https://github.com/scalableminds/webknossos/pull/7793)

frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment.tsx

@@ -18,7 +18,6 @@ function linkify(comment: string) {
 type CommentProps = {
   isActive: boolean;
   comment: CommentType;
-  style: Record<string, any>;
 };
 export const commentListId = "commentList";
 
@@ -54,49 +53,42 @@ function ActiveCommentPopover({
   );
 }
 
-export function Comment({ comment, isActive, style }: CommentProps) {
+export function Comment({ comment, isActive }: CommentProps) {
   const handleClick = () => {
     Store.dispatch(setActiveNodeAction(comment.nodeId));
   };
 
-  const liClassName = classNames("markdown", "markdown-small", "nowrap", "comment", {
-    "comment-active": isActive,
-  });
-  const iClassName = classNames("fa", "fa-fw", {
-    "fa-angle-right": isActive,
-  });
+  const liClassName = classNames("markdown", "markdown-small", "nowrap");
+
   const isMultiLine = comment.content.indexOf("\n") !== -1;
 
   return (
-    <li style={style}>
-      <div className={liClassName}>
-        <span>
-          <i className={iClassName} />
-          <a onClick={handleClick}>{comment.nodeId}</a>
-          {" - "}
-        </span>
-        <span
-          style={{
-            display: "inline-block",
-          }}
-        >
-          <MarkdownWrapper source={linkify(comment.content)} singleLine />
-        </span>
-        {isMultiLine ? (
-          <ActiveCommentPopover comment={comment} isActive={isActive}>
-            <span
-              style={{
-                marginLeft: 5,
-              }}
-            >
-              <a onClick={handleClick}>
-                <i className="far fa-comment-dots" />
-              </a>
-            </span>
-          </ActiveCommentPopover>
-        ) : null}
-      </div>
-    </li>
+    <div className={liClassName}>
+      <span>
+        <a onClick={handleClick}>{comment.nodeId}</a>
+        {" - "}
+      </span>
+      <span
+        style={{
+          display: "inline-block",
+        }}
+      >
+        <MarkdownWrapper source={linkify(comment.content)} singleLine />
+      </span>
+      {isMultiLine ? (
+        <ActiveCommentPopover comment={comment} isActive={isActive}>
+          <span
+            style={{
+              marginLeft: 5,
+            }}
+          >
+            <a onClick={handleClick}>
+              <i className="far fa-comment-dots" />
+            </a>
+          </span>
+        </ActiveCommentPopover>
+      ) : null}
+    </div>
   );
 }
 export default Comment;