Add more logs for NPS

* Use Promise for allResourceToken fabric message. Cleanup token message handling and add debounce.

* Improve rpc and update initalization flow

* Fix format

* Rev up message names for new version

* Refactor RPC with Fabric

* Build fix

* Fix build

* Fix format

* Update Message types

* Fix format

* Fix comments

* Fabric toolbar style and support to show/hide it (#1720)

* Add Fabric specific Toolbar design

* Add Fabric message to show/hide the Toolbar

* Fix CommandBarUtil formatting

* Update zustand state on setToolbarStatus to trigger a redraw of the command bar with updated visibility

---------

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

* Fix format

---------

Co-authored-by: Vsevolod Kukol <sevoku@microsoft.com>

less/Common/Constants.less

@@ -147,6 +147,7 @@
 
 // CommandBar
 @CommandBarButtonHeight: 40px;
+@FabricCommandBarButtonHeight: 34px;
 
 /**********************************************************************************
                               Portal Consts
@@ -164,7 +165,7 @@
 @FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
 
 @FabricBoxBorderRadius: 8px;
-@FabricBoxBorderShadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+@FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
 @FabricBoxMargin: 4px 3px 4px 3px;
 
 @FabricAccentMediumHigh: #0c695a;

less/documentDBFabric.less

@@ -47,11 +47,15 @@ a:focus {
   border-radius: @FabricBoxBorderRadius;
   box-shadow: @FabricBoxBorderShadow;
   margin: @FabricBoxMargin;
+  margin-top: 0px;
   padding-top: 2px;
+  padding: 0px;
+  height: 40px;
 }
 
 .dividerContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;
+  height: @FabricCommandBarButtonHeight;
   .flex-display();
 
   span {

src/Common/CosmosClient.ts

@@ -40,9 +40,10 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.item:
       case Cosmos.ResourceType.pkranges:
         // User resource tokens
+        // TODO userContext.fabricContext.databaseConnectionInfo can be undefined
         headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
+        const resourceTokens = userContext.fabricContext.databaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
+        checkDatabaseResourceTokensValidity(userContext.fabricContext.databaseConnectionInfo.resourceTokensTimestamp);
         return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
 
       case Cosmos.ResourceType.none:
@@ -51,9 +52,11 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
       case Cosmos.ResourceType.user:
       case Cosmos.ResourceType.permission:
         // User master tokens
-        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(
-          requestInfo,
+          MessageTypes.GetAuthorizationToken,
-        ]);
+          [requestInfo],
+          userContext.fabricContext.connectionId,
+        );
         console.log("Response from Fabric: ", authorizationToken);
         headers[HttpHeaders.msDate] = authorizationToken.XDate;
         return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);

src/Common/MessageHandler.ts

@@ -27,15 +27,24 @@ export function handleCachedDataMessage(message: any): void {
   runGarbageCollector();
 }
 
+/**
+ *
+ * @param messageType
+ * @param params
+ * @param scope Use this string to identify request Useful to distinguish response from different senders
+ * @param timeoutInMs
+ * @returns
+ */
 export function sendCachedDataMessage<TResponseDataModel>(
   messageType: MessageTypes,
   params: Object[],
+  scope?: string,
   timeoutInMs?: number,
 ): Q.Promise<TResponseDataModel> {
   let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
     deferred: Q.defer<TResponseDataModel>(),
     startTime: new Date(),
-    id: _.uniqueId(),
+    id: _.uniqueId(scope),
   };
   RequestMap[cachedDataPromise.id] = cachedDataPromise;
   sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
@@ -47,6 +56,10 @@ export function sendCachedDataMessage<TResponseDataModel>(
   );
 }
 
