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

6
src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
View File

@@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
if (isAutoscale) {
return (
<Stack style={{ marginBottom: 6 }}>
<Text variant="small">
<Stack style={{ marginBottom: 6, color: "var(--colorNeutralForeground1)" }}>
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
{estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
return (
<Stack style={{ marginBottom: 8 }}>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}

17
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
View File

@@ -10,9 +10,13 @@
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
}
// .throughputInputSpacing{
// color: "var(--colorNeutralForeground1)";
// }
.throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace;
color: "var(--colorNeutralForeground1)";
}
.capacitycalculator-link:focus {
@@ -28,3 +32,16 @@
.deleteQuery:focus::after {
outline: none !important;
}
// Override Fluent UI TextField focus styles
.throughputInputContainer {
:global {
.ms-TextField {
.ms-TextField-fieldGroup {
&:focus-within {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
}
}
}
}
}

32
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@@ -193,7 +193,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal>
<span className="mandatoryStar">*&nbsp;</span>
<Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text
aria-label="Throughput header"
variant="small"
style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
>
{getThroughputLabelText()}
</Text>
<InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@@ -236,14 +240,17 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text style={{ marginTop: -2, fontSize: 12 }}>
<Text style={{ marginTop: -2, fontSize: 12, color: "var(--colorNeutralForeground1)" }}>
Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
of that value.
</Text>
<Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
<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>
<InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@@ -260,6 +267,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "var(--colorNeutralForeground1)",
}}
>
{Math.round(throughput / 10).toString()}
@@ -272,6 +280,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
color: "var(--colorNeutralForeground1)",
}}
>
x 10 =
@@ -279,7 +288,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<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>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -290,7 +302,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
type="number"
styles={{
fieldGroup: { width: 100, height: 27, flexShrink: 0 },
field: { fontSize: 14, fontWeight: 400 },
field: { fontSize: 14, fontWeight: 400, color: "var(--colorNeutralForeground1)" },
}}
onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
step={AutoPilotUtils.autoPilotIncrementStep}
@@ -306,7 +318,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription">
<Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp;
<Link
className="underlinedLink"
@@ -325,7 +337,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{!isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription">
<Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp;
<Link
className="underlinedLink"
@@ -338,7 +350,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
.
</Text>
<Stack horizontal>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
<Text
variant="small"
style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
aria-label="maxRUDescription"
>
{isDatabase ? "Database" : getCollectionName()} Required RU/s
</Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>

23
src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
View File

@@ -31,6 +31,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.1"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -42,6 +43,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -724,6 +726,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"marginTop": -2,
}
@@ -733,6 +736,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-117"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"marginTop": -2,
}
@@ -782,6 +786,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -792,6 +797,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1423,6 +1429,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"alignItems": "center",
"backgroundColor": "transparent",
"border": "none",
"color": "var(--colorNeutralForeground1)",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
@@ -1440,6 +1447,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"alignItems": "center",
"backgroundColor": "transparent",
"border": "none",
"color": "var(--colorNeutralForeground1)",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
@@ -1459,6 +1467,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.1"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
@@ -1470,6 +1479,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-117"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
@@ -1508,6 +1518,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1518,6 +1529,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
"color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -2156,6 +2168,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
styles={
{
"field": {
"color": "var(--colorNeutralForeground1)",
"fontSize": 14,
"fontWeight": 400,
},
@@ -2509,11 +2522,21 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<Text
aria-label="ruDescription"
key=".0:$.$.0"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<span
aria-label="ruDescription"
className="css-110"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Estimate your required RU/s with 
<StyledLinkBase