Initial Code Layering (#3788)

* working on formatting

* fixed basic lint errors; starting moving things to their appropriate location

* formatting

* update tslint to match the version of vscode we have

* remove unused code

* work in progress fixing layering

* formatting

* moved connection management service to platform

* formatting

* add missing file

* moving more servies

* formatting

* moving more services

* formatting

* wip

* moving more services

* formatting

* revert back tslint rules

* move css file

* add missing svgs

src/sql/workbench/parts/backup/browser/backupUiService.ts

@@ -0,0 +1,129 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { Event, Emitter } from 'vs/base/common/event';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { TPromise } from 'vs/base/common/winjs.base';
+
+import * as sqlops from 'sqlops';
+
+import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
+import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
+import * as ConnectionUtils from 'sql/platform/connection/common/utils';
+import { ProviderConnectionInfo } from 'sql/platform/connection/common/providerConnectionInfo';
+import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
+import { BackupDialog } from 'sql/parts/disasterRecovery/backup/backupDialog';
+import { OptionsDialog } from 'sql/base/browser/ui/modal/optionsDialog';
+import { IBackupUiService, IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService';
+
+export class BackupUiService implements IBackupUiService {
+	public _serviceBrand: any;
+	private _backupDialogs: { [providerName: string]: BackupDialog | OptionsDialog } = {};
+	private _currentProvider: string;
+	private _optionValues: { [optionName: string]: any } = {};
+	private _connectionUri: string;
+	private static _connectionUniqueId: number = 0;
+
+	private _onShowBackupEvent: Emitter<{ connection: IConnectionProfile, ownerUri: string }>;
+	public get onShowBackupEvent(): Event<{ connection: IConnectionProfile, ownerUri: string }> { return this._onShowBackupEvent.event; }
+
+	constructor(
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@ICapabilitiesService private _capabilitiesService: ICapabilitiesService,
+		@IBackupService private _disasterRecoveryService: IBackupService,
+		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService
+	) {
+		this._onShowBackupEvent = new Emitter<{ connection: IConnectionProfile, ownerUri: string }>();
+	}
+
+	public showBackup(connection: IConnectionProfile): Promise<any> {
+		let self = this;
+		return new Promise<void>((resolve, reject) => {
+			self.showBackupDialog(connection).then(() => {
+				resolve(void 0);
+			}, error => {
+				reject();
+			});
+		});
+	}
+
+	private getOptions(provider: string): sqlops.ServiceOption[] {
+		let feature = this._capabilitiesService.getLegacyCapabilities(this._currentProvider).features.find(f => f.featureName === 'backup');
+		if (feature) {
+			return feature.optionsMetadata;
+		} else {
+			return undefined;
+		}
+	}
+
+	public showBackupDialog(connection: IConnectionProfile): TPromise<void> {
+		let self = this;
+		self._connectionUri = ConnectionUtils.generateUri(connection);
+		self._currentProvider = connection.providerName;
+		let backupDialog = self._backupDialogs[self._currentProvider];
+		if (!backupDialog) {
+			let backupOptions = this.getOptions(this._currentProvider);
+			if (backupOptions) {
+				backupDialog = self._instantiationService ? self._instantiationService.createInstance(
+					OptionsDialog, 'Backup database - ' + connection.serverName + ':' + connection.databaseName, 'BackupOptions', undefined) : undefined;
+				backupDialog.onOk(() => this.handleOptionDialogClosed());
+			}
+			else {
+				backupDialog = self._instantiationService ? self._instantiationService.createInstance(BackupDialog) : undefined;
+			}
+			backupDialog.render();
+			self._backupDialogs[self._currentProvider] = backupDialog;
+		}
+
+		let backupOptions = this.getOptions(this._currentProvider);
+		return new TPromise<void>((resolve) => {
+			let uri = this._connectionManagementService.getConnectionUri(connection)
+				+ ProviderConnectionInfo.idSeparator
+				+ ConnectionUtils.ConnectionUriBackupIdAttributeName
+				+ ProviderConnectionInfo.nameValueSeparator
+				+ BackupUiService._connectionUniqueId;
+
+			this._connectionUri = uri;
+
+			BackupUiService._connectionUniqueId++;
+
+			// Create connection if needed
+			if (!this._connectionManagementService.isConnected(uri)) {
+				this._connectionManagementService.connect(connection, uri).then(() => {
+					this._onShowBackupEvent.fire({ connection: connection, ownerUri: uri });
+				});
+			}
+
+			if (backupOptions) {
+				(backupDialog as OptionsDialog).open(backupOptions, self._optionValues);
+			} else {
+				(backupDialog as BackupDialog).open(connection);
+			}
+			resolve(void 0);
+		});
+	}
+
+	public onShowBackupDialog() {
+		let backupDialog = this._backupDialogs[this._currentProvider];
+		if (backupDialog) {
+			backupDialog.setFocusableElements();
+		}
+	}
+
+	public closeBackup() {
+		let self = this;
+		let backupDialog = self._backupDialogs[self._currentProvider];
+		if (backupDialog) {
+			backupDialog.close();
+		}
+	}
+
+	private handleOptionDialogClosed() {
+		this._disasterRecoveryService.backup(this._connectionUri, this._optionValues, TaskExecutionMode.executeAndScript);
+	}
+
+}

src/sql/workbench/parts/connection/common/connectionViewlet.ts

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { IViewlet } from 'vs/workbench/common/viewlet';
+
+export interface IConnectionsViewlet extends IViewlet {
+	search(text: string): void;
+}

src/sql/workbench/parts/connection/electron-browser/connectionViewlet.ts

@@ -0,0 +1,162 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import 'vs/css!./media/connectionViewlet';
+import * as DOM from 'vs/base/browser/dom';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { Builder } from 'vs/base/browser/builder';
+import { Viewlet } from 'vs/workbench/browser/viewlet';
+import { IAction } from 'vs/base/common/actions';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { isPromiseCanceledError } from 'vs/base/common/errors';
+import Severity from 'vs/base/common/severity';
+import { VIEWLET_ID } from 'sql/platform/connection/common/connectionManagement';
+import { ServerTreeView } from 'sql/parts/objectExplorer/viewlet/serverTreeView';
+import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { ClearSearchAction, AddServerAction, AddServerGroupAction, ActiveConnectionsFilterAction } from 'sql/parts/objectExplorer/viewlet/connectionTreeAction';
+import { warn } from 'sql/base/common/log';
+import { IObjectExplorerService } from 'sql/parts/objectExplorer/common/objectExplorerService';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import { INotificationService } from 'vs/platform/notification/common/notification';
+import { localize } from 'vs/nls';
+import { IConnectionsViewlet } from 'sql/workbench/parts/connection/common/connectionViewlet';
+
+export class ConnectionViewlet extends Viewlet implements IConnectionsViewlet {
+
+	private _root: HTMLElement;
+	private _searchBox: InputBox;
+	private _toDisposeViewlet: IDisposable[] = [];
+	private _serverTreeView: ServerTreeView;
+	private _clearSearchAction: ClearSearchAction;
+	private _addServerAction: IAction;
+	private _addServerGroupAction: IAction;
+	private _activeConnectionsFilterAction: ActiveConnectionsFilterAction;
+
+	constructor(
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService private _themeService: IThemeService,
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@INotificationService private _notificationService: INotificationService,
+		@IObjectExplorerService private objectExplorerService: IObjectExplorerService,
+		@IPartService partService: IPartService
+	) {
+
+		super(VIEWLET_ID, partService, telemetryService, _themeService);
+
+		this._clearSearchAction = this._instantiationService.createInstance(ClearSearchAction, ClearSearchAction.ID, ClearSearchAction.LABEL, this);
+		this._addServerAction = this._instantiationService.createInstance(AddServerAction,
+			AddServerAction.ID,
+			AddServerAction.LABEL);
+		this._addServerGroupAction = this._instantiationService.createInstance(AddServerGroupAction,
+			AddServerGroupAction.ID,
+			AddServerGroupAction.LABEL);
+		this._serverTreeView = this._instantiationService.createInstance(ServerTreeView);
+		this._activeConnectionsFilterAction = this._serverTreeView.activeConnectionsFilterAction;
+		this.objectExplorerService.registerServerTreeView(this._serverTreeView);
+	}
+
+	private onError(err: any): void {
+		if (isPromiseCanceledError(err)) {
+			return;
+		}
+		this._notificationService.notify({
+			severity: Severity.Error,
+			message: err
+		});
+	}
+
+	public create(parent: HTMLElement): TPromise<void> {
+		return new TPromise<void>((resolve) => {
+			super.create(parent);
+			this._root = parent;
+			let parentBuilder = new Builder(parent);
+			parentBuilder.div({ class: 'server-explorer-viewlet' }, (viewletContainer) => {
+				viewletContainer.div({ class: 'search-box' }, (searchBoxContainer) => {
+					let searchServerString = localize('Search server names', 'Search server names');
+					this._searchBox = new InputBox(
+						searchBoxContainer.getHTMLElement(),
+						null,
+						{
+							placeholder: searchServerString,
+							actions: [this._clearSearchAction],
+							ariaLabel: searchServerString
+						}
+					);
+
+					this._searchBox.onDidChange(() => {
+						this.search(this._searchBox.value);
+					});
+
+					// Theme styler
+					this._toDisposeViewlet.push(attachInputBoxStyler(this._searchBox, this._themeService));
+
+				});
+				viewletContainer.div({ Class: 'object-explorer-view' }, (viewContainer) => {
+					this._serverTreeView.renderBody(viewContainer.getHTMLElement()).then(() => {
+						resolve(null);
+					}, error => {
+						warn('render registered servers: ' + error);
+						resolve(null);
+					});
+				});
+			});
+		});
+	}
+
+	public search(value: string): void {
+		if (value) {
+			this._clearSearchAction.enabled = true;
+			this._serverTreeView.searchTree(value);
+		} else {
+			this.clearSearch();
+		}
+	}
+
+	public setVisible(visible: boolean): TPromise<void> {
+		return super.setVisible(visible).then(() => {
+			this._serverTreeView.setVisible(visible);
+		});
+	}
+
+	/**
+	 * Return actions for the viewlet
+	 */
+	public getActions(): IAction[] {
+		return [this._addServerAction, this._addServerGroupAction, this._activeConnectionsFilterAction];
+	}
+
+	public focus(): void {
+		super.focus();
+	}
+
+	public layout({ height, width }: DOM.Dimension): void {
+		this._searchBox.layout();
+		this._serverTreeView.layout(height - 36); // account for search box
+		DOM.toggleClass(this._root, 'narrow', width <= 350);
+	}
+
+	public getOptimalWidth(): number {
+		return 400;
+	}
+
+	public clearSearch() {
+		this._serverTreeView.refreshTree();
+		this._searchBox.value = '';
+		this._clearSearchAction.enabled = false;
+		this._searchBox.focus();
+	}
+
+	public dispose(): void {
+		this._serverTreeView.dispose();
+		this._toDisposeViewlet = dispose(this._toDisposeViewlet);
+	}
+
+}

src/sql/workbench/parts/connection/electron-browser/media/collapsed-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>

src/sql/workbench/parts/connection/electron-browser/media/connected_active_server.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#212121;}.cls-2{fill:#3bb44a;}</style></defs><title>connected_active_server_16x16</title><path class="cls-1" d="M1.29.07V16h9.59a3.31,3.31,0,0,1-1.94-1H2.29V11h6a3.31,3.31,0,0,1,.54-.8A1.81,1.81,0,0,1,9,10H2.29v-9h8.53v8a3.68,3.68,0,0,1,.58,0l.39,0h0v-9Z"/><path class="cls-1" d="M3.3,1.8V4.25H5.75V1.8Zm2,2H3.8V2.3H5.25Z"/><circle class="cls-2" cx="11.24" cy="12.52" r="3.47"/></svg>

src/sql/workbench/parts/connection/electron-browser/media/connected_active_server_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#3bb44a;}</style></defs><title>connected_active_server_inverse_16x16</title><path class="cls-1" d="M1.29.07V16h9.59a3.31,3.31,0,0,1-1.94-1H2.29V11h6a3.31,3.31,0,0,1,.54-.8A1.81,1.81,0,0,1,9,10H2.29v-9h8.53v8a3.68,3.68,0,0,1,.58,0l.39,0h0v-9Z"/><path class="cls-1" d="M3.3,1.8V4.25H5.75V1.8Zm2,2H3.8V2.3H5.25Z"/><circle class="cls-2" cx="11.24" cy="12.52" r="3.47"/></svg>

src/sql/workbench/parts/connection/electron-browser/media/connectionViewlet.css

@@ -0,0 +1,138 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* --- Registered servers tree viewlet --- */
+.server-explorer-viewlet .monaco-tree .monaco-tree-row .content .server-group {
+	cursor: default;
+	width: 100%;
+	display: flex;
+	align-items: center;
+}
+
+/* Bold font style does not go well with CJK fonts */
+.server-explorer-viewlet:lang(zh-Hans) .monaco-tree .monaco-tree-row .server-group,
+.server-explorer-viewlet:lang(zh-Hant) .monaco-tree .monaco-tree-row .server-group,
+.server-explorer-viewlet:lang(ja) .monaco-tree .monaco-tree-row .server-group,
+.server-explorer-viewlet:lang(ko) .monaco-tree .monaco-tree-row .server-group { font-weight: normal; }
+
+/* High Contrast Theming */
+.hc-black .monaco-workbench .server-explorer-viewlet .server-group {
+	line-height: 20px;
+}
+
+.monaco-workbench > .activitybar .monaco-action-bar .action-label.serverTree {
+	background-size: 22px;
+	background-repeat: no-repeat;
+	background-position: 50% !important;
+}
+
+.server-explorer-viewlet .object-explorer-view {
+	height: calc(100% - 36px);
+}
+
+.server-explorer-viewlet .server-group {
+	height: 38px;
+	line-height: 38px;
+	color: #ffffff;
+}
+
+.server-explorer-viewlet  .monaco-action-bar .action-label {
+	margin-right: 0.3em;
+	margin-left: 0.3em;
+	line-height: 15px;
+	width: 10px !important;
+	height: 10px !important;
+}
+
+/* Add space beneath the button */
+.new-connection .monaco-text-button {
+margin-bottom: 2px;
+}
+
+/* display action buttons on hover */
+.server-explorer-viewlet .monaco-tree .monaco-tree-row > .content {
+	display: flex;
+}
+
+/* Added to display the tree in connection dialog */
+.server-explorer-viewlet {
+	height: 100%;
+}
+
+.explorer-servers {
+	height: 100%;
+}
+
+/* search box */
+.server-explorer-viewlet .search-box {
+	padding-bottom: 4px;
+	margin: auto;
+	width: 95%;
+}
+
+/* OE and connection element group */
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile,
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .object-element-group {
+	padding: 5px;
+	overflow: hidden;
+}
+
+/* OE and connection label */
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .label,
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .object-element-group > .label {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+/* OE and connection icon */
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon,
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .object-element-group > .icon {
+	float: left;
+	height: 16px;
+	width: 16px;
+	padding-right: 10px;
+}
+
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.connected {
+	background: url('connected_active_server.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.connected,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.connected{
+	background: url('connected_active_server_inverse.svg') center center no-repeat;
+}
+
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.disconnected {
+	background: url('disconnected_server.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.disconnected,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page.disconnected{
+	background: url('disconnected_server_inverse.svg') center center no-repeat;
+}
+
+/* loading for OE node */
+.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .connection-tile:before,
+.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .object-element-group:before {
+	position: absolute;
+	display: block;
+	width: 36px;
+	height: 100%;
+	top: 0;
+	left: -35px;
+}
+
+.monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.expanded.has-children > .content.server-group:before {
+	background: url('expanded-dark.svg') 50% 50% no-repeat;
+}
+
+.monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content.server-group:before {
+	background: url('collapsed-dark.svg') 50% 50% no-repeat;
+}
+
+/* Add connection button */
+.server-explorer-viewlet .button-section {
+	padding: 20px;
+}

src/sql/workbench/parts/connection/electron-browser/media/disconnected_server.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#212121;}.cls-2{fill:#d02e00;}</style></defs><title>disconnected_server_16x16</title><path class="cls-1" d="M1.42.06V16H11a3.31,3.31,0,0,1-1.94-1H2.42V11h6a3.31,3.31,0,0,1,.54-.8,1.81,1.81,0,0,1,.19-.2H2.42v-9H11v8a3.68,3.68,0,0,1,.58,0l.39,0h0v-9Z"/><path class="cls-1" d="M3.43,1.79V4.24H5.89V1.79Zm2,2H3.93V2.29H5.39Z"/><path class="cls-2" d="M11.08,16a2.22,2.22,0,0,0,.45,0,2.59,2.59,0,0,0,.4,0Z"/><path class="cls-2" d="M12,9.08h0l-.39,0a3.68,3.68,0,0,0-.58,0A3.41,3.41,0,0,0,9.14,10a1.81,1.81,0,0,0-.19.2,3.46,3.46,0,0,0-.89,2.3,3.4,3.4,0,0,0,.85,2.26,1.29,1.29,0,0,0,.16.17A3.31,3.31,0,0,0,11,16H12a3.46,3.46,0,0,0,2.17-1.13,3.41,3.41,0,0,0,.88-2.3A3.47,3.47,0,0,0,12,9.08Zm0,5.72a1.72,1.72,0,0,1-.39,0,2.23,2.23,0,0,1-.77-.14,2.29,2.29,0,0,1-1.54-2.17A2.22,2.22,0,0,1,9.79,11a2.29,2.29,0,0,1,1-.67,2.23,2.23,0,0,1,.77-.14,1.72,1.72,0,0,1,.39,0h0a2.3,2.3,0,0,1,0,4.53Z"/></svg>

src/sql/workbench/parts/connection/electron-browser/media/disconnected_server_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#d02e00;}</style></defs><title>disconnected_server_inverse_16x16</title><path class="cls-1" d="M1.42.06V16H11a3.31,3.31,0,0,1-1.94-1H2.42V11h6a3.31,3.31,0,0,1,.54-.8,1.81,1.81,0,0,1,.19-.2H2.42v-9H11v8a3.68,3.68,0,0,1,.58,0l.39,0h0v-9Z"/><path class="cls-1" d="M3.43,1.79V4.24H5.89V1.79Zm2,2H3.93V2.29H5.39Z"/><path class="cls-2" d="M11.08,16a2.22,2.22,0,0,0,.45,0,2.59,2.59,0,0,0,.4,0Z"/><path class="cls-2" d="M12,9.08h0l-.39,0a3.68,3.68,0,0,0-.58,0A3.41,3.41,0,0,0,9.14,10a1.81,1.81,0,0,0-.19.2,3.46,3.46,0,0,0-.89,2.3,3.4,3.4,0,0,0,.85,2.26,1.29,1.29,0,0,0,.16.17A3.31,3.31,0,0,0,11,16H12a3.46,3.46,0,0,0,2.17-1.13,3.41,3.41,0,0,0,.88-2.3A3.47,3.47,0,0,0,12,9.08Zm0,5.72a1.72,1.72,0,0,1-.39,0,2.23,2.23,0,0,1-.77-.14,2.29,2.29,0,0,1-1.54-2.17A2.22,2.22,0,0,1,9.79,11a2.29,2.29,0,0,1,1-.67,2.23,2.23,0,0,1,.77-.14,1.72,1.72,0,0,1,.39,0h0a2.3,2.3,0,0,1,0,4.53Z"/></svg>

src/sql/workbench/parts/connection/electron-browser/media/expanded-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M11 10H5.344L11 4.414V10z"/></svg>