Handling undefined exception

less/TableStyles/queryBuilder.less

@@ -230,7 +230,7 @@ input::-webkit-inner-spin-button {
 .advanced-options-panel .advanced-options .select .select-options-link {
   margin-left: 4px;
   cursor: pointer;
-  padding: 2px;
+  outline: none;
 }
 
 .query-panel .row .column-headers .Field {

less/resourceTree.less

@@ -13,6 +13,11 @@
     font-size: 12px;
   }
 
+  .sampleCollectionHeader {
+    margin-left: @MediumSpace;
+    font-size: 12px;
+  }
+
   .loadMoreHeader {
     color: RGB(5, 99, 193);
   }

package.json

@@ -148,7 +148,7 @@
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
@@ -160,7 +160,6 @@
     "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",
@@ -233,4 +232,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

src/Common/Constants.ts

@@ -435,89 +435,24 @@ export const QueryCopilotSampleContainerId = "SampleContainer";
 export const QueryCopilotSampleContainerSchema = {
   product: {
     sampleData: {
-      id: "c415e70f-9bf5-4cda-aebe-a290cb8b94c2",
-      name: "Amazing Phone 3000 (Black)",
-      price: 223.33,
+      id: "de6fadec-0384-43c8-93ea-16c0170b5460",
+      name: "Premium Phone Mini (Red)",
+      price: 652.04,
       category: "Electronics",
       description:
-        "This Amazing Phone 3000 (Black) is made of black metal! It has a very well made aluminum body and it feels very comfortable. We loved the sound that comes out of it! Also, the design of the phone was a little loose at first because I was using the camera and felt uncomfortable wearing it. The phone is actually made slightly smaller than these photos! This is due to the addition of a 3.3mm filter",
-      stock: 84,
-      countryOfOrigin: "USA",
-      firstAvailable: "2018-09-07 19:41:44",
-      priceHistory: [238.68, 234.7, 221.49, 205.88, 220.15],
+        "This Premium Phone Mini (Red) is designed by the company under agreement with the FCC, so we'd give it a pass in either direction, but no one should be using this handset without a compatible handset. All in all, this phone is one of the most affordable Android handsets out there at $100. Check them out.\n\n9. HTC One M9 4",
+      stock: 74,
+      countryOfOrigin: "Mexico",
+      firstAvailable: "2018-07-07 17:42:28",
+      priceHistory: [592.81],
       customerRatings: [
-        {
-          username: "steven66",
-          firstName: "Carol",
-          gender: "female",
-          lastName: "Shelton",
-          age: "25-35",
-          area: "suburban",
-          address: "261 Collins Burgs Apt. 332\nNorth Taylor, NM 32268",
-          stars: 5,
-          date: "2021-04-22 13:42:14",
-          verifiedUser: true,
-        },
-        {
-          username: "khudson",
-          firstName: "Ronald",
-          gender: "male",
-          lastName: "Webb",
-          age: "18-24",
-          area: "suburban",
-          address: "9912 Parker Court Apt. 068\nNorth Austin, HI 76225",
-          stars: 5,
-          date: "2021-02-07 07:00:22",
-          verifiedUser: false,
-        },
-        {
-          username: "lfrancis",
-          firstName: "Brady",
-          gender: "male",
-          lastName: "Wright",
-          age: "35-45",
-          area: "urban",
-          address: "PSC 5437, Box 3159\nAPO AA 26385",
-          stars: 2,
-          date: "2022-02-23 21:40:10",
-          verifiedUser: false,
-        },
-        {
-          username: "nicolemartinez",
-          firstName: "Megan",
-          gender: "female",
-          lastName: "Tran",
-          age: "18-24",
-          area: "rural",
-          address: "7445 Salazar Brooks\nNew Sarah, PW 18097",
-          stars: 4,
-          date: "2021-09-01 22:21:40",
-          verifiedUser: false,
-        },
-        {
-          username: "uguzman",
-          firstName: "Deanna",
-          gender: "female",
-          lastName: "Campbell",
-          age: "18-24",
-          area: "urban",
-          address: "41104 Moreno Fort Suite 872\nPort Michaelbury, AK 48712",
-          stars: 1,
-          date: "2022-03-07 02:23:14",
-          verifiedUser: false,
-        },
-        {
-          username: "rebeccahunt",
-          firstName: "Jared",
-          gender: "male",
-          lastName: "Lopez",
-          age: "18-24",
-          area: "rural",
-          address: "392 Morgan Village Apt. 785\nGreenshire, CT 05921",
-          stars: 5,
-          date: "2021-04-17 04:17:49",
-          verifiedUser: false,
-        },
+        { username: "dannyhowell", stars: 1, date: "2022-03-12 17:01:23", verifiedUser: true },
+        { username: "lindsay26", stars: 1, date: "2022-12-29 07:18:20", verifiedUser: false },
+        { username: "smithmiguel", stars: 3, date: "2022-09-08 11:43:27", verifiedUser: false },
+        { username: "julie07", stars: 3, date: "2021-03-14 23:54:10", verifiedUser: true },
+        { username: "kelly93", stars: 3, date: "2022-11-05 12:45:43", verifiedUser: false },
+        { username: "katherinereynolds", stars: 2, date: "2022-09-14 11:49:36", verifiedUser: false },
+        { username: "chandlerkenneth", stars: 1, date: "2022-01-14 12:14:43", verifiedUser: true },
       ],
       rareProperty: true,
     },
@@ -559,24 +494,6 @@ export const QueryCopilotSampleContainerSchema = {
               username: {
                 type: "string",
               },
-              firstName: {
-                type: "string",
-              },
-              gender: {
-                type: "string",
-              },
-              lastName: {
-                type: "string",
-              },
-              age: {
-                type: "string",
-              },
-              area: {
-                type: "string",
-              },
-              address: {
-                type: "string",
-              },
               stars: {
                 type: "number",
               },

src/Common/TableEntity.tsx

@@ -137,7 +137,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <div>
+            <div tabIndex={0}>
               <Image
                 {...imageProps}
                 src={EditIcon}

src/ConfigContext.ts

@@ -1,14 +1,14 @@
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
+  allowedArmEndpoints,
+  allowedBackendEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
-  defaultAllowedArmEndpoints,
-  defaultAllowedBackendEndpoints,
   validateEndpoint,
 } from "Utils/EndpointValidation";
 
@@ -20,8 +20,6 @@ export enum Platform {
 
 export interface ConfigContext {
   platform: Platform;
-  allowedArmEndpoints: ReadonlyArray<string>;
-  allowedBackendEndpoints: ReadonlyArray<string>;
   allowedParentFrameOrigins: ReadonlyArray<string>;
   gitSha?: string;
   proxyPath?: string;
@@ -51,8 +49,6 @@ export interface ConfigContext {
 // Default configuration
 let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
-  allowedArmEndpoints: defaultAllowedArmEndpoints,
-  allowedBackendEndpoints: defaultAllowedBackendEndpoints,
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
@@ -81,7 +77,7 @@ let configContext: Readonly<ConfigContext> = {
 
 export function resetConfigContext(): void {
   if (process.env.NODE_ENV !== "test") {
-    throw new Error("resetConfigContext can only be called in a test environment");
+    throw new Error("resetConfigContext can only becalled in a test environment");
   }
   configContext = {} as ConfigContext;
 }
@@ -91,7 +87,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     return;
   }
 
-  if (!validateEndpoint(newContext.ARM_ENDPOINT, configContext.allowedArmEndpoints || defaultAllowedArmEndpoints)) {
+  if (!validateEndpoint(newContext.ARM_ENDPOINT, allowedArmEndpoints)) {
     delete newContext.ARM_ENDPOINT;
   }
 
@@ -111,12 +107,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
-  if (
-    !validateEndpoint(
-      newContext.BACKEND_ENDPOINT,
-      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints
-    )
-  ) {
+  if (!validateEndpoint(newContext.BACKEND_ENDPOINT, allowedBackendEndpoints)) {
     delete newContext.BACKEND_ENDPOINT;
   }
 
@@ -139,7 +130,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
   Object.assign(configContext, newContext);
 }
 
-// Injected for local development. These will be removed in the production bundle by webpack
+// Injected for local develpment. These will be removed in the production bundle by webpack
 if (process.env.NODE_ENV === "development") {
   const port: string = process.env.PORT || "1234";
   updateConfigContext({

src/Contracts/ViewModels.ts

@@ -115,7 +115,7 @@ export interface CollectionBase extends TreeNode {
   isCollectionExpanded: ko.Observable<boolean>;
   isSampleCollection?: boolean;
 
-  onDocumentDBDocumentsClick(): void;
+  onDocumentDBDocumentsClick(isQueryCopilotCollection?: boolean, sampleCollection?: CollectionBase): void;
   onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
   expandCollection(): void;
   collapseCollection(): void;

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,5 +1,3 @@
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
@@ -148,10 +146,7 @@ export const createSampleCollectionContextMenuButton = (): TreeNodeMenuItem[] =>
   if (userContext.apiType === "SQL") {
     items.push({
       iconSrc: AddSqlQueryIcon,
-      onClick: () => {
-        useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
-        traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
-      },
+      onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot),
       label: "New SQL Query",
     });
   }

src/Explorer/Controls/Accordion/AccordionComponent.tsx

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

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -31,18 +31,11 @@ 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) {
     if (this.props.content !== previous.content) {
-      this.editor.setValue(this.props.content);
+      this.editor?.setValue(this.props.content);
     }
   }
 

src/Explorer/Explorer.tsx

@@ -1,8 +1,5 @@
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
-import { sendMessage } from "Common/MessageHandler";
-import { Platform } from "ConfigContext";
-import { MessageTypes } from "Contracts/ExplorerContracts";
 import { IGalleryItem } from "Juno/JunoClient";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import * as ko from "knockout";
@@ -26,7 +23,7 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
@@ -261,45 +258,6 @@ export default class Explorer {
     // TODO: return result
   }
 
-  private getRandomInt(max: number) {
-    return Math.floor(Math.random() * max);
-  }
-
-  public openNPSSurveyDialog(): void {
-    if (!Platform.Portal) {
-      return;
-    }
-
-    const NINETY_DAYS_IN_MS = 7776000000;
-    const ONE_DAY_IN_MS = 86400000;
-    const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
-      userContext.databaseAccount?.systemData?.createdAt || "",
-      NINETY_DAYS_IN_MS
-    );
-
-    // Try Cosmos DB subscription - survey shown to random 25% of users at day 1 in Data Explorer.
-    if (userContext.isTryCosmosDBSubscription) {
-      if (
-        isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS) &&
-        this.getRandomInt(100) < 25
-      ) {
-        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-      }
-    } else {
-      // An existing account is lesser than 90 days old. For existing account show to random 10 % of users in Data Explorer.
-      if (isAccountNewerThanNinetyDays) {
-        if (this.getRandomInt(100) < 10) {
-          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-        }
-      } else {
-        // An existing account is greater than 90 days. For existing account show to random 25 % of users in Data Explorer.
-        if (this.getRandomInt(100) < 25) {
-          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
-        }
-      }
-    }
-  }
-
   public async refreshDatabaseForResourceToken(): Promise<void> {
     const databaseId = userContext.parsedResourceToken?.databaseId;
     const collectionId = userContext.parsedResourceToken?.collectionId;
@@ -1333,7 +1291,7 @@ export default class Explorer {
       return;
     }
 
-    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
     useDatabases.setState({ sampleDataResourceTokenCollection });
   }
 }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,5 +1,3 @@
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
@@ -270,6 +268,7 @@ function createNewCollectionGroup(container: Explorer): CommandButtonComponentPr
     ariaLabel: label,
     hasPopup: true,
     id: "createNewContainerCommandButton",
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
   };
 }
 
@@ -315,6 +314,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
+    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
   };
 }
 
@@ -328,7 +328,6 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       onCommandClick: () => {
         if (useSelectedNode.getState().isQueryCopilotCollectionSelected()) {
           useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
-          traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
         } else {
           const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
@@ -494,7 +493,7 @@ function createOpenTerminalButton(container: Explorer): CommandButtonComponentPr
     onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
     commandButtonLabel: label,
     hasPopup: false,
-    disabled: useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+    disabled: false,
     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, message, ofMessageType } from "@nteract/messaging";
+import { Channels, childOf, createMessage, JupyterMessage, message, ofMessageType } from "@nteract/messaging";
 import { defineConfigOption } from "@nteract/mythic-configuration";
 import { RecordOf } from "immutable";
 import { Action, AnyAction } from "redux";
-import { StateObservable, ofType } from "redux-observable";
+import { ofType, StateObservable } from "redux-observable";
 import { kernels, sessions } from "rx-jupyter";
-import { EMPTY, Observable, Observer, Subject, Subscriber, concat, from, interval, merge, of, timer } from "rxjs";
+import { concat, EMPTY, from, interval, merge, Observable, Observer, of, Subject, Subscriber, 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 { ActionModifiers, Action as TelemetryAction } from "../../../Shared/Telemetry/TelemetryConstants";
+import { useTabs } from "../../../hooks/useTabs";
+import { Action as TelemetryAction, ActionModifiers } 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, JupyterMessage } from "./types";
+import { CdbAppState } from "./types";
 
 interface NotebookServiceConfig extends JupyterServerConfig {
   userPuid?: string;
@@ -106,8 +106,10 @@ 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");
@@ -239,10 +241,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,6 +1,5 @@
 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";
 
@@ -54,26 +53,3 @@ 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/AddCollectionPanel.tsx

@@ -1425,10 +1425,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       this.setState({ isExecuting: false });
       TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
       useSidePanel.getState().closeSidePanel();
-      // open NPS Survey Dialog once the collection is created
-      if (userContext.features.enableNPSSurvey) {
-        this.props.explorer.openNPSSurveyDialog();
-      }
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

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-table Id Create table"
+              ariaLabel="addCollection-tableId"
               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,7 +126,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 setInputCollectionName(newInput);
               }}
               ariaLabel={confirmContainer}
-              required
             />
           </div>
           {shouldRecordFeedback() && (

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

@@ -44,7 +44,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
-              required={true}
               styles={
                 Object {
                   "fieldGroup": Object {
@@ -60,7 +59,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 deferredValidationTime={200}
                 id="confirmCollectionId"
                 onChange={[Function]}
-                required={true}
                 resizable={true}
                 styles={[Function]}
                 theme={
@@ -340,7 +338,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField is-required root-55"
+                  className="ms-TextField root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
@@ -358,7 +356,6 @@ 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,7 +140,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               setDatabaseInput(newInput);
             }}
             ariaLabel={confirmDatabase}
-            required
           />
         </div>
         {isLastNonEmptyDatabase() && (

src/Explorer/Panes/PanelComponent.less

@@ -112,9 +112,6 @@
   margin-top: 28px;
   margin-left: 4px !important;
 }
-.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
-  border:1px dashed #605E5C
-}
 .addNewParamStyle {
   margin-top: 5px;
   margin-left: 5px !important;

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

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

src/Explorer/QueryCopilot/CopilotCarousel.tsx

@@ -95,7 +95,7 @@ export const QueryCopilotCarousel: React.FC<QueryCopilotCarouselProps> = ({
         offerThroughput: undefined,
         indexingPolicy: AllPropertiesIndexed,
         partitionKey: {
-          paths: ["/categoryId"],
+          paths: ["/objectId"],
           kind: "Hash",
           version: 2,
         },

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

@@ -1,122 +0,0 @@
-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/WelcomeModal.test.tsx

@@ -1,32 +0,0 @@
-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/WelcomeModal.tsx

@@ -42,8 +42,8 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
             </Stack>
           </Stack>
           <Stack horizontalAlign="center">
-            <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Query Copilot for Azure Cosmos DB (Private Preview)</Text>
+            <Stack.Item align="center">
+              <Text className="title bold">Welcome to Copilot in CosmosDB</Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
               <Stack horizontal>
@@ -52,7 +52,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                 </StackItem>
                 <StackItem align="start">
                   <Text className="bold">
-                    Let Query Copilot do the work for you
+                    Let copilot do the work for you
                     <br />
                   </Text>
                 </StackItem>
@@ -60,7 +60,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               <Text>
                 Ask Copilot to generate a query by describing the query in your words.
                 <br />
-                <Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
+                <Link href="">Learn more</Link>
               </Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
@@ -78,7 +78,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               <Text>
                 AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
                 <br />
-                <Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
+                <Link href="">Read preview terms</Link>
               </Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
@@ -88,16 +88,15 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                 </StackItem>
                 <StackItem align="start">
                   <Text className="bold">
-                    Query Copilot works on a sample database.
+                    Copilot currently works only a sample database
                     <br />
                   </Text>
                 </StackItem>
               </Stack>
               <Text>
-                While in Private Preview, Query Copilot is setup to work on sample database we have configured for you
-                at no cost.
+                Copilot is setup on a sample database we have configured for you at no cost
                 <br />
-                <Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
+                <Link href="">Learn more</Link>
               </Text>
             </Stack.Item>
           </Stack>

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

@@ -1,201 +0,0 @@
-// 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"
-          style={
-            Object {
-              "textAlign": "center",
-            }
-          }
-        >
-          <Text
-            className="title bold"
-          >
-            Welcome to Query Copilot for Azure Cosmos DB (Private Preview)
-          </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 Query 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="http://aka.ms/cdb-copilot-learn-more"
-            >
-              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="http://aka.ms/cdb-copilot-preview-terms"
-            >
-              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"
-              >
-                Query Copilot works on a sample database.
-                <br />
-              </Text>
-            </StackItem>
-          </Stack>
-          <Text>
-            While in Private Preview, Query Copilot is setup to work on sample database we have configured for you at no cost.
-            <br />
-            <StyledLinkBase
-              href="http://aka.ms/cdb-copilot-learn-more"
-            >
-              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/Popup/CopyPopup.test.tsx

@@ -1,48 +1,11 @@
-import { IconButton } from "@fluentui/react";
 import { shallow } from "enzyme";
 import React from "react";
+import { any } from "underscore";
 import { CopyPopup } from "./CopyPopup";
 
 describe("Copy Popup snapshot test", () => {
-  const setShowCopyPopupMock = jest.fn();
   it("should render when showCopyPopup is true", () => {
-    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={setShowCopyPopupMock} />);
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.prop("setShowCopyPopup")).toBeUndefined();
+    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={() => any} />);
     expect(wrapper).toMatchSnapshot();
   });
-
-  it("should render when showCopyPopup is false", () => {
-    const wrapper = shallow(<CopyPopup showCopyPopup={false} setShowCopyPopup={setShowCopyPopupMock} />);
-    expect(wrapper.prop("showCopyPopup")).toBeFalsy();
-    expect(wrapper.prop("setShowCopyPopup")).toBeUndefined();
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should call setShowCopyPopup(false) when close button is clicked", () => {
-    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={setShowCopyPopupMock} />);
-
-    const closeButton = wrapper.find(IconButton);
-    closeButton.props().onClick?.({} as React.MouseEvent<HTMLButtonElement, MouseEvent>);
-
-    expect(setShowCopyPopupMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should have the correct inline styles", () => {
-    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={setShowCopyPopupMock} />);
-
-    const stackStyle = wrapper.find("Stack").first().props().style;
-
-    expect(stackStyle).toEqual({
-      position: "fixed",
-      width: 345,
-      height: 66,
-      padding: 10,
-      gap: 5,
-      top: 75,
-      right: 20,
-      background: "#FFFFFF",
-      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
-    });
-  });
 });

src/Explorer/QueryCopilot/Popup/DeletePopup.test.tsx

@@ -1,113 +1,19 @@
-import { mount, shallow } from "enzyme";
+import { shallow } from "enzyme";
 import React from "react";
+import { any } from "underscore";
 import { DeletePopup } from "./DeletePopup";
 
 describe("Delete Popup snapshot test", () => {
-  const setShowDeletePopupMock = jest.fn();
-  const setQueryMock = jest.fn();
-  const clearFeedbackMock = jest.fn();
-  const showFeedbackBarMock = jest.fn();
-
   it("should render when showDeletePopup is true", () => {
     const wrapper = shallow(
       <DeletePopup
         showDeletePopup={true}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
+        setShowDeletePopup={() => any}
+        setQuery={() => any}
+        clearFeedback={() => any}
+        showFeedbackBar={() => any}
       />
     );
-    expect(wrapper.find("Modal").prop("isOpen")).toBeTruthy();
     expect(wrapper).toMatchSnapshot();
   });
-
-  it("should not render when showDeletePopup is false", () => {
-    const wrapper = shallow(
-      <DeletePopup
-        showDeletePopup={false}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
-      />
-    );
-    expect(wrapper.props().children.props.showDeletePopup).toBeFalsy();
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should call setQuery with an empty string and setShowDeletePopup(false) when delete button is clicked", () => {
-    const wrapper = mount(
-      <DeletePopup
-        showDeletePopup={true}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
-      />
-    );
-
-    wrapper.find("PrimaryButton").simulate("click");
-
-    expect(setQueryMock).toHaveBeenCalledWith("");
-    expect(setShowDeletePopupMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should call setShowDeletePopup(false) when close button is clicked", () => {
-    const setShowDeletePopupMock = jest.fn();
-    const wrapper = mount(
-      <DeletePopup
-        showDeletePopup={true}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
-      />
-    );
-
-    wrapper.find("DefaultButton").at(1).simulate("click");
-
-    expect(setShowDeletePopupMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should render the appropriate text content", () => {
-    const wrapper = shallow(
-      <DeletePopup
-        showDeletePopup={true}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
-      />
-    );
-
-    const textContent = wrapper
-      .find("Text")
-      .map((text, index) => <React.Fragment key={index}>{text.props().children}</React.Fragment>);
-
-    expect(textContent).toEqual([
-      <React.Fragment key={0}>
-        <b>Delete code?</b>
-      </React.Fragment>,
-      <React.Fragment key={1}>
-        This will clear the query from the query builder pane along with all comments and also reset the prompt pane
-      </React.Fragment>,
-    ]);
-  });
-
-  it("should have the correct inline style", () => {
-    const wrapper = shallow(
-      <DeletePopup
-        showDeletePopup={true}
-        setShowDeletePopup={setShowDeletePopupMock}
-        setQuery={setQueryMock}
-        clearFeedback={clearFeedbackMock}
-        showFeedbackBar={showFeedbackBarMock}
-      />
-    );
-
-    const stackStyle = wrapper.find("Stack[style]").props().style;
-
-    expect(stackStyle).toEqual({ padding: "16px 24px", height: "auto" });
-  });
 });

src/Explorer/QueryCopilot/Popup/__snapshots__/CopyPopup.test.tsx.snap

@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Copy Popup snapshot test should render when showCopyPopup is false 1`] = `<Fragment />`;
-
 exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] = `
 <Stack
   style={

src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap

@@ -1,83 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Delete Popup snapshot test should not render when showDeletePopup is false 1`] = `
-<Modal
-  isOpen={false}
-  styles={
-    Object {
-      "main": Object {
-        "minHeight": "122px",
-        "minWidth": "880px",
-      },
-    }
-  }
->
-  <Stack
-    style={
-      Object {
-        "height": "auto",
-        "padding": "16px 24px",
-      }
-    }
-  >
-    <Text
-      style={
-        Object {
-          "fontSize": "18px",
-          "height": 24,
-        }
-      }
-    >
-      <b>
-        Delete code?
-      </b>
-    </Text>
-    <Text
-      style={
-        Object {
-          "marginBottom": 20,
-          "marginTop": 10,
-        }
-      }
-    >
-      This will clear the query from the query builder pane along with all comments and also reset the prompt pane
-    </Text>
-    <Stack
-      horizontal={true}
-      horizontalAlign="start"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <CustomizedPrimaryButton
-        onClick={[Function]}
-        style={
-          Object {
-            "height": 24,
-            "padding": "0px 20px",
-          }
-        }
-      >
-        Delete
-      </CustomizedPrimaryButton>
-      <CustomizedDefaultButton
-        onClick={[Function]}
-        style={
-          Object {
-            "height": 24,
-            "padding": "0px 20px",
-          }
-        }
-      >
-        Close
-      </CustomizedDefaultButton>
-    </Stack>
-  </Stack>
-</Modal>
-`;
-
 exports[`Delete Popup snapshot test should render when showDeletePopup is true 1`] = `
 <Modal
   isOpen={true}

src/Explorer/QueryCopilot/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,7 +28,6 @@ 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 }}>
@@ -78,13 +77,11 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
           }}
         ></ChoiceGroup>
         <Text style={{ fontSize: 12, marginBottom: 14 }}>
-          By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
-          {
-            <Link href="https://privacy.microsoft.com/privacystatement" target="_blank">
-              Privacy statement
-            </Link>
-          }{" "}
-          for more information.
+          By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your
+          organization will be able to view and manage your feedback data.{" "}
+          <Link href="" target="_blank">
+            Privacy statement
+          </Link>
         </Text>
         {likeQuery && (
           <Checkbox

src/Explorer/QueryCopilot/QueryCopilotTab.test.tsx

@@ -5,7 +5,9 @@ import { QueryCopilotTab } from "./QueryCopilotTab";
 
 describe("Query copilot tab snapshot test", () => {
   it("should render with initial input", () => {
-    const wrapper = shallow(<QueryCopilotTab explorer={new Explorer()} />);
+    const wrapper = shallow(
+      <QueryCopilotTab initialInput="Write a query to return all records in this table" explorer={new Explorer()} />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -17,10 +17,15 @@ import {
   TextField,
 } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { QueryCopilotSampleContainerId, QueryCopilotSampleContainerSchema } from "Common/Constants";
+import {
+  QueryCopilotSampleContainerId,
+  QueryCopilotSampleContainerSchema,
+  QueryCopilotSampleDatabaseId,
+} 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";
@@ -31,11 +36,9 @@ 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 { querySampleDocuments, submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/SamplePrompts/SamplePrompts";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -46,6 +49,7 @@ 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";
@@ -56,6 +60,7 @@ interface SuggestedPrompt {
 }
 
 interface QueryCopilotTabProps {
+  initialInput: string;
   explorer: Explorer;
 }
 
@@ -72,50 +77,31 @@ const promptStyles: IButtonStyles = {
   label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
 };
 
-export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: QueryCopilotTabProps): JSX.Element => {
+export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
+  initialInput,
+  explorer,
+}: QueryCopilotTabProps): JSX.Element => {
+  const hideFeedbackModalForLikedQueries = useQueryCopilot((state) => state.hideFeedbackModalForLikedQueries);
+  const [userPrompt, setUserPrompt] = useState<string>(initialInput || "");
+  const [generatedQuery, setGeneratedQuery] = useState<string>("");
+  const [query, setQuery] = useState<string>("");
+  const [selectedQuery, setSelectedQuery] = useState<string>("");
+  const [isGeneratingQuery, setIsGeneratingQuery] = useState<boolean>(false);
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+  const [likeQuery, setLikeQuery] = useState<boolean>();
+  const [dislikeQuery, setDislikeQuery] = useState<boolean>();
+  const [showCallout, setShowCallout] = useState<boolean>(false);
+  const [showSamplePrompts, setShowSamplePrompts] = useState<boolean>(false);
+  const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
+  const [queryResults, setQueryResults] = useState<QueryResults>();
+  const [errorMessage, setErrorMessage] = useState<string>("");
   const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
   const inputEdited = useRef(false);
-  const {
-    hideFeedbackModalForLikedQueries,
-    userPrompt,
-    setUserPrompt,
-    generatedQuery,
-    setGeneratedQuery,
-    query,
-    setQuery,
-    selectedQuery,
-    setSelectedQuery,
-    isGeneratingQuery,
-    setIsGeneratingQuery,
-    isExecuting,
-    setIsExecuting,
-    likeQuery,
-    setLikeQuery,
-    dislikeQuery,
-    setDislikeQuery,
-    showCallout,
-    setShowCallout,
-    showSamplePrompts,
-    setShowSamplePrompts,
-    queryIterator,
-    setQueryIterator,
-    queryResults,
-    setQueryResults,
-    errorMessage,
-    setErrorMessage,
-    isSamplePromptsOpen,
-    setIsSamplePromptsOpen,
-    showDeletePopup,
-    setShowDeletePopup,
-    showFeedbackBar,
-    setShowFeedbackBar,
-    showCopyPopup,
-    setshowCopyPopup,
-    showErrorMessageBar,
-    setShowErrorMessageBar,
-    generatedQueryComments,
-    setGeneratedQueryComments,
-  } = useQueryCopilot();
+  const [isSamplePromptsOpen, setIsSamplePromptsOpen] = useState<boolean>(false);
+  const [showDeletePopup, setShowDeletePopup] = useState<boolean>(false);
+  const [showFeedbackBar, setShowFeedbackBar] = useState<boolean>(false);
+  const [showCopyPopup, setshowCopyPopup] = useState<boolean>(false);
+  const [showErrorMessageBar, setShowErrorMessageBar] = useState<boolean>(false);
 
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
@@ -141,12 +127,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
   };
 
   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: '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"' },
+    { 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" },
   ];
   const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
   const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
@@ -168,16 +154,9 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
   };
 
   const updateHistories = (): void => {
-    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)];
-
+    const newHistories = histories.length < 3 ? [userPrompt, ...histories] : [userPrompt, histories[1], histories[2]];
     setHistories(newHistories);
-    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
+    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join(","));
   };
 
   const generateSQLQuery = async (): Promise<void> => {
@@ -190,33 +169,23 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
         userPrompt: userPrompt,
       };
       setShowDeletePopup(false);
-      useQueryCopilot.getState().refreshCorrelationId();
       const response = await fetch("https://copilotorchestrater.azurewebsites.net/generateSQLQuery", {
         method: "POST",
         headers: {
           "content-type": "application/json",
-          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
         },
         body: JSON.stringify(payload),
       });
 
       const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
-      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);
-          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
-          setShowErrorMessageBar(false);
+      if (generateSQLQueryResponse?.sql) {
+        let query = `-- **Prompt:** ${userPrompt}\r\n`;
+        if (generateSQLQueryResponse.explanation) {
+          query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
         }
-      } else {
-        handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError");
-        useTabs.getState().setIsQueryErrorThrown(true);
-        setShowErrorMessageBar(true);
+        query += generateSQLQueryResponse.sql;
+        setQuery(query);
+        setGeneratedQuery(generateSQLQueryResponse.sql);
       }
     } catch (error) {
       handleError(error, "executeNaturalLanguageQuery");
@@ -231,15 +200,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
   };
 
   const onExecuteQueryClick = async (): Promise<void> => {
-    traceStart(Action.ExecuteQueryGeneratedFromQueryCopilot, {
-      correlationId: useQueryCopilot.getState().correlationId,
-      userPrompt: userPrompt,
-      generatedQuery: generatedQuery,
-      generatedQueryComments: generatedQueryComments,
-      executedQuery: selectedQuery || query,
-    });
     const queryToExecute = selectedQuery || query;
-    const queryIterator = querySampleDocuments(queryToExecute, {
+    const queryIterator = queryDocuments(QueryCopilotSampleDatabaseId, QueryCopilotSampleContainerId, queryToExecute, {
       enableCrossPartitionQuery: shouldEnableCrossPartitionKey(),
     } as FeedOptions);
     setQueryIterator(queryIterator);
@@ -262,16 +224,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
 
       setQueryResults(queryResults);
       setErrorMessage("");
-      setShowErrorMessageBar(false);
-      traceSuccess(Action.ExecuteQueryGeneratedFromQueryCopilot, {
-        correlationId: useQueryCopilot.getState().correlationId,
-      });
     } catch (error) {
       const errorMessage = getErrorMessage(error);
-      traceFailure(Action.ExecuteQueryGeneratedFromQueryCopilot, {
-        correlationId: useQueryCopilot.getState().correlationId,
-        errorMessage: errorMessage,
-      });
       setErrorMessage(errorMessage);
       handleError(errorMessage, "executeQueryCopilotTab");
       useTabs.getState().setIsQueryErrorThrown(true);
@@ -291,7 +245,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
       commandButtonLabel: executeQueryBtnLabel,
       ariaLabel: executeQueryBtnLabel,
       hasPopup: false,
-      disabled: query?.trim() === "",
     };
 
     const saveQueryBtn = {
@@ -302,26 +255,23 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
       commandButtonLabel: "Save Query",
       ariaLabel: "Save Query",
       hasPopup: false,
-      disabled: query?.trim() === "",
     };
 
-    // 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,
-    // };
+    const samplePromptsBtn = {
+      iconSrc: SamplePromptsIcon,
+      iconAlt: "Sample Prompts",
+      onCommandClick: () => setIsSamplePromptsOpen(true),
+      commandButtonLabel: "Sample Prompts",
+      ariaLabel: "Sample Prompts",
+      hasPopup: false,
+    };
 
-    return [executeQueryBtn, saveQueryBtn];
+    return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
   };
   const showTeachingBubble = (): void => {
-    const shouldShowTeachingBubble = !inputEdited.current && userPrompt.trim() === "";
-    if (shouldShowTeachingBubble) {
+    if (!inputEdited.current) {
       setTimeout(() => {
-        if (shouldShowTeachingBubble) {
+        if (!inputEdited.current) {
           toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
@@ -335,305 +285,282 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: Qu
     setShowCallout(false);
   };
 
-  const startGenerateQueryProcess = () => {
-    updateHistories();
-    generateSQLQuery();
-    resetButtonState();
-  };
-
   React.useEffect(() => {
     useCommandBar.getState().setContextButtons(getCommandbarButtons());
   }, [query, selectedQuery]);
 
   React.useEffect(() => {
+    if (initialInput) {
+      generateSQLQuery();
+    }
     showTeachingBubble();
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
   return (
-    <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
-      <div style={isGeneratingQuery ? { height: "100%" } : { 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);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                startGenerateQueryProcess();
-              }
-            }}
-            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"
+    <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 }}
             >
-              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 }}
-              >
-                sample prompts
-              </Link>{" "}
-              or write your own query
-            </TeachingBubble>
-          )}
-          <IconButton
-            iconProps={{ iconName: "Send" }}
-            disabled={isGeneratingQuery || !userPrompt.trim()}
-            style={{ marginLeft: 8 }}
-            onClick={() => startGenerateQueryProcess()}
-          />
-          {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="http://aka.ms/cdb-copilot-writing">
-                        writing effective prompts
-                      </Link>
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </Callout>
-          )}
-        </Stack>
-
-        <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="http://aka.ms/cdb-copilot-preview-terms" 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: generatedQuery,
-                    likeQuery: likeQuery,
-                    description: "",
-                    userPrompt: userPrompt,
-                  });
-                }}
-                directionalHint={DirectionalHint.topCenter}
-              >
-                <Text>
-                  Thank you. Need to give{" "}
-                  <Link
-                    onClick={() => {
-                      setShowCallout(false);
-                      useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
+              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",
                     }}
                   >
