random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve SettingsPane (#1945) 

* Use accordion in settingsPane

* Fix format

* Fix format for retry interval

* Fix unit tests

* Cosmetic changes

* Move info tips into accordion section

* Update snapshot
This commit is contained in:
Laurent Nguyen 2024-09-05 11:51:32 +02:00 committed by GitHub
parent 4296b5ae02
commit 07c0ead523
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1129 additions and 1014 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Common/Tooltip/InfoTooltip.tsx
View File

@ -3,11 +3,12 @@ import * as React from "react";
export interface TooltipProps { export interface TooltipProps {
children: string; children: string;
className?: string;
} }
export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => { export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
return ( return (
<span> <span className={className}>
<TooltipHost content={children}> <TooltipHost content={children}>
<Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} /> <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
</TooltipHost> </TooltipHost>

409
src/Explorer/Panes/SettingsPane/SettingsPane.tsx
View File

@ -5,15 +5,13 @@ import {
IChoiceGroupOption, IChoiceGroupOption,
ISpinButtonStyles, ISpinButtonStyles,
IToggleStyles, IToggleStyles,
Icon,
MessageBar, MessageBar,
MessageBarType, MessageBarType,
Position, Position,
SpinButton, SpinButton,
Toggle, Toggle,
TooltipHost,
} from "@fluentui/react"; } from "@fluentui/react";
import { makeStyles } from "@fluentui/react-components"; import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles } from "@fluentui/react-components";
import { AuthType } from "AuthType"; import { AuthType } from "AuthType";
import * as Constants from "Common/Constants"; import * as Constants from "Common/Constants";
import { SplitterDirection } from "Common/Splitter"; import { SplitterDirection } from "Common/Splitter";
@ -59,6 +57,32 @@ const useStyles = makeStyles({
listStyleType: "disc", listStyleType: "disc",
paddingLeft: "20px", paddingLeft: "20px",
}, },
container: {
display: "flex",
flexDirection: "column",
height: "100%",
},
firstItem: {
flex: "1",
},
header: {
marginRight: "5px",
},
headerIcon: {
paddingTop: "4px",
cursor: "pointer",
},
settingsSectionContainer: {
paddingLeft: "15px",
},
settingsSectionDescription: {
paddingBottom: "10px",
fontSize: "12px",
},
subHeader: {
marginRight: "5px",
fontSize: "12px",
},
}); });
export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({ export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
@ -444,18 +468,19 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
return ( return (
<RightPaneForm {...genericPaneProps}> <RightPaneForm {...genericPaneProps}>
<div className="paneMainContent"> <div className={`paneMainContent ${styles.container}`}>
<Accordion className={styles.firstItem}>
{shouldShowQueryPageOptions && ( {shouldShowQueryPageOptions && (
<div className="settingsSection"> <AccordionItem value="1">
<div className="settingsSectionPart"> <AccordionHeader>
<fieldset> <div className={styles.header}>Page Options</div>
<legend id="pageOptions" className="settingsSectionLabel legendLabel"> </AccordionHeader>
Page Options <AccordionPanel>
</legend> <div className={styles.settingsSectionContainer}>
<InfoTooltip> <div className={styles.settingsSectionDescription}>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
query results per page. many query results per page.
</InfoTooltip> </div>
<ChoiceGroup <ChoiceGroup
ariaLabelledBy="pageOptions" ariaLabelledBy="pageOptions"
selectedKey={pageOption} selectedKey={pageOption}
@ -463,14 +488,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
styles={choiceButtonStyles} styles={choiceButtonStyles}
onChange={handleOnPageOptionChange} onChange={handleOnPageOptionChange}
/> />
</fieldset>
</div> </div>
<div className="tabs settingsSectionPart"> <div className={`tabs ${styles.settingsSectionContainer}`}>
{isCustomPageOptionSelected() && ( {isCustomPageOptionSelected() && (
<div className="tabcontent"> <div className="tabcontent">
<div className="settingsSectionLabel"> <div className={styles.settingsSectionDescription}>
Query results per page Query results per page{" "}
<InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip> <InfoTooltip className={styles.headerIcon}>
Enter the number of query results that should be shown per page.
</InfoTooltip>
</div> </div>
<SpinButton <SpinButton
@ -490,36 +516,18 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
</div> </div>
)} )}
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
)} )}
{userContext.apiType === "SQL" && {userContext.apiType === "SQL" &&
userContext.authType === AuthType.AAD && userContext.authType === AuthType.AAD &&
configContext.platform !== Platform.Fabric && ( configContext.platform !== Platform.Fabric && (
<> <AccordionItem value="2">
<div className="settingsSection"> <AccordionHeader>
<div className="settingsSectionPart"> <div className={styles.header}>Enable Entra ID RBAC</div>
<fieldset> </AccordionHeader>
<legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel"> <AccordionPanel>
Enable Entra ID RBAC <div className={styles.settingsSectionContainer}>
</legend>
<TooltipHost
content={
<>
Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable
Entra ID RBAC.
<a
href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
target="_blank"
rel="noopener noreferrer"
>
{" "}
Learn more{" "}
</a>
</>
}
>
<Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
</TooltipHost>
{showDataPlaneRBACWarning && configContext.platform === Platform.Portal && ( {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
<MessageBar <MessageBar
messageBarType={MessageBarType.warning} messageBarType={MessageBarType.warning}
@ -531,6 +539,18 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
operations operations
</MessageBar> </MessageBar>
)} )}
<div className={styles.settingsSectionDescription}>
Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
ID RBAC.
<a
href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
target="_blank"
rel="noopener noreferrer"
>
{" "}
Learn more{" "}
</a>
</div>
<ChoiceGroup <ChoiceGroup
ariaLabelledBy="enableDataPlaneRBACOptions" ariaLabelledBy="enableDataPlaneRBACOptions"
options={dataPlaneRBACOptionsList} options={dataPlaneRBACOptionsList}
@ -538,58 +558,23 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
selectedKey={enableDataPlaneRBACOption} selectedKey={enableDataPlaneRBACOption}
onChange={handleOnDataPlaneRBACOptionChange} onChange={handleOnDataPlaneRBACOptionChange}
/> />
</fieldset>
</div> </div>
</div> </AccordionPanel>
</> </AccordionItem>
)} )}
{userContext.apiType === "SQL" && ( {userContext.apiType === "SQL" && (
<> <>
<div className="settingsSection"> <AccordionItem value="3">
<div className="settingsSectionPart"> <AccordionHeader>
<div> <div className={styles.header}>Query Timeout</div>
<legend id="ruThresholdLabel" className="settingsSectionLabel legendLabel"> </AccordionHeader>
RU Threshold <AccordionPanel>
</legend> <div className={styles.settingsSectionContainer}>
<InfoTooltip>If a query exceeds a configured RU threshold, the query will be aborted.</InfoTooltip> <div className={styles.settingsSectionDescription}>
</div>
<div>
<Toggle
styles={toggleStyles}
label="Enable RU threshold"
onChange={handleOnRUThresholdToggleChange}
defaultChecked={ruThresholdEnabled}
/>
</div>
{ruThresholdEnabled && (
<div>
<SpinButton
label="RU Threshold (RU)"
labelPosition={Position.top}
defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
min={1}
step={1000}
onChange={handleOnRUThresholdSpinButtonChange}
incrementButtonAriaLabel="Increase value by 1000"
decrementButtonAriaLabel="Decrease value by 1000"
styles={spinButtonStyles}
/>
</div>
)}
</div>
</div>
<div className="settingsSection">
<div className="settingsSectionPart">
<div>
<legend id="queryTimeoutLabel" className="settingsSectionLabel legendLabel">
Query Timeout
</legend>
<InfoTooltip>
When a query reaches a specified time limit, a popup with an option to cancel the query will show When a query reaches a specified time limit, a popup with an option to cancel the query will show
unless automatic cancellation has been enabled unless automatic cancellation has been enabled.
</InfoTooltip>
</div> </div>
<div>
<Toggle <Toggle
styles={toggleStyles} styles={toggleStyles}
label="Enable query timeout" label="Enable query timeout"
@ -598,7 +583,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
/> />
</div> </div>
{queryTimeoutEnabled && ( {queryTimeoutEnabled && (
<div> <div className={styles.settingsSectionContainer}>
<SpinButton <SpinButton
label="Query timeout (ms)" label="Query timeout (ms)"
labelPosition={Position.top} labelPosition={Position.top}
@ -618,17 +603,52 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
/> />
</div> </div>
)} )}
</AccordionPanel>
</AccordionItem>
<AccordionItem value="4">
<AccordionHeader>
<div className={styles.header}>RU Threshold</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
If a query exceeds a configured RU threshold, the query will be aborted.
</div> </div>
<Toggle
styles={toggleStyles}
label="Enable RU threshold"
onChange={handleOnRUThresholdToggleChange}
defaultChecked={ruThresholdEnabled}
/>
</div> </div>
<div className="settingsSection"> {ruThresholdEnabled && (
<div className="settingsSectionPart"> <div className={styles.settingsSectionContainer}>
<div> <SpinButton
<legend id="defaultQueryResultsView" className="settingsSectionLabel legendLabel"> label="RU Threshold (RU)"
Default Query Results View labelPosition={Position.top}
</legend> defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
<InfoTooltip>Select the default view to use when displaying query results.</InfoTooltip> min={1}
step={1000}
onChange={handleOnRUThresholdSpinButtonChange}
incrementButtonAriaLabel="Increase value by 1000"
decrementButtonAriaLabel="Decrease value by 1000"
styles={spinButtonStyles}
/>
</div>
)}
</AccordionPanel>
</AccordionItem>
<AccordionItem value="5">
<AccordionHeader>
<div className={styles.header}>Default Query Results View</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Select the default view to use when displaying query results.
</div> </div>
<div>
<ChoiceGroup <ChoiceGroup
ariaLabelledBy="defaultQueryResultsView" ariaLabelledBy="defaultQueryResultsView"
selectedKey={defaultQueryResultsView} selectedKey={defaultQueryResultsView}
@ -637,21 +657,25 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
onChange={handleOnDefaultQueryResultsViewChange} onChange={handleOnDefaultQueryResultsViewChange}
/> />
</div> </div>
</div> </AccordionPanel>
</div> </AccordionItem>
</> </>
)} )}
<div className="settingsSection">
<div className="settingsSectionPart"> <AccordionItem value="6">
<div className="settingsSectionLabel"> <AccordionHeader>
Retry Settings <div className={styles.header}>Retry Settings</div>
<InfoTooltip>Retry policy associated with throttled requests during CosmosDB queries.</InfoTooltip> </AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Retry policy associated with throttled requests during CosmosDB queries.
</div> </div>
<div> <div>
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel"> <span className={styles.subHeader}>Max retry attempts</span>
Max retry attempts <InfoTooltip className={styles.headerIcon}>
</legend> Max number of retries to be performed for a request. Default value 9.
<InfoTooltip>Max number of retries to be performed for a request. Default value 9.</InfoTooltip> </InfoTooltip>
</div> </div>
<SpinButton <SpinButton
labelPosition={Position.top} labelPosition={Position.top}
@ -667,12 +691,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
styles={spinButtonStyles} styles={spinButtonStyles}
/> />
<div> <div>
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel"> <span className={styles.subHeader}>Fixed retry interval (ms)</span>
Fixed retry interval (ms) <InfoTooltip className={styles.headerIcon}>
</legend> Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
<InfoTooltip> part of the response. Default value is 0 milliseconds.
Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part
of the response. Default value is 0 milliseconds.
</InfoTooltip> </InfoTooltip>
</div> </div>
<SpinButton <SpinButton
@ -689,10 +711,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
styles={spinButtonStyles} styles={spinButtonStyles}
/> />
<div> <div>
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel"> <span className={styles.subHeader}>Max wait time (s)</span>
Max wait time (s) <InfoTooltip className={styles.headerIcon}>
</legend>
<InfoTooltip>
Max wait time in seconds to wait for a request while the retries are happening. Default value 30 Max wait time in seconds to wait for a request while the retries are happening. Default value 30
seconds. seconds.
</InfoTooltip> </InfoTooltip>
@ -711,14 +731,17 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
styles={spinButtonStyles} styles={spinButtonStyles}
/> />
</div> </div>
</div> </AccordionPanel>
<div className="settingsSection"> </AccordionItem>
<div className="settingsSectionPart settingsSectionInlineCheckbox">
<div className="settingsSectionLabel"> <AccordionItem value="7">
Enable container pagination <AccordionHeader>
<InfoTooltip> <div className={styles.header}>Enable container pagination</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order. Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div> </div>
<Checkbox <Checkbox
styles={{ styles={{
@ -728,20 +751,23 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable container pagination" ariaLabel="Enable container pagination"
checked={containerPaginationEnabled} checked={containerPaginationEnabled}
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)} onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
label="Enable container pagination"
/> />
</div> </div>
</div> </AccordionPanel>
{shouldShowCrossPartitionOption && ( </AccordionItem>
<div className="settingsSection">
<div className="settingsSectionPart settingsSectionInlineCheckbox">
<div className="settingsSectionLabel">
Enable cross-partition query
<InfoTooltip>
Send more than one request while executing a query. More than one request is necessary if the query is
not scoped to single partition key value.
</InfoTooltip>
</div>
{shouldShowCrossPartitionOption && (
<AccordionItem value="8">
<AccordionHeader>
<div className={styles.header}>Enable cross-partition query</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Send more than one request while executing a query. More than one request is necessary if the query
is not scoped to single partition key value.
</div>
<Checkbox <Checkbox
styles={{ styles={{
label: { padding: 0 }, label: { padding: 0 },
@ -750,22 +776,25 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable cross partition query" ariaLabel="Enable cross partition query"
checked={crossPartitionQueryEnabled} checked={crossPartitionQueryEnabled}
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)} onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
label="Enable cross-partition query"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
)} )}
{shouldShowParallelismOption && ( {shouldShowParallelismOption && (
<div className="settingsSection"> <AccordionItem value="9">
<div className="settingsSectionPart"> <AccordionHeader>
<div className="settingsSectionLabel"> <div className={styles.header}>Max degree of parallelism</div>
Max degree of parallelism </AccordionHeader>
<InfoTooltip> <AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Gets or sets the number of concurrent operations run client side during parallel query execution. A Gets or sets the number of concurrent operations run client side during parallel query execution. A
positive property value limits the number of concurrent operations to the set value. If it is set to positive property value limits the number of concurrent operations to the set value. If it is set to
less than 0, the system automatically decides the number of concurrent operations to run. less than 0, the system automatically decides the number of concurrent operations to run.
</InfoTooltip>
</div> </div>
<SpinButton <SpinButton
min={-1} min={-1}
step={1} step={1}
@ -773,26 +802,33 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
role="textbox" role="textbox"
id="max-degree" id="max-degree"
value={"" + maxDegreeOfParallelism} value={"" + maxDegreeOfParallelism}
onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)} onIncrement={(newValue) =>
onDecrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)} setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)
}
onDecrement={(newValue) =>
setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)
}
onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)} onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
ariaLabel="Max degree of parallelism" ariaLabel="Max degree of parallelism"
label="Max degree of parallelism"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
)} )}
{shouldShowPriorityLevelOption && ( {shouldShowPriorityLevelOption && (
<div className="settingsSection"> <AccordionItem value="10">
<div className="settingsSectionPart"> <AccordionHeader>
<fieldset> <div className={styles.header}>Priority Level</div>
<legend id="priorityLevel" className="settingsSectionLabel legendLabel"> </AccordionHeader>
Priority Level <AccordionPanel>
</legend> <div className={styles.settingsSectionContainer}>
<InfoTooltip> <div className={styles.settingsSectionDescription}>
Sets the priority level for data-plane requests from Data Explorer when using Priority-Based Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
server-side default priority level will be used. server-side default priority level will be used.
</InfoTooltip> </div>
<ChoiceGroup <ChoiceGroup
ariaLabelledBy="priorityLevel" ariaLabelledBy="priorityLevel"
selectedKey={priorityLevel} selectedKey={priorityLevel}
@ -800,21 +836,22 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
styles={choiceButtonStyles} styles={choiceButtonStyles}
onChange={handleOnPriorityLevelOptionChange} onChange={handleOnPriorityLevelOptionChange}
/> />
</fieldset>
</div>
</div> </div>
</AccordionPanel>
</AccordionItem>
)} )}
{shouldShowGraphAutoVizOption && (
<div className="settingsSection">
<div className="settingsSectionPart">
<div className="settingsSectionLabel">
Display Gremlin query results as:&nbsp;
<InfoTooltip>
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
JSON.
</InfoTooltip>
</div>
{shouldShowGraphAutoVizOption && (
<AccordionItem value="11">
<AccordionHeader>
<div className={styles.header}>Display Gremlin query results as:&nbsp;</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
Select Graph to automatically visualize the query results as a Graph or JSON to display the results
as JSON.
</div>
<ChoiceGroup <ChoiceGroup
selectedKey={graphAutoVizDisabled} selectedKey={graphAutoVizDisabled}
options={graphAutoOptionList} options={graphAutoOptionList}
@ -822,20 +859,22 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
aria-label="Graph Auto-visualization" aria-label="Graph Auto-visualization"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
)} )}
{shouldShowCopilotSampleDBOption && (
<div className="settingsSection">
<div className="settingsSectionPart settingsSectionInlineCheckbox">
<div className="settingsSectionLabel">
Enable sample database
<InfoTooltip>
This is a sample database and collection with synthetic product data you can use to explore using
NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
created by, and maintained by Microsoft at no cost to you.
</InfoTooltip>
</div>
{shouldShowCopilotSampleDBOption && (
<AccordionItem value="12">
<AccordionHeader>
<div className={styles.header}>Enable sample database</div>
</AccordionHeader>
<AccordionPanel>
<div className={styles.settingsSectionContainer}>
<div className={styles.settingsSectionDescription}>
This is a sample database and collection with synthetic product data you can use to explore using
NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
is created by, and maintained by Microsoft at no cost to you.
</div>
<Checkbox <Checkbox
styles={{ styles={{
label: { padding: 0 }, label: { padding: 0 },
@ -844,10 +883,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable sample db for Query Advisor" ariaLabel="Enable sample db for Query Advisor"
checked={copilotSampleDBEnabled} checked={copilotSampleDBEnabled}
onChange={handleSampleDatabaseChange} onChange={handleSampleDatabaseChange}
label="Enable sample database"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
)} )}
</Accordion>
<div className="settingsSection"> <div className="settingsSection">
<div className="settingsSectionPart"> <div className="settingsSectionPart">
<DefaultButton <DefaultButton

431
src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
View File

@ -8,24 +8,30 @@ exports[`Settings Pane should render Default properly 1`] = `
submitButtonText="Apply" submitButtonText="Apply"
> >
<div <div
className="paneMainContent" className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
> >
<Accordion
className="___1uf6361_0000000 fz7g6wx"
>
<AccordionItem
value="1"
>
<AccordionHeader>
<div <div
className="settingsSection" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionPart"
>
<fieldset>
<legend
className="settingsSectionLabel legendLabel"
id="pageOptions"
> >
Page Options Page Options
</legend> </div>
<InfoTooltip> </AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page. Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
</InfoTooltip> </div>
<StyledChoiceGroup <StyledChoiceGroup
ariaLabelledBy="pageOptions" ariaLabelledBy="pageOptions"
onChange={[Function]} onChange={[Function]}
@ -66,19 +72,21 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
} }
/> />
</fieldset>
</div> </div>
<div <div
className="tabs settingsSectionPart" className="tabs ___1dfa554_0000000 fo7qwa0"
> >
<div <div
className="tabcontent" className="tabcontent"
> >
<div <div
className="settingsSectionLabel" className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
> >
Query results per page Query results per page
<InfoTooltip>
<InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Enter the number of query results that should be shown per page. Enter the number of query results that should be shown per page.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -96,25 +104,68 @@ exports[`Settings Pane should render Default properly 1`] = `
/> />
</div> </div>
</div> </div>
</AccordionPanel>
</AccordionItem>
<AccordionItem
value="3"
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
>
Query Timeout
</div> </div>
</AccordionHeader>
<AccordionPanel>
<div <div
className="settingsSection" className="___1dfa554_0000000 fo7qwa0"
> >
<div <div
className="settingsSectionPart" className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
> >
<div> When a query reaches a specified time limit, a popup with an option to cancel the query will show unless automatic cancellation has been enabled.
<legend </div>
className="settingsSectionLabel legendLabel" <StyledToggleBase
id="ruThresholdLabel" defaultChecked={false}
label="Enable query timeout"
onChange={[Function]}
styles={
{
"container": {},
"label": {
"display": "block",
"fontSize": 12,
"fontWeight": 400,
},
"pill": {},
"root": {},
"text": {},
"thumb": {},
}
}
/>
</div>
</AccordionPanel>
</AccordionItem>
<AccordionItem
value="4"
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
> >
RU Threshold RU Threshold
</legend>
<InfoTooltip>
If a query exceeds a configured RU threshold, the query will be aborted.
</InfoTooltip>
</div> </div>
<div> </AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
If a query exceeds a configured RU threshold, the query will be aborted.
</div>
<StyledToggleBase <StyledToggleBase
defaultChecked={true} defaultChecked={true}
label="Enable RU threshold" label="Enable RU threshold"
@ -135,7 +186,9 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
/> />
</div> </div>
<div> <div
className="___1dfa554_0000000 fo7qwa0"
>
<StyledSpinButton <StyledSpinButton
decrementButtonAriaLabel="Decrease value by 1000" decrementButtonAriaLabel="Decrease value by 1000"
defaultValue="5000" defaultValue="5000"
@ -163,66 +216,27 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
/> />
</div> </div>
</div> </AccordionPanel>
</div> </AccordionItem>
<AccordionItem
value="5"
>
<AccordionHeader>
<div <div
className="settingsSection" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionPart"
>
<div>
<legend
className="settingsSectionLabel legendLabel"
id="queryTimeoutLabel"
>
Query Timeout
</legend>
<InfoTooltip>
When a query reaches a specified time limit, a popup with an option to cancel the query will show unless automatic cancellation has been enabled
</InfoTooltip>
</div>
<div>
<StyledToggleBase
defaultChecked={false}
label="Enable query timeout"
onChange={[Function]}
styles={
{
"container": {},
"label": {
"display": "block",
"fontSize": 12,
"fontWeight": 400,
},
"pill": {},
"root": {},
"text": {},
"thumb": {},
}
}
/>
</div>
</div>
</div>
<div
className="settingsSection"
>
<div
className="settingsSectionPart"
>
<div>
<legend
className="settingsSectionLabel legendLabel"
id="defaultQueryResultsView"
> >
Default Query Results View Default Query Results View
</legend>
<InfoTooltip>
Select the default view to use when displaying query results.
</InfoTooltip>
</div> </div>
<div> </AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Select the default view to use when displaying query results.
</div>
<StyledChoiceGroup <StyledChoiceGroup
ariaLabelledBy="defaultQueryResultsView" ariaLabelledBy="defaultQueryResultsView"
onChange={[Function]} onChange={[Function]}
@ -264,30 +278,36 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
/> />
</div> </div>
</div> </AccordionPanel>
</div> </AccordionItem>
<div <AccordionItem
className="settingsSection" value="6"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Retry Settings Retry Settings
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Retry policy associated with throttled requests during CosmosDB queries. Retry policy associated with throttled requests during CosmosDB queries.
</InfoTooltip>
</div> </div>
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Max retry attempts Max retry attempts
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Max number of retries to be performed for a request. Default value 9. Max number of retries to be performed for a request. Default value 9.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -320,13 +340,14 @@ exports[`Settings Pane should render Default properly 1`] = `
value="9" value="9"
/> />
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Fixed retry interval (ms) Fixed retry interval (ms)
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds. Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -359,13 +380,14 @@ exports[`Settings Pane should render Default properly 1`] = `
value="0" value="0"
/> />
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Max wait time (s) Max wait time (s)
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds. Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -398,25 +420,32 @@ exports[`Settings Pane should render Default properly 1`] = `
value="30" value="30"
/> />
</div> </div>
</div> </AccordionPanel>
<div </AccordionItem>
className="settingsSection" <AccordionItem
value="7"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart settingsSectionInlineCheckbox" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Enable container pagination Enable container pagination
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order. Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div> </div>
<StyledCheckboxBase <StyledCheckboxBase
ariaLabel="Enable container pagination" ariaLabel="Enable container pagination"
checked={false} checked={false}
className="padding" className="padding"
label="Enable container pagination"
onChange={[Function]} onChange={[Function]}
styles={ styles={
{ {
@ -427,25 +456,32 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
/> />
</div> </div>
</div> </AccordionPanel>
<div </AccordionItem>
className="settingsSection" <AccordionItem
value="8"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart settingsSectionInlineCheckbox" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Enable cross-partition query Enable cross-partition query
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value. Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value.
</InfoTooltip>
</div> </div>
<StyledCheckboxBase <StyledCheckboxBase
ariaLabel="Enable cross partition query" ariaLabel="Enable cross partition query"
checked={false} checked={false}
className="padding" className="padding"
label="Enable cross-partition query"
onChange={[Function]} onChange={[Function]}
styles={ styles={
{ {
@ -456,25 +492,32 @@ exports[`Settings Pane should render Default properly 1`] = `
} }
/> />
</div> </div>
</div> </AccordionPanel>
<div </AccordionItem>
className="settingsSection" <AccordionItem
value="9"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Max degree of parallelism Max degree of parallelism
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run. Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
</InfoTooltip>
</div> </div>
<StyledSpinButton <StyledSpinButton
ariaLabel="Max degree of parallelism" ariaLabel="Max degree of parallelism"
className="textfontclr" className="textfontclr"
id="max-degree" id="max-degree"
label="Max degree of parallelism"
min={-1} min={-1}
onDecrement={[Function]} onDecrement={[Function]}
onIncrement={[Function]} onIncrement={[Function]}
@ -484,7 +527,9 @@ exports[`Settings Pane should render Default properly 1`] = `
value="6" value="6"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
</Accordion>
<div <div
className="settingsSection" className="settingsSection"
> >
@ -524,30 +569,39 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
submitButtonText="Apply" submitButtonText="Apply"
> >
<div <div
className="paneMainContent" className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
> >
<div <Accordion
className="settingsSection" className="___1uf6361_0000000 fz7g6wx"
> >
<div <AccordionItem
className="settingsSectionPart" value="6"
> >
<AccordionHeader>
<div <div
className="settingsSectionLabel" className="___15c001r_0000000 fq02s40"
> >
Retry Settings Retry Settings
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Retry policy associated with throttled requests during CosmosDB queries. Retry policy associated with throttled requests during CosmosDB queries.
</InfoTooltip>
</div> </div>
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Max retry attempts Max retry attempts
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Max number of retries to be performed for a request. Default value 9. Max number of retries to be performed for a request. Default value 9.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -580,13 +634,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
value="9" value="9"
/> />
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Fixed retry interval (ms) Fixed retry interval (ms)
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds. Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -619,13 +674,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
value="0" value="0"
/> />
<div> <div>
<legend <span
className="settingsSectionLabel legendLabel" className="___zls1px0_0000000 fq02s40 f1ugzwwg"
id="queryRetryAttemptsLabel"
> >
Max wait time (s) Max wait time (s)
</legend> </span>
<InfoTooltip> <InfoTooltip
className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
>
Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds. Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
</InfoTooltip> </InfoTooltip>
</div> </div>
@ -658,25 +714,32 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
value="30" value="30"
/> />
</div> </div>
</div> </AccordionPanel>
<div </AccordionItem>
className="settingsSection" <AccordionItem
value="7"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart settingsSectionInlineCheckbox" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Enable container pagination Enable container pagination
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order. Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div> </div>
<StyledCheckboxBase <StyledCheckboxBase
ariaLabel="Enable container pagination" ariaLabel="Enable container pagination"
checked={false} checked={false}
className="padding" className="padding"
label="Enable container pagination"
onChange={[Function]} onChange={[Function]}
styles={ styles={
{ {
@ -687,20 +750,26 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
} }
/> />
</div> </div>
</div> </AccordionPanel>
<div </AccordionItem>
className="settingsSection" <AccordionItem
value="11"
> >
<AccordionHeader>
<div <div
className="settingsSectionPart" className="___15c001r_0000000 fq02s40"
>
<div
className="settingsSectionLabel"
> >
Display Gremlin query results as:  Display Gremlin query results as: 
<InfoTooltip> </div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
>
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON. Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
</InfoTooltip>
</div> </div>
<StyledChoiceGroup <StyledChoiceGroup
aria-label="Graph Auto-visualization" aria-label="Graph Auto-visualization"
@ -720,7 +789,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
selectedKey="false" selectedKey="false"
/> />
</div> </div>
</div> </AccordionPanel>
</AccordionItem>
</Accordion>
<div <div
className="settingsSection" className="settingsSection"
> >