[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/Controls/Accordion/AccordionComponent.tsx

@@ -25,6 +25,7 @@ export class AccordionComponent extends React.Component<AccordionComponentProps>
 export interface AccordionItemComponentProps {
   title: string;
   isExpanded?: boolean;
+  styles?: React.CSSProperties;
 }
 
 interface AccordionItemComponentState {
@@ -53,6 +54,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
   }
 
   public render(): JSX.Element {
+    const { styles } = this.props;
     return (
       <div className="accordionItemContainer">
         <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
@@ -60,7 +62,11 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
           {this.props.title}
         </div>
         <div className="accordionItemContent">
-          <AnimateHeight duration={AccordionItemComponent.durationMS} height={this.state.isExpanded ? "auto" : 0}>
+          <AnimateHeight
+            style={{ ...styles }}
+            duration={AccordionItemComponent.durationMS}
+            height={this.state.isExpanded ? "auto" : 0}
+          >
             {this.props.children}
           </AnimateHeight>
         </div>