[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/hooks/useKnockoutExplorer.ts

@@ -62,10 +62,6 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
           setExplorer(explorer);
         }
       }
-
-      if (userContext.features.enableCopilot) {
-        await updateContextForSampleData();
-      }
     };
     effect();
   }, [platform]);
@@ -73,6 +69,9 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
   useEffect(() => {
     if (explorer) {
       applyExplorerBindings(explorer);
+      if (userContext.features.enableCopilot) {
+        updateContextForSampleData(explorer);
+      }
     }
   }, [explorer]);
 
@@ -415,7 +414,7 @@ interface PortalMessage {
   inputs?: DataExplorerInputsFrame;
 }
 
-async function updateContextForSampleData(): Promise<void> {
+async function updateContextForSampleData(explorer: Explorer): Promise<void> {
   if (!userContext.features.enableCopilot) {
     return;
   }
@@ -435,6 +434,8 @@ async function updateContextForSampleData(): Promise<void> {
   const data: SampledataconnectionResponse = await response.json();
   const sampleDataConnectionInfo = parseResourceTokenConnectionString(data.connectionString);
   updateUserContext({ sampleDataConnectionInfo });
+
+  await explorer.refreshSampleData();
 }
 
 interface SampledataconnectionResponse {