mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-26 20:31:33 +00:00
Dark theme for Explorer (#2185)
* 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
GitHub
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user