+/**
+ *
+ * @param data Overwrite the data property of the message
+ */
 export function sendMessage(data: any): void {
   _sendMessage({
     signature: "pcIframe",

src/Common/dataAccess/readCollections.ts

@@ -18,13 +18,13 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
 
   if (
     configContext.platform === Platform.Fabric &&
-    userContext.fabricDatabaseConnectionInfo &&
+    userContext.fabricContext &&
-    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
+    userContext.fabricContext.databaseConnectionInfo.databaseId === databaseId
   ) {
     const collections: DataModels.Collection[] = [];
     const promises: Promise<ContainerResponse>[] = [];
 
-    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
+    for (const collectionResourceId in userContext.fabricContext.databaseConnectionInfo.resourceTokens) {
       // Dictionary key looks like this: dbs/SampleDB/colls/Container
       const resourceIdObj = collectionResourceId.split("/");
       const tokenDatabaseId = resourceIdObj[1];

src/Common/dataAccess/readDatabases.ts

@@ -14,8 +14,8 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
 
-  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
+  if (configContext.platform === Platform.Fabric && userContext.fabricContext?.databaseConnectionInfo.resourceTokens) {
-    const tokensData = userContext.fabricDatabaseConnectionInfo;
+    const tokensData = userContext.fabricContext.databaseConnectionInfo;
 
     const databaseIdsSet = new Set<string>(); // databaseId
 

src/Contracts/DataExplorerMessagesContract.ts

@@ -0,0 +1,42 @@
+import { MessageTypes } from "./MessageTypes";
+
+// This is the current version of these messages
+export const DATA_EXPLORER_RPC_VERSION = "2";
+
+// Data Explorer to Fabric
+
+// TODO Remove when upgrading to Fabric v2
+export type DataExploreMessageV1 =
+  | "ready"
+  | {
+      type: MessageTypes.GetAuthorizationToken;
+      id: string;
+      params: GetCosmosTokenMessageOptions[];
+    }
+  | {
+      type: MessageTypes.GetAllResourceTokens;
+      id: string;
+    };
+// -----------------------------
+
+export type DataExploreMessageV2 =
+  | {
+      type: MessageTypes.Ready;
+      id: string;
+      params: [string]; // version
+    }
+  | {
+      type: MessageTypes.GetAuthorizationToken;
+      id: string;
+      params: GetCosmosTokenMessageOptions[];
+    }
+  | {
+      type: MessageTypes.GetAllResourceTokens;
+      id: string;
+    };
+
+export type GetCosmosTokenMessageOptions = {
+  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
+  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
+  resourceId: string;
+};

src/Contracts/FabricMessagesContract.ts

@@ -1,6 +1,12 @@
-import { AuthorizationToken, MessageTypes } from "./MessageTypes";
+import { AuthorizationToken } from "./MessageTypes";
 
-export type FabricMessage =
+// This is the version of these messages
+export const FABRIC_RPC_VERSION = "2";
+
+// Fabric to Data Explorer
+
+// TODO Deprecated. Remove this section once DE is updated
+export type FabricMessageV1 =
   | {
       type: "newContainer";
       databaseName: string;
@@ -26,38 +32,52 @@ export type FabricMessage =
   | {
       type: "allResourceTokens";
       message: {
+        id: string;
+        error: string | undefined;
         endpoint: string | undefined;
         databaseId: string | undefined;
         resourceTokens: unknown | undefined;
         resourceTokensTimestamp: number | undefined;
       };
     };
+// -----------------------------
 
-export type DataExploreMessage =
+export type FabricMessageV2 =
-  | "ready"
   | {
-      type: MessageTypes.TelemetryInfo;
+      type: "newContainer";
-      data: {
+      databaseName: string;
-        action: "LoadDatabases";
+    }
-        actionModifier: "success" | "start";
+  | {
-        defaultExperience: "SQL";
+      type: "initialize";
+      version: string;
+      id: string;
+      message: {
+        connectionId: string;
       };
     }
   | {
-      type: MessageTypes.GetAuthorizationToken;
+      type: "authorizationToken";
-      id: string;
+      message: {
-      params: GetCosmosTokenMessageOptions[];
+        id: string;
+        error: string | undefined;
+        data: AuthorizationToken | undefined;
+      };
     }
   | {
-      type: MessageTypes.GetAllResourceTokens;
+      type: "allResourceTokens_v2";
+      message: {
+        id: string;
+        error: string | undefined;
+        data: FabricDatabaseConnectionInfo | undefined;
+      };
+    }
+  | {
+      type: "setToolbarStatus";
+      message: {
+        visible: boolean;
+      };
     };
 
-export type GetCosmosTokenMessageOptions = {
-  verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
-  resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
-  resourceId: string;
-};
-
 export type CosmosDBTokenResponse = {
   token: string;
   date: string;
@@ -66,12 +86,9 @@ export type CosmosDBTokenResponse = {
 export type CosmosDBConnectionInfoResponse = {
   endpoint: string;
   databaseId: string;
-  resourceTokens: unknown;
+  resourceTokens: { [resourceId: string]: string };
 };
 
-export interface FabricDatabaseConnectionInfo {
+export interface FabricDatabaseConnectionInfo extends CosmosDBConnectionInfoResponse {
-  endpoint: string;
-  databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
   resourceTokensTimestamp: number;
 }

src/Contracts/MessageTypes.ts

@@ -1,6 +1,12 @@
 /**
  * Messaging types used with Data Explorer <-> Portal communication,
  * Hosted <-> Explorer communication and Data Explorer -> Fabric communication.
+ *
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * WARNING: !!!!!!! YOU CAN ONLY ADD NEW TYPES TO THE END OF THIS ENUM !!!!!!!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ *
+ * Enum are integers, so inserting or deleting a type will break the communication.
  */
 export enum MessageTypes {
   TelemetryInfo,
@@ -37,10 +43,9 @@ export enum MessageTypes {
   DisplayNPSSurvey,
   OpenVCoreMongoNetworkingBlade,
   OpenVCoreMongoConnectionStringsBlade,
-
+  GetAuthorizationToken, // Data Explorer -> Fabric
-  // Data Explorer -> Fabric communication
+  GetAllResourceTokens, // Data Explorer -> Fabric
-  GetAuthorizationToken,
+  Ready, // Data Explorer -> Fabric
-  GetAllResourceTokens,
 }
 
 export interface AuthorizationToken {

src/Explorer/Explorer.tsx

@@ -5,7 +5,7 @@ import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
-import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
+import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -277,21 +277,32 @@ export default class Explorer {
     const NINETY_DAYS_IN_MS = 7776000000;
     const ONE_DAY_IN_MS = 86400000;
     const THREE_DAYS_IN_MS = 259200000;
-    const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
-      userContext.databaseAccount?.systemData?.createdAt || "",
-      NINETY_DAYS_IN_MS,
-    );
     const lastSubmitted: string = localStorage.getItem("lastSubmitted");
+    Logger.logInfo(`NPS Survey last shown date: ${lastSubmitted}`, "Explorer/openNPSSurveyDialog");
 
     if (lastSubmitted !== null) {
+      Logger.logInfo(`NPS Survey last shown is not empty ${lastSubmitted}`, "Explorer/openNPSSurveyDialog");
+
       let lastSubmittedDate: number = parseInt(lastSubmitted);
+      Logger.logInfo(`NPS Survey last shown is parsed ${lastSubmittedDate.toString()}`, "Explorer/openNPSSurveyDialog");
+
       if (isNaN(lastSubmittedDate)) {
+        Logger.logInfo(
+          `NPS Survey last shown is not a number ${lastSubmittedDate.toString()}`,
+          "Explorer/openNPSSurveyDialog",
+        );
         lastSubmittedDate = 0;
       }
 
       const nowMs: number = Date.now();
+      Logger.logInfo(`NPS Survey current date ${nowMs.toString()}`, "Explorer/openNPSSurveyDialog");
+
       const millisecsSinceLastSubmitted = nowMs - lastSubmittedDate;
       if (millisecsSinceLastSubmitted < NINETY_DAYS_IN_MS) {
+        Logger.logInfo(
+          `NPS Survey last shown is less than ninety days ${millisecsSinceLastSubmitted.toString()}`,
+          "Explorer/openNPSSurveyDialog",
+        );
         return;
       }
     }
@@ -299,26 +310,32 @@ export default class Explorer {
     // Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
     if (userContext.isTryCosmosDBSubscription) {
       if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
+        Logger.logInfo(
+          `Displaying NPS Survey for Try Cosmos DB ${userContext.apiType}`,
+          "Explorer/openNPSSurveyDialog",
+        );
         this.sendNPSMessage();
       }
     } else {
-      // An existing account is older than 3 days but less than 90 days old. For existing account show to 100% of users in Data Explorer.
+      // Show survey when an existing account is older than 3 days
       if (
-        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS) &&
+        !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS)
-        isAccountNewerThanNinetyDays
       ) {
+        Logger.logInfo(
+          `Displaying NPS Survey for users with existing ${userContext.apiType} account older than 3 days`,
+          "Explorer/openNPSSurveyDialog",
+        );
         this.sendNPSMessage();
-      } else {
-        // An existing account is greater than 90 days. For existing account show to random 33% of users in Data Explorer.
-        if (this.getRandomInt(100) < 33) {
-          this.sendNPSMessage();
-        }
       }
     }
   }
 
   private sendNPSMessage() {
     sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+    Logger.logInfo(
+      `NPS Survey logging current date when survey is shown ${Date.now().toString()}`,
+      "Explorer/openNPSSurveyDialog",
+    );
     localStorage.setItem("lastSubmitted", Date.now().toString());
   }
 
@@ -384,9 +401,7 @@ export default class Explorer {
 
   public onRefreshResourcesClick = (): void => {
     if (configContext.platform === Platform.Fabric) {
-      // Requesting the tokens will trigger a refresh of the databases
+      scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
-      // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
-      requestDatabaseResourceTokens();
       return;
     }
 

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -24,16 +24,21 @@ interface Props {
 export interface CommandBarStore {
   contextButtons: CommandButtonComponentProps[];
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
+  isHidden: boolean;
+  setIsHidden: (isHidden: boolean) => void;
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
   contextButtons: [],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
+  isHidden: false,
+  setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
+  const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
@@ -42,7 +47,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer">
+      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
           items={CommandBarUtil.convertButton(buttons, backgroundColor)}
@@ -91,7 +96,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
       ? {
           root: {
             backgroundColor: "transparent",
-            padding: "0px 14px 0px 14px",
+            padding: "2px 8px 0px 8px",
           },
         }
       : {
@@ -101,7 +106,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         };
 
   return (
-    <div className="commandBarContainer">
+    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -25,7 +25,10 @@ import { MemoryTracker } from "./MemoryTrackerComponent";
  * @param btns
  */
 export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => {
-  const buttonHeightPx = StyleConstants.CommandBarButtonHeight;
+  const buttonHeightPx =
+    configContext.platform == Platform.Fabric
+      ? StyleConstants.FabricCommandBarButtonHeight
+      : StyleConstants.CommandBarButtonHeight;
 
   const hoverColor =
     configContext.platform == Platform.Fabric ? StyleConstants.FabricAccentLight : StyleConstants.AccentLight;
@@ -112,6 +115,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           splitButtonContainer: {
             marginLeft: 5,
             marginRight: 5,
+            height: buttonHeightPx,
           },
         },
         className: btn.className,

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -234,7 +234,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const handleSampleDatabaseChange = async (ev: React.MouseEvent<HTMLElement>, checked?: boolean): Promise<void> => {
     setCopilotSampleDBEnabled(checked);
     useQueryCopilot.getState().setCopilotSampleDBEnabled(checked);
-    setRefreshExplorer(false);
+    setRefreshExplorer(!refreshExplorer);
   };
 
   const choiceButtonStyles = {

src/Explorer/QueryCopilot/QueryCopilotContext.tsx

@@ -30,7 +30,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       queryResults: undefined,
       errorMessage: "",
       isSamplePromptsOpen: false,
-      showPromptTeachingBubble: true,
       showDeletePopup: false,
       showFeedbackBar: false,
       showCopyPopup: false,
@@ -66,7 +65,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
       setErrorMessage: (errorMessage: string) => set({ errorMessage }),
       setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
-      setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => set({ showPromptTeachingBubble }),
       setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
       setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
       setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
@@ -105,7 +103,6 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
           queryResults: undefined,
           errorMessage: "",
           isSamplePromptsOpen: false,
-          showPromptTeachingBubble: true,
           showDeletePopup: false,
           showFeedbackBar: false,
           showCopyPopup: false,

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -18,6 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import { HttpStatusCodes } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import { createUri } from "Common/UrlUtility";
@@ -70,7 +71,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   databaseId,
   containerId,
 }: QueryCopilotPromptProps): JSX.Element => {
-  const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState<boolean>(false);
+  const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
   const inputEdited = useRef(false);
   const {
     openFeedbackModal,
@@ -93,8 +94,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     setIsSamplePromptsOpen,
     showSamplePrompts,
     setShowSamplePrompts,
-    showPromptTeachingBubble,
-    setShowPromptTeachingBubble,
     showDeletePopup,
     setShowDeletePopup,
     showFeedbackBar,
@@ -273,23 +272,16 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
   };
 
   const showTeachingBubble = (): void => {
-    if (showPromptTeachingBubble && !inputEdited.current) {
+    if (!inputEdited.current) {
       setTimeout(() => {
         if (!inputEdited.current && !isWelcomModalVisible()) {
-          setCopilotTeachingBubbleVisible(true);
+          toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
       }, 30000);
-    } else {
-      toggleCopilotTeachingBubbleVisible(false);
     }
   };
 
-  const toggleCopilotTeachingBubbleVisible = (visible: boolean): void => {
-    setCopilotTeachingBubbleVisible(visible);
-    setShowPromptTeachingBubble(visible);
-  };
-
   const isWelcomModalVisible = (): boolean => {
     return localStorage.getItem("hideWelcomeModal") !== "true";
   };
@@ -372,13 +364,13 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           placeholder="Ask a question in natural language and we’ll generate the query for you."
           aria-labelledby="copilot-textfield-label"
         />
-        {showPromptTeachingBubble && copilotTeachingBubbleVisible && (
+        {copilotTeachingBubbleVisible && (
           <TeachingBubble
             calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
             target="#naturalLanguageInput"
             hasCloseButton={true}
             closeButtonAriaLabel="Close"
-            onDismiss={() => toggleCopilotTeachingBubbleVisible(false)}
+            onDismiss={toggleCopilotTeachingBubbleVisible}
             hasSmallHeadline={true}
             headline="Write a prompt"
           >
@@ -386,7 +378,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             <Link
               onClick={() => {
                 setShowSamplePrompts(true);
-                toggleCopilotTeachingBubbleVisible(false);
+                toggleCopilotTeachingBubbleVisible();
               }}
               style={{ color: "white", fontWeight: 600 }}
             >

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -148,7 +148,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
             />
           </Stack>
           <Stack horizontal tokens={{ childrenGap: 16 }}>
-            {useQueryCopilot.getState().copilotEnabled && (
+            {useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotSampleDBEnabled && (
               <SplashScreenButton
                 imgSrc={CopilotIcon}
                 title={"Query faster with Copilot"}

src/Explorer/Tabs/PostgresConnectTab.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import { userContext } from "UserContext";
 
 export const PostgresConnectTab: React.FC = (): JSX.Element => {
-  const { adminLogin, databaseName, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams;
+  const { adminLogin, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams;
   const [usePgBouncerPort, setUsePgBouncerPort] = React.useState<boolean>(false);
   const [selectedNode, setSelectedNode] = React.useState<string>(nodes?.[0]?.value);
   const portNumber = usePgBouncerPort ? "6432" : "5432";
@@ -40,11 +40,11 @@ export const PostgresConnectTab: React.FC = (): JSX.Element => {
     text: node.text,
   }));
 
-  const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/${databaseName}?sslmode=require`;
+  const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/citus?sslmode=require`;
-  const psql = `psql "host=${selectedNode} port=${portNumber} dbname=${databaseName} user=${adminLogin} password={your_password} sslmode=require"`;
+  const psql = `psql "host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require"`;
-  const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/${databaseName}?user=${adminLogin}&password={your_password}&sslmode=require`;
+  const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/citus?user=${adminLogin}&password={your_password}&sslmode=require`;
-  const libpq = `host=${selectedNode} port=${portNumber} dbname=${databaseName} user=${adminLogin} password={your_password} sslmode=require`;
+  const libpq = `host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require`;
-  const adoDotNet = `Server=${selectedNode};Database=${databaseName};Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`;
+  const adoDotNet = `Server=${selectedNode};Database=citus;Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`;
 
   return (
     <div style={{ width: "100%", padding: 16 }}>

src/Platform/Fabric/FabricUtil.ts

@@ -1,33 +1,44 @@
 import { sendCachedDataMessage } from "Common/MessageHandler";
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
+import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
 import { MessageTypes } from "Contracts/MessageTypes";
-import Explorer from "Explorer/Explorer";
+import { updateUserContext, userContext } from "UserContext";
-import { updateUserContext } from "UserContext";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
 
 const TOKEN_VALIDITY_MS = (3600 - 600) * 1000; // 1 hour minus 10 minutes to be safe
+const DEBOUNCE_DELAY_MS = 1000 * 20; // 20 second
 let timeoutId: NodeJS.Timeout;
 
-// Prevents multiple parallel requests
+// Prevents multiple parallel requests during DEBOUNCE_DELAY_MS
-let isRequestPending = false;
+let lastRequestTimestamp: number = undefined;
 
-export const requestDatabaseResourceTokens = (): void => {
+const requestDatabaseResourceTokens = async (): Promise<void> => {
-  if (isRequestPending) {
+  if (lastRequestTimestamp !== undefined && lastRequestTimestamp + DEBOUNCE_DELAY_MS > Date.now()) {
     return;
   }
 
-  // TODO Make Fabric return the message id so we can handle this promise
+  lastRequestTimestamp = Date.now();
-  isRequestPending = true;
+  try {
-  sendCachedDataMessage<FabricDatabaseConnectionInfo>(MessageTypes.GetAllResourceTokens, []);
+    const fabricDatabaseConnectionInfo = await sendCachedDataMessage<FabricDatabaseConnectionInfo>(
-};
+      MessageTypes.GetAllResourceTokens,
+      [],
+      userContext.fabricContext.connectionId,
+    );
 
-export const handleRequestDatabaseResourceTokensResponse = (
+    if (!userContext.databaseAccount.properties.documentEndpoint) {
-  explorer: Explorer,
+      userContext.databaseAccount.properties.documentEndpoint = fabricDatabaseConnectionInfo.endpoint;
-  fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo,
+    }
-): void => {
+
-  isRequestPending = false;
+    updateUserContext({
-  updateUserContext({ fabricDatabaseConnectionInfo });
+      fabricContext: { ...userContext.fabricContext, databaseConnectionInfo: fabricDatabaseConnectionInfo },
-  scheduleRefreshDatabaseResourceToken();
+      databaseAccount: { ...userContext.databaseAccount },
-  explorer.refreshAllDatabases();
+    });
+    scheduleRefreshDatabaseResourceToken();
+  } catch (error) {
+    logConsoleError(error);
+    throw error;
+  } finally {
+    lastRequestTimestamp = undefined;
+  }
 };
 
 /**
@@ -35,19 +46,24 @@ export const handleRequestDatabaseResourceTokensResponse = (
  * @param tokenTimestamp
  * @returns
  */
-export const scheduleRefreshDatabaseResourceToken = (): void => {
+export const scheduleRefreshDatabaseResourceToken = (refreshNow?: boolean): Promise<void> => {
-  if (timeoutId !== undefined) {
+  return new Promise((resolve) => {
-    clearTimeout(timeoutId);
+    if (timeoutId !== undefined) {
-    timeoutId = undefined;
+      clearTimeout(timeoutId);
-  }
+      timeoutId = undefined;
+    }
 
-  timeoutId = setTimeout(() => {
+    timeoutId = setTimeout(
-    requestDatabaseResourceTokens();
+      () => {
-  }, TOKEN_VALIDITY_MS);
+        requestDatabaseResourceTokens().then(resolve);
+      },
+      refreshNow ? 0 : TOKEN_VALIDITY_MS,
+    );
+  });
 };
 
 export const checkDatabaseResourceTokensValidity = (tokenTimestamp: number): void => {
   if (tokenTimestamp + TOKEN_VALIDITY_MS < Date.now()) {
-    requestDatabaseResourceTokens();
+    scheduleRefreshDatabaseResourceToken(true);
   }
 };

src/UserContext.ts

@@ -1,4 +1,4 @@
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
+import { FabricDatabaseConnectionInfo } from "Contracts/FabricMessagesContract";
 import { ParsedResourceTokenConnectionString } from "Platform/Hosted/Helpers/ResourceTokenUtils";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
@@ -36,7 +36,6 @@ export interface Node {
 
 export interface PostgresConnectionStrParams {
   adminLogin: string;
-  databaseName: string;
   enablePublicIpAccess: boolean;
   nodes: Node[];
   isMarlinServerGroup: boolean;
@@ -48,8 +47,13 @@ export interface VCoreMongoConnectionParams {
   connectionString: string;
 }
 
+interface FabricContext {
+  connectionId: string;
+  databaseConnectionInfo: FabricDatabaseConnectionInfo | undefined;
+}
+
 interface UserContext {
-  readonly fabricDatabaseConnectionInfo?: FabricDatabaseConnectionInfo;
+  readonly fabricContext?: FabricContext;
   readonly authType?: AuthType;
   readonly masterKey?: string;
   readonly subscriptionId?: string;

src/hooks/useKnockoutExplorer.ts

@@ -1,11 +1,10 @@
 import { createUri } from "Common/UrlUtility";
-import { FabricDatabaseConnectionInfo, FabricMessage } from "Contracts/FabricContract";
+import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
+import { FABRIC_RPC_VERSION, FabricMessageV2 } from "Contracts/FabricMessagesContract";
 import Explorer from "Explorer/Explorer";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import {
+import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
-  handleRequestDatabaseResourceTokensResponse,
-  scheduleRefreshDatabaseResourceToken,
-} from "Platform/Fabric/FabricUtil";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -88,6 +87,9 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
 }
 
 async function configureFabric(): Promise<Explorer> {
+  // These are the versions of Fabric that Data Explorer supports.
+  const SUPPORTED_FABRIC_VERSIONS = [FABRIC_RPC_VERSION];
+
   let explorer: Explorer;
   return new Promise<Explorer>((resolve) => {
     window.addEventListener(
@@ -101,38 +103,37 @@ async function configureFabric(): Promise<Explorer> {
           return;
         }
 
-        const data: FabricMessage = event.data?.data;
+        const data: FabricMessageV2 = event.data?.data;
         if (!data) {
           return;
         }
 
         switch (data.type) {
           case "initialize": {
-            const fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo = {
+            const fabricVersion = data.version;
-              endpoint: data.message.endpoint,
+            if (!SUPPORTED_FABRIC_VERSIONS.includes(fabricVersion)) {
-              databaseId: data.message.databaseId,
+              // TODO Surface error to user
-              resourceTokens: data.message.resourceTokens as { [resourceId: string]: string },
+              console.error(`Unsupported Fabric version: ${fabricVersion}`);
-              resourceTokensTimestamp: data.message.resourceTokensTimestamp,
+              return;
-            };
+            }
-            explorer = await createExplorerFabric(fabricDatabaseConnectionInfo);
-            resolve(explorer);
 
-            explorer.refreshAllDatabases().then(() => {
+            explorer = createExplorerFabric(data.message);
-              openFirstContainer(explorer, fabricDatabaseConnectionInfo.databaseId);
+            await scheduleRefreshDatabaseResourceToken(true);
-            });
+            resolve(explorer);
-            scheduleRefreshDatabaseResourceToken();
+            await explorer.refreshAllDatabases();
+            openFirstContainer(explorer, userContext.fabricContext.databaseConnectionInfo.databaseId);
             break;
           }
           case "newContainer":
             explorer.onNewCollectionClicked();
             break;
-          case "authorizationToken": {
+          case "authorizationToken":
+          case "allResourceTokens_v2": {
             handleCachedDataMessage(data);
             break;
           }
-          case "allResourceTokens": {
+          case "setToolbarStatus": {
-            // TODO call handleCachedDataMessage when Fabric echoes message id back
+            useCommandBar.getState().setIsHidden(data.message.visible === false);
-            handleRequestDatabaseResourceTokensResponse(explorer, data.message as FabricDatabaseConnectionInfo);
             break;
           }
           default:
@@ -143,7 +144,11 @@ async function configureFabric(): Promise<Explorer> {
       false,
     );
 
-    sendReadyMessage();
+    sendMessage({
+      type: MessageTypes.Ready,
+      id: "ready",
+      params: [DATA_EXPLORER_RPC_VERSION],
+    });
   });
 }
 
@@ -319,9 +324,12 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
   return explorer;
 }
 
-function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo): Explorer {
+function createExplorerFabric(params: { connectionId: string }): Explorer {
   updateUserContext({
-    fabricDatabaseConnectionInfo,
+    fabricContext: {
+      connectionId: params.connectionId,
+      databaseConnectionInfo: undefined,
+    },
     authType: AuthType.ConnectionString,
     databaseAccount: {
       id: "",
@@ -330,7 +338,7 @@ function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnec
       name: "Mounted",
       kind: AccountKind.Default,
       properties: {
-        documentEndpoint: fabricDatabaseConnectionInfo.endpoint,
+        documentEndpoint: undefined,
       },
     },
   });

src/hooks/useQueryCopilot.ts

@@ -29,7 +29,6 @@ export interface QueryCopilotState {
   queryResults: QueryResults | undefined;
   errorMessage: string;
   isSamplePromptsOpen: boolean;
-  showPromptTeachingBubble: boolean;
   showDeletePopup: boolean;
   showFeedbackBar: boolean;
   showCopyPopup: boolean;
@@ -72,7 +71,6 @@ export interface QueryCopilotState {
   setQueryResults: (queryResults: QueryResults | undefined) => void;
   setErrorMessage: (errorMessage: string) => void;
   setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void;
-  setShowPromptTeachingBubble: (showPromptTeachingBubble: boolean) => void;
   setShowDeletePopup: (showDeletePopup: boolean) => void;
   setShowFeedbackBar: (showFeedbackBar: boolean) => void;
   setshowCopyPopup: (showCopyPopup: boolean) => void;
@@ -95,7 +93,7 @@ export interface QueryCopilotState {
   resetQueryCopilotStates: () => void;
 }
 
-type QueryCopilotStore = UseStore<Partial<QueryCopilotState>>;
+type QueryCopilotStore = UseStore<QueryCopilotState>;
 
 export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   copilotEnabled: false,