-                    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>
+                    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",
+                }}
+              >
+                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>
 
-        <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)
+      {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);
               }
-            />
-          </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} />
-      </div>
+          <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}
+        />
+      )}
+      <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
     </Stack>
   );
 };

src/Explorer/QueryCopilot/QueryCopilotUtilities.test.tsx

@@ -1,225 +0,0 @@
-import { FeedOptions } from "@azure/cosmos";
-import { QueryCopilotSampleContainerSchema } from "Common/Constants";
-import { handleError } from "Common/ErrorHandlingUtils";
-import { sampleDataClient } from "Common/SampleDataClient";
-import * as commonUtils from "Common/dataAccess/queryDocuments";
-import DocumentId from "Explorer/Tree/DocumentId";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
-import { querySampleDocuments, readSampleDocument, submitFeedback } from "./QueryCopilotUtilities";
-jest.mock("Explorer/Tree/DocumentId", () => {
-  return jest.fn().mockImplementation(() => {
-    return {
-      id: jest.fn(),
-      loadDocument: jest.fn(),
-    };
-  });
-});
-
-jest.mock("Utils/NotificationConsoleUtils", () => ({
-  logConsoleProgress: jest.fn(),
-  logConsoleError: jest.fn(),
-}));
-
-jest.mock("@azure/cosmos", () => ({
-  FeedOptions: jest.fn(),
-  QueryIterator: jest.fn(),
-}));
-
-jest.mock("Common/ErrorHandlingUtils", () => ({
-  handleError: jest.fn(),
-}));
-
-jest.mock("Utils/NotificationConsoleUtils", () => ({
-  logConsoleProgress: jest.fn().mockReturnValue((): void => undefined),
-}));
-
-jest.mock("Common/dataAccess/queryDocuments", () => ({
-  getCommonQueryOptions: jest.fn((options) => options),
-}));
-
-jest.mock("Common/SampleDataClient");
-
-jest.mock("node-fetch");
-
-describe("QueryCopilotUtilities", () => {
-  beforeEach(() => jest.clearAllMocks());
-  describe("submitFeedback", () => {
-    const payload = {
-      like: "like",
-      generatedSql: "GeneratedQuery",
-      userPrompt: "UserPrompt",
-      description: "Description",
-      contact: "Contact",
-      containerSchema: QueryCopilotSampleContainerSchema,
-    };
-
-    it("should call fetch with the payload with like", async () => {
-      const mockFetch = jest.fn().mockResolvedValueOnce({});
-
-      globalThis.fetch = mockFetch;
-      useQueryCopilot.getState().refreshCorrelationId();
-
-      await submitFeedback({
-        likeQuery: true,
-        generatedQuery: "GeneratedQuery",
-        userPrompt: "UserPrompt",
-        description: "Description",
-        contact: "Contact",
-      });
-
-      expect(mockFetch).toHaveBeenCalledWith(
-        "https://copilotorchestrater.azurewebsites.net/feedback",
-        expect.objectContaining({
-          method: "POST",
-          headers: {
-            "content-type": "application/json",
-            "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-          },
-        })
-      );
-
-      const actualBody = JSON.parse(mockFetch.mock.calls[0][1].body);
-      expect(actualBody).toEqual(payload);
-    });
-
-    it("should call fetch with the payload with unlike and empty parameters", async () => {
-      payload.like = "dislike";
-      payload.description = "";
-      payload.contact = "";
-      const mockFetch = jest.fn().mockResolvedValueOnce({});
-
-      globalThis.fetch = mockFetch;
-      useQueryCopilot.getState().refreshCorrelationId();
-
-      await submitFeedback({
-        likeQuery: false,
-        generatedQuery: "GeneratedQuery",
-        userPrompt: "UserPrompt",
-        description: undefined,
-        contact: undefined,
-      });
-
-      expect(mockFetch).toHaveBeenCalledWith(
-        "https://copilotorchestrater.azurewebsites.net/feedback",
-        expect.objectContaining({
-          method: "POST",
-          headers: {
-            "content-type": "application/json",
-            "x-ms-correlationid": useQueryCopilot.getState().correlationId,
-          },
-        })
-      );
-
-      const actualBody = JSON.parse(mockFetch.mock.calls[0][1].body);
-      expect(actualBody).toEqual(payload);
-    });
-
-    it("should handle errors and call handleError", async () => {
-      globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Mock error"));
-
-      await submitFeedback({
-        likeQuery: true,
-        generatedQuery: "GeneratedQuery",
-        userPrompt: "UserPrompt",
-        description: "Description",
-        contact: "Contact",
-      }).catch((error) => {
-        expect(error.message).toEqual("Mock error");
-      });
-
-      expect(handleError).toHaveBeenCalledWith(new Error("Mock error"), expect.any(String));
-    });
-  });
-
-  describe("querySampleDocuments", () => {
-    (sampleDataClient as jest.Mock).mockReturnValue({
-      database: jest.fn().mockReturnValue({
-        container: jest.fn().mockReturnValue({
-          items: {
-            query: jest.fn().mockReturnValue([]),
-          },
-        }),
-      }),
-    });
-
-    it("calls getCommonQueryOptions with the provided options", () => {
-      const query = "sample query";
-      const options: FeedOptions = { maxItemCount: 10 };
-
-      querySampleDocuments(query, options);
-
-      expect(commonUtils.getCommonQueryOptions).toHaveBeenCalledWith(options);
-    });
-
-    it("returns the result of items.query method", () => {
-      const query = "sample query";
-      const options: FeedOptions = { maxItemCount: 10 };
-      const mockResult = [
-        { id: 1, name: "Document 1" },
-        { id: 2, name: "Document 2" },
-      ];
-
-      // Mock the items.query method to return the mockResult
-      (sampleDataClient().database("CopilotSampleDb").container("SampleContainer").items
-        .query as jest.Mock).mockReturnValue(mockResult);
-
-      const result = querySampleDocuments(query, options);
-
-      expect(result).toEqual(mockResult);
-    });
-  });
-
-  describe("readSampleDocument", () => {
-    it("should call the read method with the correct parameters", async () => {
-      (sampleDataClient as jest.Mock).mockReturnValue({
-        database: jest.fn().mockReturnValue({
-          container: jest.fn().mockReturnValue({
-            item: jest.fn().mockReturnValue({
-              read: jest.fn().mockResolvedValue({
-                resource: {},
-              }),
-            }),
-          }),
-        }),
-      });
-
-      const documentId = new DocumentId(null, "DocumentId", []);
-      const expectedResponse = {};
-
-      const result = await readSampleDocument(documentId);
-
-      expect(sampleDataClient).toHaveBeenCalled();
-      expect(sampleDataClient().database).toHaveBeenCalledWith("CopilotSampleDb");
-      expect(sampleDataClient().database("CopilotSampleDb").container).toHaveBeenCalledWith("SampleContainer");
-      expect(
-        sampleDataClient().database("CopilotSampleDb").container("SampleContainer").item("DocumentId", undefined).read
-      ).toHaveBeenCalled();
-      expect(result).toEqual(expectedResponse);
-    });
-
-    it("should handle an error and re-throw it", async () => {
-      (sampleDataClient as jest.Mock).mockReturnValue({
-        database: jest.fn().mockReturnValue({
-          container: jest.fn().mockReturnValue({
-            item: jest.fn().mockReturnValue({
-              read: jest.fn().mockRejectedValue(new Error("Mock error")),
-            }),
-          }),
-        }),
-      });
-
-      const errorMock = new Error("Mock error");
-      const documentId = new DocumentId(null, "DocumentId", []);
-
-      await expect(readSampleDocument(documentId)).rejects.toStrictEqual(errorMock);
-
-      expect(sampleDataClient).toHaveBeenCalled();
-      expect(sampleDataClient().database).toHaveBeenCalledWith("CopilotSampleDb");
-      expect(sampleDataClient().database("CopilotSampleDb").container).toHaveBeenCalledWith("SampleContainer");
-      expect(
-        sampleDataClient().database("CopilotSampleDb").container("SampleContainer").item("DocumentId", undefined).read
-      ).toHaveBeenCalled();
-      expect(handleError).toHaveBeenCalledWith(errorMock, "ReadDocument", expect.any(String));
-    });
-  });
-});

src/Explorer/QueryCopilot/QueryCopilotUtilities.ts

@@ -1,16 +1,5 @@
-import { FeedOptions, Item, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import {
-  QueryCopilotSampleContainerId,
-  QueryCopilotSampleContainerSchema,
-  QueryCopilotSampleDatabaseId,
-} from "Common/Constants";
+import { QueryCopilotSampleContainerSchema } 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";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 
 interface FeedbackParams {
   likeQuery: boolean;
@@ -32,42 +21,16 @@ export const submitFeedback = async (params: FeedbackParams): Promise<void> => {
       contact: contact || "",
     };
 
-    await fetch("https://copilotorchestrater.azurewebsites.net/feedback", {
+    const response = await fetch("https://copilotorchestrater.azurewebsites.net/feedback", {
       method: "POST",
       headers: {
         "content-type": "application/json",
-        "x-ms-correlationid": useQueryCopilot.getState().correlationId,
       },
       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/SamplePrompts/SamplePrompts.test.tsx

@@ -1,91 +1,26 @@
-import { DefaultButton, IconButton } from "@fluentui/react";
 import { shallow } from "enzyme";
 import React from "react";
 import { SamplePrompts, SamplePromptsProps } from "./SamplePrompts";
 
 describe("Sample Prompts snapshot test", () => {
-  const setTextBoxMock = jest.fn();
-  const setIsSamplePromptsOpenMock = jest.fn();
-  const sampleProps: SamplePromptsProps = {
-    isSamplePromptsOpen: true,
-    setIsSamplePromptsOpen: setIsSamplePromptsOpenMock,
-    setTextBox: setTextBoxMock,
-  };
-  beforeEach(() => jest.clearAllMocks());
-
   it("should render properly if isSamplePromptsOpen is true", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
+    const sampleProps: SamplePromptsProps = {
+      isSamplePromptsOpen: true,
+      setIsSamplePromptsOpen: () => undefined,
+      setTextBox: () => undefined,
+    };
 
+    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("should render properly if isSamplePromptsOpen is false", () => {
-    sampleProps.isSamplePromptsOpen = false;
-
+    const sampleProps: SamplePromptsProps = {
+      isSamplePromptsOpen: false,
+      setIsSamplePromptsOpen: () => undefined,
+      setTextBox: () => undefined,
+    };
     const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
     expect(wrapper).toMatchSnapshot();
   });
-
-  it("should call setTextBox and setIsSamplePromptsOpen(false) when a button is clicked", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
-    wrapper.find(DefaultButton).at(0).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith("Show me products less than 100 dolars");
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-
-    wrapper.find(DefaultButton).at(3).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith(
-      "Write a query to return all records in this table created in the last thirty days"
-    );
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should call setIsSamplePromptsOpen(false) when the close button is clicked", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
-    wrapper.find(IconButton).first().simulate("click");
-
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should call setTextBox and setIsSamplePromptsOpen(false) when a simple prompt button is clicked", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
-    wrapper.find(DefaultButton).at(0).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith("Show me products less than 100 dolars");
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-
-    wrapper.find(DefaultButton).at(1).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith("Show schema");
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should call setTextBox and setIsSamplePromptsOpen(false) when an intermediate prompt button is clicked", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
-    wrapper.find(DefaultButton).at(2).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith(
-      "Show items with a description that contains a number between 0 and 99 inclusive."
-    );
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-
-    wrapper.find(DefaultButton).at(3).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith(
-      "Write a query to return all records in this table created in the last thirty days"
-    );
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-  });
-
-  it("should call setTextBox and setIsSamplePromptsOpen(false) when a complex prompt button is clicked", () => {
-    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
-
-    wrapper.find(DefaultButton).at(4).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith("Show all the products that customer Bob has reviewed.");
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-
-    wrapper.find(DefaultButton).at(5).simulate("click");
-    expect(setTextBoxMock).toHaveBeenCalledWith("Which computers are more than 300 dollars and less than 400 dollars?");
-    expect(setIsSamplePromptsOpenMock).toHaveBeenCalledWith(false);
-  });
 });

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

@@ -5,149 +5,133 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
   className="tab-pane"
   style={
     Object {
+      "height": "100%",
       "padding": 24,
       "width": "100%",
     }
   }
 >
-  <div
+  <Stack
+    horizontal={true}
+    verticalAlign="center"
+  >
+    <Image
+      src=""
+    />
+    <Text
+      style={
+        Object {
+          "fontSize": 16,
+          "fontWeight": 600,
+          "marginLeft": 8,
+        }
+      }
+    >
+      Copilot
+    </Text>
+  </Stack>
+  <Stack
+    horizontal={true}
     style={
       Object {
-        "height": "100%",
-        "overflowY": "auto",
+        "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,
       }
     }
   >
-    <Stack
-      horizontal={true}
-      verticalAlign="center"
+    AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
+     
+    <StyledLinkBase
+      href=""
+      target="_blank"
     >
-      <Image
-        src=""
+      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}
+    >
+      <EditorReact
+        ariaLabel="Editing Query"
+        content=""
+        isReadOnly={false}
+        language="sql"
+        lineNumbers="on"
+        onContentChanged={[Function]}
+        onContentSelected={[Function]}
       />
-      <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"
-    >
-      <StyledTextFieldBase
-        autoComplete="off"
-        disabled={false}
-        id="naturalLanguageInput"
-        onChange={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        style={
-          Object {
-            "lineHeight": 30,
-          }
-        }
-        styles={
-          Object {
-            "root": Object {
-              "width": "95%",
-            },
-          }
-        }
-        value=""
+      <QueryResultSection
+        error=""
+        executeQueryDocumentsPage={[Function]}
+        isExecuting={false}
+        isMongoDB={false}
+        queryEditorContent=""
       />
-      <CustomizedIconButton
-        disabled={true}
-        iconProps={
-          Object {
-            "iconName": "Send",
-          }
-        }
-        onClick={[Function]}
-        style={
-          Object {
-            "marginLeft": 8,
-          }
-        }
-      />
-    </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="http://aka.ms/cdb-copilot-preview-terms"
-          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>
+    </t>
+  </Stack>
+  <WelcomeModal
+    visible={true}
+  />
+  <CopyPopup
+    setShowCopyPopup={[Function]}
+    showCopyPopup={false}
+  />
 </Stack>
 `;

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -97,12 +97,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           () => this.setState({}),
           (state) => state.showResetPasswordBubble
         ),
-      },
-      {
-        dispose: useDatabases.subscribe(
-          () => this.setState({}),
-          (state) => state.sampleDataResourceTokenCollection
-        ),
       }
     );
   }
@@ -113,11 +107,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   };
 
   private getSplashScreenButtons = (): JSX.Element => {
-    if (
-      useDatabases.getState().sampleDataResourceTokenCollection &&
-      userContext.features.enableCopilot &&
-      userContext.apiType === "SQL"
-    ) {
+    if (userContext.features.enableCopilot && userContext.apiType === "SQL") {
       return (
         <Stack style={{ width: "66%", cursor: "pointer", margin: "40px auto" }} tokens={{ childrenGap: 16 }}>
           <Stack horizontal tokens={{ childrenGap: 16 }}>
@@ -147,10 +137,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               description={
                 "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
               }
-              onClick={() => {
-                useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
-                traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
-              }}
+              onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot)}
             />
             <SplashScreenButton
               imgSrc={ConnectIcon}
@@ -259,9 +246,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <div className="splashScreen">
-              <h1
+              <div
                 className="title"
-                role="heading"
                 aria-label={
                   userContext.apiType === "Postgres"
                     ? "Welcome to Azure Cosmos DB for PostgreSQL"
@@ -272,7 +258,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                   ? "Welcome to Azure Cosmos DB for PostgreSQL"
                   : "Welcome to Azure Cosmos DB"}
                 <FeaturePanelLauncher />
-              </h1>
+              </div>
               <div className="subtitle">
                 {userContext.apiType === "Postgres"
                   ? "Get started with our sample datasets, documentation, and additional tools."
@@ -595,7 +581,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               >
                 {item.title}
               </Link>
-              <Image src={LinkIcon} alt={item.title} />
+              <Image src={LinkIcon} alt=" " />
             </Stack>
             <Text>{item.description}</Text>
           </Stack>
@@ -614,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} alt={item.title} />
+                  <Image style={{ marginRight: 8 }} src={item.iconSrc} />
                   <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
                     {item.title}
                   </Link>
@@ -734,7 +720,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               >
                 {item.title}
               </Link>
-              <Image src={LinkIcon} alt={item.title} />
+              <Image src={LinkIcon} />
             </Stack>
             <Text>{item.description}</Text>
           </Stack>

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,5 +1,4 @@
 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";
@@ -8,12 +7,7 @@ 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,
-  QueryCopilotSampleContainerId,
-  QueryCopilotSampleDatabaseId,
-} from "../../Common/Constants";
+import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
@@ -77,7 +71,6 @@ export default class DocumentsTab extends TabsBase {
 
   private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
   private _resourceTokenPartitionKey: string;
-  private _isQueryCopilotSampleContainer: boolean;
 
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
@@ -324,9 +317,6 @@ 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 {
@@ -688,6 +678,7 @@ 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 = {};
@@ -697,16 +688,12 @@ export default class DocumentsTab extends TabsBase {
       options.partitionKey = this._resourceTokenPartitionKey;
     }
 
-    return this._isQueryCopilotSampleContainer
-      ? querySampleDocuments(query, options)
-      : queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
+    return queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
   }
 
   public async selectDocument(documentId: DocumentId): Promise<void> {
     this.selectedDocumentId(documentId);
-    const content = await (this._isQueryCopilotSampleContainer
-      ? readSampleDocument(documentId)
-      : readDocument(this.collection, documentId));
+    const content = await readDocument(this.collection, documentId);
     this.initDocumentEditor(documentId, content);
   }
 
@@ -823,7 +810,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled: !this.newDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.newDocumentButton.enabled(),
         id: "mongoNewDocumentBtn",
       });
     }
@@ -837,8 +824,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled:
-          !this.saveNewDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.saveNewDocumentButton.enabled(),
       });
     }
 
@@ -851,9 +837,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled:
-          !this.discardNewDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.discardNewDocumentChangesButton.enabled(),
       });
     }
 
@@ -866,8 +850,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled:
-          !this.saveExistingDocumentButton.enabled() || useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.saveExistingDocumentButton.enabled(),
       });
     }
 
@@ -880,9 +863,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled:
-          !this.discardExisitingDocumentChangesButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.discardExisitingDocumentChangesButton.enabled(),
       });
     }
 
@@ -895,9 +876,7 @@ export default class DocumentsTab extends TabsBase {
         commandButtonLabel: label,
         ariaLabel: label,
         hasPopup: false,
-        disabled:
-          !this.deleteExisitingDocumentButton.enabled() ||
-          useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+        disabled: !this.deleteExisitingDocumentButton.enabled(),
       });
     }
 
@@ -941,9 +920,7 @@ export default class DocumentsTab extends TabsBase {
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled:
-        useSelectedNode.getState().isDatabaseNodeOrNoneSelected() ||
-        useSelectedNode.getState().isQueryCopilotCollectionSelected(),
+      disabled: useSelectedNode.getState().isDatabaseNodeOrNoneSelected(),
     };
   }
 }

src/Explorer/Tabs/Tabs.tsx

@@ -9,7 +9,6 @@ import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
 import { userContext } from "UserContext";
-import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -69,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 : "";
+  const tabId = tab ? tab.tabId : "connect";
 
   const getReactTabTitle = (): ko.Observable<string> => {
     if (tabKind === ReactTabKind.QueryCopilot) {
@@ -159,7 +158,6 @@ const CloseButton = ({
     onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       event.stopPropagation();
       tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind);
-      tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates();
     }}
     tabIndex={active ? 0 : undefined}
     onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
@@ -253,7 +251,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
     case ReactTabKind.Quickstart:
       return <QuickstartTab explorer={explorer} />;
     case ReactTabKind.QueryCopilot:
-      return <QueryCopilotTab explorer={explorer} />;
+      return <QueryCopilotTab initialInput={useTabs.getState().queryCopilotTabInitialInput} explorer={explorer} />;
     default:
       throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
   }

src/Explorer/Tree/Collection.ts

@@ -3,6 +3,9 @@ import { useNotebook } from "Explorer/Notebook/useNotebook";
 import * as ko from "knockout";
 import * as _ from "underscore";
 import * as Constants from "../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import { bulkCreateDocument } from "../../Common/dataAccess/bulkCreateDocument";
 import { createDocument } from "../../Common/dataAccess/createDocument";
 import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
@@ -10,19 +13,16 @@ import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer
 import { readStoredProcedures } from "../../Common/dataAccess/readStoredProcedures";
 import { readTriggers } from "../../Common/dataAccess/readTriggers";
 import { readUserDefinedFunctions } from "../../Common/dataAccess/readUserDefinedFunctions";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as Logger from "../../Common/Logger";
-import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { UploadDetailsRecord } 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 { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
+import { useTabs } from "../../hooks/useTabs";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";

src/Explorer/Tree/ResourceTokenCollection.ts

@@ -28,9 +28,8 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
   public children: ko.ObservableArray<ViewModels.TreeNode>;
   public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
   public isCollectionExpanded: ko.Observable<boolean>;
-  public isSampleCollection?: boolean;
 
-  constructor(container: Explorer, databaseId: string, data: DataModels.Collection, isSampleCollection?: boolean) {
+  constructor(container: Explorer, databaseId: string, data: DataModels.Collection) {
     this.nodeKind = "Collection";
     this.container = container;
     this.databaseId = databaseId;
@@ -43,7 +42,6 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     this.children = ko.observableArray<ViewModels.TreeNode>([]);
     this.selectedSubnodeKind = ko.observable<ViewModels.CollectionTabKind>();
     this.isCollectionExpanded = ko.observable<boolean>(true);
-    this.isSampleCollection = isSampleCollection;
   }
 
   public expandCollection(): void {
@@ -107,7 +105,9 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     );
   }
 
-  public onDocumentDBDocumentsClick() {
+  public onDocumentDBDocumentsClick(isQueryCopilotCollection?: boolean, sampleCollection?: ViewModels.CollectionBase) {
+    const queryCopilotPartitionKey: DataModels.PartitionKey = sampleCollection?.partitionKey;
+
     useSelectedNode.getState().setSelectedNode(this);
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
@@ -140,8 +140,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
       });
 
       documentsTab = new DocumentsTab({
-        partitionKey: this.partitionKey,
-        resourceTokenPartitionKey: userContext.parsedResourceToken?.partitionKey,
+        partitionKey: isQueryCopilotCollection ? queryCopilotPartitionKey : this.partitionKey,
+        resourceTokenPartitionKey: isQueryCopilotCollection
+          ? queryCopilotPartitionKey.paths[0]
+          : userContext.parsedResourceToken.partitionKey,
         documentIds: ko.observableArray<DocumentId>([]),
         tabKind: ViewModels.CollectionTabKind.Documents,
         title: "Items",

src/Explorer/Tree/ResourceTree.tsx

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

src/Explorer/Tree/SampleDataTree.tsx

@@ -1,8 +1,8 @@
-import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
-import TabsBase from "Explorer/Tabs/TabsBase";
+import { mostRecentActivity } from "Explorer/MostRecentActivity/MostRecentActivity";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import { useTabs } from "hooks/useTabs";
-import React from "react";
+import { userContext } from "UserContext";
+import { getItemName } from "Utils/APITypeUtils";
+import React, { useEffect, useState } from "react";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -14,65 +14,58 @@ export const SampleDataTree = ({
 }: {
   sampleDataResourceTokenCollection: ViewModels.CollectionBase;
 }): JSX.Element => {
-  const buildSampleDataTree = (): TreeNode => {
-    const updatedSampleTree: TreeNode = {
-      label: sampleDataResourceTokenCollection.databaseId,
-      isExpanded: false,
-      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
-              );
+  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: "sampleCollectionHeader",
+            contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+            isSelected: () =>
+              useSelectedNode
+                .getState()
+                .isDataNodeSelected(
+                  sampleDataResourceTokenCollection.databaseId,
+                  sampleDataResourceTokenCollection.id()
+                ),
+            onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
+            children: [
+              {
+                label: getItemName(),
+                id: sampleDataResourceTokenCollection.isSampleCollection ? "sampleItems" : "",
+                contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+                onClick: () => {
+                  sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(true, sampleDataResourceTokenCollection);
+                  mostRecentActivity.collectionWasOpened(
+                    userContext.databaseAccount?.id,
+                    sampleDataResourceTokenCollection
+                  );
+                },
+                isSelected: () =>
+                  useSelectedNode
+                    .getState()
+                    .isDataNodeSelected(
+                      sampleDataResourceTokenCollection.databaseId,
+                      sampleDataResourceTokenCollection.id(),
+                      [ViewModels.CollectionTabKind.Documents]
+                    ),
+              },
+            ],
           },
-          isSelected: () =>
-            useSelectedNode
-              .getState()
-              .isDataNodeSelected(sampleDataResourceTokenCollection.databaseId, sampleDataResourceTokenCollection.id()),
-          onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection),
-          children: [
-            {
-              label: "Items",
-              onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(),
-              contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
-              isSelected: () =>
-                useSelectedNode
-                  .getState()
-                  .isDataNodeSelected(
-                    sampleDataResourceTokenCollection.databaseId,
-                    sampleDataResourceTokenCollection.id(),
-                    [ViewModels.CollectionTabKind.Documents]
-                  ),
-            },
-          ],
-        },
-      ],
-    };
+        ],
+      };
+      setRoot(updatedSampleTree);
+    }
+  }, [sampleDataResourceTokenCollection]);
 
-    return {
-      label: undefined,
-      isExpanded: true,
-      children: [updatedSampleTree],
-    };
-  };
-
-  return (
-    <TreeComponent
-      className="dataResourceTree"
-      rootNode={sampleDataResourceTokenCollection ? buildSampleDataTree() : { label: "Sample data not initialized." }}
-    />
-  );
+  return <TreeComponent className="dataResourceTree" rootNode={root || { label: "Sample data not initialized." }} />;
 };

src/Explorer/useSelectedNode.ts

@@ -66,12 +66,11 @@ export const useSelectedNode: UseStore<SelectedNodeState> = create((set, get) =>
     return useNotebook.getState().connectionInfo?.status === ConnectionStatusType.Connected;
   },
   isQueryCopilotCollectionSelected: (): boolean => {
-    const selectedNode = get().selectedNode as ViewModels.CollectionBase;
+    const selectedNode = get().selectedNode;
     if (
       selectedNode &&
-      selectedNode.isSampleCollection &&
       selectedNode.id() === QueryCopilotSampleContainerId &&
-      selectedNode.databaseId === QueryCopilotSampleDatabaseId
+      (selectedNode as ViewModels.Collection)?.databaseId === QueryCopilotSampleDatabaseId
     ) {
       return true;
     }

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/Modal/QueryCopilotFeedbackModal";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/QueryCopilotFeedbackModal";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";

src/Platform/Hosted/extractFeatures.ts

@@ -36,7 +36,6 @@ export type Features = {
   readonly enableLegacyMongoShellV2Debug: boolean;
   readonly loadLegacyMongoShellFromBE: boolean;
   readonly enableCopilot: boolean;
-  readonly enableNPSSurvey: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -105,7 +104,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
     loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
     enableCopilot: "true" === get("enablecopilot"),
-    enableNPSSurvey: "true" === get("enablenpssurvey"),
   };
 }
 

src/Shared/Telemetry/TelemetryConstants.ts

@@ -131,9 +131,6 @@ export enum Action {
   LaunchUITour,
   CancelUITour,
   CompleteUITour,
-  OpenQueryCopilotFromSplashScreen,
-  OpenQueryCopilotFromNewQuery,
-  ExecuteQueryGeneratedFromQueryCopilot,
 }
 
 export const ActionModifiers = {

src/Terminal/JupyterLabAppFactory.ts

@@ -47,10 +47,6 @@ 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,
     });
@@ -68,11 +64,6 @@ 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/UserContext.ts

@@ -91,7 +91,7 @@ const userContext: UserContext = {
   collectionCreationDefaults: CollectionCreationDefaults,
 };
 
-export function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
+function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
   let createdAtMs: number = Date.parse(createdAt);
   if (isNaN(createdAtMs)) {
     createdAtMs = 0;

src/Utils/EndpointValidation.ts

@@ -38,7 +38,7 @@ function validateEndpointInternal(
   return valid;
 }
 
-export const defaultAllowedArmEndpoints: ReadonlyArray<string> = [
+export const allowedArmEndpoints: ReadonlyArray<string> = [
   "https://​management.azure.com",
   "https://​management.usgovcloudapi.net",
   "https://management.chinacloudapi.cn",
@@ -46,7 +46,7 @@ export const defaultAllowedArmEndpoints: ReadonlyArray<string> = [
 
 export const allowedAadEndpoints: ReadonlyArray<string> = ["https://login.microsoftonline.com/"];
 
-export const defaultAllowedBackendEndpoints: ReadonlyArray<string> = [
+export const allowedBackendEndpoints: ReadonlyArray<string> = [
   "https://main.documentdb.ext.azure.com",
   "https://main.documentdb.ext.azure.cn",
   "https://main.documentdb.ext.azure.us",

src/hooks/useQueryCopilot.ts

@@ -1,6 +1,3 @@
-import { MinimalQueryIterator } from "Common/IteratorUtilities";
-import { QueryResults } from "Contracts/ViewModels";
-import { guid } from "Explorer/Tables/Utilities";
 import create, { UseStore } from "zustand";
 
 interface QueryCopilotState {
@@ -9,127 +6,20 @@ interface QueryCopilotState {
   userPrompt: string;
   showFeedbackModal: boolean;
   hideFeedbackModalForLikedQueries: boolean;
-  correlationId: string;
-  query: string;
-  selectedQuery: string;
-  isGeneratingQuery: boolean;
-  isExecuting: boolean;
-  dislikeQuery: boolean | undefined;
-  showCallout: boolean;
-  showSamplePrompts: boolean;
-  queryIterator: MinimalQueryIterator | undefined;
-  queryResults: QueryResults | undefined;
-  errorMessage: string;
-  isSamplePromptsOpen: boolean;
-  showDeletePopup: boolean;
-  showFeedbackBar: boolean;
-  showCopyPopup: boolean;
-  showErrorMessageBar: boolean;
-  generatedQueryComments: string;
-
   openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) => void;
   closeFeedbackModal: () => void;
   setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) => void;
-  refreshCorrelationId: () => void;
-  setUserPrompt: (userPrompt: string) => void;
-  setQuery: (query: string) => void;
-  setGeneratedQuery: (generatedQuery: string) => void;
-  setSelectedQuery: (selectedQuery: string) => void;
-  setIsGeneratingQuery: (isGeneratingQuery: boolean) => void;
-  setIsExecuting: (isExecuting: boolean) => void;
-  setLikeQuery: (likeQuery: boolean) => void;
-  setDislikeQuery: (dislikeQuery: boolean | undefined) => void;
-  setShowCallout: (showCallout: boolean) => void;
-  setShowSamplePrompts: (showSamplePrompts: boolean) => void;
-  setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => void;
-  setQueryResults: (queryResults: QueryResults | undefined) => void;
-  setErrorMessage: (errorMessage: string) => void;
-  setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void;
-  setShowDeletePopup: (showDeletePopup: boolean) => void;
-  setShowFeedbackBar: (showFeedbackBar: boolean) => void;
-  setshowCopyPopup: (showCopyPopup: boolean) => void;
-  setShowErrorMessageBar: (showErrorMessageBar: boolean) => void;
-  setGeneratedQueryComments: (generatedQueryComments: string) => void;
-  resetQueryCopilotStates: () => void;
 }
 
-type QueryCopilotStore = UseStore<QueryCopilotState>;
-
-export const useQueryCopilot: QueryCopilotStore = create((set) => ({
+export const useQueryCopilot: UseStore<QueryCopilotState> = create((set) => ({
   generatedQuery: "",
   likeQuery: false,
   userPrompt: "",
   showFeedbackModal: false,
   hideFeedbackModalForLikedQueries: false,
-  correlationId: "",
-  query: "",
-  selectedQuery: "",
-  isGeneratingQuery: false,
-  isExecuting: false,
-  dislikeQuery: undefined,
-  showCallout: false,
-  showSamplePrompts: false,
-  queryIterator: undefined,
-  queryResults: undefined,
-  errorMessage: "",
-  isSamplePromptsOpen: false,
-  showDeletePopup: false,
-  showFeedbackBar: false,
-  showCopyPopup: false,
-  showErrorMessageBar: false,
-  generatedQueryComments: "",
-
   openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
     set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
   closeFeedbackModal: () => set({ generatedQuery: "", likeQuery: false, userPrompt: "", showFeedbackModal: false }),
   setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) =>
     set({ hideFeedbackModalForLikedQueries }),
-  refreshCorrelationId: () => set({ correlationId: guid() }),
-  setUserPrompt: (userPrompt: string) => set({ userPrompt }),
-  setQuery: (query: string) => set({ query }),
-  setGeneratedQuery: (generatedQuery: string) => set({ generatedQuery }),
-  setSelectedQuery: (selectedQuery: string) => set({ selectedQuery }),
-  setIsGeneratingQuery: (isGeneratingQuery: boolean) => set({ isGeneratingQuery }),
-  setIsExecuting: (isExecuting: boolean) => set({ isExecuting }),
-  setLikeQuery: (likeQuery: boolean) => set({ likeQuery }),
-  setDislikeQuery: (dislikeQuery: boolean | undefined) => set({ dislikeQuery }),
-  setShowCallout: (showCallout: boolean) => set({ showCallout }),
-  setShowSamplePrompts: (showSamplePrompts: boolean) => set({ showSamplePrompts }),
-  setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => set({ queryIterator }),
-  setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
-  setErrorMessage: (errorMessage: string) => set({ errorMessage }),
-  setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
-  setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
-  setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
-  setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
-  setShowErrorMessageBar: (showErrorMessageBar: boolean) => set({ showErrorMessageBar }),
-  setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }),
-
-  resetQueryCopilotStates: () => {
-    set((state) => ({
-      ...state,
-      generatedQuery: "",
-      likeQuery: false,
-      userPrompt: "",
-      showFeedbackModal: false,
-      hideFeedbackModalForLikedQueries: false,
-      correlationId: "",
-      query: "",
-      selectedQuery: "",
-      isGeneratingQuery: false,
-      isExecuting: false,
-      dislikeQuery: undefined,
-      showCallout: false,
-      showSamplePrompts: false,
-      queryIterator: undefined,
-      queryResults: undefined,
-      errorMessage: "",
-      isSamplePromptsOpen: false,
-      showDeletePopup: false,
-      showFeedbackBar: false,
-      showCopyPopup: false,
-      showErrorMessageBar: false,
-      generatedQueryComments: "",
-    }));
-  },
 }));

src/setupTests.ts

@@ -1,8 +1,7 @@
-import { initializeIcons } from "@fluentui/react";
 import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import "jest-canvas-mock";
-import enableHooks from "jest-react-hooks-shallow";
+import { initializeIcons } from "@fluentui/react";
 import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();
@@ -11,30 +10,6 @@ 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-table Id Create table"]');
-  await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
+  await explorer.click('[aria-label="addCollection-tableId"]');
+  await explorer.fill('[aria-label="addCollection-tableId"]', tableId);
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${keyspaceId}`);
   await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);