Add graph icons to OE and TD (#18808)

* add graph icons to OE and TD * PR comments * change enum type * change sub type to icon and make basic as default * changed icontype to icon * change default logic location * change icon name to be more generic * use right icons
2026-02-01 09:35:41 -05:00 · 2022-04-01 00:27:59 -07:00
parent 27f014c70d
commit bab5118996
14 changed files with 205 additions and 13 deletions
--- a/src/sql/workbench/api/common/sqlExtHost.api.impl.ts
+++ b/src/sql/workbench/api/common/sqlExtHost.api.impl.ts
@@ -587,6 +587,7 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				TableIndexProperty: sqlExtHostTypes.designers.TableIndexProperty,
 				TableIndexColumnSpecificationProperty: sqlExtHostTypes.designers.TableIndexColumnSpecificationProperty,
 				DesignerEditType: sqlExtHostTypes.designers.DesignerEditType,
+				TableIcon: sqlExtHostTypes.designers.TableIcon,
 				openTableDesigner(providerId, tableInfo: azdata.designers.TableInfo, telemetryInfo?: ITelemetryEventProperties): Promise<void> {
 					return extHostDataProvider.$openTableDesigner(providerId, tableInfo, telemetryInfo);
 				}
--- a/src/sql/workbench/api/common/sqlExtHostTypes.ts
+++ b/src/sql/workbench/api/common/sqlExtHostTypes.ts
@@ -544,6 +544,8 @@ export class SqlThemeIcon {
 	static readonly ExternalTable = new SqlThemeIcon('ExternalTable');
 	static readonly ColumnMasterKey = new SqlThemeIcon('ColumnMasterKey');
 	static readonly ColumnEncryptionKey = new SqlThemeIcon('ColumnEncryptionKey');
+	static readonly GraphEdge = new SqlThemeIcon('GraphEdge');
+	static readonly GraphNode = new SqlThemeIcon('GraphNode');

 	public readonly id: string;

@@ -1014,4 +1016,11 @@ export namespace designers {
 		Remove = 1,
 		Update = 2
 	}
+
+	export enum TableIcon {
+		Basic = 'Basic',
+		Temporal = 'Temporal',
+		GraphEdge = 'GraphEdge',
+		GraphNode = 'GraphNode'
+	}
 }
--- a/src/sql/workbench/browser/editor/tableDesigner/tableDesignerInput.ts
+++ b/src/sql/workbench/browser/editor/tableDesigner/tableDesignerInput.ts
@@ -18,11 +18,25 @@ import { INotificationService } from 'vs/platform/notification/common/notificati

 const NewTable: string = localize('tableDesigner.newTable', "New Table");

+enum TableIcon {
+	Basic = 'Basic',
+	Temporal = 'Temporal',
+	GraphEdge = 'GraphEdge',
+	GraphNode = 'GraphNode'
+}
 export class TableDesignerInput extends EditorInput {
 	public static ID: string = 'workbench.editorinputs.tableDesignerInput';
 	private _designerComponentInput: TableDesignerComponentInput;
 	private _title: string;
 	private _name: string;
+	private _tableIcon: azdata.designers.TableIcon;
+	private _tableIconMap: Map<TableIcon, string> = new Map<TableIcon, string>([
+		[TableIcon.Basic, 'table-basic'],
+		[TableIcon.Temporal, 'table-temporal'],
+		[TableIcon.GraphEdge, 'table-graphedge'],
+		[TableIcon.GraphNode, 'table-graphnode']
+	]);
+

 	constructor(
 		private _provider: TableDesignerProvider,
@@ -42,6 +56,7 @@ export class TableDesignerInput extends EditorInput {
 				this._onDidChangeDirty.fire();
 			}
 		}));
+		this._tableIcon = tableInfo.tableIcon.toString() === '' ? TableIcon.Basic : tableInfo.tableIcon as TableIcon;
 		this.setEditorLabel();
 	}

