random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-29 05:41:40 +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

42
src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
View File

@@ -1,11 +1,11 @@
import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
import { FontIcon, IMessageBarStyles, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
import * as DataModels from "Contracts/DataModels";
import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
import { loadMonaco } from "Explorer/LazyMonaco";
import { monacoTheme, useThemeStore } from "hooks/useTheme";
import * as monaco from "monaco-editor";
import * as React from "react";
export interface ComputedPropertiesComponentProps {
computedPropertiesContent: DataModels.ComputedProperties;
computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -27,6 +27,24 @@ export class ComputedPropertiesComponent extends React.Component<
private shouldCheckComponentIsDirty = true;
private computedPropertiesDiv = React.createRef<HTMLDivElement>();
private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
private themeUnsubscribe: () => void;
private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
root: {
selectors: {
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorStatusWarningBackground1)",
border: "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
color: "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
constructor(props: ComputedPropertiesComponentProps) {
super(props);
@@ -48,6 +66,10 @@ export class ComputedPropertiesComponent extends React.Component<
this.onComponentUpdate();
}
componentWillUnmount(): void {
this.themeUnsubscribe && this.themeUnsubscribe();
}
public resetComputedPropertiesEditor = (): void => {
if (!this.computedPropertiesEditor) {
this.createComputedPropertiesEditor();
@@ -86,8 +108,16 @@ export class ComputedPropertiesComponent extends React.Component<
value: value,
language: "json",
ariaLabel: "Computed properties",
theme: monacoTheme(),
});
if (this.computedPropertiesEditor) {
// Subscribe to theme changes
this.themeUnsubscribe = useThemeStore.subscribe(() => {
if (this.computedPropertiesEditor) {
monaco.editor.setTheme(monacoTheme());
}
});
const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
this.props.logComputedPropertiesSuccessMessage();
@@ -111,11 +141,15 @@ export class ComputedPropertiesComponent extends React.Component<
return (
<Stack {...titleAndInputStackProps}>
{isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
<MessageBar messageBarType={MessageBarType.warning}>
<MessageBar
messageBarType={MessageBarType.warning}
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
>
{unsavedEditorWarningMessage("computedProperties")}
</MessageBar>
)}
<Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
<Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
<Link target="_blank" href="https://aka.ms/computed-properties-preview/">
{"Learn more"} <FontIcon iconName="NavigateExternalInline" />
</Link>

109
src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
View File

@@ -6,7 +6,6 @@ import {
conflictResolutionCustomToolTip,
conflictResolutionLwwTooltip,
getChoiceGroupStyles,
getTextFieldStyles,
subComponentStackProps,
} from "../SettingsRenderUtils";
import { isDirty } from "../SettingsUtils";
@@ -106,10 +105,46 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
id="conflictResolutionLwwTextField"
label={"Conflict Resolver Property"}
onRenderLabel={this.onRenderLwwComponentTextField}
styles={getTextFieldStyles(
this.props.conflictResolutionPolicyPath,
this.props.conflictResolutionPolicyPathBaseline,
)}
styles={{
fieldGroup: {
height: 25,
width: 300,
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
color: "var(--colorNeutralForeground2)",
},
input: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
},
},
field: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
},
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
value={this.props.conflictResolutionPolicyPath}
onChange={this.onConflictResolutionPolicyPathChange}
/>
@@ -119,19 +154,57 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
<ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionCustomToolTip} />
);
private getConflictResolutionCustomComponent = (): JSX.Element => (
<TextField
id="conflictResolutionCustomTextField"
label="Stored procedure"
onRenderLabel={this.onRenderCustomComponentTextField}
styles={getTextFieldStyles(
this.props.conflictResolutionPolicyProcedure,
this.props.conflictResolutionPolicyProcedureBaseline,
)}
value={this.props.conflictResolutionPolicyProcedure}
onChange={this.onConflictResolutionPolicyProcedureChange}
/>
);
private getConflictResolutionCustomComponent = (): JSX.Element => {
return (
<TextField
id="conflictResolutionCustomTextField"
label="Stored procedure"
onRenderLabel={this.onRenderCustomComponentTextField}
styles={{
fieldGroup: {
height: 25,
width: 300,
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
color: "var(--colorNeutralForeground2)",
},
input: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
},
},
field: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
},
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
value={this.props.conflictResolutionPolicyProcedure}
onChange={this.onConflictResolutionPolicyProcedureChange}
/>
);
};
public render(): JSX.Element {
return (

74
src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
View File

@@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
return (
<div>
<Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
<Pivot
onLinkClick={onPivotChange}
selectedKey={ContainerPolicyTabTypes[selectedTab]}
styles={{
root: {
color: "var(--colorNeutralForeground1)",
},
link: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
":hover": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
},
":active": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
},
},
},
linkIsSelected: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
":before": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorBrandForeground1)",
},
":hover": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
},
":active": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
},
},
},
linkContent: {
color: "inherit",
},
text: {
color: "inherit",
},
}}
>
{isVectorSearchEnabled && (
<PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
style={{ marginTop: 20 }}
style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Vector Policy"
>
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
{isFullTextSearchEnabled && (
<PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
style={{ marginTop: 20 }}
style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Full Text Policy"
>
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
) : (
<DefaultButton
id={"create-full-text-policy"}
styles={{ root: { fontSize: 12 } }}
styles={{
root: {
fontSize: 12,
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)",
},
rootHovered: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)",
},
rootPressed: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)",
},
rootDisabled: {
backgroundColor: "transparent",
},
}}
onClick={() => {
checkAndSendFullTextPolicyToSettings({
defaultLanguage: getFullTextLanguageOptions()[0].key as never,

66
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
View File

@@ -1,4 +1,5 @@
import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react";
import { monacoTheme, useThemeStore } from "hooks/useTheme";
import * as monaco from "monaco-editor";
import * as React from "react";
import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
import { isDirty, isIndexTransforming } from "../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
export interface IndexingPolicyComponentProps {
shouldDiscardIndexingPolicy: boolean;
resetShouldDiscardIndexingPolicy: () => void;
@@ -31,6 +31,24 @@ export class IndexingPolicyComponent extends React.Component<
private shouldCheckComponentIsDirty = true;
private indexingPolicyDiv = React.createRef<HTMLDivElement>();
private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
private themeUnsubscribe: () => void;
private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
root: {
selectors: {
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorStatusWarningBackground1)",
border: "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
color: "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
constructor(props: IndexingPolicyComponentProps) {
super(props);
@@ -52,6 +70,10 @@ export class IndexingPolicyComponent extends React.Component<
this.onComponentUpdate();
}
componentWillUnmount(): void {
this.themeUnsubscribe && this.themeUnsubscribe();
}
public resetIndexingPolicyEditor = (): void => {
if (!this.indexingPolicyEditor) {
this.createIndexingPolicyEditor();
@@ -87,18 +109,30 @@ export class IndexingPolicyComponent extends React.Component<
};
private async createIndexingPolicyEditor(): Promise<void> {
if (!this.indexingPolicyDiv.current) {
return;
}
const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
const monaco = await loadMonaco();
this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
value: value,
language: "json",
readOnly: isIndexTransforming(this.props.indexTransformationProgress),
ariaLabel: "Indexing Policy",
});
if (this.indexingPolicyEditor) {
const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
this.props.logIndexingPolicySuccessMessage();
if (this.indexingPolicyDiv.current) {
this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
value: value,
language: "json",
readOnly: isIndexTransforming(this.props.indexTransformationProgress),
ariaLabel: "Indexing Policy",
theme: monacoTheme(),
});
if (this.indexingPolicyEditor) {
this.themeUnsubscribe = useThemeStore.subscribe(() => {
if (this.indexingPolicyEditor) {
monaco.editor.setTheme(monacoTheme());
}
});
const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
this.props.logIndexingPolicySuccessMessage();
}
}
}
@@ -121,7 +155,13 @@ export class IndexingPolicyComponent extends React.Component<
refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
/>
{isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
<MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
<MessageBar
messageBarType={MessageBarType.warning}
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
>
{unsavedEditorWarningMessage("indexPolicy")}
</MessageBar>
)}
<div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
</Stack>

2
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
View File

@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}

39
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
View File

@@ -3,6 +3,7 @@ import {
DetailsListLayoutMode,
IColumn,
IconButton,
IMessageBarStyles,
MessageBar,
MessageBarType,
SelectionMode,
@@ -30,12 +31,12 @@ import {
} from "../../SettingsRenderUtils";
import {
AddMongoIndexProps,
MongoIndexIdField,
MongoIndexTypes,
MongoNotificationType,
getMongoIndexType,
getMongoIndexTypeText,
isIndexTransforming,
MongoIndexIdField,
MongoIndexTypes,
MongoNotificationType,
} from "../../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -63,6 +64,24 @@ interface MongoIndexDisplayProps {
export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
private shouldCheckComponentIsDirty = true;
private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
root: {
selectors: {
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorStatusWarningBackground1)",
border: "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
color: "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
private initialIndexesColumns: IColumn[] = [
{ key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
{ key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
let mongoIndexDisplayProps: MongoIndexDisplayProps;
if (type) {
mongoIndexDisplayProps = {
definition: <Text>{definition}</Text>,
type: <Text>{getMongoIndexTypeText(type)}</Text>,
definition: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{definition}</Text>,
type: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{getMongoIndexTypeText(type)}</Text>,
actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex),
};
}
@@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
indexTransformationProgress={this.props.indexTransformationProgress}
refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
/>
{warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
{warningMessage && (
<MessageBar
messageBarType={MessageBarType.warning}
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
>
{warningMessage}
</MessageBar>
)}
</>
);
};

52
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
View File

@@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = `
onChange={[Function]}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
},
"fieldGroup": {
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
},
"root": {
"paddingLeft": 10,
"width": 210,
@@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = `
selectedKey="Single"
styles={
{
"callout": {
"backgroundColor": "var(--colorNeutralBackground2)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"caretDown": {
"color": "var(--colorNeutralForeground1)",
},
"dropdown": {
"paddingleft": 10,
"paddingLeft": 10,
"width": 202,
},
"dropdownItem": {
"backgroundColor": "transparent",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:focus": {
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"color": "var(--colorNeutralForeground1)",
},
"&:hover": {
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"color": "var(--colorNeutralForeground1)",
},
},
},
"dropdownItemSelected": {
"backgroundColor": "rgba(255, 255, 255, 0.08)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:hover": {
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"color": "var(--colorNeutralForeground1)",
},
},
},
"dropdownItems": {
"backgroundColor": "var(--colorNeutralBackground2)",
},
"dropdownOptionText": {
"color": "var(--colorNeutralForeground1)",
},
"title": {
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
/>

49
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
View File

@@ -1,7 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
</Text>
`;
@@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
<IndexingPolicyRefreshComponent
refreshIndexTransformationProgress={[Function]}
/>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
<StyledLinkBase
href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
style={
{
"color": "var(--colorBrandForeground1)",
}
}
target="_blank"
>
Compound indexes
@@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
{
"root": {
"selectors": {
".ms-DetailsHeader": {
"backgroundColor": "var(--colorNeutralBackground1)",
},
".ms-DetailsHeader-cell": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
":hover": {
"backgroundColor": "var(--colorNeutralBackground1Hover)",
"color": "var(--colorNeutralForeground1)",
},
},
},
".ms-DetailsHeader-cellTitle": {
"color": "var(--colorNeutralForeground1)",
},
".ms-DetailsRow": {
"color": "var(--colorNeutralForeground1)",
},
".ms-DetailsRow-cell": {
"color": "var(--colorNeutralForeground1)",
},
".ms-DetailsRow-cell .ms-TooltipHost": {
"color": "var(--colorNeutralForeground1)",
},
".ms-FocusZone": {
"paddingTop": 0,
},
".ms-TooltipHost": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}

41
src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
View File

@@ -1,6 +1,7 @@
import {
DefaultButton,
FontWeights,
IMessageBarStyles,
Link,
MessageBar,
MessageBarType,
@@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps {
isReadOnly?: boolean; // true: cannot change partition key
}
const darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
root: {
selectors: {
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorStatusWarningBackground1)",
border: "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
color: "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
database,
collection,
@@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
const partitionKeyValue = getPartitionKeyValue();
const textHeadingStyle = {
root: { fontWeight: FontWeights.semibold, fontSize: 16 },
root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
};
const textSubHeadingStyle = {
root: { fontWeight: FontWeights.semibold },
root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
};
const textSubHeadingStyle1 = {
root: { color: "var(--colorNeutralForeground1)" },
};
const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
if (isCurrentJobInProgress(currentJob)) {
const jobName = currentJob?.properties?.jobName;
@@ -168,26 +188,33 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
<Text styles={textSubHeadingStyle}>Partitioning</Text>
</Stack>
<Stack tokens={{ childrenGap: 5 }}>
<Text>{partitionKeyValue}</Text>
<Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
<Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
<Text styles={textSubHeadingStyle1}>
{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
</Text>
</Stack>
</Stack>
</Stack>
{!isReadOnly && (
<>
<MessageBar messageBarType={MessageBarType.warning}>
<MessageBar
messageBarType={MessageBarType.warning}
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={darkThemeMessageBarStyles}
>
To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
the source container for the entire duration of the partition key change process.
<Link
href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
target="_blank"
underline
style={{ color: "var(--colorBrandForeground1)" }}
>
Learn more
</Link>
</MessageBar>
<Text>
<Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
To change the partition key, a new destination container must be created or an existing destination
container selected. Data will then be copied to the destination container.
</Text>

77
src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
View File

@@ -1,4 +1,15 @@
import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
import {
ChoiceGroup,
IChoiceGroupOption,
Label,
Link,
MessageBar,
Stack,
Text,
TextField,
TooltipHost,
mergeStyleSets,
} from "@fluentui/react";
import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext";
@@ -25,6 +36,11 @@ import {
} from "../SettingsUtils";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
const classNames = mergeStyleSets({
hintText: {
color: "var(--colorNeutralForeground1)", // theme-aware
},
});
export interface SubSettingsComponentProps {
collection: ViewModels.Collection;
timeToLive: TtlType;
@@ -185,13 +201,31 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
userContext.apiType === "Mongo" ? (
<MessageBar
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={{ text: { fontSize: 14 } }}
styles={{
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
text: {
fontSize: 14,
color: "var(--colorNeutralForeground1)",
},
icon: {
color: "var(--colorNeutralForeground1)",
},
}}
>
To enable time-to-live (TTL) for your collection/documents,
<Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
create a TTL index
</Link>
.
<Text style={{ color: "var(--colorNeutralForeground1)" }}>
To enable time-to-live (TTL) for your collection/documents,{" "}
<Link
href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live"
target="_blank"
style={{ color: "var(--colorBrandForeground1)" }}
>
create a TTL index
</Link>
.
</Text>
</MessageBar>
) : (
<Stack {...titleAndInputStackProps}>
@@ -319,23 +353,34 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
private getPartitionKeyComponent = (): JSX.Element => (
<Stack {...titleAndInputStackProps}>
{this.getPartitionKeyVisible() && (
<TextField
label={this.partitionKeyName}
disabled
styles={getTextFieldStyles(undefined, undefined)}
defaultValue={this.partitionKeyValue}
/>
<TooltipHost
content={`This ${this.partitionKeyName.toLowerCase()} is used to distribute data across multiple partitions for scalability. The value "${
this.partitionKeyValue
}" determines how documents are partitioned.`}
styles={{
root: {
display: "block",
},
}}
>
<TextField
label={this.partitionKeyName}
disabled
styles={getTextFieldStyles(undefined, undefined)}
defaultValue={this.partitionKeyValue}
/>
</TooltipHost>
)}
{userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
<Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
<Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
)}
{userContext.apiType === "SQL" &&
(this.isHierarchicalPartitionedContainer() ? (
<Text>Hierarchically partitioned container.</Text>
<Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
) : (
<Text>Non-hierarchically partitioned container.</Text>
<Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
))}
</Stack>
);

