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

48
less/forms.less
View File

@ -79,13 +79,13 @@
.storageCapacityTitle {
padding: @LargeSpace 0px;
}
.throughputStorageValue {
font-size: 12px;
}
.estimatedCost, .largePartitionKeyEnabled {
.estimatedCost,
.largePartitionKeyEnabled {
padding: @SmallSpace 0px @LargeSpace;
}
@ -109,18 +109,25 @@
}
.formTree {
border: 1px solid #969696;
color: #393939;
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 {
@ -139,7 +146,6 @@
margin-bottom: 4px;
}
.spUdfTriggerHeader {
padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
}
@ -151,33 +157,33 @@
.unselectedRadio {
background-color: white;
border-color: #EEE!important;
border-color: #eee !important;
color: black !important;
}
.disabledRadio {
background-color: #A19F9D;
border-color: #EEE!important;
background-color: #a19f9d;
border-color: #eee !important;
color: white !important;
}
.selectedRadio {
background-color: @AccentMediumHigh;
border-color: #EEE!important;
border-color: #eee !important;
color: white !important;
cursor: pointer;
}
.selectedRadio:hover {
background-color: @AccentMediumHigh;
border-color: #EEE!important;
border-color: #eee !important;
color: white !important;
cursor: pointer;
}
.selectedRadio:active {
background-color: #0072c6;
border-color: #EEE!important;
border-color: #eee !important;
color: white !important;
cursor: pointer;
border: 1px solid #0072c6;
@ -204,8 +210,18 @@
.trigger-field {
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 {
padding: 10px 30px 10px 30px;
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
padding: 10px 30px;
}

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

@ -63,7 +63,7 @@ export interface PriceBreakdown {
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 = {
label: {
@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
};
export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' },
root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
text: { fontSize: 14 },
};
@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return (
<Stack>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Cost estimate*</Text>
<Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
{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 }}>
<span>
{numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU
</span>
</Stack>
<Text style={{ marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>
<Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
<em>*{estimatedCostDisclaimer}</em>
</Text>
</Stack>
@ -290,7 +292,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:
</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>
{instantMaximumThroughput < maximumThroughput && (
<li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@ -507,17 +509,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
height: 25,
width: 300,
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
backgroundColor: "var(--colorNeutralBackground3)",
selectors: {
":disabled": {
backgroundColor:'var(--colorNeutralBackground1)',
backgroundColor: "var(--colorNeutralBackground1)",
borderColor: StyleConstants.BaseMediumHigh,
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground3)",
},
},
field: {
color: "var(--colorNeutralForeground1)",
},
},
subComponentStyles: {
label: {
root: {
color: 'var(--colorNeutralForeground1)'
color: "var(--colorNeutralForeground1)",
},
},
},
@ -529,7 +538,8 @@ export const getChoiceGroupStyles = (
isHorizontal?: boolean,
): Partial<IChoiceGroupStyles> => ({
label: {
color: 'var(--colorNeutralForeground1)', },
color: "var(--colorNeutralForeground1)",
},
flexContainer: [
{
selectors: {
@ -544,7 +554,7 @@ export const getChoiceGroupStyles = (
fontSize: 14,
fontFamily: StyleConstants.DataExplorerFont,
padding: "2px 5px",
color: 'var(--colorNeutralForeground1)'
color: "var(--colorNeutralForeground1)",
},
},
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 { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
import { MessageBanner } from "Explorer/Controls/MessageBanner";
@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
<p>
<img src={RunQuery} aria-hidden="true" />
</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>
);

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

@ -1,5 +1,6 @@
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 { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import React, { Component } from "react";
@ -17,11 +18,46 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import TriggerTab from "./TriggerTab";
const triggerTypeOptions: IDropdownOption[] = [
{ key: "Pre", text: "Pre" },
{ 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[] = [
{ key: "All", text: "All" },
@ -304,6 +340,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
value={triggerId}
readOnly={!isIdEditable}
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
placeholder="Trigger Type"
@ -312,6 +365,42 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
selectedKey={triggerType}
className="trigger-field"
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
placeholder="Trigger Operation"
@ -322,6 +411,26 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
onChange={(event, selectedKey) =>
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>
<EditorReact

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

@ -1,7 +1,9 @@
import { UserDefinedFunctionDefinition } from "@azure/cosmos";
import { Label, TextField } from "@fluentui/react";
import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import { KeyboardAction } from "KeyboardShortcuts";
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import { isDarkMode } from "hooks/useTheme";
import React, { Component } from "react";
import DiscardIcon from "../../../images/discard.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 { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import UserDefinedFunctionTab from "./UserDefinedFunctionTab";
interface IUserDefinedFunctionTabContentState {
udfId: string;
udfBody: string;
@ -258,8 +259,10 @@ export default class UserDefinedFunctionTabContent extends Component<
render(): JSX.Element {
const { udfId, udfBody, isUdfIdEditable } = this.state;
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
return (
<div className="tab-pane flexContainer trigger-form" role="tabpanel">
<FluentProvider theme={currentTheme}>
<TextField
className="trigger-field"
label="User Defined Function Id"
@ -274,7 +277,28 @@ export default class UserDefinedFunctionTabContent extends Component<
size={40}
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>
<EditorReact
language={"javascript"}

2
src/hooks/useTheme.tsx
View File

@ -60,6 +60,6 @@ export const useTheme = () => {
}, [targetDocument, context]);
return {
isDarkMode
isDarkMode,
};
};