Bump word-wrap from 1.2.3 to 1.2.4

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

less/resourceTree.less

@@ -28,4 +28,4 @@
   .clickDisabled {
     pointer-events: none;
   }
-}
+}

package.json

@@ -160,6 +160,7 @@
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-playwright-preset": "1.5.1",
+    "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "4.1.0",
@@ -232,4 +233,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -25,6 +25,7 @@ export class AccordionComponent extends React.Component<AccordionComponentProps>
 export interface AccordionItemComponentProps {
   title: string;
   isExpanded?: boolean;
+  containerStyles?: React.CSSProperties;
   styles?: React.CSSProperties;
 }
 
@@ -54,9 +55,9 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
   }
 
   public render(): JSX.Element {
-    const { styles } = this.props;
+    const { containerStyles, styles } = this.props;
     return (
-      <div className="accordionItemContainer">
+      <div className="accordionItemContainer" style={{ ...containerStyles }}>
         <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
           {this.renderCollapseExpandIcon()}
           {this.props.title}

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -31,6 +31,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
+
+    setTimeout(() => {
+      const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
+      if (suggestionWidget) {
+        suggestionWidget.style.display = "none";
+      }
+    }, 100);
   }
 
   public componentDidUpdate(previous: EditorReactProps) {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -268,7 +268,6 @@ function createNewCollectionGroup(container: Explorer): CommandButtonComponentPr
     ariaLabel: label,
     hasPopup: true,
     id: "createNewContainerCommandButton",
-    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
   };
 }
 
@@ -314,7 +313,6 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
-    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
   };
 }
 
@@ -493,7 +491,7 @@ function createOpenTerminalButton(container: Explorer): CommandButtonComponentPr
     onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
     commandButtonLabel: label,
     hasPopup: false,
-    disabled: false,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
     ariaLabel: label,
   };
 }

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,23 +1,23 @@
 import {
-  actions,
   AppState,
-  castToSessionId,
   ContentRef,
-  createKernelRef,
   JupyterHostRecordProps,
+  ServerConfig as JupyterServerConfig,
   KernelInfo,
   KernelRef,
   RemoteKernelProps,
+  actions,
+  castToSessionId,
+  createKernelRef,
   selectors,
-  ServerConfig as JupyterServerConfig,
 } from "@nteract/core";
-import { Channels, childOf, createMessage, JupyterMessage, message, ofMessageType } from "@nteract/messaging";
+import { Channels, childOf, createMessage, message, ofMessageType } from "@nteract/messaging";
 import { defineConfigOption } from "@nteract/mythic-configuration";
 import { RecordOf } from "immutable";
 import { Action, AnyAction } from "redux";
-import { ofType, StateObservable } from "redux-observable";
+import { StateObservable, ofType } from "redux-observable";
 import { kernels, sessions } from "rx-jupyter";
-import { concat, EMPTY, from, interval, merge, Observable, Observer, of, Subject, Subscriber, timer } from "rxjs";
+import { EMPTY, Observable, Observer, Subject, Subscriber, concat, from, interval, merge, of, timer } from "rxjs";
 import {
   catchError,
   concatMap,
@@ -35,17 +35,17 @@ import {
 import { webSocket } from "rxjs/webSocket";
 import * as Constants from "../../../Common/Constants";
 import { Areas } from "../../../Common/Constants";
-import { useTabs } from "../../../hooks/useTabs";
-import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { ActionModifiers, Action as TelemetryAction } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
+import { useTabs } from "../../../hooks/useTabs";
 import { useDialog } from "../../Controls/Dialog";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { NotebookContentProviderType, NotebookUtil } from "../NotebookUtil";
 import * as CdbActions from "./actions";
 import * as TextFile from "./contents/file/text-file";
-import { CdbAppState } from "./types";
+import { CdbAppState, JupyterMessage } from "./types";
 
 interface NotebookServiceConfig extends JupyterServerConfig {
   userPuid?: string;
@@ -106,10 +106,8 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   if (sessionId) {
     params.append("session_id", sessionId);
   }
-
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
-
   const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
@@ -241,10 +239,10 @@ const connect = (serverConfig: NotebookServiceConfig, kernelID: string, sessionI
             ...message,
             header: {
               session: sessionID,
+              token: serverConfig.token,
               ...message.header,
             },
           };
-
           wsSubject.next(sessionizedMessage);
         } else {
           console.error("Message must be an object, the app sent", message);

src/Explorer/Notebook/NotebookComponent/types.ts

@@ -1,5 +1,6 @@
 import { CellId } from "@nteract/commutable";
 import { AppState } from "@nteract/core";
+import { MessageType } from "@nteract/messaging";
 import * as Immutable from "immutable";
 import { Notebook } from "../../../Common/Constants";
 
@@ -53,3 +54,26 @@ export const makeCdbRecord = Immutable.Record<CdbRecordProps>({
   pendingSnapshotRequest: undefined,
   notebookSnapshotError: undefined,
 });
+
+export interface JupyterMessage<MT extends MessageType = MessageType, C = any> {
+  header: JupyterMessageHeader<MT>;
+  parent_header:
+    | JupyterMessageHeader<any>
+    | {
+        msg_id?: string;
+      };
+  metadata: object;
+  content: C;
+  channel: string;
+  buffers?: Uint8Array | null;
+}
+
+export interface JupyterMessageHeader<MT extends MessageType = MessageType> {
+  msg_id: string;
+  username: string;
+  date: string;
+  msg_type: MT;
+  version: string;
+  session: string;
+  token: string;
+}

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -2,13 +2,13 @@ import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } fro
 import * as Constants from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { FunctionComponent, useState } from "react";
 import * as SharedConstants from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
@@ -291,7 +291,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
               aria-required="true"
               required={true}
-              ariaLabel="addCollection-tableId"
+              ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
               pattern="[^/?#\\]*[^/?# \\]"
               title="May not end with space nor contain characters '\' '/' '#' '?'"

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -1,18 +1,18 @@
 import { Text, TextField } from "@fluentui/react";
 import { Areas } from "Common/Constants";
-import { deleteCollection } from "Common/dataAccess/deleteCollection";
 import DeleteFeedback from "Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
+import { deleteCollection } from "Common/dataAccess/deleteCollection";
 import { Collection } from "Contracts/ViewModels";
-import { useSidePanel } from "hooks/useSidePanel";
-import { useTabs } from "hooks/useTabs";
-import React, { FunctionComponent, useState } from "react";
 import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import { useTabs } from "hooks/useTabs";
+import React, { FunctionComponent, useState } from "react";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
@@ -126,6 +126,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 setInputCollectionName(newInput);
               }}
               ariaLabel={confirmContainer}
