Add connect tab for new quick start (#1273)

* Add connect tab

* Error handling

* Add button to open quick start blade

* Handle scenario where user don't have write access

src/Contracts/ExplorerContracts.ts

@@ -34,6 +34,7 @@ export enum MessageTypes {
   CreateSparkPool,
   RefreshDatabaseAccount,
   CloseTab,
+  OpenQuickstartBlade,
 }
 
 export { Versions, ActionContracts, Diagnostics };

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -2,6 +2,7 @@
  * Accordion top class
  */
 import { Coachmark, DirectionalHint, Image, Link, Stack, TeachingBubbleContent, Text } from "@fluentui/react";
+import { useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddDatabaseIcon from "../../../images/AddDatabase.svg";
 import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
@@ -237,8 +238,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
         iconSrc: ConnectIcon,
         title: "Connect",
         description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
-        // TODO: replace onClick function
+        onClick: () => useTabs.getState().openAndActivateConnectTab(),
-        onClick: () => 2,
       };
       heroes.push(connectBtn);
     } else {

src/Explorer/Tabs/ConnectTab.tsx

@@ -0,0 +1,232 @@
+import {
+  IconButton,
+  ITextFieldStyles,
+  Link,
+  Pivot,
+  PivotItem,
+  PrimaryButton,
+  Stack,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import { handleError } from "Common/ErrorHandlingUtils";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
+import React, { useEffect, useState } from "react";
+import { userContext } from "UserContext";
+import { listKeys, listReadOnlyKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
+import {
+  DatabaseAccountListKeysResult,
+  DatabaseAccountListReadOnlyKeysResult,
+} from "Utils/arm/generatedClients/cosmos/types";
+
+export const ConnectTab: React.FC = (): JSX.Element => {
+  const [primaryMasterKey, setPrimaryMasterKey] = useState<string>("");
+  const [secondaryMasterKey, setSecondaryMasterKey] = useState<string>("");
+  const [primaryReadonlyMasterKey, setPrimaryReadonlyMasterKey] = useState<string>("");
+  const [secondaryReadonlyMasterKey, setSecondaryReadonlyMasterKey] = useState<string>("");
+  const uri: string = userContext.databaseAccount.properties?.documentEndpoint;
+  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey}`;
+  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey}`;
+  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey}`;
+  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey}`;
+
+  useEffect(() => {
+    fetchKeys();
+  }, []);
+
+  const fetchKeys = async (): Promise<void> => {
+    try {
+      if (userContext.hasWriteAccess) {
+        const listKeysResult: DatabaseAccountListKeysResult = await listKeys(
+          userContext.subscriptionId,
+          userContext.resourceGroup,
+          userContext.databaseAccount.name
+        );
+        setPrimaryMasterKey(listKeysResult.primaryMasterKey);
+        setSecondaryMasterKey(listKeysResult.secondaryMasterKey);
+        setPrimaryReadonlyMasterKey(listKeysResult.primaryReadonlyMasterKey);
+        setSecondaryReadonlyMasterKey(listKeysResult.secondaryReadonlyMasterKey);
+      } else {
+        const listReadonlyKeysResult: DatabaseAccountListReadOnlyKeysResult = await listReadOnlyKeys(
+          userContext.subscriptionId,
+          userContext.resourceGroup,
+          userContext.databaseAccount.name
+        );
+        setPrimaryReadonlyMasterKey(listReadonlyKeysResult.primaryReadonlyMasterKey);
+        setSecondaryReadonlyMasterKey(listReadonlyKeysResult.secondaryReadonlyMasterKey);
+      }
+    } catch (error) {
+      handleError(error, "listKeys", "listKeys request has failed: ");
+      throw error;
+    }
+  };
+
+  const onCopyBtnClicked = (selector: string): void => {
+    const textfield: HTMLInputElement = document.querySelector(selector);
+    textfield.select();
+    document.execCommand("copy");
+  };
+
+  const textfieldStyles: Partial<ITextFieldStyles> = {
+    root: { width: "100%" },
+    field: { backgroundColor: "rgb(230, 230, 230)" },
+    fieldGroup: { borderColor: "rgb(138, 136, 134)" },
+  };
+
+  return (
+    <div style={{ width: "100%", padding: 16 }}>
+      <Stack style={{ marginLeft: 10 }}>
+        <Text variant="medium">
+          Ensure you have the right networking / access configuration before you establish the connection with your app
+          or 3rd party tool.
+        </Text>
+        <Link style={{ fontSize: 14 }} target="_blank" href="">
+          Configure networking in Azure portal
+        </Link>
+      </Stack>
+
+      <Pivot>
+        {userContext.hasWriteAccess && (
+          <PivotItem headerText="Read-write Keys">
+            <Stack style={{ margin: 10 }}>
+              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+                <TextField label="URI" id="uriTextfield" readOnly value={uri} styles={textfieldStyles} />
+                <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#uriTextfield")} />
+              </Stack>
+
+              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+                <TextField
+                  label="PRIMARY KEY"
+                  id="primaryKeyTextfield"
+                  readOnly
+                  value={primaryMasterKey}
+                  styles={textfieldStyles}
+                />
+                <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#primaryKeyTextfield")} />
+              </Stack>
+
+              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+                <TextField
+                  label="SECONDARY KEY"
+                  id="secondaryKeyTextfield"
+                  readOnly
+                  value={secondaryMasterKey}
+                  styles={textfieldStyles}
+                />
+                <IconButton
+                  iconProps={{ iconName: "Copy" }}
+                  onClick={() => onCopyBtnClicked("#secondaryKeyTextfield")}
+                />
+              </Stack>
+
+              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+                <TextField
+                  label="PRIMARY CONNECTION STRING"
+                  id="primaryConStrTextfield"
+                  readOnly
+                  value={primaryConnectionStr}
+                  styles={textfieldStyles}
+                />
+                <IconButton
+                  iconProps={{ iconName: "Copy" }}
+                  onClick={() => onCopyBtnClicked("#primaryConStrTextfield")}
+                />
+              </Stack>
+              <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+                <TextField
+                  label="SECONDARY CONNECTION STRING"
+                  id="secondaryConStrTextfield"
+                  readOnly
+                  value={secondaryConnectionStr}
+                  styles={textfieldStyles}
+                />
+                <IconButton
+                  iconProps={{ iconName: "Copy" }}
+                  onClick={() => onCopyBtnClicked("#secondaryConStrTextfield")}
+                />
+              </Stack>
+            </Stack>
+          </PivotItem>
+        )}
+        <PivotItem headerText="Read-only Keys">
+          <Stack style={{ margin: 10 }}>
+            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+              <TextField label="URI" id="uriReadOnlyTextfield" readOnly value={uri} styles={textfieldStyles} />
+              <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#uriReadOnlyTextfield")} />
+            </Stack>
+            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+              <TextField
+                label="PRIMARY READ-ONLY KEY"
+                id="primaryReadonlyKeyTextfield"
+                readOnly
+                value={primaryReadonlyMasterKey}
+                styles={textfieldStyles}
+              />
+              <IconButton
+                iconProps={{ iconName: "Copy" }}
+                onClick={() => onCopyBtnClicked("#primaryReadonlyKeyTextfield")}
+              />
+            </Stack>
+            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+              <TextField
+                label="SECONDARY READ-ONLY KEY"
+                id="secondaryReadonlyKeyTextfield"
+                readOnly
+                value={secondaryReadonlyMasterKey}
+                styles={textfieldStyles}
+              />
+              <IconButton
+                iconProps={{ iconName: "Copy" }}
+                onClick={() => onCopyBtnClicked("#secondaryReadonlyKeyTextfield")}
+              />
+            </Stack>
+            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+              <TextField
+                label="PRIMARY READ-ONLY CONNECTION STRING"
+                id="primaryReadonlyConStrTextfield"
+                readOnly
+                value={primaryReadonlyConnectionStr}
+                styles={textfieldStyles}
+              />
+              <IconButton
+                iconProps={{ iconName: "Copy" }}
+                onClick={() => onCopyBtnClicked("#primaryReadonlyConStrTextfield")}
+              />
+            </Stack>
+            <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+              <TextField
+                label="SECONDARY READ-ONLY CONNECTION STRING"
+                id="secondaryReadonlyConStrTextfield"
+                value={secondaryReadonlyConnectionStr}
+                readOnly
+                styles={textfieldStyles}
+              />
+              <IconButton
+                iconProps={{ iconName: "Copy" }}
+                onClick={() => onCopyBtnClicked("#secondaryReadonlyConStrTextfield")}
+              />
+            </Stack>
+          </Stack>
+        </PivotItem>
+      </Pivot>
+
+      <Stack style={{ margin: 10 }}>
+        <Text style={{ fontWeight: 600, marginBottom: 8 }}>Download sample app</Text>
+        <Text style={{ marginBottom: 8 }}>
+          Don’t have an app ready? No worries, download one of our sample app with a platform of your choice. Connection
+          string is already included in the app.
+        </Text>
+        <PrimaryButton
+          style={{ width: 185 }}
+          onClick={() =>
+            sendMessage({
+              type: MessageTypes.OpenQuickstartBlade,
+            })
+          }
+          text="Download sample app"
+        />
+      </Stack>
+    </div>
+  );
+};

src/Explorer/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
 import { CollectionTabKind } from "Contracts/ViewModels";
+import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -12,17 +13,21 @@ type Tab = TabsBase | (TabsBase & { render: () => JSX.Element });
 
 export const Tabs = (): JSX.Element => {
   const { openedTabs, activeTab } = useTabs();
+  const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
+  const isConnectTabActive = useTabs((state) => state.isConnectTabActive);
   return (
     <div className="tabsManagerContainer">
       <div id="content" className="flexContainer hideOverflows">
         <div className="nav-tabs-margin">
           <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
+            {isConnectTabOpen && <TabNav key="connect" tab={undefined} active={isConnectTabActive} />}
             {openedTabs.map((tab) => (
               <TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
             ))}
           </ul>
         </div>
         <div className="tabPanesContainer">
+          {isConnectTabActive && <ConnectTab />}
           {openedTabs.map((tab) => (
             <TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
           ))}
@@ -35,6 +40,7 @@ export const Tabs = (): JSX.Element => {
 function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
   const [hovering, setHovering] = useState(false);
   const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+  const tabId = tab ? tab.tabId : "connect";
 
   useEffect(() => {
     if (active && focusTab.current) {
@@ -45,27 +51,27 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
     <li
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      onClick={() => tab.onTabClick()}
+      onClick={() => (tab ? tab.onTabClick() : useTabs.getState().activateConnectTab())}
-      onKeyPress={({ nativeEvent: e }) => tab.onKeyPressActivate(undefined, e)}
+      onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressActivate(undefined, e) : onKeyPressConnectTab(e))}
       className={active ? "active tabList" : "tabList"}
-      title={useObservable(tab.tabPath)}
+      title={useObservable(tab?.tabPath || ko.observable(""))}
       aria-selected={active}
       aria-expanded={active}
-      aria-controls={tab.tabId}
+      aria-controls={tabId}
       tabIndex={0}
       role="tab"
       ref={focusTab}
     >
       <span className="tabNavContentContainer">
-        <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>
+        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
           <div className="tab_Content">
             <span className="statusIconContainer">
-              {useObservable(tab.isExecutionError) && <ErrorIcon tab={tab} active={active} />}
+              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-              {useObservable(tab.isExecuting) && (
+              {useObservable(tab?.isExecuting || ko.observable(false)) && (
                 <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
               )}
             </span>
-            <span className="tabNavText">{useObservable(tab.tabTitle)}</span>
+            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable("Connect"))}</span>
             <span className="tabIconSection">
               <CloseButton tab={tab} active={active} hovering={hovering} />
             </span>
@@ -83,7 +89,7 @@ const CloseButton = ({ tab, active, hovering }: { tab: Tab; active: boolean; hov
     role="button"
     aria-label="Close Tab"
     className="cancelButton"
-    onClick={() => tab.onCloseTabButtonClick()}
+    onClick={() => (tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeConnectTab())}
     tabIndex={active ? 0 : undefined}
     onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
   >
@@ -133,9 +139,18 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
     }
   }, [ref, tab]);
 
-  if ("render" in tab) {
+  if (tab) {
-    return <div {...attrs}>{tab.render()}</div>;
+    if ("render" in tab) {
+      return <div {...attrs}>{tab.render()}</div>;
+    }
   }
 
   return <div {...attrs} ref={ref} data-bind="html:html" />;
 }
+
+const onKeyPressConnectTab = (e: KeyboardEvent): void => {
+  if (e.key === "Enter" || e.key === "Space") {
+    useTabs.getState().activateConnectTab();
+    e.stopPropagation();
+  }
+};

src/Explorer/Tutorials/QuickstartTutorial.tsx

@@ -1,5 +1,6 @@
 import { TeachingBubble } from "@fluentui/react";
 import { useDatabases } from "Explorer/useDatabases";
+import { useTabs } from "hooks/useTabs";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
 
@@ -140,7 +141,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
           hasCloseButton
           primaryButtonProps={{
             text: "Launch connect",
-            //onClick: () => setStep(7),
+            onClick: () => useTabs.getState().openAndActivateConnectTab(),
           }}
           secondaryButtonProps={{
             text: "Previous",

src/Main.tsx

@@ -60,6 +60,7 @@ initializeIcons();
 const App: React.FunctionComponent = () => {
   const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
   const openedTabs = useTabs((state) => state.openedTabs);
+  const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
 
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform);
@@ -103,7 +104,7 @@ const App: React.FunctionComponent = () => {
             </div>
           </div>
           {/* Collections Tree - End */}
-          {openedTabs.length === 0 && <SplashScreen explorer={explorer} />}
+          {openedTabs.length === 0 && !isConnectTabOpen && <SplashScreen explorer={explorer} />}
           <Tabs />
         </div>
         {/* Collections Tree and Tabs - End */}

src/hooks/useTabs.ts

@@ -7,6 +7,8 @@ import TabsBase from "../Explorer/Tabs/TabsBase";
 interface TabsState {
   openedTabs: TabsBase[];
   activeTab: TabsBase;
+  isConnectTabOpen: boolean;
+  isConnectTabActive: boolean;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
   updateTab: (tab: TabsBase) => void;
@@ -15,19 +17,24 @@ interface TabsState {
   closeTabsByComparator: (comparator: (tab: TabsBase) => boolean) => void;
   closeTab: (tab: TabsBase) => void;
   closeAllNotebookTabs: (hardClose: boolean) => void;
+  activateConnectTab: () => void;
+  openAndActivateConnectTab: () => void;
+  closeConnectTab: () => void;
 }
 
 export const useTabs: UseStore<TabsState> = create((set, get) => ({
   openedTabs: [],
   activeTab: undefined,
+  isConnectTabOpen: false,
+  isConnectTabActive: false,
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
-      set({ activeTab: tab });
+      set({ activeTab: tab, isConnectTabActive: false });
       tab.onActivate();
     }
   },
   activateNewTab: (tab: TabsBase): void => {
-    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab }));
+    set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, isConnectTabActive: false }));
     tab.onActivate();
   },
   updateTab: (tab: TabsBase) => {
@@ -66,7 +73,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       return true;
     });
     if (updatedTabs.length === 0) {
-      set({ activeTab: undefined });
+      set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
     }
 
     if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
@@ -104,8 +111,21 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       });
 
       if (get().openedTabs.length === 0) {
-        set({ activeTab: undefined });
+        set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
       }
     }
   },
+  activateConnectTab: () => {
+    if (get().isConnectTabOpen) {
+      set({ isConnectTabActive: true, activeTab: undefined });
+    }
+  },
+  openAndActivateConnectTab: () => set({ isConnectTabActive: true, isConnectTabOpen: true, activeTab: undefined }),
+  closeConnectTab: () => {
+    const { isConnectTabActive, openedTabs } = get();
+    if (isConnectTabActive && openedTabs?.length > 0) {
+      set({ activeTab: openedTabs[0] });
+    }
+    set({ isConnectTabActive: false, isConnectTabOpen: false });
+  },
 }));