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/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()}
-      onKeyPress={({ nativeEvent: e }) => tab.onKeyPressActivate(undefined, e)}
+      onClick={() => (tab ? tab.onTabClick() : useTabs.getState().activateConnectTab())}
+      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.isExecuting) && (
+              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+              {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) {
-    return <div {...attrs}>{tab.render()}</div>;
+  if (tab) {
+    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();
+  }
+};