From e3c3a8b1b792a8ba69d480540e318ad4666c3818 Mon Sep 17 00:00:00 2001
From: bogercraig <124094535+bogercraig@users.noreply.github.com>
Date: Thu, 3 Apr 2025 17:19:28 -0700
Subject: [PATCH] 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 | 143 ++++++++++++++++++++++---------
 1 file changed, 103 insertions(+), 40 deletions(-)

diff --git a/src/Explorer/Tabs/ConnectTab.tsx b/src/Explorer/Tabs/ConnectTab.tsx
index 3c334fbc1..62f190996 100644
--- a/src/Explorer/Tabs/ConnectTab.tsx
+++ b/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 secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey}`;
-  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey}`;
-  const secondaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryReadonlyMasterKey}`;
+  const primaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryMasterKey};`;
+  const secondaryConnectionStr = `AccountEndpoint=${uri};AccountKey=${secondaryMasterKey};`;
+  const primaryReadonlyConnectionStr = `AccountEndpoint=${uri};AccountKey=${primaryReadonlyMasterKey};`;
+  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 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 style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
               <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" }}
-                  onClick={() => onCopyBtnClicked("#secondaryKeyTextfield")}
+                  iconProps={{ iconName: showSecondaryMasterKey ? "Hide3" : "View" }}
+                  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" }}
-                  onClick={() => onCopyBtnClicked("#primaryConStrTextfield")}
+                  iconProps={{ iconName: showPrimaryConnectionStr ? "Hide3" : "View" }}
+                  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" }}
-                  onClick={() => onCopyBtnClicked("#secondaryConStrTextfield")}
+                  iconProps={{ iconName: showSecondaryConnectionStr ? "Hide3" : "View" }}
+                  onClick={() => setShowSecondaryConnectionStr(!showSecondaryConnectionStr)}
                 />
               </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 style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
             <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" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyKeyTextfield")}
+                iconProps={{ iconName: showPrimaryReadonlyMasterKey ? "Hide3" : "View" }}
+                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" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyKeyTextfield")}
+                iconProps={{ iconName: showSecondaryReadonlyMasterKey ? "Hide3" : "View" }}
+                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" }}
-                onClick={() => onCopyBtnClicked("#primaryReadonlyConStrTextfield")}
+                iconProps={{ iconName: showPrimaryReadonlyConnectionStr ? "Hide3" : "View" }}
+                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" }}
-                onClick={() => onCopyBtnClicked("#secondaryReadonlyConStrTextfield")}
+                iconProps={{ iconName: showSecondaryReadonlyConnectionStr ? "Hide3" : "View" }}
+                onClick={() => setShowSecondaryReadonlyConnectionStr(!showSecondaryReadonlyConnectionStr)}
               />
             </Stack>
           </Stack>