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

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

@ -3,6 +3,7 @@ import {
ChoiceGroup, ChoiceGroup,
FontIcon, FontIcon,
IChoiceGroupOption, IChoiceGroupOption,
IMessageBarStyles,
IProgressIndicatorStyles, IProgressIndicatorStyles,
ISeparatorStyles, ISeparatorStyles,
Label, Label,
@ -37,11 +38,10 @@ import {
getUpdateThroughputBeyondInstantLimitMessage, getUpdateThroughputBeyondInstantLimitMessage,
getUpdateThroughputBeyondSupportLimitMessage, getUpdateThroughputBeyondSupportLimitMessage,
manualToAutoscaleDisclaimerElement, manualToAutoscaleDisclaimerElement,
messageBarStyles,
noLeftPaddingCheckBoxStyle, noLeftPaddingCheckBoxStyle,
relaxedSpacingStackProps, relaxedSpacingStackProps,
saveThroughputWarningMessage, saveThroughputWarningMessage,
titleAndInputStackProps, titleAndInputStackProps
} from "../../SettingsRenderUtils"; } from "../../SettingsRenderUtils";
import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils"; import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
import { ToolTipLabelComponent } from "../ToolTipLabelComponent"; import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
@ -383,7 +383,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.overrideWithProvisionedThroughputSettings() && ( {this.overrideWithProvisionedThroughputSettings() && (
<MessageBar <MessageBar
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }} messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={messageBarStyles} styles={this.darkThemeMessageBarStyles}
> >
{manualToAutoscaleDisclaimerElement} {manualToAutoscaleDisclaimerElement}
</MessageBar> </MessageBar>
@ -420,7 +420,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{ {
selectors: { selectors: {
"::before": { "::before": {
backgroundColor: "rgb(200, 200, 200)", backgroundColor: "var(--colorNeutralStroke2)",
height: "3px", height: "3px",
marginTop: "-1px", marginTop: "-1px",
}, },
@ -459,10 +459,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{ {
backgroundColor: backgroundColor:
this.getCurrentRuRange() === "instant" this.getCurrentRuRange() === "instant"
? "rgb(0, 120, 212)" ? "var(--colorBrandBackground)"
: this.getCurrentRuRange() === "delayed" : this.getCurrentRuRange() === "delayed"
? "rgb(255 216 109)" ? "var(--colorStatusWarningBackground1)"
: "rgb(251, 217, 203)", : "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 => { private getThroughputWarningMessageBar = (): JSX.Element => {
const isSevereWarning: boolean = const isSevereWarning: boolean =
this.currentThroughputValue() > this.props.softAllowedMaximumThroughput || this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
this.currentThroughputValue() < this.props.minimum; this.currentThroughputValue() < this.props.minimum;
return ( return (
<MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}> <MessageBar
messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}
styles={this.darkThemeMessageBarStyles}
>
{this.getThroughputWarningMessageText()} {this.getThroughputWarningMessageText()}
</MessageBar> </MessageBar>
); );
@ -565,10 +590,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 1: Minimum RU/s */} {/* Column 1: Minimum RU/s */}
<Stack tokens={{ childrenGap: 4 }}> <Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" 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 Minimum RU/s
</Text> </Text>
<FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} /> <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
</Stack> </Stack>
<Text <Text
style={{ style={{
@ -583,6 +608,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
boxSizing: "border-box", boxSizing: "border-box",
color: "var(--colorNeutralForeground1)",
}} }}
> >
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@ -596,6 +622,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
fontSize: 12, fontSize: 12,
fontWeight: 400, fontWeight: 400,
paddingBottom: 6, paddingBottom: 6,
color: "var(--colorNeutralForeground1)",
}} }}
> >
x 10 = x 10 =
@ -604,10 +631,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 3: Maximum RU/s */} {/* Column 3: Maximum RU/s */}
<Stack tokens={{ childrenGap: 4 }}> <Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" 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 Maximum RU/s
</Text> </Text>
<FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} /> <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
</Stack> </Stack>
<TextField <TextField
required required
@ -616,8 +643,26 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
key="auto pilot throughput input" key="auto pilot throughput input"
styles={{ styles={{
...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline), ...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline),
fieldGroup: { width: 100, height: 28 }, fieldGroup: {
field: { fontSize: 14, fontWeight: 400 }, 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()} disabled={this.overrideWithProvisionedThroughputSettings()}
step={AutoPilotUtils.autoPilotIncrementStep} step={AutoPilotUtils.autoPilotIncrementStep}
@ -683,7 +728,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.state.exceedFreeTierThroughput && ( {this.state.exceedFreeTierThroughput && (
<MessageBar <MessageBar
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }} messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={messageBarStyles} styles={this.darkThemeMessageBarStyles}
style={{ marginTop: "40px" }} 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.`} {`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 && ( {warningMessage && (
<MessageBar <MessageBar
messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }} messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
styles={this.darkThemeMessageBarStyles}
role="alert" role="alert"
> >
{warningMessage} {warningMessage}

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

@ -39,6 +39,28 @@ export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
const useStyles = makeStyles({ const useStyles = makeStyles({
commandBarContainer: { commandBarContainer: {
borderBottom: "1px solid var(--colorNeutralStroke1)", 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 buttons = useCommandBar((state) => state.contextButtons);
const isHidden = useCommandBar((state) => state.isHidden); const isHidden = useCommandBar((state) => state.isHidden);
const { targetDocument } = useFluent(); const { targetDocument } = useFluent();
// const isDarkMode = targetDocument?.body.classList.contains("isDarkMode");
const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR); const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
const styles = useStyles(); const styles = useStyles();
@ -107,20 +128,38 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
); );
} }
const rootStyle = isFabric() const rootStyle = {
? { root: {
root: { backgroundColor: "var(--colorNeutralBackground1)",
backgroundColor: "var(--colorNeutralBackground1)", color: "var(--colorNeutralForeground1)",
padding: "2px 8px 0px 8px", padding: isFabric() ? "2px 8px 0px 8px" : undefined
},
button: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
backgroundColor: "var(--colorNeutralBackground2)",
color: "var(--colorNeutralForeground1)", color: "var(--colorNeutralForeground1)",
}, },
":active": {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
}
} }
: { },
root: { menuIcon: {
backgroundColor: "var(--colorNeutralBackground1)", color: "var(--colorNeutralForeground1)",
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 allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons); const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);