mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-05-05 07:53:16 +01:00
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.
This commit is contained in:
bogercraig
GitHub
parent
0f6c979268
commit
e3c3a8b1b7
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user