+              required
             />
           </div>
           {shouldRecordFeedback() && (

src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -44,6 +44,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
+              required={true}
               styles={
                 Object {
                   "fieldGroup": Object {
@@ -59,6 +60,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 deferredValidationTime={200}
                 id="confirmCollectionId"
                 onChange={[Function]}
+                required={true}
                 resizable={true}
                 styles={[Function]}
                 theme={
@@ -338,7 +340,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField root-55"
+                  className="ms-TextField is-required root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
@@ -356,6 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         onChange={[Function]}
                         onFocus={[Function]}
                         onInput={[Function]}
+                        required={true}
                         type="text"
                         value=""
                       />

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -140,6 +140,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               setDatabaseInput(newInput);
             }}
             ariaLabel={confirmDatabase}
+            required
           />
         </div>
         {isLastNonEmptyDatabase() && (

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -371,6 +371,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             autoFocus={true}
             id="confirmDatabaseId"
             onChange={[Function]}
+            required={true}
             styles={
               Object {
                 "fieldGroup": Object {
@@ -385,6 +386,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               deferredValidationTime={200}
               id="confirmDatabaseId"
               onChange={[Function]}
+              required={true}
               resizable={true}
               styles={[Function]}
               theme={
@@ -663,7 +665,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               validateOnLoad={true}
             >
               <div
-                className="ms-TextField root-58"
+                className="ms-TextField is-required root-58"
               >
                 <div
                   className="ms-TextField-wrapper"
@@ -681,6 +683,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                       onChange={[Function]}
                       onFocus={[Function]}
                       onInput={[Function]}
+                      required={true}
                       type="text"
                       value=""
                     />

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx

@@ -0,0 +1,122 @@
+import { Checkbox, ChoiceGroup, DefaultButton, IconButton, PrimaryButton, TextField } from "@fluentui/react";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
+import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { getUserEmail } from "Utils/UserUtils";
+import { shallow } from "enzyme";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import React from "react";
+
+jest.mock("Utils/UserUtils");
+(getUserEmail as jest.Mock).mockResolvedValue("test@email.com");
+
+jest.mock("Explorer/QueryCopilot/QueryCopilotUtilities");
+submitFeedback as jest.Mock;
+
+describe("Query Copilot Feedback Modal snapshot test", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it("shoud render and match snapshot", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
+
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    expect(wrapper.props().isOpen).toBeTruthy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should close on cancel click", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const cancelButton = wrapper.find(IconButton);
+    cancelButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should get user unput", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const testUserInput = "test user input";
+
+    const userInput = wrapper.find(TextField).first();
+    userInput.simulate("change", {}, testUserInput);
+
+    expect(wrapper.find(TextField).first().props().value).toEqual(testUserInput);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should record user contact choice no", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "no" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(3);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("no");
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should record user contact choice yes", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "yes" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(4);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("yes");
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should not render dont show again button", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const dontShowAgain = wrapper.find(Checkbox);
+
+    expect(dontShowAgain).toHaveLength(0);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render dont show again button and check it ", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", true, "test prompt");
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const dontShowAgain = wrapper.find(Checkbox);
+    dontShowAgain.simulate("change", {}, true);
+
+    expect(wrapper.find(Checkbox)).toHaveLength(1);
+    expect(wrapper.find(Checkbox).first().props().checked).toBeTruthy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should cancel submission", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const cancelButton = wrapper.find(DefaultButton);
+    cancelButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should submit submission", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const submitButton = wrapper.find(PrimaryButton);
+    submitButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(submitFeedback).toHaveBeenCalledTimes(1);
+    expect(submitFeedback).toHaveBeenCalledWith({
+      likeQuery: false,
+      generatedQuery: "",
+      userPrompt: "",
+      description: "",
+      contact: getUserEmail(),
+    });
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -13,7 +13,7 @@ import {
 import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
-import { getUserEmail } from "../../Utils/UserUtils";
+import { getUserEmail } from "../../../Utils/UserUtils";
 
 export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const {
@@ -28,6 +28,7 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const [description, setDescription] = React.useState<string>("");
   const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
   const [contact, setContact] = React.useState<string>(getUserEmail());
+
   return (
     <Modal isOpen={showFeedbackModal}>
       <Stack style={{ padding: 24 }}>

src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx

@@ -0,0 +1,32 @@
+import { shallow } from "enzyme";
+import { withHooks } from "jest-react-hooks-shallow";
+import React from "react";
+import { WelcomeModal } from "./WelcomeModal";
+
+describe("Query Copilot Welcome Modal snapshot test", () => {
+  it("should render when isOpen is true", () => {
+    withHooks(() => {
+      const spy = jest.spyOn(localStorage, "setItem");
+      spy.mockClear();
+      const wrapper = shallow(<WelcomeModal visible={true} />);
+
+      expect(wrapper.props().children.props.isOpen).toBeTruthy();
+      expect(wrapper).toMatchSnapshot();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenLastCalledWith("hideWelcomeModal", "true");
+    });
+  });
+  it("should not render when isOpen is false", () => {
+    withHooks(() => {
+      const spy = jest.spyOn(localStorage, "setItem");
+      spy.mockClear();
+      const wrapper = shallow(<WelcomeModal visible={false} />);
+
+      expect(wrapper.props().children.props.isOpen).toBeFalsy();
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(spy.mock.instances.length).toBe(0);
+    });
+  });
+});

src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is true 1`] = `
+<Fragment>
+  <Modal
+    isBlocking={false}
+    isOpen={true}
+    onDismiss={[Function]}
+  >
+    <Stack
+      className="modalContentPadding"
+    >
+      <Stack
+        horizontal={true}
+      >
+        <Stack
+          grow={4}
+          horizontal={true}
+          horizontalAlign="end"
+        >
+          <StackItem>
+            <Image
+              src=""
+            />
+          </StackItem>
+        </Stack>
+        <Stack
+          className="exitPadding"
+          grow={1}
+          horizontal={true}
+          horizontalAlign="end"
+          verticalAlign="start"
+        >
+          <StackItem
+            className="previewMargin"
+          >
+            <Text
+              className="preview"
+            >
+              Preview
+            </Text>
+          </StackItem>
+          <StackItem>
+            <CustomizedIconButton
+              ariaLabel="Exit"
+              className="exitIcon"
+              iconProps={
+                Object {
+                  "iconName": "Cancel",
+                }
+              }
+              onClick={[Function]}
+              title="Exit"
+            />
+          </StackItem>
+        </Stack>
+      </Stack>
+      <Stack
+        horizontalAlign="center"
+      >
+        <StackItem
+          align="center"
+        >
+          <Text
+            className="title bold"
+          >
+            Welcome to Copilot in CosmosDB
+          </Text>
+        </StackItem>
+        <StackItem
+          align="center"
+          className="text"
+        >
+          <Stack
+            horizontal={true}
+          >
+            <StackItem
+              align="start"
+              className="imageTextPadding"
+            >
+              <Image
+                src=""
+              />
+            </StackItem>
+            <StackItem
+              align="start"
+            >
+              <Text
+                className="bold"
+              >
+                Let copilot do the work for you
+                <br />
+              </Text>
+            </StackItem>
+          </Stack>
+          <Text>
+            Ask Copilot to generate a query by describing the query in your words.
+            <br />
+            <StyledLinkBase
+              href=""
+            >
+              Learn more
+            </StyledLinkBase>
+          </Text>
+        </StackItem>
+        <StackItem
+          align="center"
+          className="text"
+        >
+          <Stack
+            horizontal={true}
+          >
+            <StackItem
+              align="start"
+              className="imageTextPadding"
+            >
+              <Image
+                src=""
+              />
+            </StackItem>
+            <StackItem
+              align="start"
+            >
+              <Text
+                className="bold"
+              >
+                Use your judgement
+                <br />
+              </Text>
+            </StackItem>
+          </Stack>
+          <Text>
+            AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
+            <br />
+            <StyledLinkBase
+              href=""
+            >
+              Read preview terms
+            </StyledLinkBase>
+          </Text>
+        </StackItem>
+        <StackItem
+          align="center"
+          className="text"
+        >
+          <Stack
+            horizontal={true}
+          >
+            <StackItem
+              align="start"
+              className="imageTextPadding"
+            >
+              <Image
+                src=""
+              />
+            </StackItem>
+            <StackItem
+              align="start"
+            >
+              <Text
+                className="bold"
+              >
+                Copilot currently works only a sample database
+                <br />
+              </Text>
+            </StackItem>
+          </Stack>
+          <Text>
+            Copilot is setup on a sample database we have configured for you at no cost
+            <br />
+            <StyledLinkBase
+              href=""
+            >
+              Learn more
+            </StyledLinkBase>
+          </Text>
+        </StackItem>
+      </Stack>
+      <Stack
+        className="buttonPadding"
+      >
+        <StackItem
+          align="center"
+        >
+          <CustomizedPrimaryButton
+            className="tryButton"
+            onClick={[Function]}
+          >
+            Try Copilot
+          </CustomizedPrimaryButton>
+        </StackItem>
+      </Stack>
+    </Stack>
+  </Modal>
+</Fragment>
+`;

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -17,15 +17,10 @@ import {
   TextField,
 } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
-import {
-  QueryCopilotSampleContainerId,
-  QueryCopilotSampleContainerSchema,
-  QueryCopilotSampleDatabaseId,
-} from "Common/Constants";
+import { QueryCopilotSampleContainerId, QueryCopilotSampleContainerSchema } from "Common/Constants";
 import { getErrorMessage, handleError } from "Common/ErrorHandlingUtils";
 import { shouldEnableCrossPartitionKey } from "Common/HeadersUtility";
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "Common/dataAccess/queryDocumentsPage";
 import { QueryResults } from "Contracts/ViewModels";
 import { CommandButtonComponentProps } from "Explorer/Controls/CommandButton/CommandButtonComponent";
@@ -36,7 +31,7 @@ import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
 import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
 import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
 import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
-import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { querySampleDocuments, submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/SamplePrompts/SamplePrompts";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
 import { userContext } from "UserContext";
@@ -49,7 +44,6 @@ import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import HintIcon from "../../../images/Hint.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import RecentIcon from "../../../images/Recent.svg";
-import SamplePromptsIcon from "../../../images/SamplePromptsIcon.svg";
 import XErrorMessage from "../../../images/X-errorMessage.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import { useTabs } from "../../hooks/useTabs";
@@ -127,12 +121,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   };
 
   const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
-  const cachedHistories = cachedHistoriesString?.split(",");
+  const cachedHistories = cachedHistoriesString?.split("|");
   const [histories, setHistories] = useState<string[]>(cachedHistories || []);
   const suggestedPrompts: SuggestedPrompt[] = [
-    { id: 1, text: "Give me all customers whose names start with C" },
-    { id: 2, text: "Show me all customers" },
-    { id: 3, text: "Show me all customers who bought a bike in 2019" },
+    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
+    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
+    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
   ];
   const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
   const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
@@ -154,9 +148,16 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   };
 
   const updateHistories = (): void => {
-    const newHistories = histories.length < 3 ? [userPrompt, ...histories] : [userPrompt, histories[1], histories[2]];
+    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
+    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
+
+    const updatedHistories = existingHistories.filter(
+      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase()
+    );
+    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
+
     setHistories(newHistories);
-    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join(","));
+    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
   };
 
   const generateSQLQuery = async (): Promise<void> => {
@@ -178,14 +179,20 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       });
 
       const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
-      if (generateSQLQueryResponse?.sql) {
-        let query = `-- **Prompt:** ${userPrompt}\r\n`;
-        if (generateSQLQueryResponse.explanation) {
-          query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
+      if (response.ok) {
+        if (generateSQLQueryResponse?.sql) {
+          let query = `-- **Prompt:** ${userPrompt}\r\n`;
+          if (generateSQLQueryResponse.explanation) {
+            query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
+          }
+          query += generateSQLQueryResponse.sql;
+          setQuery(query);
+          setGeneratedQuery(generateSQLQueryResponse.sql);
         }
-        query += generateSQLQueryResponse.sql;
-        setQuery(query);
-        setGeneratedQuery(generateSQLQueryResponse.sql);
+      } else {
+        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
+        useTabs.getState().setIsQueryErrorThrown(true);
+        setShowErrorMessageBar(true);
       }
     } catch (error) {
       handleError(error, "executeNaturalLanguageQuery");
@@ -201,7 +208,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
 
   const onExecuteQueryClick = async (): Promise<void> => {
     const queryToExecute = selectedQuery || query;
-    const queryIterator = queryDocuments(QueryCopilotSampleDatabaseId, QueryCopilotSampleContainerId, queryToExecute, {
+    const queryIterator = querySampleDocuments(queryToExecute, {
       enableCrossPartitionQuery: shouldEnableCrossPartitionKey(),
     } as FeedOptions);
     setQueryIterator(queryIterator);
@@ -245,6 +252,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       commandButtonLabel: executeQueryBtnLabel,
       ariaLabel: executeQueryBtnLabel,
       hasPopup: false,
+      disabled: query?.trim() === "",
     };
 
     const saveQueryBtn = {
@@ -255,18 +263,20 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       commandButtonLabel: "Save Query",
       ariaLabel: "Save Query",
       hasPopup: false,
+      disabled: query?.trim() === "",
     };
 
-    const samplePromptsBtn = {
-      iconSrc: SamplePromptsIcon,
-      iconAlt: "Sample Prompts",
-      onCommandClick: () => setIsSamplePromptsOpen(true),
-      commandButtonLabel: "Sample Prompts",
-      ariaLabel: "Sample Prompts",
-      hasPopup: false,
-    };
+    // Sample Prompts temporary disabled due current design
+    // const samplePromptsBtn = {
+    //   iconSrc: SamplePromptsIcon,
+    //   iconAlt: "Sample Prompts",
+    //   onCommandClick: () => setIsSamplePromptsOpen(true),
+    //   commandButtonLabel: "Sample Prompts",
+    //   ariaLabel: "Sample Prompts",
+    //   hasPopup: false,
+    // };
 
-    return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
+    return [executeQueryBtn, saveQueryBtn];
   };
   const showTeachingBubble = (): void => {
     if (!inputEdited.current) {
@@ -298,269 +308,283 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   }, []);
 
   return (
-    <Stack className="tab-pane" style={{ padding: 24, width: "100%", height: "100%" }}>
-      <Stack horizontal verticalAlign="center">
-        <Image src={CopilotIcon} />
-        <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
-      </Stack>
-      <Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%", position: "relative" }}>
-        <TextField
-          id="naturalLanguageInput"
-          value={userPrompt}
-          onChange={handleUserPromptChange}
-          onClick={() => {
-            inputEdited.current = true;
-            setShowSamplePrompts(true);
-          }}
-          style={{ lineHeight: 30 }}
-          styles={{ root: { width: "95%" } }}
-          disabled={isGeneratingQuery}
-          autoComplete="off"
-        />
-        {copilotTeachingBubbleVisible && (
-          <TeachingBubble
-            calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
-            target="#naturalLanguageInput"
-            hasCloseButton={true}
-            closeButtonAriaLabel="Close"
-            onDismiss={toggleCopilotTeachingBubbleVisible}
-            hasSmallHeadline={true}
-            headline="Write a prompt"
-          >
-            Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
-            <Link
-              onClick={() => {
-                setShowSamplePrompts(true);
-                toggleCopilotTeachingBubbleVisible();
-              }}
-              style={{ color: "white", fontWeight: 600 }}
+    <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
+      <div style={{ overflowY: "auto", height: "100%" }}>
+        <Stack horizontal verticalAlign="center">
+          <Image src={CopilotIcon} />
+          <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
+        </Stack>
+        <Stack horizontal verticalAlign="center" style={{ marginTop: 16, width: "100%", position: "relative" }}>
+          <TextField
+            id="naturalLanguageInput"
+            value={userPrompt}
+            onChange={handleUserPromptChange}
+            onClick={() => {
+              inputEdited.current = true;
+              setShowSamplePrompts(true);
+            }}
+            style={{ lineHeight: 30 }}
+            styles={{ root: { width: "95%" } }}
+            disabled={isGeneratingQuery}
+            autoComplete="off"
+          />
+          {copilotTeachingBubbleVisible && (
+            <TeachingBubble
+              calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
+              target="#naturalLanguageInput"
+              hasCloseButton={true}
+              closeButtonAriaLabel="Close"
+              onDismiss={toggleCopilotTeachingBubbleVisible}
+              hasSmallHeadline={true}
+              headline="Write a prompt"
             >
-              sample prompts
-            </Link>{" "}
-            or write your own query
-          </TeachingBubble>
-        )}
-        <IconButton
-          iconProps={{ iconName: "Send" }}
-          disabled={isGeneratingQuery || !userPrompt.trim()}
-          style={{ marginLeft: 8 }}
-          onClick={() => {
-            updateHistories();
-            generateSQLQuery();
-            resetButtonState();
-          }}
-        />
-        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
-        {showSamplePrompts && (
-          <Callout
-            styles={{ root: { minWidth: 400 } }}
-            target="#naturalLanguageInput"
-            isBeakVisible={false}
-            onDismiss={() => setShowSamplePrompts(false)}
-            directionalHintFixed={true}
-            directionalHint={DirectionalHint.bottomLeftEdge}
-            alignTargetEdge={true}
-            gapSpace={4}
-          >
-            <Stack>
-              {filteredHistories?.length > 0 && (
-                <Stack>
-                  <Text
-                    style={{
-                      width: "100%",
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: "#0078D4",
-                      marginLeft: 16,
-                      padding: "4px 0",
-                    }}
-                  >
-                    Recent
-                  </Text>
-                  {filteredHistories.map((history, i) => (
-                    <DefaultButton
-                      key={i}
-                      onClick={() => {
-                        setUserPrompt(history);
-                        setShowSamplePrompts(false);
-                      }}
-                      onRenderIcon={() => <Image src={RecentIcon} />}
-                      styles={promptStyles}
-                    >
-                      {history}
-                    </DefaultButton>
-                  ))}
-                </Stack>
-              )}
-              <Text
-                style={{
-                  width: "100%",
-                  fontSize: 14,
-                  fontWeight: 600,
-                  color: "#0078D4",
-                  marginLeft: 16,
-                  padding: "4px 0",
+              Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
+              <Link
+                onClick={() => {
+                  setShowSamplePrompts(true);
+                  toggleCopilotTeachingBubbleVisible();
                 }}
+                style={{ color: "white", fontWeight: 600 }}
               >
-                Suggested Prompts
-              </Text>
-              {filteredSuggestedPrompts.map((prompt) => (
-                <DefaultButton
-                  key={prompt.id}
-                  onClick={() => {
-                    setUserPrompt(prompt.text);
-                    setShowSamplePrompts(false);
-                  }}
-                  onRenderIcon={() => <Image src={HintIcon} />}
-                  styles={promptStyles}
-                >
-                  {prompt.text}
-                </DefaultButton>
-              ))}
-              <Separator
-                styles={{
-                  root: {
-                    selectors: { "::before": { background: "#E1DFDD" } },
-                    padding: 0,
-                  },
-                }}
-              />
-              <Text
-                style={{
-                  width: "100%",
-                  fontSize: 14,
-                  marginLeft: 16,
-                  padding: "4px 0",
-                }}
-              >
-                Learn about{" "}
-                <Link target="_blank" href="">
-                  writing effective prompts
-                </Link>
-              </Text>
-            </Stack>
-          </Callout>
-        )}
-      </Stack>
-
-      <Text style={{ marginTop: 8, marginBottom: 24, fontSize: 12 }}>
-        AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-        <Link href="" target="_blank">
-          Read preview terms
-        </Link>
-        {showErrorMessageBar && (
-          <Stack style={{ backgroundColor: "#FEF0F1", padding: "4px 8px" }} horizontal verticalAlign="center">
-            <Image src={XErrorMessage} style={{ marginRight: "8px" }} />
-            <Text style={{ fontSize: 12 }}>
-              We ran into an error and were not able to execute query. Please try again after sometime
-            </Text>
-          </Stack>
-        )}
-      </Text>
-
-      {showFeedbackBar && (
-        <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
-          <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
-          {showCallout && !hideFeedbackModalForLikedQueries && (
-            <Callout
-              style={{ padding: 8 }}
-              target="#likeBtn"
-              onDismiss={() => {
-                setShowCallout(false);
-                submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
-              }}
-              directionalHint={DirectionalHint.topCenter}
-            >
-              <Text>
-                Thank you. Need to give{" "}
-                <Link
-                  onClick={() => {
-                    setShowCallout(false);
-                    useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
-                  }}
-                >
-                  more feedback?
-                </Link>
-              </Text>
-            </Callout>
+                sample prompts
+              </Link>{" "}
+              or write your own query
+            </TeachingBubble>
           )}
           <IconButton
-            id="likeBtn"
-            style={{ marginLeft: 20 }}
-            iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+            iconProps={{ iconName: "Send" }}
+            disabled={isGeneratingQuery || !userPrompt.trim()}
+            style={{ marginLeft: 8 }}
             onClick={() => {
-              setShowCallout(!likeQuery);
-              setLikeQuery(!likeQuery);
-              if (dislikeQuery) {
-                setDislikeQuery(!dislikeQuery);
-              }
+              updateHistories();
+              generateSQLQuery();
+              resetButtonState();
             }}
           />
-          <IconButton
-            style={{ margin: "0 10px" }}
-            iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
-            onClick={() => {
-              if (!dislikeQuery) {
-                useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
-                setLikeQuery(false);
-              }
-              setDislikeQuery(!dislikeQuery);
-              setShowCallout(false);
-            }}
-          />
-          <Separator vertical style={{ color: "#EDEBE9" }} />
-          <CommandBarButton
-            onClick={copyGeneratedCode}
-            iconProps={{ iconName: "Copy" }}
-            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-          >
-            Copy code
-          </CommandBarButton>
-          <CommandBarButton
-            onClick={() => {
-              setShowDeletePopup(true);
-            }}
-            iconProps={{ iconName: "Delete" }}
-            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
-          >
-            Delete code
-          </CommandBarButton>
+          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+          {showSamplePrompts && (
+            <Callout
+              styles={{ root: { minWidth: 400 } }}
+              target="#naturalLanguageInput"
+              isBeakVisible={false}
+              onDismiss={() => setShowSamplePrompts(false)}
+              directionalHintFixed={true}
+              directionalHint={DirectionalHint.bottomLeftEdge}
+              alignTargetEdge={true}
+              gapSpace={4}
+            >
+              <Stack>
+                {filteredHistories?.length > 0 && (
+                  <Stack>
+                    <Text
+                      style={{
+                        width: "100%",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        color: "#0078D4",
+                        marginLeft: 16,
+                        padding: "4px 0",
+                      }}
+                    >
+                      Recent
+                    </Text>
+                    {filteredHistories.map((history, i) => (
+                      <DefaultButton
+                        key={i}
+                        onClick={() => {
+                          setUserPrompt(history);
+                          setShowSamplePrompts(false);
+                        }}
+                        onRenderIcon={() => <Image src={RecentIcon} />}
+                        styles={promptStyles}
+                      >
+                        {history}
+                      </DefaultButton>
+                    ))}
+                  </Stack>
+                )}
+                {filteredSuggestedPrompts?.length > 0 && (
+                  <Stack>
+                    <Text
+                      style={{
+                        width: "100%",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        color: "#0078D4",
+                        marginLeft: 16,
+                        padding: "4px 0",
+                      }}
+                    >
+                      Suggested Prompts
+                    </Text>
+                    {filteredSuggestedPrompts.map((prompt) => (
+                      <DefaultButton
+                        key={prompt.id}
+                        onClick={() => {
+                          setUserPrompt(prompt.text);
+                          setShowSamplePrompts(false);
+                        }}
+                        onRenderIcon={() => <Image src={HintIcon} />}
+                        styles={promptStyles}
+                      >
+                        {prompt.text}
+                      </DefaultButton>
+                    ))}
+                  </Stack>
+                )}
+                {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
+                  <Stack>
+                    <Separator
+                      styles={{
+                        root: {
+                          selectors: { "::before": { background: "#E1DFDD" } },
+                          padding: 0,
+                        },
+                      }}
+                    />
+                    <Text
+                      style={{
+                        width: "100%",
+                        fontSize: 14,
+                        marginLeft: 16,
+                        padding: "4px 0",
+                      }}
+                    >
+                      Learn about{" "}
+                      <Link target="_blank" href="">
+                        writing effective prompts
+                      </Link>
+                    </Text>
+                  </Stack>
+                )}
+              </Stack>
+            </Callout>
+          )}
         </Stack>
-      )}
 
-      <Stack className="tabPaneContentContainer">
-        <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
-          <EditorReact
-            language={"sql"}
-            content={query}
-            isReadOnly={false}
-            ariaLabel={"Editing Query"}
-            lineNumbers={"on"}
-            onContentChanged={(newQuery: string) => setQuery(newQuery)}
-            onContentSelected={(selectedQuery: string) => setSelectedQuery(selectedQuery)}
+        <Stack style={{ marginTop: 8, marginBottom: 24 }}>
+          <Text style={{ fontSize: 12 }}>
+            AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
+            <Link href="" target="_blank">
+              Read preview terms
+            </Link>
+            {showErrorMessageBar && (
+              <Stack style={{ backgroundColor: "#FEF0F1", padding: "4px 8px" }} horizontal verticalAlign="center">
+                <Image src={XErrorMessage} style={{ marginRight: "8px" }} />
+                <Text style={{ fontSize: 12 }}>
+                  We ran into an error and were not able to execute query. Please try again after sometime
+                </Text>
+              </Stack>
+            )}
+          </Text>
+        </Stack>
+
+        {showFeedbackBar && (
+          <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
+            <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+            {showCallout && !hideFeedbackModalForLikedQueries && (
+              <Callout
+                style={{ padding: 8 }}
+                target="#likeBtn"
+                onDismiss={() => {
+                  setShowCallout(false);
+                  submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
+                }}
+                directionalHint={DirectionalHint.topCenter}
+              >
+                <Text>
+                  Thank you. Need to give{" "}
+                  <Link
+                    onClick={() => {
+                      setShowCallout(false);
+                      useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
+                    }}
+                  >
+                    more feedback?
+                  </Link>
+                </Text>
+              </Callout>
+            )}
+            <IconButton
+              id="likeBtn"
+              style={{ marginLeft: 20 }}
+              iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+              onClick={() => {
+                setShowCallout(!likeQuery);
+                setLikeQuery(!likeQuery);
+                if (dislikeQuery) {
+                  setDislikeQuery(!dislikeQuery);
+                }
+              }}
+            />
+            <IconButton
+              style={{ margin: "0 10px" }}
+              iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
+              onClick={() => {
+                if (!dislikeQuery) {
+                  useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
+                  setLikeQuery(false);
+                }
+                setDislikeQuery(!dislikeQuery);
+                setShowCallout(false);
+              }}
+            />
+            <Separator vertical style={{ color: "#EDEBE9" }} />
+            <CommandBarButton
+              onClick={copyGeneratedCode}
+              iconProps={{ iconName: "Copy" }}
+              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+            >
+              Copy code
+            </CommandBarButton>
+            <CommandBarButton
+              onClick={() => {
+                setShowDeletePopup(true);
+              }}
+              iconProps={{ iconName: "Delete" }}
+              style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+            >
+              Delete code
+            </CommandBarButton>
+          </Stack>
+        )}
+
+        <Stack className="tabPaneContentContainer">
+          <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
+            <EditorReact
+              language={"sql"}
+              content={query}
+              isReadOnly={false}
+              ariaLabel={"Editing Query"}
+              lineNumbers={"on"}
+              onContentChanged={(newQuery: string) => setQuery(newQuery)}
+              onContentSelected={(selectedQuery: string) => setSelectedQuery(selectedQuery)}
+            />
+            <QueryResultSection
+              isMongoDB={false}
+              queryEditorContent={selectedQuery || query}
+              error={errorMessage}
+              queryResults={queryResults}
+              isExecuting={isExecuting}
+              executeQueryDocumentsPage={(firstItemIndex: number) =>
+                queryDocumentsPerPage(firstItemIndex, queryIterator)
+              }
+            />
+          </SplitterLayout>
+        </Stack>
+        <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
+        {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
+        {query !== "" && query.trim().length !== 0 && (
+          <DeletePopup
+            showDeletePopup={showDeletePopup}
+            setShowDeletePopup={setShowDeletePopup}
+            setQuery={setQuery}
+            clearFeedback={resetButtonState}
+            showFeedbackBar={setShowFeedbackBar}
           />
-          <QueryResultSection
-            isMongoDB={false}
-            queryEditorContent={selectedQuery || query}
-            error={errorMessage}
-            queryResults={queryResults}
-            isExecuting={isExecuting}
-            executeQueryDocumentsPage={(firstItemIndex: number) => queryDocumentsPerPage(firstItemIndex, queryIterator)}
-          />
-        </SplitterLayout>
-      </Stack>
-      <WelcomeModal visible={localStorage.getItem("hideWelcomeModal") !== "true"} />
-      {isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
-      {query !== "" && query.trim().length !== 0 && (
-        <DeletePopup
-          showDeletePopup={showDeletePopup}
-          setShowDeletePopup={setShowDeletePopup}
-          setQuery={setQuery}
-          clearFeedback={resetButtonState}
-          showFeedbackBar={setShowFeedbackBar}
-        />
-      )}
-      <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
+        )}
+        <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
+      </div>
     </Stack>
   );
 };

src/Explorer/QueryCopilot/QueryCopilotUtilities.ts

@@ -1,5 +1,15 @@
-import { QueryCopilotSampleContainerSchema } from "Common/Constants";
+import { FeedOptions, Item, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import {
+  QueryCopilotSampleContainerId,
+  QueryCopilotSampleContainerSchema,
+  QueryCopilotSampleDatabaseId,
+} from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
+import { sampleDataClient } from "Common/SampleDataClient";
+import { getPartitionKeyValue } from "Common/dataAccess/getPartitionKeyValue";
+import { getCommonQueryOptions } from "Common/dataAccess/queryDocuments";
+import DocumentId from "Explorer/Tree/DocumentId";
+import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
 
 interface FeedbackParams {
   likeQuery: boolean;
@@ -21,16 +31,41 @@ export const submitFeedback = async (params: FeedbackParams): Promise<void> => {
       contact: contact || "",
     };
 
-    const response = await fetch("https://copilotorchestrater.azurewebsites.net/feedback", {
+    await fetch("https://copilotorchestrater.azurewebsites.net/feedback", {
       method: "POST",
       headers: {
         "content-type": "application/json",
       },
       body: JSON.stringify(payload),
     });
-    // eslint-disable-next-line no-console
-    console.log(response);
   } catch (error) {
     handleError(error, "copilotSubmitFeedback");
   }
 };
+
+export const querySampleDocuments = (query: string, options: FeedOptions): QueryIterator<ItemDefinition & Resource> => {
+  options = getCommonQueryOptions(options);
+  return sampleDataClient()
+    .database(QueryCopilotSampleDatabaseId)
+    .container(QueryCopilotSampleContainerId)
+    .items.query(query, options);
+};
+
+export const readSampleDocument = async (documentId: DocumentId): Promise<Item> => {
+  const clearMessage = logConsoleProgress(`Reading item ${documentId.id()}`);
+
+  try {
+    const response = await sampleDataClient()
+      .database(QueryCopilotSampleDatabaseId)
+      .container(QueryCopilotSampleContainerId)
+      .item(documentId.id(), getPartitionKeyValue(documentId))
+      .read();
+
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "ReadDocument", `Failed to read item ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap

@@ -5,133 +5,148 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
   className="tab-pane"
   style={
     Object {
-      "height": "100%",
       "padding": 24,
       "width": "100%",
     }
   }
 >
-  <Stack
-    horizontal={true}
-    verticalAlign="center"
-  >
-    <Image
-      src=""
-    />
-    <Text
-      style={
-        Object {
-          "fontSize": 16,
-          "fontWeight": 600,
-          "marginLeft": 8,
-        }
-      }
-    >
-      Copilot
-    </Text>
-  </Stack>
-  <Stack
-    horizontal={true}
+  <div
     style={
       Object {
-        "marginTop": 16,
-        "position": "relative",
-        "width": "100%",
-      }
-    }
-    verticalAlign="center"
-  >
-    <StyledTextFieldBase
-      autoComplete="off"
-      disabled={false}
-      id="naturalLanguageInput"
-      onChange={[Function]}
-      onClick={[Function]}
-      style={
-        Object {
-          "lineHeight": 30,
-        }
-      }
-      styles={
-        Object {
-          "root": Object {
-            "width": "95%",
-          },
-        }
-      }
-      value="Write a query to return all records in this table"
-    />
-    <CustomizedIconButton
-      disabled={false}
-      iconProps={
-        Object {
-          "iconName": "Send",
-        }
-      }
-      onClick={[Function]}
-      style={
-        Object {
-          "marginLeft": 8,
-        }
-      }
-    />
-  </Stack>
-  <Text
-    style={
-      Object {
-        "fontSize": 12,
-        "marginBottom": 24,
-        "marginTop": 8,
+        "height": "100%",
+        "overflowY": "auto",
       }
     }
   >
-    AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
-     
-    <StyledLinkBase
-      href=""
-      target="_blank"
+    <Stack
+      horizontal={true}
+      verticalAlign="center"
     >
-      Read preview terms
-    </StyledLinkBase>
-  </Text>
-  <Stack
-    className="tabPaneContentContainer"
-  >
-    <t
-      customClassName=""
-      onDragEnd={null}
-      onDragStart={null}
-      onSecondaryPaneSizeChange={null}
-      percentage={false}
-      primaryIndex={0}
-      primaryMinSize={100}
-      secondaryMinSize={200}
-      vertical={true}
+      <Image
+        src=""
+      />
+      <Text
+        style={
+          Object {
+            "fontSize": 16,
+            "fontWeight": 600,
+            "marginLeft": 8,
+          }
+        }
+      >
+        Copilot
+      </Text>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "marginTop": 16,
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+      verticalAlign="center"
     >
-      <EditorReact
-        ariaLabel="Editing Query"
-        content=""
-        isReadOnly={false}
-        language="sql"
-        lineNumbers="on"
-        onContentChanged={[Function]}
-        onContentSelected={[Function]}
+      <StyledTextFieldBase
+        autoComplete="off"
+        disabled={false}
+        id="naturalLanguageInput"
+        onChange={[Function]}
+        onClick={[Function]}
+        style={
+          Object {
+            "lineHeight": 30,
+          }
+        }
+        styles={
+          Object {
+            "root": Object {
+              "width": "95%",
+            },
+          }
+        }
+        value="Write a query to return all records in this table"
       />
-      <QueryResultSection
-        error=""
-        executeQueryDocumentsPage={[Function]}
-        isExecuting={false}
-        isMongoDB={false}
-        queryEditorContent=""
+      <CustomizedIconButton
+        disabled={false}
+        iconProps={
+          Object {
+            "iconName": "Send",
+          }
+        }
+        onClick={[Function]}
+        style={
+          Object {
+            "marginLeft": 8,
+          }
+        }
       />
-    </t>
-  </Stack>
-  <WelcomeModal
-    visible={true}
-  />
-  <CopyPopup
-    setShowCopyPopup={[Function]}
-    showCopyPopup={false}
-  />
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "marginBottom": 24,
+          "marginTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "fontSize": 12,
+          }
+        }
+      >
+        AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
+         
+        <StyledLinkBase
+          href=""
+          target="_blank"
+        >
+          Read preview terms
+        </StyledLinkBase>
+      </Text>
+    </Stack>
+    <Stack
+      className="tabPaneContentContainer"
+    >
+      <t
+        customClassName=""
+        onDragEnd={null}
+        onDragStart={null}
+        onSecondaryPaneSizeChange={null}
+        percentage={false}
+        primaryIndex={0}
+        primaryMinSize={100}
+        secondaryMinSize={200}
+        vertical={true}
+      >
+        <EditorReact
+          ariaLabel="Editing Query"
+          content=""
+          isReadOnly={false}
+          language="sql"
+          lineNumbers="on"
+          onContentChanged={[Function]}
+          onContentSelected={[Function]}
+        />
+        <QueryResultSection
+          error=""
+          executeQueryDocumentsPage={[Function]}
+          isExecuting={false}
+          isMongoDB={false}
+          queryEditorContent=""
+        />
+      </t>
+    </Stack>
+    <WelcomeModal
+      visible={true}
+    />
+    <CopyPopup
+      setShowCopyPopup={[Function]}
+      showCopyPopup={false}
+    />
+  </div>
 </Stack>
 `;

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -581,7 +581,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               >
                 {item.title}
               </Link>
-              <Image src={LinkIcon} alt=" " />
+              <Image src={LinkIcon} alt={item.title} />
             </Stack>
             <Text>{item.description}</Text>
           </Stack>
@@ -600,7 +600,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             <li key={`${item.title}${item.description}${index}`}>
               <Stack style={{ marginBottom: 26 }}>
                 <Stack horizontal>
-                  <Image style={{ marginRight: 8 }} src={item.iconSrc} />
+                  <Image style={{ marginRight: 8 }} src={item.iconSrc} alt={item.title} />
                   <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
                     {item.title}
                   </Link>
@@ -720,7 +720,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               >
                 {item.title}
               </Link>
-              <Image src={LinkIcon} />
+              <Image src={LinkIcon} alt={item.title} />
             </Stack>
             <Text>{item.description}</Text>
           </Stack>

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,4 +1,5 @@
 import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import * as ko from "knockout";
 import Q from "q";
 import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
@@ -7,7 +8,12 @@ import NewDocumentIcon from "../../../images/NewDocument.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import UploadIcon from "../../../images/Upload_16x16.svg";
 import * as Constants from "../../Common/Constants";
-import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
+import {
+  DocumentsGridMetrics,
+  KeyCodes,
+  QueryCopilotSampleContainerId,
+  QueryCopilotSampleDatabaseId,
+} from "../../Common/Constants";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
@@ -71,6 +77,7 @@ export default class DocumentsTab extends TabsBase {
 
   private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
   private _resourceTokenPartitionKey: string;
+  private _isQueryCopilotSampleContainer: boolean;
 
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
@@ -317,6 +324,9 @@ export default class DocumentsTab extends TabsBase {
     this.selectedDocumentContent.subscribe((newContent: string) => this._onEditorContentChange(newContent));
 
     this.showPartitionKey = this._shouldShowPartitionKey();
+    this._isQueryCopilotSampleContainer =
+      this.collection?.databaseId === QueryCopilotSampleDatabaseId &&
+      this.collection?.id() === QueryCopilotSampleContainerId;
   }
 
   private _shouldShowPartitionKey(): boolean {
@@ -678,7 +688,6 @@ export default class DocumentsTab extends TabsBase {
   }
 
   public createIterator(): QueryIterator<ItemDefinition & Resource> {
-    let filters = this.lastFilterContents();
     const filter: string = this.filterContent().trim();
     const query: string = this.buildQuery(filter);
     let options: any = {};
@@ -688,12 +697,16 @@ export default class DocumentsTab extends TabsBase {
       options.partitionKey = this._resourceTokenPartitionKey;
     }
 
-    return queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
+    return this._isQueryCopilotSampleContainer
+      ? querySampleDocuments(query, options)
+      : queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
   }
 
   public async selectDocument(documentId: DocumentId): Promise<void> {
     this.selectedDocumentId(documentId);
-    const content = await readDocument(this.collection, documentId);
+    const content = await (this._isQueryCopilotSampleContainer
+      ? readSampleDocument(documentId)
+      : readDocument(this.collection, documentId));
     this.initDocumentEditor(documentId, content);
   }
 
@@ -810,7 +823,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.newDocumentButton.enabled(),
+        disabled: !this.newDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
         id: "mongoNewDocumentBtn",
       });
     }
@@ -824,7 +837,8 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.saveNewDocumentButton.enabled(),
+        disabled:
+          !this.saveNewDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
       });
     }
 
@@ -837,7 +851,9 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.discardNewDocumentChangesButton.enabled(),
+        disabled:
+          !this.discardNewDocumentChangesButton.enabled() ||
+          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
       });
     }
 
@@ -850,7 +866,8 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.saveExistingDocumentButton.enabled(),
+        disabled:
+          !this.saveExistingDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
       });
     }
 
@@ -863,7 +880,9 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.discardExisitingDocumentChangesButton.enabled(),
+        disabled:
+          !this.discardExisitingDocumentChangesButton.enabled() ||
+          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
       });
     }
 
@@ -876,7 +895,9 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.deleteExisitingDocumentButton.enabled(),
+        disabled:
+          !this.deleteExisitingDocumentButton.enabled() ||
+          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
       });
     }
 
@@ -920,7 +941,9 @@ export default class DocumentsTab extends TabsBase {
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: useSelectedNode.getState().isDatabaseNodeOrNoneSelected(),
+      disabled:
+        useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
+        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
     };
   }
 }

src/Explorer/Tabs/Tabs.tsx

@@ -68,7 +68,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
 function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?: ReactTabKind }) {
   const [hovering, setHovering] = useState(false);
   const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-  const tabId = tab ? tab.tabId : "connect";
+  const tabId = tab ? tab.tabId : "";
 
   const getReactTabTitle = (): ko.Observable<string> => {
     if (tabKind === ReactTabKind.QueryCopilot) {

src/Explorer/Tree/ResourceTokenCollection.ts

@@ -2,10 +2,10 @@ import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { useTabs } from "../../hooks/useTabs";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import { useTabs } from "../../hooks/useTabs";
 import Explorer from "../Explorer";
 import DocumentsTab from "../Tabs/DocumentsTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
@@ -139,7 +139,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
 
       documentsTab = new DocumentsTab({
         partitionKey: this.partitionKey,
-        resourceTokenPartitionKey: userContext.parsedResourceToken.partitionKey,
+        resourceTokenPartitionKey: userContext.parsedResourceToken?.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
         tabKind: ViewModels.CollectionTabKind.Documents,
         title: "Items",

src/Explorer/Tree/ResourceTree.tsx

@@ -790,14 +790,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {!isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 230 }}
-            >
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"}>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
           </AccordionComponent>
@@ -808,14 +804,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {isNotebookEnabled && isSampleDataEnabled && (
         <>
           <AccordionComponent>
-            <AccordionItemComponent
-              title={"MY DATA"}
-              isExpanded={!gitHubNotebooksContentRoot}
-              styles={{ maxHeight: 130 }}
-            >
+            <AccordionItemComponent title={"MY DATA"} isExpanded={!gitHubNotebooksContentRoot}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={"SAMPLE DATA"}>
+            <AccordionItemComponent title={"SAMPLE DATA"} containerStyles={{ display: "table" }}>
               <SampleDataTree sampleDataResourceTokenCollection={sampleDataResourceTokenCollection} />
             </AccordionItemComponent>
             <AccordionItemComponent title={"NOTEBOOKS"}>

src/Explorer/Tree/SampleDataTree.tsx

@@ -2,7 +2,7 @@ import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdap
 import TabsBase from "Explorer/Tabs/TabsBase";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { useTabs } from "hooks/useTabs";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -14,51 +14,64 @@ export const SampleDataTree = ({
 }: {
   sampleDataResourceTokenCollection: ViewModels.CollectionBase;
 }): JSX.Element => {
-  const [root, setRoot] = useState<TreeNode | undefined>(undefined);
-
-  useEffect(() => {
-    if (sampleDataResourceTokenCollection) {
-      const updatedSampleTree: TreeNode = {
-        label: sampleDataResourceTokenCollection.databaseId,
-        isExpanded: false,
-        iconSrc: CosmosDBIcon,
-        className: "databaseHeader",
-        children: [
-          {
-            label: sampleDataResourceTokenCollection.id(),
-            iconSrc: CollectionIcon,
-            isExpanded: false,
-            className: "dataResourceTree",
-            contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
-            onClick: () => {
-              // Rewritten version of expandCollapseCollection
-              useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
-              useCommandBar.getState().setContextButtons([]);
-              useTabs().refreshActiveTab(
+  const buildSampleDataTree = (): TreeNode => {
+    const updatedSampleTree: TreeNode = {
+      label: sampleDataResourceTokenCollection.databaseId,
+      isExpanded: true,
+      iconSrc: CosmosDBIcon,
+      className: "databaseHeader",
+      children: [
+        {
+          label: sampleDataResourceTokenCollection.id(),
+          iconSrc: CollectionIcon,
+          isExpanded: false,
+          className: "collectionHeader",
+          contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+          onClick: () => {
+            useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
+            useCommandBar.getState().setContextButtons([]);
+            useTabs
+              .getState()
+              .refreshActiveTab(
                 (tab: TabsBase) =>
                   tab.collection?.id() === sampleDataResourceTokenCollection.id() &&
                   tab.collection.databaseId === sampleDataResourceTokenCollection.databaseId
               );
-            },
-            isSelected: () =>
-              useSelectedNode
-                .getState()
-                .isDataNodeSelected(
-                  sampleDataResourceTokenCollection.databaseId,
-                  sampleDataResourceTokenCollection.id()
-                ),
-            onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
-            children: [
-              {
-                label: "Items",
-              },
-            ],
           },
-        ],
-      };
-      setRoot(updatedSampleTree);
-    }
-  }, [sampleDataResourceTokenCollection]);
+          isSelected: () =>
+            useSelectedNode
+              .getState()
+              .isDataNodeSelected(sampleDataResourceTokenCollection.databaseId, sampleDataResourceTokenCollection.id()),
+          onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
+          children: [
+            {
+              label: "Items",
+              onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(),
+              isSelected: () =>
+                useSelectedNode
+                  .getState()
+                  .isDataNodeSelected(
+                    sampleDataResourceTokenCollection.databaseId,
+                    sampleDataResourceTokenCollection.id(),
+                    [ViewModels.CollectionTabKind.Documents]
+                  ),
+            },
+          ],
+        },
+      ],
+    };
 
-  return <TreeComponent className="dataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />;
+    return {
+      label: undefined,
+      isExpanded: true,
+      children: [updatedSampleTree],
+    };
+  };
+
+  return (
+    <TreeComponent
+      className="dataResourceTree"
+      rootNode={sampleDataResourceTokenCollection ? buildSampleDataTree() : { label: "Sample data not initialized." }}
+    />
+  );
 };

src/Main.tsx

@@ -17,7 +17,7 @@ import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
-import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/QueryCopilotFeedbackModal";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";

src/Terminal/JupyterLabAppFactory.ts

@@ -47,6 +47,10 @@ export class JupyterLabAppFactory {
   }
 
   public async createTerminalApp(serverSettings: ServerConnection.ISettings): Promise<ITerminalConnection | undefined> {
+    //Need to add this after we remove passing token through url
+    //const configurationSettings: Partial<ServerConnection.ISettings> = serverSettings;
+    //(configurationSettings.appendToken as boolean) = false;
+    //serverSettings = ServerConnection.makeSettings(configurationSettings);
     const manager = new TerminalManager({
       serverSettings: serverSettings,
     });
@@ -64,6 +68,11 @@ export class JupyterLabAppFactory {
       }
     }, this);
 
+    let internalSend = session.send;
+    session.send = (message: IMessage) => {
+      message?.content?.push(serverSettings?.token);
+      internalSend.call(session, message);
+    };
     const term = new Terminal(session, { theme: "dark", shutdownOnClose: true });
 
     if (!term) {

src/setupTests.ts

@@ -1,7 +1,8 @@
+import { initializeIcons } from "@fluentui/react";
 import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import "jest-canvas-mock";
-import { initializeIcons } from "@fluentui/react";
+import enableHooks from "jest-react-hooks-shallow";
 import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();
@@ -10,6 +11,30 @@ if (typeof window.URL.createObjectURL === "undefined") {
   Object.defineProperty(window.URL, "createObjectURL", { value: () => {} });
 }
 
+enableHooks(jest, { dontMockByDefault: true });
+
+const localStorageMock = (function () {
+  let store: { [key: string]: string } = {};
+  return {
+    getItem: function (key: string) {
+      return store[key] || null;
+    },
+    setItem: function (key: string, value: string) {
+      store[key] = value.toString();
+    },
+    removeItem: function (key: string) {
+      delete store[key];
+    },
+    clear: function () {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+});
+
 // TODO Remove when jquery and documentdbclient SDK are removed
 (<any>window).$ = (<any>window).jQuery = require("jquery");
 (<any>global).$ = (<any>global).$.jQuery = require("jquery");

test/cassandra/container.spec.ts

@@ -16,8 +16,8 @@ test("Cassandra keyspace and table CRUD", async () => {
   await explorer.click('[data-test="New Table"]');
   await explorer.click('[aria-label="Keyspace id"]');
   await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);
-  await explorer.click('[aria-label="addCollection-tableId"]');
-  await explorer.fill('[aria-label="addCollection-tableId"]', tableId);
+  await explorer.click('[aria-label="addCollection-table Id Create table"]');
+  await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${keyspaceId}`);
   await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);