diff --git a/images/DocumentIcon.svg b/images/DocumentIcon.svg new file mode 100644 index 000000000..d9bdb3385 --- /dev/null +++ b/images/DocumentIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/MoonIcon.svg b/images/MoonIcon.svg new file mode 100644 index 000000000..2902376ca --- /dev/null +++ b/images/MoonIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/SunIcon.svg b/images/SunIcon.svg new file mode 100644 index 000000000..7c7425848 --- /dev/null +++ b/images/SunIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/moon-blue.svg b/images/moon-blue.svg new file mode 100644 index 000000000..d664de808 --- /dev/null +++ b/images/moon-blue.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/sun-blue.svg b/images/sun-blue.svg new file mode 100644 index 000000000..40ed9a803 --- /dev/null +++ b/images/sun-blue.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/less/Common/Constants.less b/less/Common/Constants.less index f77e82c8b..2db6dbf4d 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -237,11 +237,11 @@ *********************************************************************************************/ .hover() { - background-color: @AccentLight; + background-color: var(--colorNeutralBackground1Hover); } .active() { - background-color: @AccentExtra; + background-color: var(--colorNeutralBackground1Hover); } .focus() { diff --git a/less/documentDB.less b/less/documentDB.less index dce940328..8197967c0 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator { flex: 1; padding-left: 34px; padding-right: 34px; - color: @BaseDark; + color: var(--colorNeutralForeground1); overflow-y: auto; overflow-x: auto; margin: (2 * @MediumSpace) 0px; @@ -1749,7 +1749,6 @@ input::-webkit-calendar-picker-indicator { .contextual-pane .panelMainContent { padding-left: 34px; padding-right: 34px; - color: @BaseDark; margin: (2 * @MediumSpace) 0px; } @@ -1914,7 +1913,8 @@ input::-webkit-calendar-picker-indicator::after { } .nav-tabs-margin { - background-color: #f2f2f2; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); .nav-tabs { display: flex; @@ -1922,11 +1922,19 @@ input::-webkit-calendar-picker-indicator::after { align-items: flex-end; height: 100%; margin-bottom: -0.5px; + background-color: var(--colorNeutralBackground1Selected); li { - // Override the bootstrap defaults here to align with our layout constants. margin-bottom: 0px; height: 32px; + + &:hover { + background-color: var(--colorNeutralBackground1Hover); + } + + &:active { + background-color: var(--colorNeutralBackground1Pressed); + } } } } @@ -1940,8 +1948,9 @@ input::-webkit-calendar-picker-indicator::after { .nav.nav-tabs.qslevel > li > a:hover { border: none; border-radius: 0; - background-color: transparent !important; + background-color: var(--colorNeutralBackground1Selected); border-color: transparent; + color: var(--colorNeutralForeground1); } .numbersize { @@ -2376,6 +2385,8 @@ a:link { display: flex; flex-direction: column; min-width: 0; // This prevents it to grow past the parent's width if its content is too wide + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .tabs { @@ -2631,9 +2642,10 @@ a:link { } .tabPanesContainer { - display: flex; flex-grow: 1; - overflow: hidden; + overflow-y: scroll; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .tabs-container { @@ -2655,24 +2667,18 @@ a:link { .nav-tabs > li.active > .tabNavContentContainer, .nav-tabs > li.active > .tabNavContentContainer:focus, .nav-tabs > li.active > .tabNavContentContainer:hover { - color: #555; + color: var(--colorNeutralForeground1); cursor: default; - background-color: @BaseLight; - border-color: @BaseMedium; - border-bottom-color: @BaseLight; + background-color: var(--colorNeutralBackground1); + border-color: var(--colorNeutralStroke1); border-style: solid; border-width: 1px; height: @ActiveTabHeight; width: @ActiveTabWidth; } -.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText { - font-weight: bolder; - border-bottom: 2px solid rgba(0, 120, 212, 1); -} - -.nav-tabs > li.active:focus > .tabNavContentContainer { - .focus(); +.nav-tabs > li.active .contentWrapper { + border-bottom: 2px solid var(--colorCompoundBrandBackground); } .tabNavContentContainer { @@ -2681,7 +2687,7 @@ a:link { justify-content: space-between; border-radius: 2px 2px 0 0; padding: @DefaultSpace 0px @SmallSpace 0px; - color: @BaseHigh; + color: var(--colorNeutralForeground1); width: @TabsWidth; text-align: center; position: relative; @@ -2689,19 +2695,21 @@ a:link { &:hover { text-decoration: none; - background-color: @BaseMediumLow; - border-color: @BaseMediumLow; + background-color: var(--colorNeutralBackground1Hover); + border-color: transparent; } &:active { - background-color: @BaseMediumLow; + background-color: var(--colorNeutralBackground1Pressed); } .tab_Content { .flex-display(); width: @TabsWidth; - border-right: @ButtonBorderWidth solid @BaseMedium; + border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1); white-space: nowrap; + color: var(--colorNeutralForeground1); + .contentWrapper { .flex-display(); width: @ContentWrapper; @@ -2723,9 +2731,8 @@ a:link { background-image: url(../images/error_no_outline.svg); background-repeat: no-repeat; background-position: center; - background-size: 3px; display: block; - margin: 1px 0px 0px 6px; + margin: 4px 0px 0px 6px; } } @@ -2750,39 +2757,60 @@ a:link { .loadingIcon { width: @LoadingErrorIconSize; height: @LoadingErrorIconSize; - margin: 0px 0px @SmallSpace @SmallSpace; + margin-top: 1px; + } + + .warningIconContainer { + width: @ErrorIconContainer; + height: @ErrorIconContainer; + margin-top: 1px; } } .tabNavText { margin-left: @SmallSpace; margin-right: 2px; - color: @BaseDark; + color: var(--colorNeutralForeground1); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex-grow: 1; + font-size: 12px; } } .tabIconSection { - width: 29px; position: relative; - padding-top: 2px; .cancelButton { padding: 0px @SmallSpace 0px @SmallSpace; + color: var(--colorNeutralForeground1); + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; &:hover { - .hover(); + background-color: var(--colorNeutralBackground1Hover); + color: var(--colorNeutralForeground1); } &:focus { - .focus(); + background-color: var(--colorNeutralBackground1Pressed); + color: var(--colorNeutralForeground1); } &:active { - .active(); + background-color: var(--colorNeutralBackground1Pressed); + color: var(--colorNeutralForeground1); + } + + &::before { + content: "×"; + font-size: 16px; + line-height: 1; } } } @@ -3137,3 +3165,12 @@ a:link { .sidebarContainer { height: 100%; } + +.close-Icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + cursor: pointer; +} diff --git a/less/forms.less b/less/forms.less index 572134c26..a2f5fa257 100644 --- a/less/forms.less +++ b/less/forms.less @@ -1,211 +1,227 @@ @import "./Common/Constants"; .dirty { - border: 1px solid #9b4f96; + border: 1px solid #9b4f96; } .dirty:focus { - outline: 1px solid #9b4f96; + outline: 1px solid #9b4f96; } .tabForm { - padding: 12px 20px 20px 20px; - margin-left: 3px; + padding: 12px 20px 20px 20px; + margin-left: 3px; } .storedTabForm { - padding-top: @LargeSpace; + padding-top: @LargeSpace; } .scaleSettingScrollable { - overflow-y: auto; - overflow-x: hidden; - height:100%; + overflow-y: auto; + overflow-x: hidden; + height: 100%; } .disableFocusDefaults[tabindex] { - &:focus { - outline: none; - } + &:focus { + outline: none; + } - &:active { - outline: none; - } + &:active { + outline: none; + } } .indexingPolicyEditor { - width: 100%; - height: calc(~"100vh - 400px"); + width: 100%; + height: calc(~"100vh - 400px"); } .scaleDivison { - padding: @MediumSpace 0px @DefaultSpace 0px; + padding: @MediumSpace 0px @DefaultSpace 0px; } .scaleSettingTitle { - font-size: 14px; - cursor: pointer; + font-size: 14px; + cursor: pointer; } .autoScaleThroughputTitle { - margin-bottom: @SmallSpace; + margin-bottom: @SmallSpace; } .autoScaleDescription { - margin-top: 6px; - margin-bottom: @SmallSpace; + margin-top: 6px; + margin-bottom: @SmallSpace; } .ssExpandCollapseIcon { - width: 10px; - height: 10px; + width: 10px; + height: 10px; } .ssCollapseIcon { - margin-bottom: 5px; + margin-bottom: 5px; } .ssTextAllignment { - padding-left: 19px; + padding-left: 19px; } .throughputStorageBlock { - border-top: 1px solid #bbb; - border-bottom: 1px solid #bbb; - background-color: #ccc; - padding-left: 10px; - width: 315px; + border-top: 1px solid #bbb; + border-bottom: 1px solid #bbb; + background-color: #ccc; + padding-left: 10px; + width: 315px; } .storageCapacityTitle { - padding: @LargeSpace 0px; - + padding: @LargeSpace 0px; } .throughputStorageValue { - font-size: 12px; + font-size: 12px; } -.estimatedCost, .largePartitionKeyEnabled { - padding: @SmallSpace 0px @LargeSpace; +.estimatedCost, +.largePartitionKeyEnabled { + padding: @SmallSpace 0px @LargeSpace; } .storagePadding { - padding-top: 6px; - padding-bottom: 14px; + padding-top: 6px; + padding-bottom: 14px; } .dirtyTextbox { - width: 176px; - margin-top: 7px; - padding-left: 5px; + width: 176px; + margin-top: 7px; + padding-left: 5px; } .formTitleFirst { - padding: @DefaultSpace (2 * @MediumSpace); + padding: @DefaultSpace (2 * @MediumSpace); } .formTitleTextbox { - padding: 0px 0px @DefaultSpace (2 * @MediumSpace); + padding: 0px 0px @DefaultSpace (2 * @MediumSpace); } .formTree { - border: 1px solid #969696; - color: #393939; - padding: 0px 12px 1px 8px; + border: 1px solid var(--colorNeutralStroke1); + color: var(--colorNeutralForeground1); + background-color: var(--colorNeutralBackground1); + padding: 0px 12px 1px 8px; } .formTree:hover { - border: 1px solid #969696; - background-color: #e6f8fe; + border: 1px solid var(--colorNeutralStroke1Hover); + background-color: var(--colorNeutralBackground1Hover); +} + +.formTree::placeholder { + color: var(--colorNeutralForeground2); + opacity: 1; } .formTree:active { - border: 1px solid #1ebbee; + border: 1px solid var(--colorNeutralStroke1Pressed); + background-color: var(--colorNeutralBackground1Pressed); } .scaleForm { - padding-left: 8px; - color: @BaseDark; - border: 1px solid #969696; - min-width: @ScaleFormWidth; + padding-left: 8px; + color: @BaseDark; + border: 1px solid #969696; + min-width: @ScaleFormWidth; - &:hover { - background-color: #e6f8fe; - } + &:hover { + background-color: #e6f8fe; + } } .formTitle { - margin-top: 16px; - margin-bottom: 4px; + margin-top: 16px; + margin-bottom: 4px; } - .spUdfTriggerHeader { - padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); + padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); } .storedUdfTriggerEditor { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .unselectedRadio { - background-color: white; - border-color: #EEE!important; - color: black!important; + background-color: white; + border-color: #eee !important; + color: black !important; } .disabledRadio { - background-color: #A19F9D; - border-color: #EEE!important; - color: white!important; + background-color: #a19f9d; + border-color: #eee !important; + color: white !important; } .selectedRadio { - background-color: @AccentMediumHigh; - border-color: #EEE!important; - color: white!important; - cursor: pointer; + background-color: @AccentMediumHigh; + border-color: #eee !important; + color: white !important; + cursor: pointer; } .selectedRadio:hover { - background-color: @AccentMediumHigh; - border-color: #EEE!important; - color: white!important; - cursor: pointer; + background-color: @AccentMediumHigh; + border-color: #eee !important; + color: white !important; + cursor: pointer; } .selectedRadio:active { - background-color: #0072c6; - border-color: #EEE!important; - color: white!important; - cursor: pointer; - border: 1px solid #0072c6; + background-color: #0072c6; + border-color: #eee !important; + color: white !important; + cursor: pointer; + border: 1px solid #0072c6; } .selectedRadio.dirty { - background-color: #9b4f96; + background-color: #9b4f96; } .tabs { - margin: 0; + margin: 0; } .formReadOnly { - background-color: #ddd; - border: 1px solid #969696; - min-width: 184px; - padding-left: 8px; + background-color: #ddd; + border: 1px solid #969696; + min-width: 184px; + padding-left: 8px; } .migration:disabled { - background-color: #ccc; + background-color: #ccc; } .trigger-field { - width: 40%; - margin-top: 10px + width: 40%; + margin-top: 10px; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } + +.trigger-field input::placeholder { + color: var(--colorNeutralForeground3); + opacity: 1; +} + .trigger-form { - padding: 10px 30px 10px 30px; -} \ No newline at end of file + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); + padding: 10px 30px; +} diff --git a/less/hostedexplorer.less b/less/hostedexplorer.less index 86186d366..a3de43b5a 100644 --- a/less/hostedexplorer.less +++ b/less/hostedexplorer.less @@ -255,7 +255,7 @@ body { flex: 1; padding-left: 34px; padding-right: 34px; - color: @BaseDark; + color: var(--colorNeutralForeground1); overflow-y: auto; overflow-x: hidden; margin: (2 * @MediumSpace) 0px; diff --git a/less/tree.less b/less/tree.less deleted file mode 100644 index ed0fbf71f..000000000 --- a/less/tree.less +++ /dev/null @@ -1,270 +0,0 @@ -@import "./Common/Constants"; - -.resourceTree { - height: 100%; - flex: 0 0 auto; - .main { - height: 100%; - } -} - -.resourceTreeScroll { - height: 100%; - display: flex; - overflow-y: auto; - overflow-x: hidden; - padding-right: 10px; -} - -.userSelectNone { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -.treeHovermargin { - margin-left: 16px; -} - -.highlight { - padding: @SmallSpace 2px; - outline: 0; - - &:hover { - .hover(); - } - - &:active { - .active(); - } - - &:focus { - .focus(); - } -} - -.contextmenushowing { - background-color: #eee; -} - -.collectionstree { - width: 100%; - margin-top: @DefaultSpace; - - .databaseList { - list-style-type: none; - padding-left: 0px; - - .collectionList { - padding-left: (2 * @MediumSpace); - } - - .collectionChildList { - padding-left: @LargeSpace; - } - - .databaseDocuments { - padding-left: (5 * @MediumSpace); - } - } -} - -.pointerCursor { - cursor: pointer; -} - -.menuEllipsis { - padding-right: 6px; - font-weight: bold; - font-size: 18px; - position: relative; - top: -5px; - left: 0px; - float: right; - display: none; - padding-left: 6px !important; - line-height: @TreeLineHeight; -} - -.databaseMenu { - .flex-display(); -} - -.databaseMenu:hover .menuEllipsis, -.databaseMenu:focus .menuEllipsis { - display: block; -} - -.databaseCollChildTextOverflow { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - flex: 1; -} - -.collectionMenu { - .flex-display(); -} - -.collectionMenu:hover .menuEllipsis, -.collectionMenu:focus .menuEllipsis { - display: block; -} - -.documentsMenu:hover .menuEllipsis, -.documentsMenu:focus .menuEllipsis { - display: block; -} - -.treeChildMenu { - display: flex; -} - -.storedProcedureMenu:hover .menuEllipsis, -.storedProcedureMenu:focus .menuEllipsis { - display: block; -} - -.childMenu { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-left: (6 * @MediumSpace); - width: 100%; -} - -.storedChildMenu:hover .menuEllipsis, -.storedChildMenu:focus .menuEllipsis { - display: block; -} - -.contextmenu6 { - top: -29px; -} - -.userDefinedMenu:hover .contextmenu6 { - display: block; -} - -.userDefinedchildMenu:hover .menuEllipsis, -.userDefinedchildMenu:focus .menuEllipsis { - display: block; -} - -.triggersMenu:hover .menuEllipsis, -.triggersMenu:focus .menuEllipsis { - display: block; -} - -.triggersChildMenu:hover .menuEllipsis, -.triggersChildMenu:focus .menuEllipsis { - display: block; -} - -.databaseId { - font-size: 14px; -} - -.storedUdfTriggerMenu { - padding-left: 0px; -} - -.collectionstree img { - width: 16px; - height: 16px; - vertical-align: text-top; -} - -img.collectionsTreeCollapseExpand { - width: 10px; - height: 10px; - vertical-align: middle; - margin-bottom: 5px; -} - -.collapsed::before { - content: "\23F5"; - margin-left: 0px; - font-size: 15px; -} - -.expanded::before { - content: "\23F7"; - margin-left: 0px; - font-size: 15px; -} - -.collectionMenuChildren { - padding-left: 42px; -} - -.main-nav { - width: 100vh; - height: 40px; - background: white; - transform-origin: left top; - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform: rotate(-90deg) translateX(-100%); - -webkit-transform: rotate(-90deg) translateX(-100%); - -ms-transform: rotate(-90deg) translateX(-100%); - border-bottom: 1px solid #ccc; -} - -.main-nav-img { - width: 16px; - height: 16px; - margin: -32px 0 0 0; - transform: rotate(-90deg) translateX(-100%); - -webkit-transform: rotate(-90deg) translateX(-100%); - -ms-transform: rotate(-90deg) translateX(-100%); -} - -.main-nav-img.main-nav-sub-img { - width: 16px; - height: 16px; - margin: 0px 0px 0 0; - transform: rotate(180deg) translateX(0%); - -webkit-transform: rotate(180deg) translateX(0%); - -ms-transform: rotate(180deg) translateX(0%); - position: absolute; - right: -8px; - top: 16px; -} - -ul.nav { - margin: 0 auto; - margin-top: 0px; - margin-left: 0px; -} - -.mini ul.nav li { - float: right; - line-height: 25px; - height: auto; - margin-top: 3px; -} - -.spancolchildstyle { - padding: 4px; -} - -.contextmenubutton { - float: right; - display: none; -} - -.highlight:hover > .contextmenubutton { - display: unset; -} - -.highlight:hover > .contextmenubutton::after { - content: "\2026"; - font-size: 12px; -} - -.showEllipsis { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} diff --git a/src/Common/Upload/Upload.tsx b/src/Common/Upload/Upload.tsx index 3feb4fdfd..90b9e7add 100644 --- a/src/Common/Upload/Upload.tsx +++ b/src/Common/Upload/Upload.tsx @@ -50,10 +50,33 @@ export const Upload: FunctionComponent = ({ const title = label + " to upload"; return (
- {label} + + {label} + {tooltip && {tooltip}} - + { value: T; disable?: boolean; } + +// Remove the duplicate Explorer interface and export the type +export type { Explorer }; diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx index 3f0fa6d2c..7d7510626 100644 --- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx +++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx @@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component - + {this.props.tooltipContent && ( { event.stopPropagation(); this.props.onDelete(); diff --git a/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap b/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap index 538ab00e7..ed981c5d6 100644 --- a/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap +++ b/src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap @@ -20,7 +20,15 @@ exports[`CollapsibleSectionComponent renders 1`] = ` - + Sample title diff --git a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx index b6e847d54..168962312 100644 --- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx +++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx @@ -58,6 +58,26 @@ export interface CommandButtonComponentProps { */ tooltipText?: string; + /** + * Custom styles to apply to the button using Fluent UI theme tokens + */ + styles?: { + root?: { + backgroundColor?: string; + color?: string; + selectors?: { + ":hover"?: { + backgroundColor?: string; + color?: string; + }; + ":active"?: { + backgroundColor?: string; + color?: string; + }; + }; + }; + }; + /** * tabindex for the command button */ @@ -250,6 +270,8 @@ export class CommandButtonComponent extends React.Component ) => this.commandClickCallback(e)} >
diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx index a4c50a3fd..d02eb1120 100644 --- a/src/Explorer/Controls/Dialog.tsx +++ b/src/Explorer/Controls/Dialog.tsx @@ -179,8 +179,18 @@ export const Dialog: FC = () => { title, subText, styles: { - title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT }, - subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }, + title: { + fontSize: DIALOG_TITLE_FONT_SIZE, + fontWeight: DIALOG_TITLE_FONT_WEIGHT, + }, + subText: { + fontSize: DIALOG_SUBTEXT_FONT_SIZE, + color: "var(--colorNeutralForeground2)", + }, + content: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, }, showCloseButton: showCloseButton || false, onDismiss, @@ -188,18 +198,60 @@ export const Dialog: FC = () => { modalProps: { isBlocking: isModal, isDarkOverlay: false }, minWidth: DIALOG_MIN_WIDTH, maxWidth: DIALOG_MAX_WIDTH, + styles: { + main: { + backgroundColor: "var(--colorNeutralBackground1)", + selectors: { + ".ms-Dialog-title": { color: "var(--colorNeutralForeground1)" }, + }, + }, + }, }; const primaryButtonProps: IButtonProps = { text: primaryButtonText, disabled: primaryButtonDisabled || false, onClick: onPrimaryButtonClick, + styles: { + root: { + backgroundColor: "var(--colorBrandBackground)", + color: "var(--colorNeutralForegroundOnBrand)", + selectors: { + ":hover": { + backgroundColor: "var(--colorBrandBackgroundHover)", + color: "var(--colorNeutralForegroundOnBrand)", + }, + ":active": { + backgroundColor: "var(--colorBrandBackgroundPressed)", + color: "var(--colorNeutralForegroundOnBrand)", + }, + }, + }, + }, }; const secondaryButtonProps: IButtonProps = secondaryButtonText && onSecondaryButtonClick ? { text: secondaryButtonText, onClick: onSecondaryButtonClick, + styles: { + root: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + selectors: { + ":hover": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + }, + ":active": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorCompoundBrandStroke1)", + }, + }, + }, + }, } : undefined; return visible ? ( diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx index 9ca544631..bfd3f103a 100644 --- a/src/Explorer/Controls/Editor/EditorReact.tsx +++ b/src/Explorer/Controls/Editor/EditorReact.tsx @@ -1,4 +1,5 @@ import { Spinner, SpinnerSize } from "@fluentui/react"; +import { monacoTheme, useThemeStore } from "hooks/useTheme"; import * as React from "react"; import { loadMonaco, monaco } from "../../LazyMonaco"; // import "./EditorReact.less"; @@ -66,6 +67,7 @@ export class EditorReact extends React.Component void; monacoApi: { default: typeof monaco; Emitter: typeof monaco.Emitter; @@ -94,6 +96,13 @@ export class EditorReact extends React.Component { + if (this.editor) { + const newTheme = state.isDarkMode ? "vs-dark" : "vs"; + this.monacoApi?.editor.setTheme(newTheme); + } + }); + setTimeout(() => { const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement; if (suggestionWidget) { @@ -128,6 +137,7 @@ export class EditorReact extends React.Component = { fieldGroup: { height: 27, + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", }, field: { fontSize: 12, padding: "0 8px", + color: "var(--colorNeutralForeground1)", + backgroundColor: "var(--colorNeutralBackground2)", + }, + root: { + selectors: { + input: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + }, + "input:hover": { + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + }, + "input:focus": { + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorBrandBackground)", + }, + }, }, }; -const dropdownStyles = { - title: { - height: 27, - lineHeight: "24px", - fontSize: 12, +const dropdownStyles: Partial = { + root: { + width: "40%", + marginTop: "10px", + selectors: { + "&:hover .ms-Dropdown-title": { + color: "var(--colorNeutralForeground1)", + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + }, + "&:hover span.ms-Dropdown-title": { + color: "var(--colorNeutralForeground1)", + }, + "&:focus .ms-Dropdown-title": { + color: "var(--colorNeutralForeground1)", + backgroundColor: "var(--colorNeutralBackground2)", + }, + "&:focus span.ms-Dropdown-title": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + label: { + color: "var(--colorNeutralForeground1)", }, dropdown: { - height: 27, - lineHeight: "24px", + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + color: "var(--colorNeutralForeground1)", + }, + title: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + selectors: { + "&:hover": { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + }, + "&:focus": { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + }, + "&:hover .ms-Dropdown-titleText": { + color: "var(--colorNeutralForeground1)", + }, + "&:focus .ms-Dropdown-titleText": { + color: "var(--colorNeutralForeground1)", + }, + "& .ms-Dropdown-titleText": { + color: "var(--colorNeutralForeground1)", + }, + "&.ms-Dropdown-title--hasPlaceholder": { + color: "var(--colorNeutralForeground2)", + }, + }, + }, + errorMessage: { + color: "var(--colorNeutralForeground1)", + }, + caretDown: { + color: "var(--colorNeutralForeground1)", + }, + callout: { + backgroundColor: "var(--colorNeutralBackground2)", + border: "1px solid var(--colorNeutralStroke1)", + }, + dropdownItems: { + backgroundColor: "var(--colorNeutralBackground2)", }, dropdownItem: { - fontSize: 12, + backgroundColor: "transparent", + color: "var(--colorNeutralForeground1)", + minHeight: "36px", + lineHeight: "36px", + selectors: { + "&:hover": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + "&:hover .ms-Dropdown-optionText": { + color: "var(--colorNeutralForeground1)", + }, + "&:focus": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + "&:active": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + color: "var(--colorNeutralForeground1)", + }, + "& .ms-Dropdown-optionText": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + dropdownItemSelected: { + backgroundColor: "rgba(255, 255, 255, 0.08)", + color: "var(--colorNeutralForeground1)", + minHeight: "36px", + lineHeight: "36px", + selectors: { + "&:hover": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + "&:hover .ms-Dropdown-optionText": { + color: "var(--colorNeutralForeground1)", + }, + "&:focus": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + "&:active": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + color: "var(--colorNeutralForeground1)", + }, + "& .ms-Dropdown-optionText": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + dropdownOptionText: { + color: "var(--colorNeutralForeground1)", + }, + dropdownItemHeader: { + color: "var(--colorNeutralForeground1)", }, }; @@ -226,7 +363,32 @@ export const FullTextPoliciesComponent: React.FunctionComponent ))} - + Add full text path diff --git a/src/Explorer/Controls/Settings/SettingsComponent.less b/src/Explorer/Controls/Settings/SettingsComponent.less index 5eb2b13be..85b4b4373 100644 --- a/src/Explorer/Controls/Settings/SettingsComponent.less +++ b/src/Explorer/Controls/Settings/SettingsComponent.less @@ -4,6 +4,8 @@ height: 100%; overflow-y: auto; width: 100%; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .settingsV2ToolTip { @@ -23,6 +25,8 @@ overflow-y: auto; width: 100%; font-family: @DataExplorerFont; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .settingsV2Editor { diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx index 9a87f5b0c..0802fc863 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 } from "@fluentui/react"; import { sendMessage } from "Common/MessageHandler"; import { FabricMessageTypes } from "Contracts/FabricMessageTypes"; import { @@ -1477,31 +1477,111 @@ export class SettingsComponent extends React.Component { - const pivotItemProps: IPivotItemProps = { - itemKey: SettingsV2TabTypes[tab.tab], - style: { marginTop: 20 }, - headerText: getTabTitle(tab.tab), - headerButtonProps: { - "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`, + 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)", + }, + }, + }, + }, + }, - return ( - - {tab.content} - - ); - }); + 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), + headerButtonProps: { + "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`, + }, + }; + + return ( + + {tab.content} + + ); + })} +
); diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index a703771c7..730372b8b 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" | "dataMasking"; -export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } }; +export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } }; export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = { label: { @@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = { export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } }; -export const shortWidthTextFieldStyles: Partial = { root: { paddingLeft: 10, width: 210 } }; +export const shortWidthTextFieldStyles: Partial = { + root: { paddingLeft: 10, width: 210 }, + fieldGroup: { + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + }, + field: { + color: "var(--colorNeutralForeground1)", + backgroundColor: "var(--colorNeutralBackground2)", + }, +}; -export const shortWidthDropDownStyles: Partial = { dropdown: { paddingleft: 10, width: 202 } }; +export const shortWidthDropDownStyles: Partial = { + dropdown: { paddingLeft: 10, width: 202 }, + title: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + }, + caretDown: { + color: "var(--colorNeutralForeground1)", + }, + callout: { + backgroundColor: "var(--colorNeutralBackground2)", + border: "1px solid var(--colorNeutralStroke1)", + }, + dropdownItems: { + backgroundColor: "var(--colorNeutralBackground2)", + }, + dropdownItem: { + backgroundColor: "transparent", + color: "var(--colorNeutralForeground1)", + selectors: { + "&:hover": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + "&:focus": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + }, + }, + dropdownItemSelected: { + backgroundColor: "rgba(255, 255, 255, 0.08)", + color: "var(--colorNeutralForeground1)", + selectors: { + "&:hover": { + backgroundColor: "rgba(255, 255, 255, 0.1)", + color: "var(--colorNeutralForeground1)", + }, + }, + }, + dropdownOptionText: { + color: "var(--colorNeutralForeground1)", + }, +}; export const transparentDetailsRowStyles: Partial = { root: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", selectors: { ":hover": { - background: "transparent", + backgroundColor: "var(--colorNeutralBackground1Hover)", + color: "var(--colorNeutralForeground1)", + }, + ":hover .ms-DetailsRow-cell": { + backgroundColor: "var(--colorNeutralBackground1Hover)", + color: "var(--colorNeutralForeground1)", + }, + "&.ms-DetailsRow": { + backgroundColor: "var(--colorNeutralBackground1)", + }, + }, + }, + cell: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + selectors: { + ":hover": { + backgroundColor: "var(--colorNeutralBackground1Hover)", + color: "var(--colorNeutralForeground1)", }, }, }, @@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial = { export const transparentDetailsHeaderStyle: Partial = { root: { + color: "var(--colorNeutralForeground1)", selectors: { ":hover": { - background: "transparent", + background: "var(--colorNeutralBackground1Hover)", + color: "var(--colorNeutralForeground1)", }, }, }, @@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial = { ".ms-FocusZone": { paddingTop: 0, }, + ".ms-DetailsHeader": { + backgroundColor: "var(--colorNeutralBackground1)", + }, + ".ms-DetailsHeader-cell": { + color: "var(--colorNeutralForeground1)", + backgroundColor: "var(--colorNeutralBackground1)", + selectors: { + ":hover": { + backgroundColor: "var(--colorNeutralBackground1Hover)", + color: "var(--colorNeutralForeground1)", + }, + }, + }, + ".ms-DetailsHeader-cellTitle": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow-cell": { + color: "var(--colorNeutralForeground1)", + }, + // Tooltip styling for cells + ".ms-TooltipHost": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow-cell .ms-TooltipHost": { + color: "var(--colorNeutralForeground1)", + }, }, }, }; @@ -166,7 +271,18 @@ export const separatorStyles: Partial = { }; export const messageBarStyles: Partial = { - root: { marginTop: "5px", backgroundColor: "white" }, + root: { + marginTop: "5px", + backgroundColor: "var(--colorNeutralBackground1)", + selectors: { + "&.ms-MessageBar--severeWarning": { + backgroundColor: "var(--colorNeutralBackground4)", + }, + "&.ms-MessageBar--warning": { + backgroundColor: "var(--colorNeutralBackground3)", + }, + }, + }, text: { fontSize: 14 }, }; @@ -222,9 +338,11 @@ 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} @@ -238,7 +356,7 @@ export const getEstimatedSpendingElement = ( {priceBreakdown.pricePerRu}/RU - + *{estimatedCostDisclaimer} @@ -285,7 +403,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. @@ -303,7 +421,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. @@ -339,7 +457,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 @@ -459,9 +577,13 @@ export const changeFeedPolicyToolTip: JSX.Element = ( ); export const mongoIndexingPolicyDisclaimer: JSX.Element = ( - + For queries that filter on multiple properties, create multiple single field indexes instead of a compound index. - + {` Compound indexes `} are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo @@ -470,7 +592,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = ( ); export const mongoCompoundIndexNotSupportedMessage: JSX.Element = ( - + Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell. @@ -519,14 +641,50 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes fieldGroup: { height: 25, width: 300, - borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "", + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)", selectors: { ":disabled": { - backgroundColor: StyleConstants.BaseMedium, - borderColor: StyleConstants.BaseMediumHigh, + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + color: "var(--colorNeutralForeground2)", + }, + input: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + }, + "input:disabled": { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground2)", + }, + "input#autopilotInput": { + backgroundColor: "var(--colorNeutralBackground4)", + color: "var(--colorNeutralForeground1)", }, }, }, + field: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + selectors: { + ":disabled": { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground2)", + }, + }, + }, + subComponentStyles: { + label: { + root: { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + suffix: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + border: "1px solid var(--colorNeutralStroke1)", + }, }); export const getChoiceGroupStyles = ( @@ -534,6 +692,28 @@ export const getChoiceGroupStyles = ( baseline: isDirtyTypes, isHorizontal?: boolean, ): Partial => ({ + 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: { @@ -548,6 +728,16 @@ export const getChoiceGroupStyles = ( fontSize: 14, fontFamily: StyleConstants.DataExplorerFont, 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", diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx index c8650b988..a0bfc2116 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx @@ -1,11 +1,11 @@ -import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react"; +import { FontIcon, IMessageBarStyles, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react"; import * as DataModels from "Contracts/DataModels"; import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils"; import { isDirty } from "Explorer/Controls/Settings/SettingsUtils"; import { loadMonaco } from "Explorer/LazyMonaco"; +import { monacoTheme, useThemeStore } from "hooks/useTheme"; import * as monaco from "monaco-editor"; import * as React from "react"; - export interface ComputedPropertiesComponentProps { computedPropertiesContent: DataModels.ComputedProperties; computedPropertiesContentBaseline: DataModels.ComputedProperties; @@ -27,6 +27,24 @@ export class ComputedPropertiesComponent extends React.Component< private shouldCheckComponentIsDirty = true; private computedPropertiesDiv = React.createRef(); private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor; + private themeUnsubscribe: () => void; + + private darkThemeMessageBarStyles: Partial = { + root: { + selectors: { + "&.ms-MessageBar--warning": { + backgroundColor: "var(--colorStatusWarningBackground1)", + border: "1px solid var(--colorStatusWarningBorder1)", + }, + ".ms-MessageBar-icon": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-MessageBar-text": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + }; constructor(props: ComputedPropertiesComponentProps) { super(props); @@ -48,6 +66,10 @@ export class ComputedPropertiesComponent extends React.Component< this.onComponentUpdate(); } + componentWillUnmount(): void { + this.themeUnsubscribe && this.themeUnsubscribe(); + } + public resetComputedPropertiesEditor = (): void => { if (!this.computedPropertiesEditor) { this.createComputedPropertiesEditor(); @@ -86,8 +108,16 @@ export class ComputedPropertiesComponent extends React.Component< value: value, language: "json", ariaLabel: "Computed properties", + theme: monacoTheme(), }); if (this.computedPropertiesEditor) { + // Subscribe to theme changes + this.themeUnsubscribe = useThemeStore.subscribe(() => { + if (this.computedPropertiesEditor) { + monaco.editor.setTheme(monacoTheme()); + } + }); + const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel(); computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this)); this.props.logComputedPropertiesSuccessMessage(); @@ -111,11 +141,15 @@ export class ComputedPropertiesComponent extends React.Component< return ( {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && ( - + {unsavedEditorWarningMessage("computedProperties")} )} - + {"Learn more"} diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx index 46d1d675a..422b61bfe 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx @@ -6,7 +6,6 @@ import { conflictResolutionCustomToolTip, conflictResolutionLwwTooltip, getChoiceGroupStyles, - getTextFieldStyles, subComponentStackProps, } from "../SettingsRenderUtils"; import { isDirty } from "../SettingsUtils"; @@ -106,10 +105,46 @@ export class ConflictResolutionComponent extends React.Component @@ -119,19 +154,57 @@ export class ConflictResolutionComponent extends React.Component ); - private getConflictResolutionCustomComponent = (): JSX.Element => ( - - ); + private getConflictResolutionCustomComponent = (): JSX.Element => { + return ( + + ); + }; public render(): JSX.Element { return ( diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx index 1257d4a65..5fade0420 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx @@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC = return (
      - + {isVectorSearchEnabled && ( @@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC = {isFullTextSearchEnabled && ( @@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC = ) : ( { checkAndSendFullTextPolicyToSettings({ defaultLanguage: getFullTextLanguageOptions()[0].key as never, diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx index b2e7e12c2..8990f7c93 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx @@ -1,4 +1,5 @@ -import { MessageBar, MessageBarType, Stack } from "@fluentui/react"; +import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react"; +import { monacoTheme, useThemeStore } from "hooks/useTheme"; import * as monaco from "monaco-editor"; import * as React from "react"; import * as DataModels from "../../../../Contracts/DataModels"; @@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco"; import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils"; import { isDirty, isIndexTransforming } from "../SettingsUtils"; import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent"; - export interface IndexingPolicyComponentProps { shouldDiscardIndexingPolicy: boolean; resetShouldDiscardIndexingPolicy: () => void; @@ -31,6 +31,24 @@ export class IndexingPolicyComponent extends React.Component< private shouldCheckComponentIsDirty = true; private indexingPolicyDiv = React.createRef(); private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor; + private themeUnsubscribe: () => void; + + private darkThemeMessageBarStyles: Partial = { + root: { + selectors: { + "&.ms-MessageBar--warning": { + backgroundColor: "var(--colorStatusWarningBackground1)", + border: "1px solid var(--colorStatusWarningBorder1)", + }, + ".ms-MessageBar-icon": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-MessageBar-text": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + }; constructor(props: IndexingPolicyComponentProps) { super(props); @@ -52,6 +70,10 @@ export class IndexingPolicyComponent extends React.Component< this.onComponentUpdate(); } + componentWillUnmount(): void { + this.themeUnsubscribe && this.themeUnsubscribe(); + } + public resetIndexingPolicyEditor = (): void => { if (!this.indexingPolicyEditor) { this.createIndexingPolicyEditor(); @@ -87,18 +109,30 @@ 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", + theme: monacoTheme(), + }); + if (this.indexingPolicyEditor) { + this.themeUnsubscribe = useThemeStore.subscribe(() => { + if (this.indexingPolicyEditor) { + monaco.editor.setTheme(monacoTheme()); + } + }); + + const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel(); + indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this)); + this.props.logIndexingPolicySuccessMessage(); + } } } @@ -121,7 +155,13 @@ export class IndexingPolicyComponent extends React.Component< refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress} /> {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && ( - {unsavedEditorWarningMessage("indexPolicy")} + + {unsavedEditorWarningMessage("indexPolicy")} + )}
      diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap index c658dd978..813b86e05 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap @@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx index a55630532..36e999049 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx @@ -3,6 +3,7 @@ import { DetailsListLayoutMode, IColumn, IconButton, + IMessageBarStyles, MessageBar, MessageBarType, SelectionMode, @@ -30,12 +31,12 @@ import { } from "../../SettingsRenderUtils"; import { AddMongoIndexProps, - MongoIndexIdField, - MongoIndexTypes, - MongoNotificationType, getMongoIndexType, getMongoIndexTypeText, isIndexTransforming, + MongoIndexIdField, + MongoIndexTypes, + MongoNotificationType, } from "../../SettingsUtils"; import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent"; import { AddMongoIndexComponent } from "./AddMongoIndexComponent"; @@ -63,6 +64,24 @@ interface MongoIndexDisplayProps { export class MongoIndexingPolicyComponent extends React.Component { private shouldCheckComponentIsDirty = true; private addMongoIndexComponentRefs: React.RefObject[] = []; + + private darkThemeMessageBarStyles: Partial = { + root: { + selectors: { + "&.ms-MessageBar--warning": { + backgroundColor: "var(--colorStatusWarningBackground1)", + border: "1px solid var(--colorStatusWarningBorder1)", + }, + ".ms-MessageBar-icon": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-MessageBar-text": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + }; + private initialIndexesColumns: IColumn[] = [ { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true }, { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true }, @@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component{definition}, - type: {getMongoIndexTypeText(type)}, + definition: {definition}, + type: {getMongoIndexTypeText(type)}, actionButton: definition === MongoIndexIdField ? <> : this.getActionButton(arrayPosition, isCurrentIndex), }; } @@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component - {warningMessage && {warningMessage}} + {warningMessage && ( + + {warningMessage} + + )} ); }; diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap index 32fd68bfb..dbe7d78f4 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap @@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = ` onChange={[Function]} styles={ { + "field": { + "backgroundColor": "var(--colorNeutralBackground2)", + "color": "var(--colorNeutralForeground1)", + }, + "fieldGroup": { + "backgroundColor": "var(--colorNeutralBackground2)", + "borderColor": "var(--colorNeutralStroke1)", + }, "root": { "paddingLeft": 10, "width": 210, @@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = ` selectedKey="Single" styles={ { + "callout": { + "backgroundColor": "var(--colorNeutralBackground2)", + "border": "1px solid var(--colorNeutralStroke1)", + }, + "caretDown": { + "color": "var(--colorNeutralForeground1)", + }, "dropdown": { - "paddingleft": 10, + "paddingLeft": 10, "width": 202, }, + "dropdownItem": { + "backgroundColor": "transparent", + "color": "var(--colorNeutralForeground1)", + "selectors": { + "&:focus": { + "backgroundColor": "rgba(255, 255, 255, 0.1)", + "color": "var(--colorNeutralForeground1)", + }, + "&:hover": { + "backgroundColor": "rgba(255, 255, 255, 0.1)", + "color": "var(--colorNeutralForeground1)", + }, + }, + }, + "dropdownItemSelected": { + "backgroundColor": "rgba(255, 255, 255, 0.08)", + "color": "var(--colorNeutralForeground1)", + "selectors": { + "&:hover": { + "backgroundColor": "rgba(255, 255, 255, 0.1)", + "color": "var(--colorNeutralForeground1)", + }, + }, + }, + "dropdownItems": { + "backgroundColor": "var(--colorNeutralBackground2)", + }, + "dropdownOptionText": { + "color": "var(--colorNeutralForeground1)", + }, + "title": { + "backgroundColor": "var(--colorNeutralBackground2)", + "borderColor": "var(--colorNeutralStroke1)", + "color": "var(--colorNeutralForeground1)", + }, } } /> diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap index 7a200006c..10b87a214 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap @@ -1,7 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = ` - + Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell. `; @@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = ` - + For queries that filter on multiple properties, create multiple single field indexes instead of a compound index. Compound indexes @@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = ` { "root": { "selectors": { + ".ms-DetailsHeader": { + "backgroundColor": "var(--colorNeutralBackground1)", + }, + ".ms-DetailsHeader-cell": { + "backgroundColor": "var(--colorNeutralBackground1)", + "color": "var(--colorNeutralForeground1)", + "selectors": { + ":hover": { + "backgroundColor": "var(--colorNeutralBackground1Hover)", + "color": "var(--colorNeutralForeground1)", + }, + }, + }, + ".ms-DetailsHeader-cellTitle": { + "color": "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow": { + "color": "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow-cell": { + "color": "var(--colorNeutralForeground1)", + }, + ".ms-DetailsRow-cell .ms-TooltipHost": { + "color": "var(--colorNeutralForeground1)", + }, ".ms-FocusZone": { "paddingTop": 0, }, + ".ms-TooltipHost": { + "color": "var(--colorNeutralForeground1)", + }, }, }, } diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx index 89810bcb6..a58bf50cd 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx @@ -1,6 +1,7 @@ import { DefaultButton, FontWeights, + IMessageBarStyles, Link, MessageBar, MessageBarType, @@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps { isReadOnly?: boolean; // true: cannot change partition key } +const darkThemeMessageBarStyles: Partial = { + root: { + selectors: { + "&.ms-MessageBar--warning": { + backgroundColor: "var(--colorStatusWarningBackground1)", + border: "1px solid var(--colorStatusWarningBorder1)", + }, + ".ms-MessageBar-icon": { + color: "var(--colorNeutralForeground1)", + }, + ".ms-MessageBar-text": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, +}; + export const PartitionKeyComponent: React.FC = ({ database, collection, @@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC = ({ 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; @@ -168,26 +188,33 @@ export const PartitionKeyComponent: React.FC = ({ Partitioning       - {partitionKeyValue} - {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"} + {partitionKeyValue} + + {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"} + {!isReadOnly && ( <> - + To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process. 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 8def1ae78..648395722 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx @@ -1,4 +1,15 @@ -import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react"; +import { + ChoiceGroup, + IChoiceGroupOption, + Label, + Link, + MessageBar, + Stack, + Text, + TextField, + TooltipHost, + mergeStyleSets, +} from "@fluentui/react"; import * as React from "react"; import * as ViewModels from "../../../../Contracts/ViewModels"; import { userContext } from "../../../../UserContext"; @@ -25,6 +36,11 @@ import { } from "../SettingsUtils"; import { ToolTipLabelComponent } from "./ToolTipLabelComponent"; +const classNames = mergeStyleSets({ + hintText: { + color: "var(--colorNeutralForeground1)", // theme-aware + }, +}); export interface SubSettingsComponentProps { collection: ViewModels.Collection; timeToLive: TtlType; @@ -185,13 +201,31 @@ export class SubSettingsComponent extends React.Component - To enable time-to-live (TTL) for your collection/documents, - - create a TTL index - - . + + To enable time-to-live (TTL) for your collection/documents,{" "} + + create a TTL index + + . + ) : ( @@ -319,23 +353,34 @@ export class SubSettingsComponent extends React.Component ( {this.getPartitionKeyVisible() && ( - + + + )} {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && ( - Large {this.partitionKeyName.toLowerCase()} has been enabled. + Large {this.partitionKeyName.toLowerCase()} has been enabled. )} {userContext.apiType === "SQL" && (this.isHierarchicalPartitionedContainer() ? ( - Hierarchically partitioned container. + Hierarchically partitioned container. ) : ( - Non-hierarchically partitioned container. + Non-hierarchically partitioned container. ))} ); diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx index a0b85cabf..f49d60967 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx @@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC = ( return ( - + {throughputBuckets?.map((bucket) => ( @@ -77,7 +77,15 @@ export const ThroughputBucketsComponent: FC = ( 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} /> - Updated cost per month + + Updated cost per month + - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min - + {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max @@ -254,12 +273,24 @@ 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 @@ -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 (
      - 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 @@ -310,15 +348,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< 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 @@ -381,7 +421,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {this.overrideWithProvisionedThroughputSettings() && ( {manualToAutoscaleDisclaimerElement} @@ -407,8 +447,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited"; return ( - - {capacity} + + {capacity} ); }; @@ -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< - {this.props.minimum.toLocaleString()} + {this.props.minimum.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)} - {this.props.instantMaximumThroughput.toLocaleString()} + {this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)} + + + {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)} - {this.props.softAllowedMaximumThroughput.toLocaleString()} + {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)} @@ -547,12 +590,41 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< } }; + private darkThemeMessageBarStyles: Partial = { + 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 ( - + {this.getThroughputWarningMessageText()} ); @@ -565,10 +637,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {/* Column 1: Minimum RU/s */} - + Minimum RU/s - + {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 */} - + Maximum RU/s - + )} {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) -{" "} @@ -687,7 +784,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {this.state.exceedFreeTierThroughput && ( {`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() && ( - + Estimate your required RU/s with {` capacity calculator`} @@ -737,6 +834,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {warningMessage && ( {warningMessage} diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap index 7b144745e..e181b166b 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap @@ -16,17 +16,35 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = ` } } role="alert" - > - + } + > + Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes @@ -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`] = ` 5,000 + + 1,000,000 + - + Storage capacity - + Unlimited @@ -500,6 +642,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = ` @@ -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 + + 1,000,000 + - + Estimate your required RU/s with - + Storage capacity - + Unlimited @@ -991,6 +1265,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = ` @@ -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 + + 1,000,000 + - + Estimate your required RU/s with - + Storage capacity - + Unlimited @@ -1431,6 +1834,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = ` - {this.props.label && {this.props.label}} + {this.props.label && ( + {this.props.label} + )} {this.props.toolTipElement && ( @@ -56,17 +88,44 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = ` onRenderLabel={[Function]} 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:disabled": { + "backgroundColor": "var(--colorNeutralBackground2)", + "color": "var(--colorNeutralForeground2)", }, }, "width": 300, }, + "subComponentStyles": { + "label": { + "root": { + "color": "var(--colorNeutralForeground1)", + }, + }, + }, } } value="" @@ -111,15 +170,47 @@ exports[`ConflictResolutionComponent Sproc text field displayed 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)", + }, + }, + }, } } /> @@ -130,17 +221,44 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = ` onRenderLabel={[Function]} 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:disabled": { + "backgroundColor": "var(--colorNeutralBackground2)", + "color": "var(--colorNeutralForeground2)", }, }, "width": 300, }, + "subComponentStyles": { + "label": { + "root": { + "color": "var(--colorNeutralForeground1)", + }, + }, + }, } } value="" diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap index 95d87da3d..7347176fd 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap @@ -26,6 +26,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1` styles={ { "root": { + "color": "var(--colorNeutralForeground1)", "fontSize": 16, "fontWeight": 600, }, @@ -54,6 +55,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1` styles={ { "root": { + "color": "var(--colorNeutralForeground1)", "fontWeight": 600, }, } @@ -66,6 +68,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1` styles={ { "root": { + "color": "var(--colorNeutralForeground1)", "fontWeight": 600, }, } @@ -81,26 +84,79 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1` } } > - - + + Non-hierarchical To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process. 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. - - + + Non-hierarchical diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap index e6b66c4c9..10bf3b17a 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap @@ -52,15 +52,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 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)", + }, + }, + }, } } /> @@ -74,17 +106,53 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -122,15 +190,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 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)", + }, + }, + }, } } /> @@ -145,7 +245,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -186,15 +286,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 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)", + }, + }, + }, } } /> @@ -206,32 +338,83 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = ` } } > - - + > + + + Large partition key has been enabled. - + Non-hierarchically partitioned container. @@ -248,17 +431,53 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = ` label="Unique keys" 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)", + }, } } /> @@ -318,15 +537,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -340,17 +591,53 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -388,15 +675,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -442,15 +761,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -466,7 +817,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -507,15 +858,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -527,32 +910,83 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = ` } } > - - + > + + + Large partition key has been enabled. - + Non-hierarchically partitioned container. @@ -569,17 +1003,53 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = ` label="Unique keys" 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)", + }, } } /> @@ -639,15 +1109,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 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)", + }, + }, + }, } } /> @@ -661,17 +1163,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -709,15 +1247,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 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)", + }, + }, + }, } } /> @@ -763,15 +1333,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 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)", + }, + }, + }, } } /> @@ -783,17 +1385,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -808,32 +1446,83 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = ` } } > - - + > + + + Large partition key has been enabled. - + Non-hierarchically partitioned container. @@ -850,17 +1539,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = ` label="Unique keys" 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)", + }, } } /> @@ -920,15 +1645,47 @@ exports[`SubSettingsComponent renders 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)", + }, + }, + }, } } /> @@ -942,17 +1699,53 @@ exports[`SubSettingsComponent renders 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -990,15 +1783,47 @@ exports[`SubSettingsComponent renders 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)", + }, + }, + }, } } /> @@ -1044,15 +1869,47 @@ exports[`SubSettingsComponent renders 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)", + }, + }, + }, } } /> @@ -1064,17 +1921,53 @@ exports[`SubSettingsComponent renders 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -1093,7 +1986,7 @@ exports[`SubSettingsComponent renders 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -1134,15 +2027,47 @@ exports[`SubSettingsComponent renders 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)", + }, + }, + }, } } /> @@ -1154,32 +2079,83 @@ exports[`SubSettingsComponent renders 1`] = ` } } > - - + > + + + Large partition key has been enabled. - + Non-hierarchically partitioned container. @@ -1196,17 +2172,53 @@ exports[`SubSettingsComponent renders 1`] = ` label="Unique keys" 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)", + }, } } /> @@ -1266,15 +2278,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -1309,15 +2353,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -1363,15 +2439,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -1383,17 +2491,53 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = ` required={true} 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)", + }, } } suffix="second(s)" @@ -1412,7 +2556,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -1453,15 +2597,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 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)", + }, + }, + }, } } /> @@ -1473,32 +2649,83 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = ` } } > - - + > + + + Large partition key has been enabled. - + Non-hierarchically partitioned container. @@ -1515,17 +2742,53 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = ` label="Unique keys" 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)", + }, } } /> diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap index fa801675f..1c082a553 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap @@ -14,6 +14,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
      - + > + + - + > + + - + + + - + + indexingPolicyContentBaseline={ + { + "automatic": true, + "excludedPaths": [], + "includedPaths": [], + "indexingMode": "consistent", + } + } + isVectorSearchEnabled={false} + logIndexingPolicySuccessMessage={[Function]} + onIndexingPolicyContentChange={[Function]} + onIndexingPolicyDirtyChange={[Function]} + refreshIndexTransformationProgress={[Function]} + resetShouldDiscardIndexingPolicy={[Function]} + shouldDiscardIndexingPolicy={false} + /> + - + + isReadOnly={false} + /> + - + > + + - + + /> +
      diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap index 3399ab9a3..baae4ef02 100644 --- a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap +++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap @@ -6,6 +6,7 @@ exports[`SettingsUtils functions render 1`] = ` Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected. - + For queries that filter on multiple properties, create multiple single field indexes instead of a compound index. Compound indexes @@ -256,7 +270,7 @@ exports[`SettingsUtils functions render 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -272,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } @@ -289,7 +303,7 @@ exports[`SettingsUtils functions render 1`] = ` styles={ { "root": { - "color": "windowtext", + "color": "var(--colorNeutralForeground1)", "fontSize": 14, }, } diff --git a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx index 4667a1a74..d5a4b9291 100644 --- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx +++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx @@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent = ({ if (isAutoscale) { return ( - - + + {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "} {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "} @@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent = ({ return ( - + Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "} {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "} diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less index 059b210f6..816145a00 100644 --- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less +++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less @@ -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); + } + } + } + } +} diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx index 02b6853ca..6d71eb9c2 100644 --- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx +++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx @@ -193,7 +193,11 @@ export const ThroughputInput: FunctionComponent = ({
      *  - + {getThroughputLabelText()} {PricingUtils.getRuToolTipText()} @@ -236,14 +240,17 @@ export const ThroughputInput: FunctionComponent = ({ {isAutoscaleSelected && ( - + Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10% of that value. - + Minimum RU/s The minimum RU/s your container will scale to @@ -260,6 +267,7 @@ export const ThroughputInput: FunctionComponent = ({ display: "flex", alignItems: "center", justifyContent: "center", + color: "var(--colorNeutralForeground1)", }} > {Math.round(throughput / 10).toString()} @@ -272,6 +280,7 @@ export const ThroughputInput: FunctionComponent = ({ fontSize: 12, fontWeight: 400, paddingBottom: 6, + color: "var(--colorNeutralForeground1)", }} > x 10 = @@ -279,7 +288,10 @@ export const ThroughputInput: FunctionComponent = ({ - + Maximum RU/s {getAutoScaleTooltip()} @@ -290,7 +302,7 @@ export const ThroughputInput: FunctionComponent = ({ 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 = ({ - + Estimate your required RU/s with  = ({ {!isAutoscaleSelected && ( - + Estimate your required RU/s with  = ({ . - + {isDatabase ? "Database" : getCollectionName()} Required RU/s {getAutoScaleTooltip()} diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap index 35028368a..db631aae0 100644 --- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap +++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap @@ -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`] = ` Estimate your required RU/s with  ) => void; + disabled?: boolean; + type?: "button" | "submit" | "reset"; +}; + +const useStyles = makeStyles({ + button: { + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, + "&:hover": { + backgroundColor: tokens.colorNeutralBackground1Hover, + color: tokens.colorNeutralForeground1Hover, + }, + "&:active": { + backgroundColor: tokens.colorNeutralBackground1Pressed, + color: tokens.colorNeutralForeground1Pressed, + }, + }, + primary: { + backgroundColor: tokens.colorBrandBackground, + color: tokens.colorNeutralForegroundOnBrand, + "&:hover": { + backgroundColor: tokens.colorBrandBackgroundHover, + }, + "&:active": { + backgroundColor: tokens.colorBrandBackgroundPressed, + }, + }, +}); + +export const Button = React.forwardRef(({ primary, ...props }, ref) => { + const baseStyles = useStyles(); + const buttonClassName = primary ? baseStyles.primary : baseStyles.button; + + return ( + + ); +}); + +Button.displayName = "Button"; diff --git a/src/Explorer/DataExplorer.tsx b/src/Explorer/DataExplorer.tsx new file mode 100644 index 000000000..ac0c399da --- /dev/null +++ b/src/Explorer/DataExplorer.tsx @@ -0,0 +1,26 @@ +import { makeStyles } from "@fluentui/react-components"; +import React from "react"; +import type { Explorer } from "../Contracts/ViewModels"; + +interface DataExplorerProps { + dataExplorer?: Explorer; +} + +const useStyles = makeStyles({ + root: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + height: "100%", + width: "100%", + }, +}); + +export const DataExplorer: React.FC = () => { + const styles = useStyles(); + + return ( +
      +
      Data Explorer Content
      +
      + ); +}; diff --git a/src/Explorer/ErrorBoundary.tsx b/src/Explorer/ErrorBoundary.tsx new file mode 100644 index 000000000..d92325b59 --- /dev/null +++ b/src/Explorer/ErrorBoundary.tsx @@ -0,0 +1,38 @@ +import React, { Component, ReactNode } from "react"; + +interface Props { + children: ReactNode; +} + +interface State { + hasError: boolean; + error: Error | null; +} + +export class ErrorBoundary extends Component { + public state: State = { + hasError: false, + error: null, + }; + + public static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + public componentDidCatch(error: Error): void { + console.error("Error caught in boundary:", error); + } + + public render() { + if (this.state.hasError) { + return ( +
      +

      Something went wrong.

      +
      {this.state.error && this.state.error.toString()}
      +
      + ); + } + + return this.props.children; + } +} diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponent.less b/src/Explorer/Menus/CommandBar/CommandBarComponent.less index b94c0b265..8c83d4e87 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponent.less +++ b/src/Explorer/Menus/CommandBar/CommandBarComponent.less @@ -4,11 +4,10 @@ padding: @SmallSpace 0px @SmallSpace 0px; .flex-display(); span { - border-left: @ButtonBorderWidth solid @BaseMediumHigh; margin: 0 10px 0 10px; } } .commandBarContainer { - border-bottom: 1px solid @BaseMedium; + border-bottom: 1px solid var(--colorNeutralStroke1); } diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx index b65310691..675d00564 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx @@ -4,6 +4,7 @@ * and update any knockout observables passed from the parent. */ import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react"; +import { makeStyles, useFluent } from "@fluentui/react-components"; import { useNotebook } from "Explorer/Notebook/useNotebook"; import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane"; import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts"; @@ -12,7 +13,6 @@ import { userContext } from "UserContext"; import * as React from "react"; import create, { UseStore } from "zustand"; import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants"; -import { StyleConstants } from "../../../Common/StyleConstants"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; import Explorer from "../../Explorer"; import { useSelectedNode } from "../../useSelectedNode"; @@ -37,12 +37,49 @@ export const useCommandBar: UseStore = create((set) => ({ setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })), })); +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", + }, + }, +}); + export const CommandBar: React.FC = ({ container }: Props) => { const selectedNodeState = useSelectedNode(); const buttons = useCommandBar((state) => state.contextButtons); const isHidden = useCommandBar((state) => state.isHidden); - const backgroundColor = StyleConstants.BaseLight; + // targetDocument is used by referenced components + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { targetDocument } = useFluent(); const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR); + const styles = useStyles(); + + const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({ + connectionInfo: state.connectionInfo, + isPhoenixNotebooks: state.isPhoenixNotebooks, + isPhoenixFeatures: state.isPhoenixFeatures, + })); // Subscribe to the store changes that affect button creation const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled); @@ -59,12 +96,15 @@ export const CommandBar: React.FC = ({ container }: Props) => { ? CommandBarComponentButtonFactory.createPostgreButtons(container) : CommandBarComponentButtonFactory.createVCoreMongoButtons(container); return ( -
      +
      @@ -77,50 +117,69 @@ export const CommandBar: React.FC = ({ container }: Props) => { ); const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container); - const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor); + const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)"); if (buttons && buttons.length > 0) { uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true)); } - const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor); + const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton( + contextButtons, + "var(--colorNeutralBackground1)", + ); if (uiFabricTabsButtons.length > 0) { uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider")); } - const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor); + const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)"); uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true)); - const connectionInfo = useNotebook((state) => state.connectionInfo); - - if ( - (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) && - connectionInfo?.status !== ConnectionStatusType.Connect - ) { + // Add connection status if needed (using the hook values we got at the top level) + if ((isPhoenixNotebooks || isPhoenixFeatures) && connectionInfo?.status !== ConnectionStatusType.Connect) { uiFabricControlButtons.unshift( CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"), ); } - const rootStyle = isFabric() - ? { - root: { - backgroundColor: "transparent", - 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)", }, - } - : { - root: { - backgroundColor: backgroundColor, + ":active": { + backgroundColor: "var(--colorNeutralBackground3)", + 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); setKeyboardHandlers(keyboardHandlers); return ( -
      +
      { + const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode); + + React.useEffect(() => { + const unsubscribe = useThemeStore.subscribe((state) => { + setDarkMode(state.isDarkMode); + }); + return unsubscribe; + }, []); + + const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme"; + + return { + iconSrc: darkMode ? SunIcon : MoonIcon, + iconAlt: "Theme Toggle", + onCommandClick: useThemeStore.getState().toggleTheme, + commandButtonLabel: undefined, + ariaLabel: tooltipText, + tooltipText: tooltipText, + hasPopup: false, + disabled: false, + }; +}; diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less index fb5aed51c..3277e7234 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less @@ -30,11 +30,11 @@ flex-shrink:0; &:hover { - background-color:@NotificationHigh; + background-color: @NotificationHigh; } &:active { - background-color:@NotificationHigh; + background-color: @NotificationHigh; } &:focus { @@ -189,4 +189,44 @@ } } } +} + +// Dark theme specific overrides +body.isDarkMode { + .notificationConsoleContainer { + .notificationConsoleHeader { + background-color: var(--colorNeutralBackground2); + color: var(--colorNeutralForeground1); + + &:hover { + background-color: var(--colorNeutralBackground3); + color: var(--colorNeutralForeground1); + } + + &:active { + background-color: var(--colorNeutralBackground4); + color: var(--colorNeutralForeground1); + } + } + + .notificationConsoleContents { + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); + + .clearNotificationsButton { + border: @ButtonBorderWidth solid var(--colorNeutralStroke1); + + &:hover { + background-color: var(--colorNeutralBackground3); + color: var(--colorNeutralForeground1); + } + + &:active { + border: @ButtonBorderWidth dashed var(--colorBrandForeground1); + background-color: var(--colorBrandBackground); + color: var(--colorNeutralForegroundOnBrand); + } + } + } + } } \ No newline at end of file diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx index e3dda1418..98cc63758 100644 --- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx +++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx @@ -152,6 +152,82 @@ export class NotificationConsoleComponent extends React.Component< selectedKey={this.state.selectedFilter} options={NotificationConsoleComponent.FilterOptions} onChange={this.onFilterSelected.bind(this)} + styles={{ + root: { + color: "var(--colorNeutralForeground1)", + }, + label: { + color: "var(--colorNeutralForeground1)", + }, + dropdown: { + backgroundColor: "var(--colorNeutralBackground2)", + borderColor: "var(--colorNeutralStroke1)", + color: "var(--colorNeutralForeground1)", + }, + title: { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + fontSize: "14px", + selectors: { + "&:hover": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorNeutralStroke1)", + }, + "&:focus": { + backgroundColor: "var(--colorNeutralBackground2)", + color: "var(--colorNeutralForeground1)", + borderColor: "var(--colorBrandStroke1)", + }, + "&:after": { + borderColor: "var(--colorNeutralStroke1)", + }, + span: { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + caretDown: { + color: "var(--colorNeutralForeground1)", + }, + callout: { + backgroundColor: "var(--colorNeutralBackground2)", + border: "1px solid var(--colorNeutralStroke1)", + }, + dropdownItems: { + backgroundColor: "var(--colorNeutralBackground2)", + }, + dropdownItem: { + backgroundColor: "transparent", + color: "var(--colorNeutralForeground1)", + selectors: { + "&:hover": { + backgroundColor: "var(--colorNeutralBackground4)", + color: "var(--colorNeutralForeground1)", + }, + "&:focus": { + backgroundColor: "var(--colorNeutralBackground4)", + color: "var(--colorNeutralForeground1)", + }, + ".ms-Dropdown-optionText": { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + dropdownItemSelected: { + backgroundColor: "var(--colorBrandBackground)", + color: "var(--colorNeutralForegroundOnBrand)", + selectors: { + ".ms-Dropdown-optionText": { + color: "var(--colorNeutralForegroundOnBrand)", + }, + }, + }, + dropdownOptionText: { + color: "var(--colorNeutralForeground1)", + }, + }} /> { <>
      - + Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your Microsoft account or a connection string. diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx index 58d7037b6..4a1009ba2 100644 --- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx @@ -350,9 +350,14 @@ export class AddCollectionPanel extends React.Component, isChecked: boolean) => this.setState({ isSharedThroughputChecked: isChecked }) @@ -649,7 +654,27 @@ export class AddCollectionPanel extends React.Component {subPartitionKeys.length > 0 && ( - + This feature allows you to partition your data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "} diff --git a/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx b/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx index 7d619b995..fbe5f8a1a 100644 --- a/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx +++ b/src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx @@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC = ({ return ( - + When changing a container’s partition key, you will need to create a destination container with the correct partition key. You may also select an existing destination container.  = ({ Add hierarchical partition key {subPartitionKeys.length > 0 && ( - + This feature allows you to partition your data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "} diff --git a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx index 6ace63e2e..52214c308 100644 --- a/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx +++ b/src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx @@ -94,7 +94,14 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => { value={selectedFileName} autoFocus readOnly - styles={{ fieldGroup: { width: 300 } }} + styles={{ + fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" }, + subComponentStyles: { + label: { + root: { color: "var(--colorNeutralForeground1)" }, + }, + }, + }} />
      @@ -997,7 +1082,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({ ariaLabel="Enable cross partition query" checked={crossPartitionQueryEnabled} onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)} - label="Enable cross-partition query" + onRenderLabel={() => ( + Enable cross-partition query + )} />
      @@ -1029,7 +1116,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({ ariaLabel="EnableQueryControl" checked={queryControlEnabled} onChange={() => setQueryControlEnabled(!queryControlEnabled)} - label="Enable query control" + onRenderLabel={() => ( + Enable query control + )} />
      @@ -1063,6 +1152,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({ onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)} ariaLabel="Max degree of parallelism" label="Max degree of parallelism" + styles={spinButtonStyles} />
      @@ -1132,7 +1222,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({ ariaLabel="Enable sample db for query exploration" checked={copilotSampleDBEnabled} onChange={handleSampleDatabaseChange} - label="Enable sample database" + onRenderLabel={() => ( + Enable sample database + )} />
      @@ -1167,7 +1259,29 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      = ({
      { useDialog.getState().showOkCancelModalDialog( "Clear History", @@ -1223,7 +1353,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
      -
      +
      Explorer Version
      {explorerVersion}
      diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap index ca0243ec7..af4dbbd11 100644 --- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap +++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap @@ -19,14 +19,14 @@ exports[`Settings Pane should render Default properly 1`] = ` >
      Page Options
      @@ -112,14 +176,14 @@ exports[`Settings Pane should render Default properly 1`] = ` >
      Query Timeout
      RU Limit
      @@ -224,14 +312,14 @@ exports[`Settings Pane should render Default properly 1`] = ` >
      Default Query Results View
      Retry Settings
      Enable container pagination
      Enable cross-partition query
      Enhanced query control
      Max degree of parallelism
      @@ -580,14 +799,14 @@ exports[`Settings Pane should render Default properly 1`] = ` >
      Advanced Settings
      @@ -630,6 +867,24 @@ exports[`Settings Pane should render Default properly 1`] = ` > Clear History @@ -639,7 +894,7 @@ exports[`Settings Pane should render Default properly 1`] = ` className="settingsSection" >
      Retry Settings
      Enable container pagination
      Display Gremlin query results as: 
      Advanced Settings
      @@ -955,6 +1295,24 @@ exports[`Settings Pane should render Gremlin properly 1`] = ` > Clear History @@ -964,7 +1322,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = ` className="settingsSection" >