random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +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

4
src/Explorer/Controls/Settings/SettingsComponent.less
View File

@@ -4,6 +4,8 @@
height: 100%;
overflow-y: auto;
width: 100%;
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.settingsV2ToolTip {
@@ -23,6 +25,8 @@
overflow-y: auto;
width: 100%;
font-family: @DataExplorerFont;
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.settingsV2Editor {

116
src/Explorer/Controls/Settings/SettingsComponent.tsx
View File

@@ -1,4 +1,4 @@
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
import { sendMessage } from "Common/MessageHandler";
import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
import {
@@ -1477,31 +1477,111 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
selectedKey: SettingsV2TabTypes[this.state.selectedTab],
};
const pivotItems = tabs.map((tab) => {
const pivotItemProps: IPivotItemProps = {
itemKey: SettingsV2TabTypes[tab.tab],
style: { marginTop: 20 },
headerText: getTabTitle(tab.tab),
headerButtonProps: {
"data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
const pivotStyles = {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
"& .ms-Pivot-link": {
color: "var(--colorNeutralForeground1)",
},
"& .ms-Pivot-link.is-selected::before": {
backgroundColor: "var(--colorCompoundBrandBackground)",
},
},
};
},
link: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
"&:hover": {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
"&:active": {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
'&[aria-selected="true"]': {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
"&:hover": {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
"&:active": {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
},
},
},
},
return (
<PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
{tab.content}
</PivotItem>
);
});
itemContainer: {
// padding: '20px 24px',
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
};
const contentStyles = {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
// padding: '20px 24px'
},
};
return (
<div className="settingsV2MainContainer">
<div
className="settingsV2MainContainer"
style={
{
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
position: "relative",
} as React.CSSProperties
}
>
{this.shouldShowKeyspaceSharedThroughputMessage() && (
<div>This table shared throughput is configured at the keyspace</div>
)}
<div className="settingsV2TabsContainer">
<Pivot {...pivotProps}>{pivotItems}</Pivot>
<div
className="settingsV2TabsContainer"
style={
{
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
position: "relative",
padding: "20px 24px",
} as React.CSSProperties
}
>
<Pivot {...pivotProps} styles={pivotStyles}>
{tabs.map((tab) => {
const pivotItemProps: IPivotItemProps = {
itemKey: SettingsV2TabTypes[tab.tab],
style: {
marginTop: 20,
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
headerText: getTabTitle(tab.tab),
headerButtonProps: {
"data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
},
};
return (
<PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
<Stack styles={contentStyles}>{tab.content}</Stack>
</PivotItem>
);
})}
</Pivot>
</div>
</div>
);

226
src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
View File

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: {
@@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = {
root: { paddingLeft: 10, width: 210 },
fieldGroup: {
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
},
field: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground2)",
},
};
export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
export const shortWidthDropDownStyles: Partial<IDropdownStyles> = {
dropdown: { paddingLeft: 10, width: 202 },
title: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
borderColor: "var(--colorNeutralStroke1)",
},
caretDown: {
color: "var(--colorNeutralForeground1)",
},
callout: {
backgroundColor: "var(--colorNeutralBackground2)",
border: "1px solid var(--colorNeutralStroke1)",
},
dropdownItems: {
backgroundColor: "var(--colorNeutralBackground2)",
},
dropdownItem: {
backgroundColor: "transparent",
color: "var(--colorNeutralForeground1)",
selectors: {
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.1)",
color: "var(--colorNeutralForeground1)",
},
"&:focus": {
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)",
},
},
},
dropdownOptionText: {
color: "var(--colorNeutralForeground1)",
},
};
export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
background: "transparent",
backgroundColor: "var(--colorNeutralBackground1Hover)",
color: "var(--colorNeutralForeground1)",
},
":hover .ms-DetailsRow-cell": {
backgroundColor: "var(--colorNeutralBackground1Hover)",
color: "var(--colorNeutralForeground1)",
},
"&.ms-DetailsRow": {
backgroundColor: "var(--colorNeutralBackground1)",
},
},
},
cell: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
backgroundColor: "var(--colorNeutralBackground1Hover)",
color: "var(--colorNeutralForeground1)",
},
},
},
@@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
root: {
color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
background: "transparent",
background: "var(--colorNeutralBackground1Hover)",
color: "var(--colorNeutralForeground1)",
},
},
},
@@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial<IDetailsListStyles> = {
".ms-FocusZone": {
paddingTop: 0,
},
".ms-DetailsHeader": {
backgroundColor: "var(--colorNeutralBackground1)",
},
".ms-DetailsHeader-cell": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground1)",
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)",
},
// Tooltip styling for cells
".ms-TooltipHost": {
color: "var(--colorNeutralForeground1)",
},
".ms-DetailsRow-cell .ms-TooltipHost": {
color: "var(--colorNeutralForeground1)",
},
},
},
};
@@ -166,7 +271,18 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
};
export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: "white" },
root: {
marginTop: "5px",
backgroundColor: "var(--colorNeutralBackground1)",
selectors: {
"&.ms-MessageBar--severeWarning": {
backgroundColor: "var(--colorNeutralBackground4)",
},
"&.ms-MessageBar--warning": {
backgroundColor: "var(--colorNeutralBackground3)",
},
},
},
text: { fontSize: 14 },
};
@@ -222,9 +338,11 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return (
<Stack>
<Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
<Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
{costElement}
<Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
<Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
How we calculate this
</Text>
<Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
<span>
{numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -238,7 +356,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU
</span>
</Stack>
<Text style={{ marginTop: 15 }}>
<Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
<em>*{estimatedCostDisclaimer}</em>
</Text>
</Stack>
@@ -285,7 +403,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
return (
<Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
<Text id="updateThroughputDelayedApplyWarningMessage">
Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
with this value and wait until the scale-up is completed.
@@ -303,7 +421,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
There are three options you can choose from to proceed:
</Text>
<ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
<ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
<li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
{instantMaximumThroughput < maximumThroughput && (
<li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -339,7 +457,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
};
export const saveThroughputWarningMessage: JSX.Element = (
<Text styles={infoAndToolTipTextStyle}>
<Text>
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
before saving your changes
</Text>
@@ -459,9 +577,13 @@ export const changeFeedPolicyToolTip: JSX.Element = (
);
export const mongoIndexingPolicyDisclaimer: JSX.Element = (
<Text>
<Text style={{ color: "var(--colorNeutralForeground1)" }}>
For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
<Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
<Link
href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
target="_blank"
style={{ color: "var(--colorBrandForeground1)" }}
>
{` Compound indexes `}
</Link>
are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
@@ -470,7 +592,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
);
export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
<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>
@@ -519,14 +641,50 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
fieldGroup: {
height: 25,
width: 300,
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)",
selectors: {
":disabled": {
backgroundColor: StyleConstants.BaseMedium,
borderColor: StyleConstants.BaseMediumHigh,
backgroundColor: "var(--colorNeutralBackground2)",
borderColor: "var(--colorNeutralStroke1)",
color: "var(--colorNeutralForeground2)",
},
input: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
"input#autopilotInput": {
backgroundColor: "var(--colorNeutralBackground4)",
color: "var(--colorNeutralForeground1)",
},
},
},
field: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground2)",
},
},
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
suffix: {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
border: "1px solid var(--colorNeutralStroke1)",
},
});
export const getChoiceGroupStyles = (
@@ -534,6 +692,28 @@ export const getChoiceGroupStyles = (
baseline: isDirtyTypes,
isHorizontal?: boolean,
): Partial<IChoiceGroupStyles> => ({
label: {
color: "var(--colorNeutralForeground1)",
},
root: {
selectors: {
".ms-ChoiceFieldLabel": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-innerField": {
color: "var(--colorNeutralForeground1)",
},
},
},
flexContainer: [
{
selectors: {
@@ -548,6 +728,16 @@ export const getChoiceGroupStyles = (
fontSize: 14,
fontFamily: StyleConstants.DataExplorerFont,
padding: "2px 5px",
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceFieldLabel:hover": {
color: "var(--colorNeutralForeground1)",
},
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
color: "var(--colorNeutralForeground1)",
},
},
display: isHorizontal ? "inline-flex" : "default",

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,
}
}

868
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@@ -3,13 +3,76 @@
exports[`SettingsComponent renders 1`] = `
<div
className="settingsV2MainContainer"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"position": "relative",
}
}
>
<div
className="settingsV2TabsContainer"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"padding": "20px 24px",
"position": "relative",
}
}
>
<StyledPivot
onLinkClick={[Function]}
selectedKey="ScaleTab"
styles={
{
"itemContainer": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"link": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:active": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"&:hover": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"&[aria-selected="true"]": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"&:active": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"&:hover": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
},
},
},
},
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"selectors": {
"& .ms-Pivot-link": {
"color": "var(--colorNeutralForeground1)",
},
"& .ms-Pivot-link.is-selected::before": {
"backgroundColor": "var(--colorCompoundBrandBackground)",
},
},
},
}
}
>
<PivotItem
headerButtonProps={
@@ -22,89 +85,102 @@ exports[`SettingsComponent renders 1`] = `
key="ScaleTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<ScaleComponent
collection={
<Stack
styles={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
isAutoPilotSelected={false}
isFixedContainer={false}
isGlobalSecondaryIndex={true}
onAutoPilotSelected={[Function]}
onMaxAutoPilotThroughputChange={[Function]}
onScaleDiscardableChange={[Function]}
onScaleSaveableChange={[Function]}
onThroughputChange={[Function]}
throughput={10000}
throughputBaseline={10000}
wasAutopilotOriginallySet={false}
/>
>
<ScaleComponent
collection={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
isAutoPilotSelected={false}
isFixedContainer={false}
isGlobalSecondaryIndex={true}
onAutoPilotSelected={[Function]}
onMaxAutoPilotThroughputChange={[Function]}
onScaleDiscardableChange={[Function]}
onScaleSaveableChange={[Function]}
onThroughputChange={[Function]}
throughput={10000}
throughputBaseline={10000}
wasAutopilotOriginallySet={false}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -117,98 +193,111 @@ exports[`SettingsComponent renders 1`] = `
key="SubSettingsTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<SubSettingsComponent
changeFeedPolicy="Off"
changeFeedPolicyBaseline="Off"
changeFeedPolicyVisible={false}
collection={
<Stack
styles={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
displayedTtlSeconds="5"
geospatialConfigType="Geometry"
geospatialConfigTypeBaseline="Geometry"
isAnalyticalStorageEnabled={false}
onAnalyticalStorageTtlSecondsChange={[Function]}
onAnalyticalStorageTtlSelectionChange={[Function]}
onChangeFeedPolicyChange={[Function]}
onDisplayedTtlSecondsChange={[Function]}
onGeoSpatialConfigTypeChange={[Function]}
onSubSettingsDiscardableChange={[Function]}
onSubSettingsSaveableChange={[Function]}
onTimeToLiveSecondsChange={[Function]}
onTtlChange={[Function]}
timeToLive="on"
timeToLiveBaseline="on"
timeToLiveSeconds={5}
timeToLiveSecondsBaseline={5}
/>
>
<SubSettingsComponent
changeFeedPolicy="Off"
changeFeedPolicyBaseline="Off"
changeFeedPolicyVisible={false}
collection={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
displayedTtlSeconds="5"
geospatialConfigType="Geometry"
geospatialConfigTypeBaseline="Geometry"
isAnalyticalStorageEnabled={false}
onAnalyticalStorageTtlSecondsChange={[Function]}
onAnalyticalStorageTtlSelectionChange={[Function]}
onChangeFeedPolicyChange={[Function]}
onDisplayedTtlSecondsChange={[Function]}
onGeoSpatialConfigTypeChange={[Function]}
onSubSettingsDiscardableChange={[Function]}
onSubSettingsSaveableChange={[Function]}
onTimeToLiveSecondsChange={[Function]}
onTtlChange={[Function]}
timeToLive="on"
timeToLiveBaseline="on"
timeToLiveSeconds={5}
timeToLiveSecondsBaseline={5}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -221,25 +310,38 @@ exports[`SettingsComponent renders 1`] = `
key="ContainerVectorPolicyTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<ContainerPolicyComponent
fullTextPolicy={{}}
fullTextPolicyBaseline={{}}
isFullTextSearchEnabled={true}
isGlobalSecondaryIndex={true}
isVectorSearchEnabled={false}
onFullTextPolicyChange={[Function]}
onFullTextPolicyDirtyChange={[Function]}
onVectorEmbeddingPolicyChange={[Function]}
onVectorEmbeddingPolicyDirtyChange={[Function]}
resetShouldDiscardContainerPolicyChange={[Function]}
shouldDiscardContainerPolicies={false}
vectorEmbeddingPolicy={{}}
vectorEmbeddingPolicyBaseline={{}}
/>
<Stack
styles={
{
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
>
<ContainerPolicyComponent
fullTextPolicy={{}}
fullTextPolicyBaseline={{}}
isFullTextSearchEnabled={true}
isGlobalSecondaryIndex={true}
isVectorSearchEnabled={false}
onFullTextPolicyChange={[Function]}
onFullTextPolicyDirtyChange={[Function]}
onVectorEmbeddingPolicyChange={[Function]}
onVectorEmbeddingPolicyDirtyChange={[Function]}
resetShouldDiscardContainerPolicyChange={[Function]}
shouldDiscardContainerPolicies={false}
vectorEmbeddingPolicy={{}}
vectorEmbeddingPolicyBaseline={{}}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -252,35 +354,48 @@ exports[`SettingsComponent renders 1`] = `
key="IndexingPolicyTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<IndexingPolicyComponent
indexingPolicyContent={
<Stack
styles={
{
"automatic": true,
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
indexingPolicyContentBaseline={
{
"automatic": true,
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
>
<IndexingPolicyComponent
indexingPolicyContent={
{
"automatic": true,
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
}
}
}
isVectorSearchEnabled={false}
logIndexingPolicySuccessMessage={[Function]}
onIndexingPolicyContentChange={[Function]}
onIndexingPolicyDirtyChange={[Function]}
refreshIndexTransformationProgress={[Function]}
resetShouldDiscardIndexingPolicy={[Function]}
shouldDiscardIndexingPolicy={false}
/>
indexingPolicyContentBaseline={
{
"automatic": true,
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
}
}
isVectorSearchEnabled={false}
logIndexingPolicySuccessMessage={[Function]}
onIndexingPolicyContentChange={[Function]}
onIndexingPolicyDirtyChange={[Function]}
refreshIndexTransformationProgress={[Function]}
resetShouldDiscardIndexingPolicy={[Function]}
shouldDiscardIndexingPolicy={false}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -293,18 +408,91 @@ exports[`SettingsComponent renders 1`] = `
key="PartitionKeyTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<PartitionKeyComponent
collection={
<Stack
styles={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
>
<PartitionKeyComponent
collection={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
explorer={
Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
@@ -328,71 +516,11 @@ exports[`SettingsComponent renders 1`] = `
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
}
explorer={
Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
}
}
isReadOnly={false}
/>
isReadOnly={false}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -405,33 +533,46 @@ exports[`SettingsComponent renders 1`] = `
key="ComputedPropertiesTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<ComputedPropertiesComponent
computedPropertiesContent={
[
{
"name": "queryName",
"query": "query",
<Stack
styles={
{
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
]
}
}
computedPropertiesContentBaseline={
[
{
"name": "queryName",
"query": "query",
},
]
}
logComputedPropertiesSuccessMessage={[Function]}
onComputedPropertiesContentChange={[Function]}
onComputedPropertiesDirtyChange={[Function]}
resetShouldDiscardComputedProperties={[Function]}
shouldDiscardComputedProperties={false}
/>
>
<ComputedPropertiesComponent
computedPropertiesContent={
[
{
"name": "queryName",
"query": "query",
},
]
}
computedPropertiesContentBaseline={
[
{
"name": "queryName",
"query": "query",
},
]
}
logComputedPropertiesSuccessMessage={[Function]}
onComputedPropertiesContentChange={[Function]}
onComputedPropertiesDirtyChange={[Function]}
resetShouldDiscardComputedProperties={[Function]}
shouldDiscardComputedProperties={false}
/>
</Stack>
</PivotItem>
<PivotItem
headerButtonProps={
@@ -444,18 +585,91 @@ exports[`SettingsComponent renders 1`] = `
key="GlobalSecondaryIndexTab"
style={
{
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
"marginTop": 20,
}
}
>
<GlobalSecondaryIndexComponent
collection={
<Stack
styles={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"root": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
}
}
>
<GlobalSecondaryIndexComponent
collection={
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
explorer={
Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
@@ -479,70 +693,10 @@ exports[`SettingsComponent renders 1`] = `
"copyNotebook": [Function],
"parameters": [Function],
},
},
"dataMaskingPolicy": [Function],
"databaseId": "test",
"defaultTtl": [Function],
"fullTextPolicy": [Function],
"geospatialConfig": [Function],
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
"materializedViewDefinition": [Function],
"materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
"paths": [],
"version": 2,
},
"partitionKeyProperties": [
"partitionKey",
],
"rawDataModel": {
"uniqueKeyPolicy": {
"uniqueKeys": [
{
"paths": [
"/id",
],
},
],
},
},
"readSettings": [Function],
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
}
explorer={
Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
},
},
"provideFeedbackEmail": [Function],
"queriesClient": QueriesClient {
"container": [Circular],
},
"refreshNotebookList": [Function],
"resourceTree": ResourceTreeAdapter {
"container": [Circular],
"copyNotebook": [Function],
"parameters": [Function],
},
}
}
/>
/>
</Stack>
</PivotItem>
</StyledPivot>
</div>

42
src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
View File

@@ -6,6 +6,7 @@ exports[`SettingsUtils functions render 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
}
}
@@ -15,6 +16,7 @@ exports[`SettingsUtils functions render 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"marginTop": 15,
}
@@ -50,6 +52,7 @@ exports[`SettingsUtils functions render 1`] = `
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
"marginTop": 15,
}
}
@@ -65,7 +68,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -83,7 +86,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -104,7 +107,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -116,7 +119,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -136,7 +139,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -152,7 +155,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -167,7 +170,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -181,7 +184,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -193,7 +196,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -213,7 +216,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -221,10 +224,21 @@ exports[`SettingsUtils functions render 1`] = `
>
Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
</Text>
<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
@@ -256,7 +270,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -272,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -289,7 +303,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
"color": "windowtext",
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}