Fix for chart names in dropdown select box. (#7642)

* isolated problem involving user friendly names

* Fix to handle horizontalBar

* Working rough version, need to implement data structure to store alternative names later

* consolidated checks into its own static method, data structure still highly recommended to implement

* Version with hashMap implemented

* Moved check for alternative names into chartView

* removed parseOption

* removed space in selectbox

* removed unused import

* removed unused import and spaces

* Fixed formatting

* Added new comment and modified changeToAltNames

* Localization has been added to the Hash

* flxed small formatting issue

* fixed double quotes for nls.localize

src/sql/base/browser/ui/selectBox/selectBox.ts

@@ -16,20 +16,6 @@ import { renderFormattedText, renderText, FormattedTextRenderOptions } from 'vs/
 
 const $ = dom.$;
 
-//Map used to store names and alternative names for chart types.
-//This is mainly used for comparison when options are parsed into the constructor.
-const altNameHash: { [oldName: string]: string } = {
-	['horizontalBar']: 'Horziontal Bar',
-	['bar']: 'Bar',
-	['line']: 'Line',
-	['pie']: 'Pie',
-	['scatter']: 'Scatter',
-	['timeSeries']: 'Time Series',
-	['image']: 'Image',
-	['count']: 'Count',
-	['table']: 'Table',
-	['doughnut']: 'Doughnut'
-};
 
 export interface ISelectBoxStyles extends vsISelectBoxStyles {
 	disabledSelectBackground?: Color;
@@ -74,9 +60,7 @@ export class SelectBox extends vsSelectBox {
 
 
 	constructor(options: string[], selectedOption: string, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions) {
-		//originally {text :option };
+		super(options.map(option => { return { text: option }; }), 0, contextViewProvider, undefined, selectBoxOptions);
-		super(options.map(option => { return { text: SelectBox.parseName(option) }; }), 0, contextViewProvider, undefined, selectBoxOptions);
-
 		this._optionsDictionary = new Map<string, number>();
 		for (let i = 0; i < options.length; i++) {
 			this._optionsDictionary.set(options[i], i);
@@ -109,15 +93,6 @@ export class SelectBox extends vsSelectBox {
 		this._register(focusTracker.onDidFocus(() => this._showMessage()));
 	}
 
-	//static method that is used to replace original names of options into user-friendly ones for display.
-	private static parseName(oldName: string): string {
-		if (altNameHash[oldName] !== undefined) {
-			return altNameHash[oldName];
-		}
-		else {
-			return oldName;
-		}
-	}
 
 	public style(styles: ISelectBoxStyles): void {
 		super.style(styles);

src/sql/workbench/parts/charts/browser/chartView.ts

@@ -25,6 +25,7 @@ import { CreateInsightAction, CopyAction, SaveImageAction, IChartActionContext }
 import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { ChartState, IInsightOptions, ChartType } from 'sql/workbench/parts/charts/common/interfaces';
+import * as nls from 'vs/nls';
 
 declare class Proxy {
 	constructor(object, handler);
@@ -32,6 +33,21 @@ declare class Proxy {
 
 const insightRegistry = Registry.as<IInsightRegistry>(Extensions.InsightContribution);
 
+//Map used to store names and alternative names for chart types.
+//This is mainly used for comparison when options are parsed into the constructor.
+const altNameHash: { [oldName: string]: string } = {
+	'horizontalBar': nls.localize('horizontalBarAltName', "Horizontal Bar"),
+	'bar': nls.localize('barAltName', "Bar"),
+	'line': nls.localize('lineAltName', "Line"),
+	'pie': nls.localize('pieAltName', "Pie"),
+	'scatter': nls.localize('scatterAltName', "Scatter"),
+	'timeSeries': nls.localize('timeSeriesAltName', "Time Series"),
+	'image': nls.localize('imageAltName', "Image"),
+	'count': nls.localize('countAltName', "Count"),
+	'table': nls.localize('tableAltName', "Table"),
+	'doughnut': nls.localize('doughnutAltName', "Doughnut")
+};
+
 export class ChartView extends Disposable implements IPanelView {
 	private insight: Insight;
 	private _queryRunner: QueryRunner;
@@ -116,6 +132,7 @@ export class ChartView extends Disposable implements IPanelView {
 			}
 		}) as IInsightOptions;
 
+
 		ChartOptions.general[0].options = insightRegistry.getAllIds();
 		ChartOptions.general.map(o => {
 			this.createOption(o, generalControls);
@@ -127,6 +144,14 @@ export class ChartView extends Disposable implements IPanelView {
 
 	}
 
+	/**
+	 * Function used to generate list of alternative names for use with SelectBox
+	 * @param option - the original option names.
+	 */
+	private changeToAltNames(option: string[]): string[] {
+		return option.map(o => altNameHash[o] || o);
+	}
+
 	public dispose() {
 		dispose(this.optionDisposables);
 		super.dispose();
@@ -277,8 +302,8 @@ export class ChartView extends Disposable implements IPanelView {
 				};
 				break;
 			case ControlType.combo:
-
+				//pass options into changeAltNames in order for SelectBox to show user-friendly names.
-				let dropdown = new SelectBox(option.displayableOptions || option.options, undefined, this._contextViewService);
+				let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options), undefined, this._contextViewService);
 				dropdown.select(option.options.indexOf(value));
 				dropdown.render(optionContainer);
 				dropdown.onDidSelect(e => {