From d204fa99406e5cfc359caf97bb5f5e9d449df77b Mon Sep 17 00:00:00 2001
From: Aasim Khan <aasimkhan30@gmail.com>
Date: Wed, 16 Feb 2022 13:30:53 -0800
Subject: [PATCH] Adding tooltips and fixing spacing (#18400) (#18403)

---
 .../browser/queryPlanPropertiesView.ts           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
index 0e8db84fe6..df05c05e5c 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts
@@ -18,6 +18,7 @@ import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 import { removeLineBreaks } from 'sql/base/common/strings';
 import { isString } from 'vs/base/common/types';
 import { sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants';
+import { textFormatter } from 'sql/base/browser/ui/table/formatters';
 
 
 export class QueryPlanPropertiesView {
@@ -96,7 +97,8 @@ export class QueryPlanPropertiesView {
 				field: 'name',
 				width: 250,
 				editor: Slick.Editors.Text,
-				headerCssClass: 'prop-table-header'
+				headerCssClass: 'prop-table-header',
+				formatter: textFormatter
 			},
 			{
 				id: 'value',
@@ -104,7 +106,8 @@ export class QueryPlanPropertiesView {
 				field: 'value',
 				width: 250,
 				editor: Slick.Editors.Text,
-				headerCssClass: 'prop-table-header'
+				headerCssClass: 'prop-table-header',
+				formatter: textFormatter
 			}
 		];
 
@@ -199,15 +202,16 @@ export class QueryPlanPropertiesView {
 		}
 		props.forEach((p, i) => {
 			let row = {};
-			row['name'] = '\t'.repeat(indent) + p.name;
+			rows.push(row);
+			row['name'] = '  '.repeat(indent) + p.name;
 			row['parent'] = parentIndex;
 			if (!isString(p.value)) {
-				row['value'] = '';
+				row['value'] = removeLineBreaks(p.displayValue, ' ');
 				this.convertPropertiesToTableRows(p.value, rows.length - 1, indent + 2, rows);
 			} else {
-				row['value'] = p.value;
+				row['value'] = removeLineBreaks(p.value, ' ');
+				row['tooltip'] = p.value;
 			}
-			rows.push(row);
 		});
 		return rows;
 	}