random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

command ar items fixed

Browse Source
This commit is contained in:
Sakshi Gupta 2025-09-17 17:46:00 +05:30
parent 63c7aaa029
commit c08e80670e
3 changed files with 163 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -166,8 +166,19 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
};
export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
text: { fontSize: 14 },
root: {
marginTop: "5px",
backgroundColor: "var(--colorNeutralBackground1)",
selectors: {
'&.ms-MessageBar--severeWarning': {
backgroundColor: "var(--colorNeutralBackground4)",
},
'&.ms-MessageBar--warning': {
backgroundColor: "var(--colorNeutralBackground3)",
}
}
},
text: { fontSize: 14 }
};
export const throughputUnit = "RU/s";
@ -509,20 +520,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
height: 25,
width: 300,
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
backgroundColor: "var(--colorNeutralBackground3)",
selectors: {
":disabled": {
backgroundColor: "var(--colorNeutralBackground1)",
borderColor: StyleConstants.BaseMediumHigh,
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground3)",
"input": {
color: "var(--colorNeutralForeground1)",
},
"input#autopilotInput": {
backgroundColor: "var(--colorNeutralBackground4)",
color: "var(--colorNeutralForeground1)",
},
},
field: {
color: "var(--colorNeutralForeground1)",
},
},
field: {
color: "var(--colorNeutralForeground1)",
},
subComponentStyles: {
label: {
root: {
@ -540,6 +555,25 @@ export const getChoiceGroupStyles = (
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: {
@ -556,6 +590,15 @@ export const getChoiceGroupStyles = (
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",
columnGap: isHorizontal ? "30px" : "default",

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

@ -3,6 +3,7 @@ import {
ChoiceGroup,
FontIcon,
IChoiceGroupOption,
IMessageBarStyles,
IProgressIndicatorStyles,
ISeparatorStyles,
Label,
@ -37,11 +38,10 @@ import {
getUpdateThroughputBeyondInstantLimitMessage,
getUpdateThroughputBeyondSupportLimitMessage,
manualToAutoscaleDisclaimerElement,
messageBarStyles,
noLeftPaddingCheckBoxStyle,
relaxedSpacingStackProps,
saveThroughputWarningMessage,
titleAndInputStackProps,
titleAndInputStackProps
} from "../../SettingsRenderUtils";
import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
@ -383,7 +383,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.overrideWithProvisionedThroughputSettings() && (
<MessageBar
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={messageBarStyles}
styles={this.darkThemeMessageBarStyles}
>
{manualToAutoscaleDisclaimerElement}
</MessageBar>
@ -420,7 +420,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{
selectors: {
"::before": {
backgroundColor: "rgb(200, 200, 200)",
backgroundColor: "var(--colorNeutralStroke2)",
height: "3px",
marginTop: "-1px",
},
@ -459,10 +459,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)",
},
],
});
@ -547,12 +547,37 @@ 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-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 +590,10 @@ 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 +608,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
color: "var(--colorNeutralForeground1)",
}}
>
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@ -596,6 +622,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
color: "var(--colorNeutralForeground1)",
}}
>
x 10 =
@ -604,10 +631,10 @@ 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 +643,26 @@ 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}
@ -683,7 +728,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.`}
@ -733,6 +778,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{warningMessage && (
<MessageBar
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
role="alert"
>
{warningMessage}

63
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
View File

@ -39,6 +39,28 @@ export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
const useStyles = makeStyles({
commandBarContainer: {
borderBottom: "1px solid var(--colorNeutralStroke1)",
// backgroundColor: "var(--colorNeutralBackground1)",
},
toolbarButton: {
backgroundColor: "transparent",
"&:hover": {
backgroundColor: "var(--colorNeutralBackground2)",
},
"&:active": {
backgroundColor: "var(--colorNeutralBackground3)",
},
},
buttonIcon: {
width: "16px",
height: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
"& img": {
width: "100%",
height: "100%",
objectFit: "contain",
},
},
});
@ -47,7 +69,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
const buttons = useCommandBar((state) => state.contextButtons);
const isHidden = useCommandBar((state) => state.isHidden);
const { targetDocument } = useFluent();
// const isDarkMode = targetDocument?.body.classList.contains("isDarkMode");
const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
const styles = useStyles();
@ -107,20 +128,38 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
);
}
const rootStyle = isFabric()
? {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
padding: "2px 8px 0px 8px",
const rootStyle = {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
padding: isFabric() ? "2px 8px 0px 8px" : undefined
},
button: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)",
},
":active": {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
}
}
: {
root: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
};
},
menuIcon: {
color: "var(--colorNeutralForeground1)",
},
item: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
link: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
}
};
const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);