@@ -52,7 +67,7 @@ export class TableDesignerInput extends EditorInput {
 	public get resource(): URI {
 		return URI.from({
 			scheme: Schemas.tableDesigner,
-			path: 'table-designer'
+			path: this._tableIconMap.get(this._tableIcon)
 		});
 	}

--- a/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/Table_GraphEdge.svg
+++ b/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/Table_GraphEdge.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F6F6F6;}
+	.st1{fill:#F6F6F6;fill-opacity:0;}
+	.st2{fill:#424242;}
+	.st3{fill:#F0EFF1;}
+</style>
+<path class="st0" d="M16,1H1v12.1c0,0,0,0.1,0,0.1V15h0.8c0.6,0.6,1.4,1,2.2,1c0.3,0,0.5,0,0.8-0.1c0.6-0.2,1.1-0.5,1.5-0.9h1.6
+	c0.6,0.6,1.3,1,2.2,1h0c0.3,0,0.5,0,0.8-0.1c0.6-0.2,1.1-0.5,1.5-0.9H16V1z"/>
+<path id="canvas" class="st1" d="M16,16H0V0h16V16z"/>
+<path class="st2" d="M2,2v8.8c0.4-0.3,0.8-0.6,1.2-0.7C3.5,10,3.7,10,4,10H3V8h3v2H4c1.1,0,2.1,0.6,2.6,1.5H7V11h0.8
+	c0.6-0.6,1.3-1,2.2-1H7V8h3v2h0c0.9,0,1.7,0.4,2.2,1H14v2h-1c0,0.3,0,0.7-0.2,1H15V2H2z M6,7H3V5h3V7z M10,7H7V5h3V7z M14,10h-3V8h3
+	V10z M14,7h-3V5h3V7z"/>
+<path class="st2" d="M10,11c-0.9,0-1.7,0.6-1.9,1.5H5.9c-0.3-1.1-1.4-1.7-2.4-1.4c-1.1,0.3-1.7,1.4-1.4,2.4c0.3,1.1,1.4,1.7,2.4,1.4
+	c0.7-0.2,1.3-0.7,1.4-1.4h2.1c0.3,1.1,1.4,1.7,2.4,1.4c1.1-0.3,1.7-1.4,1.4-2.4C11.7,11.6,10.9,11,10,11z M4,14c-0.6,0-1-0.4-1-1
+	s0.4-1,1-1s1,0.4,1,1S4.6,14,4,14z M10,14c-0.6,0-1-0.4-1-1s0.4-1,1-1c0.6,0,1,0.4,1,1S10.6,14,10,14z"/>
+<g>
+	<rect x="3" y="5" class="st3" width="3" height="2"/>
+	<rect x="7" y="8" class="st3" width="3" height="2"/>
+	<path class="st3" d="M7.4,11.5c0.1-0.2,0.2-0.3,0.4-0.5H7v0.5H7.4z"/>
+	<rect x="7" y="5" class="st3" width="3" height="2"/>
+	<rect x="11" y="5" class="st3" width="3" height="2"/>
+	<polygon class="st3" points="4,10 4,10 6,10 6,8 3,8 3,10 4,10 	"/>
+	<rect x="11" y="8" class="st3" width="3" height="2"/>
+	<path class="st3" d="M12.9,12.2C13,12.5,13,12.8,13,13h1v-2h-1.8C12.6,11.3,12.8,11.8,12.9,12.2z"/>
+</g>
+</svg>
--- a/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/Table_GraphNode.svg
+++ b/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/Table_GraphNode.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F6F6F6;}
+	.st1{fill:#F6F6F6;fill-opacity:0;}
+	.st2{fill:#424242;}
+	.st3{fill:#F0EFF1;}
+</style>
+<path class="st0" d="M16,1H1v14h0.8c0.5,0.6,1.3,1,2.2,1s1.7-0.4,2.2-1H16V1z"/>
+<path id="canvas" class="st1" d="M16,16H0V0h16V16z"/>
+<path class="st2" d="M2,2v8.8C2.5,10.3,3.2,10,4,10H3V8h3v2H4c1.7,0,3,1.3,3,3v-2h3v2H7c0,0.4-0.1,0.7-0.2,1H15V2H2z M6,7H3V5h3V7z
+	 M10,10H7V8h3V10z M10,7H7V5h3V7z M14,13h-3v-2h3V13z M14,10h-3V8h3V10z M14,7h-3V5h3V7z"/>
+<circle class="st2" cx="4" cy="13" r="2"/>
+<g>
+	<rect x="7" y="8" class="st3" width="3" height="2"/>
+	<rect x="7" y="11" class="st3" width="3" height="2"/>
+	<rect x="3" y="5" class="st3" width="3" height="2"/>
+	<rect x="3" y="8" class="st3" width="3" height="2"/>
+	<rect x="11" y="8" class="st3" width="3" height="2"/>
+	<rect x="11" y="5" class="st3" width="3" height="2"/>
+	<rect x="7" y="5" class="st3" width="3" height="2"/>
+	<rect x="11" y="11" class="st3" width="3" height="2"/>
+</g>
+</svg>
--- a/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/objecttypes.css
+++ b/src/sql/workbench/services/objectExplorer/browser/media/objectTypes/objecttypes.css
@@ -579,6 +579,19 @@
 	background: url("Table_Temporal.svg") center center no-repeat;
 }

+.vs .icon.table_graphnode,
+.vs-dark .icon.table_graphnode,
+.hc-black .icon.table_graphnode {
+	background: url("Table_GraphNode.svg") center center no-repeat;
+}
+
+.vs .icon.table_graphedge,
+.vs-dark .icon.table_graphedge,
+.hc-black .icon.table_graphedge {
+	background: url("Table_GraphEdge.svg") center center no-repeat;
+}
+
+
 .vs .icon.trigger,
 .vs-dark .icon.trigger,
 .hc-black .icon.trigger {