From 7f8494b500c95d0d44e03456dfa34c72306c2a84 Mon Sep 17 00:00:00 2001
From: Anton Kosyakov <anton.kosyakov@typefox.io>
Date: Thu, 27 Feb 2020 16:17:01 +0000
Subject: [PATCH] [plugin] fix #7199: align tree item description properly

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>
---
 .../main/browser/view/tree-view-widget.tsx    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
index 0f38c621d4c04..2f2d59e5530f0 100644
--- a/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
+++ b/packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx
@@ -254,7 +254,7 @@ export class TreeViewWidget extends TreeWidget {
         return React.createElement('div', attrs, ...children);
     }
 
-    protected getCaption(node: TreeNode): React.ReactNode[] {
+    protected getCaption(node: TreeNode): React.ReactNode {
         const nodes: React.ReactNode[] = [];
 
         const name = this.toNodeName(node) || '';
@@ -266,29 +266,28 @@ export class TreeViewWidget extends TreeWidget {
         const matchResult = work.match(regex);
 
         if (matchResult) {
-            matchResult.forEach(match => {
-                const part = work.substring(0, work.indexOf(match));
-                nodes.push(part);
+            matchResult.forEach((match, index) => {
+                nodes.push(<span key={`m${index}`}>{work.substring(0, work.indexOf(match))}</span>);
 
                 const execResult = regex.exec(name);
-                const link = <a href={execResult![2]}
+                nodes.push(<a key={`l${index}`}
+                    href={execResult![2]}
                     target='_blank'
                     className={TREE_NODE_HYPERLINK}
-                    onClick={e => e.stopPropagation()}>{execResult![1]}</a >;
-                nodes.push(link);
+                    onClick={e => e.stopPropagation()}>{execResult![1]}</a>
+                );
 
                 work = work.substring(work.indexOf(match) + match.length);
             });
         }
 
-        const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_SEGMENT_GROW_CLASS].join(' ');
-        nodes.push(<div className={className}>{work}</div >);
-        if (description) {
-            nodes.push(<div className='theia-tree-view-description'>
+        return <div className='noWrapInfo'>
+            {...nodes}
+            {work && <span>{work}</span>}
+            {description && <span className='theia-tree-view-description'>
                 {description}
-            </div>);
-        }
-        return nodes;
+            </span>}
+        </div>;
     }
 
     protected renderTailDecorations(node: TreeViewNode, props: NodeProps): React.ReactNode {