From 14568b032efc6d02e28b7a67d8264abdd6f3ea82 Mon Sep 17 00:00:00 2001 From: Sakshi Gupta Date: Wed, 30 Apr 2025 15:23:32 +0530 Subject: [PATCH] settings theme changes --- .../Controls/Settings/SettingsComponent.less | 68 +++++------ .../Controls/Settings/SettingsComponent.tsx | 108 +++++++++++++++--- .../Controls/Settings/SettingsRenderUtils.tsx | 28 +++-- .../IndexingPolicyComponent.tsx | 25 ++-- .../PartitionKeyComponent.tsx | 14 ++- .../SubSettingsComponent.tsx | 33 ++++-- .../ThroughputInputAutoPilotV3Component.tsx | 45 ++++---- .../ToolTipLabelComponent.tsx | 4 +- src/Main.tsx | 4 +- 9 files changed, 223 insertions(+), 106 deletions(-) diff --git a/src/Explorer/Controls/Settings/SettingsComponent.less b/src/Explorer/Controls/Settings/SettingsComponent.less index 5eb2b13be..59e7d5008 100644 --- a/src/Explorer/Controls/Settings/SettingsComponent.less +++ b/src/Explorer/Controls/Settings/SettingsComponent.less @@ -1,38 +1,42 @@ -@import "../../../../less/Common/Constants"; +// @import "../../../../less/Common/Constants"; -.settingsV2MainContainer { - height: 100%; - overflow-y: auto; - width: 100%; -} +// .settingsV2MainContainer { +// height: 100%; +// overflow-y: auto; +// width: 100%; +// background-color: var(--colorNeutralBackground1); +// color: var(--colorNeutralForeground1); +// } -.settingsV2ToolTip { - padding: 10px; - font: 12px @DataExplorerFont; - max-width: 300px; -} +// .settingsV2ToolTip { +// padding: 10px; +// font: 12px @DataExplorerFont; +// max-width: 300px; +// } -.autoPilotSelector span { - height: 25px; - font: 14px @DataExplorerFont; -} +// .autoPilotSelector span { +// height: 25px; +// font: 14px @DataExplorerFont; +// } -.settingsV2TabsContainer { - padding: @LargeSpace @LargeSpace 30px @LargeSpace; - height: 100%; - overflow-y: auto; - width: 100%; - font-family: @DataExplorerFont; -} +// .settingsV2TabsContainer { +// padding: @LargeSpace @LargeSpace 30px @LargeSpace; +// height: 100%; +// overflow-y: auto; +// width: 100%; +// font-family: @DataExplorerFont; +// background-color: var(--colorNeutralBackground1); +// color: var(--colorNeutralForeground1); +// } -.settingsV2Editor { - width: 100%; - height: 60vh; -} +// .settingsV2Editor { +// width: 100%; +// height: 60vh; +// } -.settingsV2EditorSpinner { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} +// .settingsV2EditorSpinner { +// position: absolute; +// top: 50%; +// left: 50%; +// transform: translate(-50%, -50%); +// } diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx index 720bef874..7aca73f57 100644 --- a/src/Explorer/Controls/Settings/SettingsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx @@ -1,4 +1,4 @@ -import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react"; +import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react"; import { ComputedPropertiesComponent, ComputedPropertiesComponentProps, @@ -1137,6 +1137,7 @@ export class SettingsComponent extends React.Component { - const pivotItemProps: IPivotItemProps = { - itemKey: SettingsV2TabTypes[tab.tab], - style: { marginTop: 20 }, - headerText: getTabTitle(tab.tab), - }; - - return ( - - {tab.content} - - ); - }); + 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)' + } + } + } + } + }, + + itemContainer: { + // padding: '20px 24px', + backgroundColor: 'var(--colorNeutralBackground1)', + color: 'var(--colorNeutralForeground1)' + } + }; + const contentStyles = { + root: { + backgroundColor: 'var(--colorNeutralBackground1)', + color: 'var(--colorNeutralForeground1)', + // padding: '20px 24px' + } + }; + return ( -
+
{this.shouldShowKeyspaceSharedThroughputMessage() && (
This table shared throughput is configured at the keyspace
)} -
- {pivotItems} +
+ + {tabs.map((tab) => { + const pivotItemProps: IPivotItemProps = { + itemKey: SettingsV2TabTypes[tab.tab], + style: { + marginTop: 20, + backgroundColor: 'var(--colorNeutralBackground1)', + color: 'var(--colorNeutralForeground1)' + }, + headerText: getTabTitle(tab.tab), + }; + + return ( + + + {tab.content} + + + ); + })} +
); diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index 1fe4536f0..7e524c520 100644 --- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx @@ -63,7 +63,7 @@ export interface PriceBreakdown { export type editorType = "indexPolicy" | "computedProperties"; -export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } }; +export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } }; export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = { label: { @@ -166,7 +166,7 @@ export const separatorStyles: Partial = { }; export const messageBarStyles: Partial = { - root: { marginTop: "5px", backgroundColor: "white" }, + root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' }, text: { fontSize: 14 }, }; @@ -214,9 +214,9 @@ export const getEstimatedSpendingElement = ( const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : ""; return ( - Cost estimate* + Cost estimate* {costElement} - How we calculate this + How we calculate this {numberOfRegions} region{numberOfRegions > 1 && s} @@ -230,7 +230,7 @@ export const getEstimatedSpendingElement = ( {priceBreakdown.pricePerRu}/RU - + *{estimatedCostDisclaimer} @@ -272,7 +272,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = ( export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => { return ( - + 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. @@ -290,7 +290,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: -
    +
    1. You can instantly scale up to {instantMaximumThroughput} RU/s.
      2. {instantMaximumThroughput < maximumThroughput && (
    2. You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.
      3. @@ -326,7 +326,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele }; export const saveThroughputWarningMessage: JSX.Element = ( - + Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes @@ -509,11 +509,18 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "", selectors: { ":disabled": { - backgroundColor: StyleConstants.BaseMedium, + backgroundColor:'var(--colorNeutralBackground1)', borderColor: StyleConstants.BaseMediumHigh, }, }, }, + subComponentStyles: { + label: { + root: { + color: 'var(--colorNeutralForeground1)' + }, + }, + }, }); export const getChoiceGroupStyles = ( @@ -521,6 +528,8 @@ export const getChoiceGroupStyles = ( baseline: isDirtyTypes, isHorizontal?: boolean, ): Partial => ({ + label: { + color: 'var(--colorNeutralForeground1)', }, flexContainer: [ { selectors: { @@ -535,6 +544,7 @@ export const getChoiceGroupStyles = ( fontSize: 14, fontFamily: StyleConstants.DataExplorerFont, padding: "2px 5px", + color: 'var(--colorNeutralForeground1)' }, }, display: isHorizontal ? "inline-flex" : "default", diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx index b2e7e12c2..4d9dffdc7 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx @@ -87,18 +87,23 @@ export class IndexingPolicyComponent extends React.Component< }; private async createIndexingPolicyEditor(): Promise { + 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", + }); + if (this.indexingPolicyEditor) { + const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel(); + indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this)); + this.props.logIndexingPolicySuccessMessage(); + } } } diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx index 7800c1109..2d74df8f9 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx @@ -56,13 +56,15 @@ export const PartitionKeyComponent: React.FC = ({ da 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; @@ -158,8 +160,8 @@ export const PartitionKeyComponent: React.FC = ({ da Partitioning - {partitionKeyValue} - {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"} + {partitionKeyValue} + {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"} @@ -174,7 +176,7 @@ export const PartitionKeyComponent: React.FC = ({ da Learn more - + 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. diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx index 75dd1a017..a58b4517f 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx @@ -1,4 +1,4 @@ -import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react"; +import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react"; import * as React from "react"; import * as ViewModels from "../../../../Contracts/ViewModels"; import { userContext } from "../../../../UserContext"; @@ -25,6 +25,13 @@ import { } from "../SettingsUtils"; import { ToolTipLabelComponent } from "./ToolTipLabelComponent"; +const theme = getTheme(); + +const classNames = mergeStyleSets({ + hintText: { + color: 'var(--colorNeutralForeground1)', // theme-aware + }, +}); export interface SubSettingsComponentProps { collection: ViewModels.Collection; timeToLive: TtlType; @@ -181,7 +188,19 @@ export class SubSettingsComponent extends React.Component To enable time-to-live (TTL) for your collection/documents, @@ -191,7 +210,7 @@ export class SubSettingsComponent extends React.Component ) : ( - Large {this.partitionKeyName.toLowerCase()} has been enabled. + Large {this.partitionKeyName.toLowerCase()} has been enabled. )} {userContext.apiType === "SQL" && (this.isHierarchicalPartitionedContainer() ? ( - Hierarchically partitioned container. - ) : ( - Non-hierarchically partitioned container. + Hierarchically partitioned container. + ) : ( + Non-hierarchically partitioned container. ))} ); diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx index 391789938..9284454c6 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx @@ -235,12 +235,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< ); return (
      - Updated cost per month + Updated cost per month - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max @@ -253,12 +253,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< return ( {newThroughput && newThroughputCostElement()} - Current cost per month - - + Current cost per month + + {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min - + {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max @@ -268,7 +268,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true); }; - + settingsAndScaleStyle = { + root: { width: "33%", + color: 'var(--colorNeutralForeground1)' }, + }; private getEstimatedManualSpendElement = ( throughput: number, serverId: string, @@ -288,36 +291,36 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< ); return (
      - Updated cost per month + Updated cost per month - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
      ); }; - + const costElement = (): JSX.Element => { const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false); return ( {newThroughput && newThroughputCostElement()} - Current cost per month + Current cost per month - + {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr - + {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day - + {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo @@ -402,8 +405,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited"; return ( - - {capacity} + + {capacity} ); }; @@ -608,7 +611,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< )} {this.props.isAutoPilotSelected ? ( - + Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "} {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "} @@ -630,7 +633,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< )} {!this.overrideWithProvisionedThroughputSettings() && ( - + Estimate your required RU/s with {` capacity calculator`} diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx index c7acf568c..0e8a55d2b 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx @@ -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,7 @@ export class ToolTipLabelComponent extends React.Component - {this.props.label && {this.props.label}} + {this.props.label && {this.props.label}} {this.props.toolTipElement && ( { const isCarouselOpen = useCarousel((state) => state.shouldOpen); const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel); const styles = useStyles(); - + const theme = useTheme(); if (config?.platform === Platform.Fabric) { loadTheme(appThemeFabric);