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

Darktheme to stored procedures

Browse Source
This commit is contained in:
Archie Agarwal 2025-07-18 10:57:48 +05:30 committed by Sakshi Gupta
parent 3be26389f1
commit 17d08c0433
6 changed files with 286 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
less/forms.less
View File

@ -1,211 +1,227 @@
@import "./Common/Constants"; @import "./Common/Constants";
.dirty { .dirty {
border: 1px solid #9b4f96; border: 1px solid #9b4f96;
} }
.dirty:focus { .dirty:focus {
outline: 1px solid #9b4f96; outline: 1px solid #9b4f96;
} }
.tabForm { .tabForm {
padding: 12px 20px 20px 20px; padding: 12px 20px 20px 20px;
margin-left: 3px; margin-left: 3px;
} }
.storedTabForm { .storedTabForm {
padding-top: @LargeSpace; padding-top: @LargeSpace;
} }
.scaleSettingScrollable { .scaleSettingScrollable {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height:100%; height: 100%;
} }
.disableFocusDefaults[tabindex] { .disableFocusDefaults[tabindex] {
&:focus { &:focus {
outline: none; outline: none;
} }
&:active { &:active {
outline: none; outline: none;
} }
} }
.indexingPolicyEditor { .indexingPolicyEditor {
width: 100%; width: 100%;
height: calc(~"100vh - 400px"); height: calc(~"100vh - 400px");
} }
.scaleDivison { .scaleDivison {
padding: @MediumSpace 0px @DefaultSpace 0px; padding: @MediumSpace 0px @DefaultSpace 0px;
} }
.scaleSettingTitle { .scaleSettingTitle {
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.autoScaleThroughputTitle { .autoScaleThroughputTitle {
margin-bottom: @SmallSpace; margin-bottom: @SmallSpace;
} }
.autoScaleDescription { .autoScaleDescription {
margin-top: 6px; margin-top: 6px;
margin-bottom: @SmallSpace; margin-bottom: @SmallSpace;
} }
.ssExpandCollapseIcon { .ssExpandCollapseIcon {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
.ssCollapseIcon { .ssCollapseIcon {
margin-bottom: 5px; margin-bottom: 5px;
} }
.ssTextAllignment { .ssTextAllignment {
padding-left: 19px; padding-left: 19px;
} }
.throughputStorageBlock { .throughputStorageBlock {
border-top: 1px solid #bbb; border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
background-color: #ccc; background-color: #ccc;
padding-left: 10px; padding-left: 10px;
width: 315px; width: 315px;
} }
.storageCapacityTitle { .storageCapacityTitle {
padding: @LargeSpace 0px; padding: @LargeSpace 0px;
} }
.throughputStorageValue { .throughputStorageValue {
font-size: 12px; font-size: 12px;
} }
.estimatedCost, .largePartitionKeyEnabled { .estimatedCost,
padding: @SmallSpace 0px @LargeSpace; .largePartitionKeyEnabled {
padding: @SmallSpace 0px @LargeSpace;
} }
.storagePadding { .storagePadding {
padding-top: 6px; padding-top: 6px;
padding-bottom: 14px; padding-bottom: 14px;
} }
.dirtyTextbox { .dirtyTextbox {
width: 176px; width: 176px;
margin-top: 7px; margin-top: 7px;
padding-left: 5px; padding-left: 5px;
} }
.formTitleFirst { .formTitleFirst {
padding: @DefaultSpace (2 * @MediumSpace); padding: @DefaultSpace (2 * @MediumSpace);
} }
.formTitleTextbox { .formTitleTextbox {
padding: 0px 0px @DefaultSpace (2 * @MediumSpace); padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
} }
.formTree { .formTree {
border: 1px solid #969696; border: 1px solid var(--colorNeutralStroke1);
color: #393939; color: var(--colorNeutralForeground1);
padding: 0px 12px 1px 8px; background-color: var(--colorNeutralBackground1);
padding: 0px 12px 1px 8px;
} }
.formTree:hover { .formTree:hover {
border: 1px solid #969696; border: 1px solid var(--colorNeutralStroke1Hover);
background-color: #e6f8fe; background-color: var(--colorNeutralBackground1Hover);
}
.formTree::placeholder {
color: var(--colorNeutralForeground2);
opacity: 1;
} }
.formTree:active { .formTree:active {
border: 1px solid #1ebbee; border: 1px solid var(--colorNeutralStroke1Pressed);
background-color: var(--colorNeutralBackground1Pressed);
} }
.scaleForm { .scaleForm {
padding-left: 8px; padding-left: 8px;
color: @BaseDark; color: @BaseDark;
border: 1px solid #969696; border: 1px solid #969696;
min-width: @ScaleFormWidth; min-width: @ScaleFormWidth;
&:hover { &:hover {
background-color: #e6f8fe; background-color: #e6f8fe;
} }
} }
.formTitle { .formTitle {
margin-top: 16px; margin-top: 16px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.spUdfTriggerHeader { .spUdfTriggerHeader {
padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
} }
.storedUdfTriggerEditor { .storedUdfTriggerEditor {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.unselectedRadio { .unselectedRadio {
background-color: white; background-color: white;
border-color: #EEE!important; border-color: #eee !important;
color: black!important; color: black !important;
} }
.disabledRadio { .disabledRadio {
background-color: #A19F9D; background-color: #a19f9d;
border-color: #EEE!important; border-color: #eee !important;
color: white!important; color: white !important;
} }
.selectedRadio { .selectedRadio {
background-color: @AccentMediumHigh; background-color: @AccentMediumHigh;
border-color: #EEE!important; border-color: #eee !important;
color: white!important; color: white !important;
cursor: pointer; cursor: pointer;
} }
.selectedRadio:hover { .selectedRadio:hover {
background-color: @AccentMediumHigh; background-color: @AccentMediumHigh;
border-color: #EEE!important; border-color: #eee !important;
color: white!important; color: white !important;
cursor: pointer; cursor: pointer;
} }
.selectedRadio:active { .selectedRadio:active {
background-color: #0072c6; background-color: #0072c6;
border-color: #EEE!important; border-color: #eee !important;
color: white!important; color: white !important;
cursor: pointer; cursor: pointer;
border: 1px solid #0072c6; border: 1px solid #0072c6;
} }
.selectedRadio.dirty { .selectedRadio.dirty {
background-color: #9b4f96; background-color: #9b4f96;
} }
.tabs { .tabs {
margin: 0; margin: 0;
} }
.formReadOnly { .formReadOnly {
background-color: #ddd; background-color: #ddd;
border: 1px solid #969696; border: 1px solid #969696;
min-width: 184px; min-width: 184px;
padding-left: 8px; padding-left: 8px;
} }
.migration:disabled { .migration:disabled {
background-color: #ccc; background-color: #ccc;
} }
.trigger-field { .trigger-field {
width: 40%; width: 40%;
margin-top: 10px margin-top: 10px;
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
} }
.trigger-field input::placeholder {
color: var(--colorNeutralForeground3);
opacity: 1;
}
.trigger-form { .trigger-form {
padding: 10px 30px 10px 30px; background-color: var(--colorNeutralBackground1);
} color: var(--colorNeutralForeground1);
padding: 10px 30px;
}

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

@ -63,7 +63,7 @@ export interface PriceBreakdown {
export type editorType = "indexPolicy" | "computedProperties"; export type editorType = "indexPolicy" | "computedProperties";
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } }; export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = { export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: { label: {
@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
}; };
export const messageBarStyles: Partial<IMessageBarStyles> = { export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' }, root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
text: { fontSize: 14 }, text: { fontSize: 14 },
}; };
@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : ""; const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return ( return (
<Stack> <Stack>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Cost estimate*</Text> <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
{costElement} {costElement}
<Text style={{ fontWeight: 600, marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>How we calculate this</Text> <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
How we calculate this
</Text>
<Stack id="throughputSpendElement" style={{ marginTop: 5 }}> <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
<span> <span>
{numberOfRegions} region{numberOfRegions > 1 && <span>s</span>} {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU {priceBreakdown.pricePerRu}/RU
</span> </span>
</Stack> </Stack>
<Text style={{ marginTop: 15, color: 'var(--colorNeutralForeground1)' }}> <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
<em>*{estimatedCostDisclaimer}</em> <em>*{estimatedCostDisclaimer}</em>
</Text> </Text>
</Stack> </Stack>
@ -272,7 +274,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => { export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
return ( return (
<Text id="updateThroughputDelayedApplyWarningMessage"> <Text id="updateThroughputDelayedApplyWarningMessage">
Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your 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 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. with this value and wait until the scale-up is completed.
@ -290,7 +292,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected. 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: There are three options you can choose from to proceed:
</Text> </Text>
<ol style={{ fontSize: 14, color: 'var(--colorNeutralForeground1)', marginTop: "5px" }}> <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
<li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li> <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
{instantMaximumThroughput < maximumThroughput && ( {instantMaximumThroughput < maximumThroughput && (
<li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li> <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
}; };
export const saveThroughputWarningMessage: JSX.Element = ( export const saveThroughputWarningMessage: JSX.Element = (
<Text > <Text>
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
before saving your changes before saving your changes
</Text> </Text>
@ -507,17 +509,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
height: 25, height: 25,
width: 300, width: 300,
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "", borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
backgroundColor: "var(--colorNeutralBackground3)",
selectors: { selectors: {
":disabled": { ":disabled": {
backgroundColor:'var(--colorNeutralBackground1)', backgroundColor: "var(--colorNeutralBackground1)",
borderColor: StyleConstants.BaseMediumHigh, borderColor: StyleConstants.BaseMediumHigh,
}, },
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground3)",
},
},
field: {
color: "var(--colorNeutralForeground1)",
}, },
}, },
subComponentStyles: { subComponentStyles: {
label: { label: {
root: { root: {
color: 'var(--colorNeutralForeground1)' color: "var(--colorNeutralForeground1)",
}, },
}, },
}, },
@ -529,7 +538,8 @@ export const getChoiceGroupStyles = (
isHorizontal?: boolean, isHorizontal?: boolean,
): Partial<IChoiceGroupStyles> => ({ ): Partial<IChoiceGroupStyles> => ({
label: { label: {
color: 'var(--colorNeutralForeground1)', }, color: "var(--colorNeutralForeground1)",
},
flexContainer: [ flexContainer: [
{ {
selectors: { selectors: {
@ -544,7 +554,7 @@ export const getChoiceGroupStyles = (
fontSize: 14, fontSize: 14,
fontFamily: StyleConstants.DataExplorerFont, fontFamily: StyleConstants.DataExplorerFont,
padding: "2px 5px", padding: "2px 5px",
color: 'var(--colorNeutralForeground1)' color: "var(--colorNeutralForeground1)",
}, },
}, },
display: isHorizontal ? "inline-flex" : "default", display: isHorizontal ? "inline-flex" : "default",

4
src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
View File

@ -1,4 +1,4 @@
import { Link } from "@fluentui/react-components"; import { Link, tokens } from "@fluentui/react-components";
import QueryError from "Common/QueryError"; import QueryError from "Common/QueryError";
import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar"; import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
import { MessageBanner } from "Explorer/Controls/MessageBanner"; import { MessageBanner } from "Explorer/Controls/MessageBanner";
@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
<p> <p>
<img src={RunQuery} aria-hidden="true" /> <img src={RunQuery} aria-hidden="true" />
</p> </p>
<p>Execute a query to see the results</p> <p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
</div> </div>
</div> </div>
); );

113
src/Explorer/Tabs/TriggerTabContent.tsx
View File

@ -1,5 +1,6 @@
import { TriggerDefinition } from "@azure/cosmos"; import { TriggerDefinition } from "@azure/cosmos";
import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react"; import { getTheme, IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react";
import { Dropdown } from "@fluentui/react/lib/Dropdown";
import { KeyboardAction } from "KeyboardShortcuts"; import { KeyboardAction } from "KeyboardShortcuts";
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils"; import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import React, { Component } from "react"; import React, { Component } from "react";
@ -17,11 +18,46 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
import { EditorReact } from "../Controls/Editor/EditorReact"; import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter"; import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import TriggerTab from "./TriggerTab"; import TriggerTab from "./TriggerTab";
const triggerTypeOptions: IDropdownOption[] = [ const triggerTypeOptions: IDropdownOption[] = [
{ key: "Pre", text: "Pre" }, { key: "Pre", text: "Pre" },
{ key: "Post", text: "Post" }, { key: "Post", text: "Post" },
]; ];
const theme = getTheme();
const dropdownStyles: Partial<IDropdownStyles> = {
label: {
color: "var(--colorNeutralForeground1)",
},
dropdown: {
width: "100%",
},
title: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItem: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItems: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItemSelected: {
backgroundColor: "var(--colorBrandBackgroundSelected)",
color: "var(--colorNeutralForegroundOnBrand)",
selectors: {
"&:before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
bottom: 0,
width: "4px",
background: "var(--colorBrandBackground)",
},
},
},
};
const triggerOperationOptions: IDropdownOption[] = [ const triggerOperationOptions: IDropdownOption[] = [
{ key: "All", text: "All" }, { key: "All", text: "All" },
@ -304,6 +340,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
value={triggerId} value={triggerId}
readOnly={!isIdEditable} readOnly={!isIdEditable}
onChange={this.handleTriggerIdChange} onChange={this.handleTriggerIdChange}
styles={{
root: { width: "40%", marginTop: "10px" },
fieldGroup: {
backgroundColor: "var(--colorNeutralBackground1)",
border: "1px solid var(--colorNeutralStroke1)",
},
field: {
color: "var(--colorNeutralForeground1)",
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/> />
<Dropdown <Dropdown
placeholder="Trigger Type" placeholder="Trigger Type"
@ -312,6 +365,42 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
selectedKey={triggerType} selectedKey={triggerType}
className="trigger-field" className="trigger-field"
onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")} onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")}
styles={{
root: { width: "40%", marginTop: "10px" },
// dropdown: {
// backgroundColor: "var(--colorNeutralBackground1)",
// color: "var(--colorNeutralForeground1)",
// border: "1px solid var(--colorNeutralStroke1)",
// },
// dropdown: {
// backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
// borderColor: theme.palette.neutralSecondary,
// },
// title: {
// backgroundColor: theme.palette.neutralLighterAlt,
// color: theme.semanticColors.bodyText, // selected value color
// },
dropdown: {
backgroundColor: theme.semanticColors.bodyBackground,
borderColor: theme.semanticColors.bodyDivider,
},
title: {
backgroundColor: theme.semanticColors.bodyBackground,
color: theme.semanticColors.bodyText,
},
callout: {
backgroundColor: theme.semanticColors.bodyBackground,
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/> />
<Dropdown <Dropdown
placeholder="Trigger Operation" placeholder="Trigger Operation"
@ -322,6 +411,26 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
onChange={(event, selectedKey) => onChange={(event, selectedKey) =>
this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation") this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation")
} }
styles={dropdownStyles}
// styles={{
// root: { width: "40%", marginTop: "10px" },
// dropdown: {
// backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
// borderColor: theme.palette.neutralSecondary,
// },
// title: {
// backgroundColor: theme.palette.neutralLighterAlt,
// color: theme.semanticColors.bodyText, // selected value color
// },
// subComponentStyles: {
// label: {
// root: {
// color: "var(--colorNeutralForeground1)",
// },
// },
// },
// }}
/> />
<Label className="trigger-field">Trigger Body</Label> <Label className="trigger-field">Trigger Body</Label>
<EditorReact <EditorReact

56
src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
View File

@ -1,7 +1,9 @@
import { UserDefinedFunctionDefinition } from "@azure/cosmos"; import { UserDefinedFunctionDefinition } from "@azure/cosmos";
import { Label, TextField } from "@fluentui/react"; import { Label, TextField } from "@fluentui/react";
import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import { KeyboardAction } from "KeyboardShortcuts"; import { KeyboardAction } from "KeyboardShortcuts";
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils"; import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import { isDarkMode } from "hooks/useTheme";
import React, { Component } from "react"; import React, { Component } from "react";
import DiscardIcon from "../../../images/discard.svg"; import DiscardIcon from "../../../images/discard.svg";
import SaveIcon from "../../../images/save-cosmos.svg"; import SaveIcon from "../../../images/save-cosmos.svg";
@ -16,7 +18,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
import { EditorReact } from "../Controls/Editor/EditorReact"; import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter"; import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import UserDefinedFunctionTab from "./UserDefinedFunctionTab"; import UserDefinedFunctionTab from "./UserDefinedFunctionTab";
interface IUserDefinedFunctionTabContentState { interface IUserDefinedFunctionTabContentState {
udfId: string; udfId: string;
udfBody: string; udfBody: string;
@ -258,23 +259,46 @@ export default class UserDefinedFunctionTabContent extends Component<
render(): JSX.Element { render(): JSX.Element {
const { udfId, udfBody, isUdfIdEditable } = this.state; const { udfId, udfBody, isUdfIdEditable } = this.state;
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
return ( return (
<div className="tab-pane flexContainer trigger-form" role="tabpanel"> <div className="tab-pane flexContainer trigger-form" role="tabpanel">
<TextField <FluentProvider theme={currentTheme}>
className="trigger-field" <TextField
label="User Defined Function Id" className="trigger-field"
id="entityTimeId" label="User Defined Function Id"
autoFocus id="entityTimeId"
required autoFocus
readOnly={!isUdfIdEditable} required
type="text" readOnly={!isUdfIdEditable}
pattern={ValidCosmosDbIdInputPattern.source} type="text"
title={ValidCosmosDbIdDescription} pattern={ValidCosmosDbIdInputPattern.source}
placeholder="Enter the new user defined function id" title={ValidCosmosDbIdDescription}
size={40} placeholder="Enter the new user defined function id"
value={udfId} size={40}
onChange={this.handleUdfIdChange} value={udfId}
/> onChange={this.handleUdfIdChange}
styles={{
root: {
width: "40%",
marginTop: "10px",
},
fieldGroup: {
backgroundColor: "var(--colorNeutralBackground1)",
border: "1px solid var(--colorNeutralStroke1)",
},
field: {
color: "var(--colorNeutralForeground2)",
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/>{" "}
</FluentProvider>
<Label className="trigger-field">User Defined Function Body</Label> <Label className="trigger-field">User Defined Function Body</Label>
<EditorReact <EditorReact
language={"javascript"} language={"javascript"}

6
src/hooks/useTheme.tsx
View File

@ -17,13 +17,13 @@ export const CustomThemeProvider: FC<ThemeProviderProps> = ({ children, theme })
const isDarkMode = theme === "Dark"; const isDarkMode = theme === "Dark";
return <ThemeContext.Provider value={{ theme, isDarkMode }}>{children}</ThemeContext.Provider>; return <ThemeContext.Provider value={{ theme, isDarkMode }}>{children}</ThemeContext.Provider>;
}; };
export const isDarkMode = true; export const isDarkMode = true;
export const monacoTheme = isDarkMode ? "vs-dark" : "vs"; export const monacoTheme = isDarkMode ? "vs-dark" : "vs";
export const useTheme = () => { export const useTheme = () => {
const { targetDocument } = useFluent(); const { targetDocument } = useFluent();
const context = React.useContext(ThemeContext); const context = React.useContext(ThemeContext);
const [isDarkMode, setIsDarkMode] = useState(() => { const [isDarkMode, setIsDarkMode] = useState(() => {
// First check if we're in a theme context // First check if we're in a theme context
if (context) { if (context) {
@ -60,6 +60,6 @@ export const useTheme = () => {
}, [targetDocument, context]); }, [targetDocument, context]);
return { return {
isDarkMode isDarkMode,
}; };
}; };