12
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
View File

@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
return (
<Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
<Label>Throughput Buckets</Label>
<Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
<Stack>
{throughputBuckets?.map((bucket) => (
<Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@@ -77,7 +77,15 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
showValue={false}
label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
styles={{ root: { flex: 2, maxWidth: 400 } }}
styles={{
root: { flex: 2, maxWidth: 400 },
titleLabel: {
color:
bucket.maxThroughputPercentage === 100
? "var(--colorNeutralForeground4)"
: "var(--colorNeutralForeground1)",
},
}}
disabled={bucket.maxThroughputPercentage === 100}
/>
<TextField

172
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@@ -3,6 +3,7 @@ import {
ChoiceGroup,
FontIcon,
IChoiceGroupOption,
IMessageBarStyles,
IProgressIndicatorStyles,
ISeparatorStyles,
Label,
@@ -37,7 +38,6 @@ import {
getUpdateThroughputBeyondInstantLimitMessage,
getUpdateThroughputBeyondSupportLimitMessage,
manualToAutoscaleDisclaimerElement,
messageBarStyles,
noLeftPaddingCheckBoxStyle,
relaxedSpacingStackProps,
saveThroughputWarningMessage,
@@ -101,6 +101,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{ key: "false", text: "Manual" },
];
// Style constants for theme-aware colors and layout
private static readonly TEXT_COLOR_PRIMARY = "var(--colorNeutralForeground1)";
private static readonly TEXT_COLOR_SECONDARY = "var(--colorNeutralForeground2)";
private static readonly TEXT_WIDTH_50 = "50%";
private static readonly TEXT_WIDTH_33 = "33%";
private static readonly LOCALE_EN_US = "en-US";
componentDidMount(): void {
this.onComponentUpdate();
}
@@ -236,12 +243,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
<div>
<Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
<Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
Updated cost per month
</Text>
<Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
<Text style={{ width: "50%" }}>
<Text
style={{
width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
}}
>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
</Text>
<Text style={{ width: "50%" }}>
<Text
style={{
width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
}}
>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
</Text>
</Stack>
@@ -254,12 +273,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
<Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
{newThroughput && newThroughputCostElement()}
<Text style={{ fontWeight: 600 }}>Current cost per month</Text>
<Stack horizontal style={{ marginTop: 5 }}>
<Text style={{ width: "50%" }}>
<Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
Current cost per month
</Text>
<Stack horizontal style={{ marginTop: 5, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
<Text
style={{
width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
}}
>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
</Text>
<Text style={{ width: "50%" }}>
<Text
style={{
width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
}}
>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
</Text>
</Stack>
@@ -269,7 +300,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
};
settingsAndScaleStyle = {
root: {
width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_33,
color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
},
};
private getEstimatedManualSpendElement = (
throughput: number,
serverId: string,
@@ -289,15 +325,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
<div>
<Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
<Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
Updated cost per month
</Text>
<Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
</Text>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
</Text>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
</Text>
</Stack>
@@ -310,15 +348,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
<Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
{newThroughput && newThroughputCostElement()}
<Text style={{ fontWeight: 600 }}>Current cost per month</Text>
<Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
Current cost per month
</Text>
<Stack horizontal style={{ marginTop: 5 }}>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
</Text>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
</Text>
<Text style={{ width: "33%" }}>
<Text style={this.settingsAndScaleStyle.root}>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
</Text>
</Stack>
@@ -381,7 +421,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.overrideWithProvisionedThroughputSettings() && (
<MessageBar
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={messageBarStyles}
styles={this.darkThemeMessageBarStyles}
>
{manualToAutoscaleDisclaimerElement}
</MessageBar>
@@ -407,8 +447,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
return (
<Stack {...titleAndInputStackProps}>
<Label>Storage capacity</Label>
<Text>{capacity}</Text>
<Label style={{ color: "var(--colorNeutralForeground1)" }}>Storage capacity</Label>
<Text style={{ color: "var(--colorNeutralForeground1)" }}>{capacity}</Text>
</Stack>
);
};
@@ -418,7 +458,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{
selectors: {
"::before": {
backgroundColor: "rgb(200, 200, 200)",
backgroundColor: "var(--colorNeutralStroke2)",
height: "3px",
marginTop: "-1px",
},
@@ -457,10 +497,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{
backgroundColor:
this.getCurrentRuRange() === "instant"
? "rgb(0, 120, 212)"
? "var(--colorBrandBackground)"
: this.getCurrentRuRange() === "delayed"
? "rgb(255 216 109)"
: "rgb(251, 217, 203)",
? "var(--colorStatusWarningBackground1)"
: "var(--colorStatusDangerBackground1)",
},
],
});
@@ -497,14 +537,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
<Stack>
<Stack horizontal>
<Stack.Item style={{ width: "34%" }}>
<span>{this.props.minimum.toLocaleString()}</span>
<span>{this.props.minimum.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}</span>
</Stack.Item>
<Stack.Item style={{ width: "66%" }}>
<span style={{ float: "left", transform: "translateX(-50%)" }}>
{this.props.instantMaximumThroughput.toLocaleString()}
{this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
</span>
<span style={{ float: "right" }}>
{this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
</span>
<span style={{ float: "right" }} data-test="soft-allowed-maximum-throughput">
{this.props.softAllowedMaximumThroughput.toLocaleString()}
{this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
</span>
</Stack.Item>
</Stack>
@@ -547,12 +590,41 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
}
};
private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
root: {
marginTop: "5px",
selectors: {
"&.ms-MessageBar--severeWarning": {
backgroundColor: "var(--colorStatusDangerBackground1)",
border: "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorStatusWarningBackground1)",
border: "1px solid var(--colorStatusWarningBorder1)",
},
"&.ms-MessageBar--info": {
backgroundColor: "var(--colorNeutralBackground3)",
border: "1px solid var(--colorNeutralStroke1)",
},
".ms-MessageBar-icon": {
color: "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
private getThroughputWarningMessageBar = (): JSX.Element => {
const isSevereWarning: boolean =
this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
this.currentThroughputValue() < this.props.minimum;
return (
<MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}>
<MessageBar
messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}
styles={this.darkThemeMessageBarStyles}
>
{this.getThroughputWarningMessageText()}
</MessageBar>
);
@@ -565,10 +637,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 1: Minimum RU/s */}
<Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text
variant="small"
style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
>
Minimum RU/s
</Text>
<FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
<FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
</Stack>
<Text
style={{
@@ -583,6 +658,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
color: "var(--colorNeutralForeground1)",
}}
>
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@@ -596,6 +672,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
color: "var(--colorNeutralForeground1)",
}}
>
x 10 =
@@ -604,10 +681,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 3: Maximum RU/s */}
<Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text
variant="small"
style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
>
Maximum RU/s
</Text>
<FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
<FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
</Stack>
<TextField
required
@@ -616,8 +696,25 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
key="auto pilot throughput input"
styles={{
...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline),
fieldGroup: { width: 100, height: 28 },
field: { fontSize: 14, fontWeight: 400 },
fieldGroup: {
width: 100,
height: 28,
backgroundColor: "var(--colorNeutralBackground4)",
},
field: {
fontSize: 14,
fontWeight: 400,
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground4)",
},
root: {
selectors: {
input: {
backgroundColor: "var(--colorNeutralBackground4)",
color: "var(--colorNeutralForeground1)",
},
},
},
}}
disabled={this.overrideWithProvisionedThroughputSettings()}
step={AutoPilotUtils.autoPilotIncrementStep}
@@ -674,7 +771,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
</Stack>
)}
{this.props.isAutoPilotSelected ? (
<Text style={{ marginTop: "40px" }}>
<Text style={{ marginTop: "40px", color: "var(--colorNeutralForeground1)" }}>
Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
<b>
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -687,7 +784,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.state.exceedFreeTierThroughput && (
<MessageBar
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={messageBarStyles}
styles={this.darkThemeMessageBarStyles}
style={{ marginTop: "40px" }}
>
{`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
@@ -696,7 +793,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
</>
)}
{!this.overrideWithProvisionedThroughputSettings() && (
<Text>
<Text style={{ color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
{` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
@@ -737,6 +834,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{warningMessage && (
<MessageBar
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
role="alert"
>
{warningMessage}

500
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

@@ -16,17 +16,35 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
}
}
role="alert"
>
<Text
styles={
{
"root": {
"color": "windowtext",
"fontSize": 14,
styles={
{
"root": {
"marginTop": "5px",
"selectors": {
"&.ms-MessageBar--info": {
"backgroundColor": "var(--colorNeutralBackground3)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"&.ms-MessageBar--severeWarning": {
"backgroundColor": "var(--colorStatusDangerBackground1)",
"border": "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
}
},
}
>
}
>
<Text>
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
</Text>
</StyledMessageBar>
@@ -41,7 +59,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -62,11 +80,27 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
"backgroundColor": "white",
"marginTop": "5px",
},
"text": {
"fontSize": 14,
"selectors": {
"&.ms-MessageBar--info": {
"backgroundColor": "var(--colorNeutralBackground3)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"&.ms-MessageBar--severeWarning": {
"backgroundColor": "var(--colorStatusDangerBackground1)",
"border": "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
@@ -76,7 +110,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -121,15 +155,47 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-wrapper label": {
"color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
"color": "var(--colorNeutralForeground1)",
},
},
},
],
"label": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"selectors": {
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
/>
@@ -185,6 +251,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -197,7 +264,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
iconName="Info"
style={
{
"color": "#666",
"color": "var(--colorNeutralForeground2)",
"fontSize": 12,
}
}
@@ -210,6 +277,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
"backgroundColor": "transparent",
"border": "none",
"boxSizing": "border-box",
"color": "var(--colorNeutralForeground1)",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
@@ -226,6 +294,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
@@ -254,6 +323,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -266,7 +336,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
iconName="Info"
style={
{
"color": "#666",
"color": "var(--colorNeutralForeground2)",
"fontSize": 12,
}
}
@@ -285,13 +355,36 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground4)",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
"fontWeight": 400,
},
"fieldGroup": {
"backgroundColor": "var(--colorNeutralBackground4)",
"height": 28,
"width": 100,
},
"root": {
"selectors": {
"input": {
"backgroundColor": "var(--colorNeutralBackground4)",
"color": "var(--colorNeutralForeground1)",
},
},
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"suffix": {
"backgroundColor": "var(--colorNeutralBackground2)",
"border": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
type="number"
@@ -333,6 +426,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
>
5,000
</span>
<span
style={
{
"float": "right",
}
}
>
1,000,000
</span>
<span
data-test="soft-allowed-maximum-throughput"
style={
@@ -352,7 +454,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
{
"progressBar": [
{
"backgroundColor": "rgb(251, 217, 203)",
"backgroundColor": "var(--colorStatusDangerBackground1)",
},
],
}
@@ -376,7 +478,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -404,7 +506,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -421,12 +523,39 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
</Stack>
<StyledMessageBar
messageBarType={3}
styles={
{
"root": {
"marginTop": "5px",
"selectors": {
"&.ms-MessageBar--info": {
"backgroundColor": "var(--colorNeutralBackground3)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"&.ms-MessageBar--severeWarning": {
"backgroundColor": "var(--colorStatusDangerBackground1)",
"border": "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>
<Text
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -447,6 +576,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": "40px",
}
}
@@ -478,10 +608,22 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
}
}
>
<StyledLabelBase>
<StyledLabelBase
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Storage capacity
</StyledLabelBase>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Unlimited
</Text>
</Stack>
@@ -500,6 +642,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -522,6 +665,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -540,6 +684,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "50%",
}
}
@@ -552,6 +697,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "50%",
}
}
@@ -566,6 +712,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -576,6 +723,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
horizontal={true}
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": 5,
}
}
@@ -583,6 +731,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "50%",
}
}
@@ -595,6 +744,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "50%",
}
}
@@ -609,6 +759,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"marginTop": 15,
}
@@ -642,6 +793,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": 15,
}
}
@@ -676,7 +828,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -717,15 +869,47 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-wrapper label": {
"color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
"color": "var(--colorNeutralForeground1)",
},
},
},
],
"label": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"selectors": {
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
/>
@@ -765,17 +949,53 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
step={100}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
":disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
},
"fieldGroup": {
"borderColor": "",
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground2)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
},
"input#autopilotInput": {
"backgroundColor": "var(--colorNeutralBackground4)",
"color": "var(--colorNeutralForeground1)",
},
"input:disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"suffix": {
"backgroundColor": "var(--colorNeutralBackground2)",
"border": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
type="number"
@@ -814,6 +1034,15 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
>
5,000
</span>
<span
style={
{
"float": "right",
}
}
>
1,000,000
</span>
<span
data-test="soft-allowed-maximum-throughput"
style={
@@ -833,7 +1062,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
{
"progressBar": [
{
"backgroundColor": "rgb(251, 217, 203)",
"backgroundColor": "var(--colorStatusDangerBackground1)",
},
],
}
@@ -857,7 +1086,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -885,7 +1114,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -902,12 +1131,39 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
</Stack>
<StyledMessageBar
messageBarType={3}
styles={
{
"root": {
"marginTop": "5px",
"selectors": {
"&.ms-MessageBar--info": {
"backgroundColor": "var(--colorNeutralBackground3)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"&.ms-MessageBar--severeWarning": {
"backgroundColor": "var(--colorStatusDangerBackground1)",
"border": "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>
<Text
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -925,7 +1181,13 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
</Text>
</StyledMessageBar>
</Stack>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Estimate your required RU/s with
<StyledLinkBase
href="https://cosmos.azure.com/capacitycalculator/"
@@ -969,10 +1231,22 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
}
}
>
<StyledLabelBase>
<StyledLabelBase
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Storage capacity
</StyledLabelBase>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Unlimited
</Text>
</Stack>
@@ -991,6 +1265,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -1012,6 +1287,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -1029,6 +1305,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1041,6 +1318,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1053,6 +1331,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1067,6 +1346,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"marginTop": 15,
}
@@ -1099,6 +1379,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": 15,
}
}
@@ -1133,7 +1414,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -1174,15 +1455,47 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-wrapper label": {
"color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
"color": "var(--colorNeutralForeground1)",
},
},
},
],
"label": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"selectors": {
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
/>
@@ -1222,17 +1535,53 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
step={100}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
":disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
},
"fieldGroup": {
"borderColor": "",
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground2)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
},
"input#autopilotInput": {
"backgroundColor": "var(--colorNeutralBackground4)",
"color": "var(--colorNeutralForeground1)",
},
"input:disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
"suffix": {
"backgroundColor": "var(--colorNeutralBackground2)",
"border": "1px solid var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
type="number"
@@ -1271,6 +1620,15 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
>
5,000
</span>
<span
style={
{
"float": "right",
}
}
>
1,000,000
</span>
<span
data-test="soft-allowed-maximum-throughput"
style={
@@ -1290,7 +1648,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
{
"progressBar": [
{
"backgroundColor": "rgb(251, 217, 203)",
"backgroundColor": "var(--colorStatusDangerBackground1)",
},
],
}
@@ -1314,7 +1672,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -1342,7 +1700,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
{
"selectors": {
"::before": {
"backgroundColor": "rgb(200, 200, 200)",
"backgroundColor": "var(--colorNeutralStroke2)",
"height": "3px",
"marginTop": "-1px",
},
@@ -1359,12 +1717,39 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
</Stack>
<StyledMessageBar
messageBarType={3}
styles={
{
"root": {
"marginTop": "5px",
"selectors": {
"&.ms-MessageBar--info": {
"backgroundColor": "var(--colorNeutralBackground3)",
"border": "1px solid var(--colorNeutralStroke1)",
},
"&.ms-MessageBar--severeWarning": {
"backgroundColor": "var(--colorStatusDangerBackground1)",
"border": "1px solid var(--colorStatusDangerBorder1)",
},
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>
<Text
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -1382,7 +1767,13 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
</Text>
</StyledMessageBar>
</Stack>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Estimate your required RU/s with
<StyledLinkBase
href="https://cosmos.azure.com/capacitycalculator/"
@@ -1409,10 +1800,22 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
}
}
>
<StyledLabelBase>
<StyledLabelBase
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Storage capacity
</StyledLabelBase>
<Text>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Unlimited
</Text>
</Stack>
@@ -1431,6 +1834,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -1452,6 +1856,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -1469,6 +1874,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1481,6 +1887,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1493,6 +1900,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"width": "33%",
}
}
@@ -1507,6 +1915,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"marginTop": 15,
}
@@ -1539,6 +1948,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": 15,
}
}

6
src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
View File

@@ -1,5 +1,5 @@
import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
import * as React from "react";
import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
export interface ToolTipLabelComponentProps {
@@ -14,7 +14,9 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
return (
<>
<Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
{this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
{this.props.label && (
<Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>{this.props.label}</Text>
)}
{this.props.toolTipElement && (
<TooltipHost
content={this.props.toolTipElement}

1
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
View File

@@ -11,6 +11,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginBottom": "10px",
"marginLeft": "30px",
}

130
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap
View File

@@ -37,15 +37,47 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-wrapper label": {
"color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
"color": "var(--colorNeutralForeground1)",
},
},
},
],
"label": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"selectors": {
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
/>
@@ -56,17 +88,44 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
onRenderLabel={[Function]}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
":disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
},
"fieldGroup": {
"borderColor": "",
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground2)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
},
"input:disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
value=""
@@ -111,15 +170,47 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-wrapper label": {
"color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
"color": "var(--colorNeutralForeground1)",
},
},
},
],
"label": {
"color": "var(--colorNeutralForeground1)",
},
"root": {
"selectors": {
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
/>
@@ -130,17 +221,44 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
onRenderLabel={[Function]}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
":disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
},
"fieldGroup": {
"borderColor": "",
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
"backgroundColor": "var(--colorNeutralBackground2)",
"borderColor": "var(--colorNeutralStroke1)",
"color": "var(--colorNeutralForeground2)",
},
"input": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground1)",
},
"input:disabled": {
"backgroundColor": "var(--colorNeutralBackground2)",
"color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
value=""

84
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap
View File

@@ -26,6 +26,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 16,
"fontWeight": 600,
},
@@ -54,6 +55,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
},
}
@@ -66,6 +68,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
},
}
@@ -81,26 +84,79 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
}
}
>
<Text />
<Text>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
/>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
>
Non-hierarchical
</Text>
</Stack>
</Stack>
</Stack>
<StyledMessageBar
messageBarIconProps={
{
"className": "messageBarWarningIcon",
"iconName": "WarningSolid",
}
}
messageBarType={5}
styles={
{
"root": {
"selectors": {
"&.ms-MessageBar--warning": {
"backgroundColor": "var(--colorStatusWarningBackground1)",
"border": "1px solid var(--colorStatusWarningBorder1)",
},
".ms-MessageBar-icon": {
"color": "var(--colorNeutralForeground1)",
},
".ms-MessageBar-text": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>
To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process.
<StyledLinkBase
href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
style={
{
"color": "var(--colorBrandForeground1)",
}
}
target="_blank"
underline={true}
>
Learn more
</StyledLinkBase>
</StyledMessageBar>
<Text>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
>
To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
</Text>
<CustomizedPrimaryButton
@@ -158,6 +214,7 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
},
}
@@ -170,6 +227,7 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
},
}
@@ -185,8 +243,24 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
}
}
>
<Text />
<Text>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
/>
<Text
styles={
{
"root": {
"color": "var(--colorNeutralForeground1)",
},
}
}
>
Non-hierarchical
</Text>
</Stack>

1513
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

1
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
View File

@@ -14,6 +14,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}