Introducing Visualizer to SQL Query Editor (#6422)

* extension recommendation on application launch

* Introducing Visualizer (SandDance) to the SQL Query Editor. (#6347)

* Created Visualizer icon in the results grid. Utilized a context key so that the icon only shows if Visualizer extensions (currently, just SandDance) is installed. Visualizer icon open up SandDance in a top-level document.

* When the user clicks on Charts, visualizer recommendation popup appears. User can click on "Install Extensions" to download the visualizer extensions.

* Enabled SQL Query Editor to pass query data to SandDance extension.

* Introducing Visualizer (SandDance) to the SQL Query Editor. (#6347)

* Created Visualizer icon in the results grid. Utilized a context key so that the icon only shows if Visualizer extensions (currently, just SandDance) is installed. Visualizer icon open up SandDance in a top-level document.

* When the user clicks on Charts, visualizer recommendation popup appears. User can click on "Install Extensions" to download the visualizer extensions.

* Enabled SQL Query Editor to pass query data to SandDance extension.

* Cleaned code; made changes according to PR comments

* removed the test service for extensions gallary

* Cleaned up code according to PR changes

* unid changes to build/azure-piplines

* Removed all the build/azure-pipelines changes

* removed changes on media/language.svg

* refactored extension recommendation system to allow it to be generic

* updated extensionsViews to support generic extension query search; added localized constants for visualizer extensions

* Made syntax and error message changes acccording to PR comments.

* Updated recommendation message according to scenario type

src/sql/base/browser/ui/table/media/slickColorTheme.css

@@ -122,6 +122,10 @@
 	background-image: url("viewChart.svg");
 }
 
+.vs .icon.viewVisualizer {
+	background-image: url("viewVisualizer.svg");
+}
+
 /* headers */
 .vs .resultsMessageHeader {
 	background: var(--color-bg-header);
@@ -260,6 +264,11 @@
 	background-image: url("viewChart_inverse.svg");
 }
 
+.vs-dark .icon.viewVisualizer,
+.hc-black .icon.viewVisualizer {
+	background-image: url("viewVisualizer_inverse.svg");
+}
+
 .grid-panel .action-label.icon {
 	height: 16px;
 	min-width: 28px;

src/sql/base/browser/ui/table/media/viewVisualizer.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,.cls-2{fill:#f6f6f6;}.cls-1{fill-opacity:0;}.cls-3{fill:#424242;}</style></defs><title>viewVisualizer</title><path id="canvas" class="cls-1" d="M17.11,16.33H-1V-1.75H17.11Z"/><path id="canvas-2" class="cls-1" d="M10.89,16H0V5.13H10.89Z"/><path id="outline-2" class="cls-2" d="M.68,9.21V8.68h0L0,8.08V6.48L1.28,5.13H2l2.2,2.14L2.8,8.74l-.07-.07v.54h2V8.52H6.81V5.81l2.7,0v6.81h0L10.77,14v.73L9.64,16H7.85l-.58-.56.08-.08H.68Z"/><path id="iconBg" class="cls-3" d="M4.76,12.6H3.41V9.89H4.76ZM6.81,9.21H5.44V12.6H6.81Zm2-2.72H7.49V12.6H8.84Zm-.11,6.3-.47.48L9,14H2.05V7l.75.75.48-.49L1.71,5.73.15,7.29l.49.47.71-.71v7.63H9l-.75.76.48.47,1.62-1.57Z"/><path id="iconBg-2" class="cls-3" d="M16,.51V14.07H10.77V12.94h4.08v-9H1.28V5.32H.15V.51Z"/></svg>

src/sql/base/browser/ui/table/media/viewVisualizer_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,.cls-2{fill:#f6f6f6;}.cls-1{fill-opacity:0;}.cls-3{fill:#c5c5c5;}</style></defs><title>viewVisualizer</title><path id="canvas-2" class="cls-1" d="M10.89,16H0V5.13H10.89Z"/><path id="outline-2" class="cls-2" d="M.68,9.21V8.68h0L0,8.08V6.48L1.28,5.13H2l2.2,2.14L2.8,8.74l-.07-.07v.54h2V8.52H6.81V5.81l2.7,0v6.81h0L10.77,14v.73L9.64,16H7.85l-.58-.56.08-.08H.68Z"/><path id="iconBg" class="cls-3" d="M4.76,12.6H3.41V9.89H4.76ZM6.81,9.21H5.44V12.6H6.81Zm2-2.72H7.49V12.6H8.84Zm-.11,6.3-.47.48L9,14H2.05V7l.75.75.48-.49L1.71,5.73.15,7.29l.49.47.71-.71v7.63H9l-.75.76.48.47,1.62-1.57Z"/><path id="iconBg-2" class="cls-3" d="M16,.51V14.07H10.77V12.94h4.08v-9H1.28V5.32H.15V.51Z"/></svg>