random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-05 18:47:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark theme for Explorer (#2185)

Browse Source 
* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
2025-12-16 12:21:58 +05:30
committed by GitHub
parent bc7e8a71ca
commit 2c31ec2a8d
100 changed files with 7344 additions and 1929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
View File

@@ -350,9 +350,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
checked={this.state.isSharedThroughputChecked}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ isSharedThroughputChecked: isChecked })
@@ -649,7 +654,27 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
{userContext.apiType === "SQL" && (
<Stack className="panelGroupSpacing">
<DefaultButton
styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
styles={{
root: {
padding: 0,
width: 200,
height: 30,
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
borderColor: "var(--colorNeutralStroke1)",
},
rootHovered: {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
},
rootPressed: {
backgroundColor: "var(--colorBrandBackgroundPressed)",
color: "var(--colorNeutralForegroundOnBrand)",
},
label: {
fontSize: 12,
},
}}
hidden={this.state.useHashV1}
disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@@ -657,7 +682,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
Add hierarchical partition key
</DefaultButton>
{this.state.subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET
V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -678,9 +703,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
checked={this.state.enableDedicatedThroughput}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ enableDedicatedThroughput: isChecked })
@@ -769,7 +799,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<ActionButton
iconProps={{ iconName: "Add" }}
styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
styles={{ root: { padding: 0 }, label: { fontSize: 12, color: "var(--colorNeutralForeground1)" } }}
onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
>
Add unique key
@@ -937,9 +967,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="Create a Wildcard Index on all fields"
checked={this.state.createMongoWildCardIndex}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ createMongoWildCardIndex: isChecked })
@@ -954,15 +989,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={this.state.useHashV1}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
}
/>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
created container will use a legacy partitioning scheme that supports partition key values of size
only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

33
src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
View File

@@ -123,7 +123,15 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
"alignItems": "center",
"padding": 0,
},
"root": {
"selectors": {
":hover .ms-Checkbox-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"text": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
},
}
@@ -275,10 +283,21 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
"fontSize": 12,
},
"root": {
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
"height": 30,
"padding": 0,
"width": 200,
},
"rootHovered": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
},
"rootPressed": {
"backgroundColor": "var(--colorBrandBackgroundPressed)",
"color": "var(--colorNeutralForegroundOnBrand)",
},
}
}
>
@@ -347,6 +366,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
styles={
{
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
},
"root": {
@@ -557,13 +577,26 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
"whiteSpace": "break-spaces",
"wordWrap": "break-word",
},
"root": {
"selectors": {
":hover .ms-Checkbox-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"text": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
},
}
}
/>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<Icon

7
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
View File

@@ -224,9 +224,14 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
<Checkbox
title="Provision shared throughput"
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
label="Provision throughput"
checked={databaseCreateNewShared}

8
src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
View File

@@ -78,7 +78,15 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
"alignItems": "center",
"padding": 0,
},
"root": {
"selectors": {
":hover .ms-Checkbox-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"text": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
},
}

9
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
View File

@@ -32,15 +32,20 @@ export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element =>
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={useHashV1}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
},
},
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
useHashV1CheckboxOnChange(isChecked);
}}
/>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
container will use a legacy partitioning scheme that supports partition key values of size only up to 101
bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

2
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
View File

