[Query Copilot] Resource tree styling and New query button (#1519)

* Styling implemented related with the work item

* Sample container New query button implementation

* Fixing related with the not rendering Sample Data

* Fix race condition when rendering sample data resource tree

* Remove export keyword for updateContextForSampleData

* Copilot New Query should open Copilot tab

* showing buttons in sample command bar

---------

Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>
Co-authored-by: Victor Meng <vimeng@microsoft.com>

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,3 +1,4 @@
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
@@ -140,6 +141,21 @@ export const createCollectionContextMenuButton = (
   return items;
 };
 
+export const createSampleCollectionContextMenuButton = (
+  selectedCollection: ViewModels.CollectionBase
+): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [];
+  if (userContext.apiType === "SQL") {
+    items.push({
+      iconSrc: AddSqlQueryIcon,
+      onClick: () => selectedCollection && useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot),
+      label: "New SQL Query",
+    });
+  }
+
+  return items;
+};
+
 export const createStoreProcedureContextMenuItems = (
   container: Explorer,
   storedProcedure: StoredProcedure