Hide Keys and Connection Strings in Connect Tab (#2095)

* Hide connection strings and keys by default.  Move URI above pivot since common across tabs.  Matches frontend.  Need to add scrolling of keys when window is small.  Possibly reduce URI width.

* Add vertical scrolling when window size reduces.

* Adding missing semicolon at end of connection strings.

src/Explorer/Tabs/ConnectTab.tsx

@@ -16,10 +16,20 @@ export const ConnectTab: React.FC = (): JSX.Element => {
   const [primaryReadonlyMasterKey, setPrimaryReadonlyMasterKey] = useState<string>("");
   const [secondaryReadonlyMasterKey, setSecondaryReadonlyMasterKey] = useState<string>("");
   const uri: string = userContext.databaseAccount.properties?.documentEndpoint;
-  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey}`;
+  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey};`;
-  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey}`;
+  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey};`;
-  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey}`;
+  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey};`;
-  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey}`;
+  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey};`;
+  const maskedValue: string =
+    "*********************************************************************************************************************************";
+  const [showPrimaryMasterKey, setShowPrimaryMasterKey] = useState<boolean>(false);
+  const [showSecondaryMasterKey, setShowSecondaryMasterKey] = useState<boolean>(false);
+  const [showPrimaryReadonlyMasterKey, setShowPrimaryReadonlyMasterKey] = useState<boolean>(false);
+  const [showSecondaryReadonlyMasterKey, setShowSecondaryReadonlyMasterKey] = useState<boolean>(false);
+  const [showPrimaryConnectionStr, setShowPrimaryConnectionStr] = useState<boolean>(false);
+  const [showSecondaryConnectionStr, setShowSecondaryConnectionStr] = useState<boolean>(false);
+  const [showPrimaryReadonlyConnectionStr, setShowPrimaryReadonlyConnectionStr] = useState<boolean>(false);
+  const [showSecondaryReadonlyConnectionStr, setShowSecondaryReadonlyConnectionStr] = useState<boolean>(false);
 
   useEffect(() => {
     fetchKeys();
@@ -62,55 +72,97 @@ export const ConnectTab: React.FC = (): JSX.Element => {
     root: { width: "100%" },
     field: { backgroundColor: "rgb(230, 230, 230)" },
     fieldGroup: { borderColor: "rgb(138, 136, 134)" },
+    suffix: {
+      backgroundColor: "rgb(230, 230, 230)",
+      margin: 0,
+      padding: 0,
+    },
   };
 
+  const renderCopyButton = (selector: string) => (
+    <IconButton
+      iconProps={{ iconName: "Copy" }}
+      onClick={() => onCopyBtnClicked(selector)}
+      styles={{
+        root: {
+          height: "100%",
+          backgroundColor: "rgb(230, 230, 230)",
+          border: "none",
+        },
+        rootHovered: {
+          backgroundColor: "rgb(220, 220, 220)",
+        },
+        rootPressed: {
+          backgroundColor: "rgb(210, 210, 210)",
+        },
+      }}
+    />
+  );
+
   return (
     <div style={{ width: "100%", padding: 16 }}>
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 16, margin: 10 }}>
+        <TextField
+          label="URI"
+          id="uriTextfield"
+          readOnly
+          value={uri}
+          styles={textfieldStyles}
+          onRenderSuffix={() => renderCopyButton("#uriTextfield")}
+        />
+        <div style={{ width: 32 }}></div>
+      </Stack>
+
       <Pivot>
         {userContext.hasWriteAccess && (
           <PivotItem headerText="Read-write Keys">
-            <Stack style={{ margin: 10 }}>
+            <Stack style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
-              <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}
+                  value={showPrimaryMasterKey ? primaryMasterKey : maskedValue}
                   styles={textfieldStyles}
+                  {...(showPrimaryMasterKey && {
+                    onRenderSuffix: () => renderCopyButton("#primaryKeyTextfield"),
+                  })}
+                />
+                <IconButton
+                  iconProps={{ iconName: showPrimaryMasterKey ? "Hide3" : "View" }}
+                  onClick={() => setShowPrimaryMasterKey(!showPrimaryMasterKey)}
                 />
-                <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#primaryKeyTextfield")} />
               </Stack>
-
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
                 <TextField
                   label="SECONDARY KEY"
                   id="secondaryKeyTextfield"
                   readOnly
-                  value={secondaryMasterKey}
+                  value={showSecondaryMasterKey ? secondaryMasterKey : maskedValue}
                   styles={textfieldStyles}
+                  {...(showSecondaryMasterKey && {
+                    onRenderSuffix: () => renderCopyButton("#secondaryKeyTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
+                  iconProps={{ iconName: showSecondaryMasterKey ? "Hide3" : "View" }}
-                  onClick={() => onCopyBtnClicked("#secondaryKeyTextfield")}
+                  onClick={() => setShowSecondaryMasterKey(!showSecondaryMasterKey)}
                 />
               </Stack>
-
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
                 <TextField
                   label="PRIMARY CONNECTION STRING"
                   id="primaryConStrTextfield"
                   readOnly
-                  value={primaryConnectionStr}
+                  value={showPrimaryConnectionStr ? primaryConnectionStr : maskedValue}
                   styles={textfieldStyles}
+                  {...(showPrimaryConnectionStr && {
+                    onRenderSuffix: () => renderCopyButton("#primaryConStrTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
+                  iconProps={{ iconName: showPrimaryConnectionStr ? "Hide3" : "View" }}
-                  onClick={() => onCopyBtnClicked("#primaryConStrTextfield")}
+                  onClick={() => setShowPrimaryConnectionStr(!showPrimaryConnectionStr)}
                 />
               </Stack>
               <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -118,34 +170,36 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                   label="SECONDARY CONNECTION STRING"
                   id="secondaryConStrTextfield"
                   readOnly
-                  value={secondaryConnectionStr}
+                  value={showSecondaryConnectionStr ? secondaryConnectionStr : maskedValue}
                   styles={textfieldStyles}
+                  {...(showSecondaryConnectionStr && {
+                    onRenderSuffix: () => renderCopyButton("#secondaryConStrTextfield"),
+                  })}
                 />
                 <IconButton
-                  iconProps={{ iconName: "Copy" }}
+                  iconProps={{ iconName: showSecondaryConnectionStr ? "Hide3" : "View" }}
-                  onClick={() => onCopyBtnClicked("#secondaryConStrTextfield")}
+                  onClick={() => setShowSecondaryConnectionStr(!showSecondaryConnectionStr)}
                 />
               </Stack>
             </Stack>
           </PivotItem>
         )}
         <PivotItem headerText="Read-only Keys">
-          <Stack style={{ margin: 10 }}>
+          <Stack style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
-            <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}
+                value={showPrimaryReadonlyMasterKey ? primaryReadonlyMasterKey : maskedValue}
                 styles={textfieldStyles}
+                {...(showPrimaryReadonlyMasterKey && {
+                  onRenderSuffix: () => renderCopyButton("#primaryReadonlyKeyTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
+                iconProps={{ iconName: showPrimaryReadonlyMasterKey ? "Hide3" : "View" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyKeyTextfield")}
+                onClick={() => setShowPrimaryReadonlyMasterKey(!showPrimaryReadonlyMasterKey)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -153,12 +207,15 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                 label="SECONDARY READ-ONLY KEY"
                 id="secondaryReadonlyKeyTextfield"
                 readOnly
-                value={secondaryReadonlyMasterKey}
+                value={showSecondaryReadonlyMasterKey ? secondaryReadonlyMasterKey : maskedValue}
                 styles={textfieldStyles}
+                {...(showSecondaryReadonlyMasterKey && {
+                  onRenderSuffix: () => renderCopyButton("#secondaryReadonlyKeyTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
+                iconProps={{ iconName: showSecondaryReadonlyMasterKey ? "Hide3" : "View" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyKeyTextfield")}
+                onClick={() => setShowSecondaryReadonlyMasterKey(!showSecondaryReadonlyMasterKey)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -166,25 +223,31 @@ export const ConnectTab: React.FC = (): JSX.Element => {
                 label="PRIMARY READ-ONLY CONNECTION STRING"
                 id="primaryReadonlyConStrTextfield"
                 readOnly
-                value={primaryReadonlyConnectionStr}
+                value={showPrimaryReadonlyConnectionStr ? primaryReadonlyConnectionStr : maskedValue}
                 styles={textfieldStyles}
+                {...(showPrimaryReadonlyConnectionStr && {
+                  onRenderSuffix: () => renderCopyButton("#primaryReadonlyConStrTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
+                iconProps={{ iconName: showPrimaryReadonlyConnectionStr ? "Hide3" : "View" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyConStrTextfield")}
+                onClick={() => setShowPrimaryReadonlyConnectionStr(!showPrimaryReadonlyConnectionStr)}
               />
             </Stack>
             <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
               <TextField
                 label="SECONDARY READ-ONLY CONNECTION STRING"
                 id="secondaryReadonlyConStrTextfield"
-                value={secondaryReadonlyConnectionStr}
+                value={showSecondaryReadonlyConnectionStr ? secondaryReadonlyConnectionStr : maskedValue}
                 readOnly
                 styles={textfieldStyles}
+                {...(showSecondaryReadonlyConnectionStr && {
+                  onRenderSuffix: () => renderCopyButton("#secondaryReadonlyConStrTextfield"),
+                })}
               />
               <IconButton
-                iconProps={{ iconName: "Copy" }}
+                iconProps={{ iconName: showSecondaryReadonlyConnectionStr ? "Hide3" : "View" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyConStrTextfield")}
+                onClick={() => setShowSecondaryReadonlyConnectionStr(!showSecondaryReadonlyConnectionStr)}
               />
             </Stack>
           </Stack>