@@ -117,7 +117,7 @@ export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.El
Add hierarchical partition key
</DefaultButton>
{subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
JavaScript V3 SDK.{" "}

4
src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
View File

@@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
return (
<RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
<Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
When changing a container’s partition key, you will need to create a destination container with the correct
partition key. You may also select an existing destination container.&nbsp;
<Link
@@ -346,7 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
Add hierarchical partition key
</DefaultButton>
{subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
Java V4 SDK, or preview JavaScript V3 SDK.{" "}

9
src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
View File

@@ -94,7 +94,14 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
value={selectedFileName}
autoFocus
readOnly
styles={{ fieldGroup: { width: 300 } }}
styles={{
fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" },
subComponentStyles: {
label: {
root: { color: "var(--colorNeutralForeground1)" },
},
},
}}
/>
<label htmlFor="importQueryInputId" className="customFileUpload">
<Image {...imageProps} src={folderIcon} alt="upload files" />

8
src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
View File

@@ -24,8 +24,16 @@ exports[`Load Query Pane should render Default properly 1`] = `
styles={
{
"fieldGroup": {
"color": "var(--colorNeutralForeground1)",
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
value=""

118
src/Explorer/Panes/PanelComponent.less
View File

@@ -4,7 +4,8 @@
display: flex;
flex-direction: column;
min-height: 100%;
color: var(--colorNeutralForeground2);
background-color: var(--colorNeutralBackground1);
.panelMainContent {
flex-grow: 1;
padding: 0 34px;
@@ -25,19 +26,31 @@
margin: auto 0 auto @SmallSpace;
cursor: default;
vertical-align: middle;
color: var(--colorNeutralForeground1);
}
.panelTextBold {
font-weight: 600;
line-height: 20px;
color: var(--colorNeutralForeground1);
}
.panelTextField {
font-size: @mediumFontSize;
border: 1px solid #605e5c;
color: #000;
border: 1px solid var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground2);
padding: 4px 10px;
width: @newCollectionPaneInputWidth;
&::placeholder {
color: var(--colorNeutralForeground3);
}
&:focus {
border-color: var(--colorCompoundBrandStroke1);
outline: none;
}
}
.panelRadioBtn {
@@ -47,6 +60,7 @@
.panelRadioBtnLabel {
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
color: var(--colorNeutralForeground1);
}
.panelSectionSpinner {
@@ -55,6 +69,44 @@
left: 50%;
transform: translate(-50%, -50%);
}
.ms-Dropdown {
.ms-Dropdown-title {
background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1);
}
.ms-Dropdown-caretDownWrapper {
color: var(--colorNeutralForeground1);
}
}
.ms-Checkbox {
.ms-Checkbox-label {
color: var(--colorNeutralForeground1);
}
}
.ms-TextField {
.ms-TextField-fieldGroup {
background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1);
}
.ms-TextField-field {
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
&::placeholder {
color: var(--colorNeutralForeground3);
}
}
}
.ms-Text {
color: var(--colorNeutralForeground1);
}
}
@media (max-width: 768px) {
@@ -67,13 +119,14 @@
}
.panelHeader {
color: @BaseDark;
color: var(--colorNeutralForeground1);
font-size: @largeFontSize;
font-weight: 400;
}
.panelInfoErrorContainer {
background-color: @BaseLow;
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
padding: @DefaultSpace;
display: inline-flex;
margin: 20px 34px 0 34px;
@@ -85,15 +138,15 @@
}
.panelWarningIcon {
color: @WarningIconColor;
color: var(--colorPaletteYellowForeground1);
}
.panelErrorIcon {
color: @ErrorIconColor;
color: var(--colorPaletteRedForeground1);
}
.panelLargeInfoIcon {
color: @InfoIconColor;
color: var(--colorBrandForeground1);
}
.panelWarningErrorDetailsLinkContainer {
@@ -102,16 +155,22 @@
padding-left: @MediumSpace;
.paneErrorLink {
color: @LinkColor;
color: var(--colorBrandForeground1);
cursor: pointer;
font-size: @mediumFontSize;
}
.panelWarningErrorMessage {
color: var(--colorNeutralForeground1);
}
}
}
.panelFooter {
padding: 16px 34px;
border-top: solid 1px #bbbbbb;
border-top: solid 1px var(--colorNeutralStroke1);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
& button {
height: 30px;
@@ -133,7 +192,8 @@
.addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus {
border: 1px dashed #605e5c;
border: 1px dashed var(--colorNeutralStroke1);
outline: none;
}
.addNewParamStyle {
@@ -175,7 +235,7 @@
}
.removeIcon {
color: @InfoIconColor;
color: "var(--colorNeutralForeground1)";
}
.backImageIcon {
@@ -183,7 +243,8 @@
}
[alt="back"]:focus {
border: 1px solid #605e5c;
border: 1px solid var(--colorCompoundBrandStroke1);
outline: none;
}
.addEntityDatePicker {
@@ -203,5 +264,32 @@
}
.panelSeparator::before {
background-color: #edebe9;
}
background-color: var(--colorNeutralStroke1);
}
.themed-panel {
&.ms-Panel {
.ms-Panel-main {
background-color: var(--colorNeutralBackground1);
}
.ms-Panel-overlay {
background-color: var(--overlayBackground);
}
.ms-Panel-content {
background-color: var(--colorNeutralBackground1);
}
}
}
:global {
.ms-Panel-root {
background-color: transparent;
}
.ms-Panel-overlay {
background-color: var(--overlayBackground);
}
}

42
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@@ -63,13 +63,47 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
closeButtonAriaLabel={`Close ${this.props.headerText}`}
customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
headerClassName="panelHeader"
className="themed-panel"
onRenderNavigationContent={this.props.onRenderNavigationContent}
isFooterAtBottom={true}
styles={{
navigation: { borderBottom: "1px solid #cccccc" },
content: { padding: 0 },
header: { padding: "0 0 8px 34px" },
commands: { marginTop: 8, paddingTop: 0 },
navigation: {
borderBottom: "1px solid var(--colorNeutralStroke1)",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
content: {
padding: 0,
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
header: {
padding: "0 0 8px 34px",
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
commands: {
marginTop: 8,
paddingTop: 0,
backgroundColor: "var(--colorNeutralBackground1)",
},
root: {},
overlay: {
backgroundColor: "var(--overlayBackground)",
},
main: {
backgroundColor: "var(--colorNeutralBackground1)",
},
scrollableContent: {
backgroundColor: "var(--colorNeutralBackground1)",
},
footerInner: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
closeButton: {
color: "var(--colorNeutralForeground1)",
},
}}
style={{ height: this.state.height }}
>

11
src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
View File

@@ -147,7 +147,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
<div className="panelFormWrapper" style={{ flexGrow: 1 }}>
<div className="panelMainContent">
{!isSaveQueryEnabled() ? (
<Text variant="small">{setupSaveQueriesText}</Text>
<Text
variant="small"
styles={{
root: {
color: "var(--colorNeutralForeground1)",
},
}}
>
{setupSaveQueriesText}
</Text>
) : (
<TextField
id="saveQueryInput"

7
src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap
View File

@@ -20,6 +20,13 @@ exports[`Save Query Pane should render Default properly 1`] = `
className="panelMainContent"
>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
variant="small"
>
For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.

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

@@ -55,7 +55,6 @@ import React, { FunctionComponent, useState } from "react";
import create, { UseStore } from "zustand";
import Explorer from "../../Explorer";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
export interface DataPlaneRbacState {
dataPlaneRbacEnabled: boolean;
aadTokenUpdated: boolean;
@@ -72,6 +71,7 @@ const useStyles = makeStyles({
bulletList: {
listStyleType: "disc",
paddingLeft: "20px",
color: "var(--colorNeutralForeground1)",
},
container: {
display: "flex",
@@ -83,6 +83,7 @@ const useStyles = makeStyles({
},
header: {
marginRight: "5px",
color: "var(--colorNeutralForeground1)",
},
headerIcon: {
paddingTop: "4px",
@@ -90,6 +91,7 @@ const useStyles = makeStyles({
},
settingsSectionContainer: {
paddingLeft: "15px",
color: "var(--colorNeutralForeground1)",
},
settingsSectionDescription: {
paddingBottom: "10px",
@@ -628,9 +630,35 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
".ms-ChoiceField-wrapper label": {
fontSize: 12,
paddingTop: 0,
color: "inherit",
},
".ms-ChoiceField": {
marginTop: 0,
color: "inherit",
},
".ms-ChoiceField-field": {
color: "inherit",
},
".ms-ChoiceField-field:hover": {
color: "inherit",
},
".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
color: "inherit",
},
".ms-ChoiceField-field:hover span": {
color: "inherit",
},
".ms-ChoiceField-wrapper": {
color: "inherit",
},
".ms-ChoiceField-wrapper:hover": {
color: "inherit",
},
".ms-ChoiceField-labelWrapper": {
color: "inherit",
},
".ms-ChoiceField-labelWrapper:hover": {
color: "inherit",
},
},
},
@@ -642,6 +670,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
fontSize: 12,
fontWeight: 400,
display: "block",
color: "inherit",
},
root: {},
container: {},
@@ -654,15 +683,37 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
label: {
fontSize: 12,
fontWeight: 400,
color: "var(--colorNeutralForeground1)",
},
root: {
paddingBottom: 10,
},
labelWrapper: {},
icon: {},
spinButtonWrapper: {},
input: {},
arrowButtonsContainer: {},
labelWrapper: {
color: "var(--colorNeutralForeground1)",
},
icon: {
color: "var(--colorNeutralForeground1)",
},
spinButtonWrapper: {
backgroundColor: "var(--colorNeutralBackground3)",
borderColor: "var(--colorNeutralStroke1)",
},
input: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground3)",
selectors: {
"::placeholder": {
color: "var(--colorNeutralForeground2)",
},
"&:focus": {
backgroundColor: "var(--colorNeutralBackground3)",
borderColor: "var(--colorBrandStroke1)",
},
},
},
arrowButtonsContainer: {
backgroundColor: "var(--colorNeutralBackground3)",
},
};
return (
@@ -712,6 +763,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
className="textfontclr"
incrementButtonAriaLabel="Increase value by 1"
decrementButtonAriaLabel="Decrease value by 1"
styles={spinButtonStyles}
/>
</div>
)}
@@ -773,7 +825,37 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
}
onChange={handleOnSelectedRegionOptionChange}
options={regionOptions}
styles={{ root: { marginBottom: "10px" } }}
styles={{
root: { marginBottom: "10px" },
dropdown: {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
borderColor: "var(--colorNeutralStroke1)",
},
title: {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
borderColor: "var(--colorNeutralStroke1)",
},
dropdownItem: {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
selectors: {
"&:hover": {
backgroundColor: "var(--colorNeutralBackground4)",
color: "var(--colorNeutralForeground1)",
},
},
},
dropdownItemSelected: {
backgroundColor: "var(--colorBrandBackground)",
color: "var(--colorNeutralForegroundOnBrand)",
},
callout: {
backgroundColor: "var(--colorNeutralBackground3)",
borderColor: "var(--colorNeutralStroke1)",
},
}}
/>
</div>
</AccordionPanel>
@@ -973,6 +1055,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
checked={containerPaginationEnabled}
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
label="Enable container pagination"
onRenderLabel={() => (
<span style={{ color: "var(--colorNeutralForeground1)" }}>Enable container pagination</span>
)}
/>
</div>
</AccordionPanel>
@@ -997,7 +1082,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable cross partition query"
checked={crossPartitionQueryEnabled}
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
label="Enable cross-partition query"
onRenderLabel={() => (
<span style={{ color: "var(--colorNeutralForeground1)" }}>Enable cross-partition query</span>
)}
/>
</div>
</AccordionPanel>
@@ -1029,7 +1116,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="EnableQueryControl"
checked={queryControlEnabled}
onChange={() => setQueryControlEnabled(!queryControlEnabled)}
label="Enable query control"
onRenderLabel={() => (
<span style={{ color: "var(--colorNeutralForeground1)" }}>Enable query control</span>
)}
/>
</div>
</AccordionPanel>
@@ -1063,6 +1152,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
ariaLabel="Max degree of parallelism"
label="Max degree of parallelism"
styles={spinButtonStyles}
/>
</div>
</AccordionPanel>
@@ -1132,7 +1222,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable sample db for query exploration"
checked={copilotSampleDBEnabled}
onChange={handleSampleDatabaseChange}
label="Enable sample database"
onRenderLabel={() => (
<span style={{ color: "var(--colorNeutralForeground1)" }}>Enable sample database</span>
)}
/>
</div>
</AccordionPanel>
@@ -1167,7 +1259,29 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
<div className={styles.settingsSectionContainer}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Checkbox
styles={{ label: { padding: 0 } }}
styles={{
root: {
selectors: {
":hover .ms-Checkbox-text": {
color: "var(--colorNeutralForeground1)",
},
":hover .ms-Checkbox-label": {
color: "var(--colorNeutralForeground1)",
},
},
},
label: {
padding: 0,
color: "var(--colorNeutralForeground1)",
},
text: {
color: "var(--colorNeutralForeground1)",
},
checkbox: {
borderColor: "var(--colorNeutralForeground3)",
backgroundColor: "var(--colorNeutralBackground2)",
},
}}
className="padding"
ariaLabel="Ignore partition key on document update"
checked={ignorePartitionKeyOnDocumentUpdate}
@@ -1188,6 +1302,22 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
<div className="settingsSection">
<div className="settingsSectionPart">
<DefaultButton
styles={{
root: {
backgroundColor: "var(--colorBrandBackground)",
color: "var(--colorNeutralForegroundOnBrand)",
selectors: {
":hover": {
backgroundColor: "var(--colorBrandBackgroundHover)",
color: "var(--colorNeutralForegroundOnBrand)",
},
":active": {
backgroundColor: "var(--colorBrandBackgroundPressed)",
color: "var(--colorNeutralForegroundOnBrand)",
},
},
},
}}
onClick={() => {
useDialog.getState().showOkCancelModalDialog(
"Clear History",
@@ -1223,7 +1353,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
</div>
</div>
<div className="settingsSection">
<div className="settingsSectionPart">
<div className={`settingsSectionPart ${styles.settingsSectionContainer}`}>
<div className="settingsSectionLabel">Explorer Version</div>
<div>{explorerVersion}</div>
</div>

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

@@ -19,14 +19,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Page Options
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -55,12 +55,38 @@ exports[`Settings Pane should render Default properly 1`] = `
{
"selectors": {
".ms-ChoiceField": {
"color": "inherit",
"marginTop": 0,
},
".ms-ChoiceField-field": {
"color": "inherit",
},
".ms-ChoiceField-field:hover": {
"color": "inherit",
},
".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
"color": "inherit",
},
".ms-ChoiceField-field:hover span": {
"color": "inherit",
},
".ms-ChoiceField-labelWrapper": {
"color": "inherit",
},
".ms-ChoiceField-labelWrapper:hover": {
"color": "inherit",
},
".ms-ChoiceField-wrapper": {
"color": "inherit",
},
".ms-ChoiceField-wrapper label": {
"color": "inherit",
"fontSize": 12,
"paddingTop": 0,
},
".ms-ChoiceField-wrapper:hover": {
"color": "inherit",
},
".ms-ChoiceFieldGroup root-133": {
"clear": "both",
},
@@ -75,7 +101,7 @@ exports[`Settings Pane should render Default properly 1`] = `
/>
</div>
<div
className="tabs ___1dfa554_0000000 fo7qwa0"
className="tabs ___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="tabcontent"
@@ -101,6 +127,44 @@ exports[`Settings Pane should render Default properly 1`] = `
onIncrement={[Function]}
onValidate={[Function]}
step={1}
styles={
{
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="0"
/>
</div>
@@ -112,14 +176,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Query Timeout
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -134,6 +198,7 @@ exports[`Settings Pane should render Default properly 1`] = `
{
"container": {},
"label": {
"color": "inherit",
"display": "block",
"fontSize": 12,
"fontWeight": 400,
@@ -153,14 +218,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
RU Limit
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -175,6 +240,7 @@ exports[`Settings Pane should render Default properly 1`] = `
{
"container": {},
"label": {
"color": "inherit",
"display": "block",
"fontSize": 12,
"fontWeight": 400,
@@ -188,7 +254,7 @@ exports[`Settings Pane should render Default properly 1`] = `
/>
</div>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<StyledSpinButton
decrementButtonAriaLabel="Decrease value by 1000"
@@ -201,18 +267,40 @@ exports[`Settings Pane should render Default properly 1`] = `
step={1000}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
/>
@@ -224,14 +312,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Default Query Results View
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -260,12 +348,38 @@ exports[`Settings Pane should render Default properly 1`] = `
{
"selectors": {
".ms-ChoiceField": {
"color": "inherit",
"marginTop": 0,
},
".ms-ChoiceField-field": {
"color": "inherit",
},
".ms-ChoiceField-field:hover": {
"color": "inherit",
},
".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
"color": "inherit",
},
".ms-ChoiceField-field:hover span": {
"color": "inherit",
},
".ms-ChoiceField-labelWrapper": {
"color": "inherit",
},
".ms-ChoiceField-labelWrapper:hover": {
"color": "inherit",
},
".ms-ChoiceField-wrapper": {
"color": "inherit",
},
".ms-ChoiceField-wrapper label": {
"color": "inherit",
"fontSize": 12,
"paddingTop": 0,
},
".ms-ChoiceField-wrapper:hover": {
"color": "inherit",
},
".ms-ChoiceFieldGroup root-133": {
"clear": "both",
},
@@ -286,14 +400,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Retry Settings
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -324,18 +438,40 @@ exports[`Settings Pane should render Default properly 1`] = `
step={1}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="9"
@@ -364,18 +500,40 @@ exports[`Settings Pane should render Default properly 1`] = `
step={1000}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="0"
@@ -404,18 +562,40 @@ exports[`Settings Pane should render Default properly 1`] = `
step={1}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="30"
@@ -428,14 +608,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Enable container pagination
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -448,6 +628,7 @@ exports[`Settings Pane should render Default properly 1`] = `
className="padding"
label="Enable container pagination"
onChange={[Function]}
onRenderLabel={[Function]}
styles={
{
"label": {
@@ -464,14 +645,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Enable cross-partition query
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -482,8 +663,8 @@ exports[`Settings Pane should render Default properly 1`] = `
ariaLabel="Enable cross partition query"
checked={false}
className="padding"
label="Enable cross-partition query"
onChange={[Function]}
onRenderLabel={[Function]}
styles={
{
"label": {
@@ -500,14 +681,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Enhanced query control
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -527,8 +708,8 @@ exports[`Settings Pane should render Default properly 1`] = `
ariaLabel="EnableQueryControl"
checked={false}
className="padding"
label="Enable query control"
onChange={[Function]}
onRenderLabel={[Function]}
styles={
{
"label": {
@@ -545,14 +726,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Max degree of parallelism
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -570,6 +751,44 @@ exports[`Settings Pane should render Default properly 1`] = `
onValidate={[Function]}
role="textbox"
step={1}
styles={
{
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="6"
/>
</div>
@@ -580,14 +799,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Advanced Settings
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<Stack
horizontal={true}
@@ -606,9 +825,27 @@ exports[`Settings Pane should render Default properly 1`] = `
onChange={[Function]}
styles={
{
"checkbox": {
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralForeground3)",
},
"label": {
"color": "var(--colorNeutralForeground1)",
"padding": 0,
},
"root": {
"selectors": {
":hover .ms-Checkbox-label": {
"color": "var(--colorNeutralForeground1)",
},
":hover .ms-Checkbox-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"text": {
"color": "var(--colorNeutralForeground1)",
},
}
}
/>
@@ -630,6 +867,24 @@ exports[`Settings Pane should render Default properly 1`] = `
>
<CustomizedDefaultButton
onClick={[Function]}
styles={
{
"root": {
"backgroundColor": "var(--colorBrandBackground)",
"color": "var(--colorNeutralForegroundOnBrand)",
"selectors": {
":active": {
"backgroundColor": "var(--colorBrandBackgroundPressed)",
"color": "var(--colorNeutralForegroundOnBrand)",
},
":hover": {
"backgroundColor": "var(--colorBrandBackgroundHover)",
"color": "var(--colorNeutralForegroundOnBrand)",
},
},
},
}
}
>
Clear History
</CustomizedDefaultButton>
@@ -639,7 +894,7 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSection"
>
<div
className="settingsSectionPart"
className="settingsSectionPart ___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="settingsSectionLabel"
@@ -688,14 +943,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Retry Settings
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -726,18 +981,40 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
step={1}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="9"
@@ -766,18 +1043,40 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
step={1000}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="0"
@@ -806,18 +1105,40 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
step={1}
styles={
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"arrowButtonsContainer": {
"backgroundColor": "var(--colorNeutralBackground3)",
},
"icon": {
"color": "var(--colorNeutralForeground1)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground3)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorBrandStroke1)",
},
"::placeholder": {
"color": "var(--colorNeutralForeground2)",
},
},
},
"label": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": {},
"labelWrapper": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": {},
"spinButtonWrapper": {
"backgroundColor": "var(--colorNeutralBackground3)",
"borderColor": "var(--colorNeutralStroke1)",
},
}
}
value="30"
@@ -830,14 +1151,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Enable container pagination
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -850,6 +1171,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
className="padding"
label="Enable container pagination"
onChange={[Function]}
onRenderLabel={[Function]}
styles={
{
"label": {
@@ -866,14 +1188,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Display Gremlin query results as: 
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
@@ -905,14 +1227,14 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
>
<AccordionHeader>
<div
className="___15c001r_0000000 fq02s40"
className="___j7dlp70_0000000 fq02s40 f19n0e5"
>
Advanced Settings
</div>
</AccordionHeader>
<AccordionPanel>
<div
className="___1dfa554_0000000 fo7qwa0"
className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<Stack
horizontal={true}
@@ -931,9 +1253,27 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
onChange={[Function]}
styles={
{
"checkbox": {
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralForeground3)",
},
"label": {
"color": "var(--colorNeutralForeground1)",
"padding": 0,
},
"root": {
"selectors": {
":hover .ms-Checkbox-label": {
"color": "var(--colorNeutralForeground1)",
},
":hover .ms-Checkbox-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"text": {
"color": "var(--colorNeutralForeground1)",
},
}
}
/>
@@ -955,6 +1295,24 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
>
<CustomizedDefaultButton
onClick={[Function]}
styles={
{
"root": {
"backgroundColor": "var(--colorBrandBackground)",
"color": "var(--colorNeutralForegroundOnBrand)",
"selectors": {
":active": {
"backgroundColor": "var(--colorBrandBackgroundPressed)",
"color": "var(--colorNeutralForegroundOnBrand)",
},
":hover": {
"backgroundColor": "var(--colorBrandBackgroundHover)",
"color": "var(--colorNeutralForegroundOnBrand)",
},
},
},
}
}
>
Clear History
</CustomizedDefaultButton>
@@ -964,7 +1322,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
className="settingsSection"
>
<div
className="settingsSectionPart"
className="settingsSectionPart ___1evh9ps_0000000 fo7qwa0 f19n0e5"
>
<div
className="settingsSectionLabel"

16
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@@ -356,7 +356,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
value=""
>
<div
className="ms-TextField is-required root-116"
className="ms-TextField is-required root-117"
>
<div
className="ms-TextField-wrapper"
@@ -647,7 +647,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
}
>
<label
className="ms-Label root-127"
className="ms-Label root-128"
htmlFor="TextField0"
id="TextFieldLabel2"
>
@@ -656,13 +656,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</LabelBase>
</StyledLabelBase>
<div
className="ms-TextField-fieldGroup fieldGroup-117"
className="ms-TextField-fieldGroup fieldGroup-118"
>
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel2"
autoFocus={true}
className="ms-TextField-field field-118"
className="ms-TextField-field field-119"
id="TextField0"
name="collectionIdConfirmation"
onBlur={[Function]}
@@ -2464,7 +2464,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<button
aria-label="Create"
className="ms-Button ms-Button--primary root-128"
className="ms-Button ms-Button--primary root-129"
data-is-focusable={true}
data-test="Panel/OkButton"
id="sidePanelOkButton"
@@ -2477,14 +2477,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-129"
className="ms-Button-flexContainer flexContainer-130"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-130"
className="ms-Button-textContainer textContainer-131"
>
<span
className="ms-Button-label label-132"
className="ms-Button-label label-133"
id="id__5"
key="id__5"
>

22
src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
View File

@@ -3,12 +3,13 @@ import {
DetailsListLayoutMode,
DirectionalHint,
FontIcon,
IColumn,
SelectionMode,
TooltipHost,
getTheme,
IColumn,
IDetailsListStyles,
mergeStyles,
mergeStyleSets,
SelectionMode,
TooltipHost,
} from "@fluentui/react";
import { Upload } from "Common/Upload/Upload";
import { UploadDetailsRecord } from "Contracts/ViewModels";
@@ -205,13 +206,26 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
/>
{uploadFileData?.length > 0 && (
<div className="fileUploadSummaryContainer">
<b>File upload status</b>
<b style={{ color: "var(--colorNeutralForeground1)" }}>File upload status</b>
<DetailsList
items={uploadFileData}
columns={columns}
selectionMode={SelectionMode.none}
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
styles={
{
root: {
backgroundColor: "var(--colorNeutralBackground1)",
},
headerWrapper: {
backgroundColor: "var(--colorNeutralBackground2)",
},
contentWrapper: {
backgroundColor: "var(--colorNeutralBackground1)",
},
} as IDetailsListStyles
}
/>
</div>
)}

81
src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
View File

@@ -2,6 +2,7 @@
exports[`PaneContainerComponent test should be resize if notification console is expanded 1`] = `
<StyledPanelBase
className="themed-panel"
closeButtonAriaLabel="Close test"
customWidth="440px"
data-test="Panel:test"
@@ -18,18 +19,42 @@ exports[`PaneContainerComponent test should be resize if notification console is
}
styles={
{
"closeButton": {
"color": "var(--colorNeutralForeground1)",
},
"commands": {
"backgroundColor": "var(--colorNeutralBackground1)",
"marginTop": 8,
"paddingTop": 0,
},
"content": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": 0,
},
"footerInner": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"header": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": "0 0 8px 34px",
},
"main": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
"navigation": {
"borderBottom": "1px solid #cccccc",
"backgroundColor": "var(--colorNeutralBackground1)",
"borderBottom": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
"overlay": {
"backgroundColor": "var(--overlayBackground)",
},
"root": {},
"scrollableContent": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
}
}
@@ -41,6 +66,7 @@ exports[`PaneContainerComponent test should be resize if notification console is
exports[`PaneContainerComponent test should not render console with panel 1`] = `
<StyledPanelBase
className="themed-panel"
closeButtonAriaLabel="Close test"
customWidth="440px"
data-test="Panel:test"
@@ -57,18 +83,42 @@ exports[`PaneContainerComponent test should not render console with panel 1`] =
}
styles={
{
"closeButton": {
"color": "var(--colorNeutralForeground1)",
},
"commands": {
"backgroundColor": "var(--colorNeutralBackground1)",
"marginTop": 8,
"paddingTop": 0,
},
"content": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": 0,
},
"footerInner": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"header": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": "0 0 8px 34px",
},
"main": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
"navigation": {
"borderBottom": "1px solid #cccccc",
"backgroundColor": "var(--colorNeutralBackground1)",
"borderBottom": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
"overlay": {
"backgroundColor": "var(--overlayBackground)",
},
"root": {},
"scrollableContent": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
}
}
@@ -82,6 +132,7 @@ exports[`PaneContainerComponent test should render nothing if content is undefin
exports[`PaneContainerComponent test should render with panel content and header 1`] = `
<StyledPanelBase
className="themed-panel"
closeButtonAriaLabel="Close test"
customWidth="440px"
data-test="Panel:test"
@@ -98,18 +149,42 @@ exports[`PaneContainerComponent test should render with panel content and header
}
styles={
{
"closeButton": {
"color": "var(--colorNeutralForeground1)",
},
"commands": {
"backgroundColor": "var(--colorNeutralBackground1)",
"marginTop": 8,
"paddingTop": 0,
},
"content": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": 0,
},
"footerInner": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"header": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": "0 0 8px 34px",
},
"main": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
"navigation": {
"borderBottom": "1px solid #cccccc",
"backgroundColor": "var(--colorNeutralBackground1)",
"borderBottom": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
"overlay": {
"backgroundColor": "var(--overlayBackground)",
},
"root": {},
"scrollableContent": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
}
}