From 819b7b93d1c0845b0cca8b1a36f20d662489d8bc Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Tue, 26 Mar 2019 11:48:55 -0700 Subject: [PATCH] render xml properly in the grid (#4674) * render xml properly in the grid * fix html injection * fix tslint error * add comments and fix an issue * fix comment --- src/sql/parts/grid/services/sharedServices.ts | 21 +++++++++++++++++-- .../editor/controller/profilerTableEditor.ts | 6 ++++-- .../parts/profiler/editor/profilerEditor.ts | 7 +++++-- .../parts/profiler/editor/profilerInput.ts | 3 +-- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/sql/parts/grid/services/sharedServices.ts b/src/sql/parts/grid/services/sharedServices.ts index ca175b5bb9..971157d195 100644 --- a/src/sql/parts/grid/services/sharedServices.ts +++ b/src/sql/parts/grid/services/sharedServices.ts @@ -52,14 +52,31 @@ export function textFormatter(row: number, cell: any, value: any, columnDef: any } else { cellClasses += ' missing-value'; } - } else if (typeof value === 'string') { - valueToDisplay = escape(value.length > 250 ? value.slice(0, 250) + '...' : value); + } else if (typeof value === 'string' || (value && value.text)) { + if (value.text) { + valueToDisplay = value.text; + } else { + valueToDisplay = value; + } + valueToDisplay = escape(valueToDisplay.length > 250 ? valueToDisplay.slice(0, 250) + '...' : valueToDisplay); titleValue = valueToDisplay; } return `${valueToDisplay}`; } +/** + * Provide slick grid cell with encoded ariaLabel and plain text. + * text will be escaped by the textFormatter and ariaLabel will be consumed by slickgrid directly. + */ +export function slickGridDataItemColumnValueExtractor(value: any, columnDef: any): { text: string; ariaLabel: string; } { + let displayValue = value[columnDef.field]; + return { + text: displayValue, + ariaLabel: displayValue ? escape(displayValue) : displayValue + }; +} + /** The following code is a rewrite over the both formatter function using dom builder * rather than string manipulation, which is a safer and easier method of achieving the same goal. * However, when electron is in "Run as node" mode, dom creation acts differently than normal and therefore diff --git a/src/sql/parts/profiler/editor/controller/profilerTableEditor.ts b/src/sql/parts/profiler/editor/controller/profilerTableEditor.ts index c6a2b61b73..2a29e7469c 100644 --- a/src/sql/parts/profiler/editor/controller/profilerTableEditor.ts +++ b/src/sql/parts/profiler/editor/controller/profilerTableEditor.ts @@ -25,7 +25,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { Event, Emitter } from 'vs/base/common/event'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { Dimension } from 'vs/base/browser/dom'; -import { textFormatter } from 'sql/parts/grid/services/sharedServices'; +import { textFormatter, slickGridDataItemColumnValueExtractor } from 'sql/parts/grid/services/sharedServices'; import { PROFILER_MAX_MATCHES } from 'sql/parts/profiler/editor/controller/profilerFindWidget'; import { IStorageService } from 'vs/platform/storage/common/storage'; import { IStatusbarService, StatusbarAlignment, IStatusbarEntry } from 'vs/platform/statusbar/common/statusbar'; @@ -88,7 +88,9 @@ export class ProfilerTableEditor extends BaseEditor implements IProfilerControll } } } - }); + }, { + dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor + }); this._profilerTable.setSelectionModel(new RowSelectionModel()); attachTableStyler(this._profilerTable, this._themeService); diff --git a/src/sql/parts/profiler/editor/profilerEditor.ts b/src/sql/parts/profiler/editor/profilerEditor.ts index b0c04d487c..2818daaf72 100644 --- a/src/sql/parts/profiler/editor/profilerEditor.ts +++ b/src/sql/parts/profiler/editor/profilerEditor.ts @@ -15,7 +15,7 @@ import { ProfilerTableEditor, ProfilerTableViewState } from './controller/profil import * as Actions from 'sql/parts/profiler/contrib/profilerActions'; import { CONTEXT_PROFILER_EDITOR, PROFILER_TABLE_COMMAND_SEARCH } from './interfaces'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; -import { textFormatter } from 'sql/parts/grid/services/sharedServices'; +import { textFormatter, slickGridDataItemColumnValueExtractor } from 'sql/parts/grid/services/sharedServices'; import { ProfilerResourceEditor } from './profilerResourceEditor'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { ITextModel } from 'vs/editor/common/model'; @@ -365,7 +365,10 @@ export class ProfilerEditor extends BaseEditor { formatter: textFormatter } ] - }, { forceFitColumns: true }); + }, { + forceFitColumns: true, + dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor + }); this._detailTableData.onRowCountChange(() => { this._detailTable.updateRowCount(); diff --git a/src/sql/parts/profiler/editor/profilerInput.ts b/src/sql/parts/profiler/editor/profilerInput.ts index 5c15560958..62ec803c92 100644 --- a/src/sql/parts/profiler/editor/profilerInput.ts +++ b/src/sql/parts/profiler/editor/profilerInput.ts @@ -18,7 +18,6 @@ import { INotificationService } from 'vs/platform/notification/common/notificati import { Event, Emitter } from 'vs/base/common/event'; import { generateUuid } from 'vs/base/common/uuid'; import { IDialogService } from 'vs/platform/dialogs/common/dialogs'; -import { escape } from 'sql/base/common/strings'; import * as types from 'vs/base/common/types'; import { URI } from 'vs/base/common/uri'; import Severity from 'vs/base/common/severity'; @@ -258,7 +257,7 @@ export class ProfilerInput extends EditorInput implements IProfilerSession { let columnName = this._columnMapping[key]; if (columnName) { let value = e.values[key]; - data[columnName] = escape(value); + data[columnName] = value; } } newEvents.push(data);