mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-10-13 15:28:05 +01:00
Darktheme to stored procedures
This commit is contained in:
Archie Agarwal
Sakshi Gupta
parent
3be26389f1
commit
17d08c0433
@ -20,7 +20,7 @@
|
||||
.scaleSettingScrollable {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.disableFocusDefaults[tabindex] {
|
||||
@ -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,34 +157,34 @@
|
||||
|
||||
.unselectedRadio {
|
||||
background-color: white;
|
||||
border-color: #EEE!important;
|
||||
color: black!important;
|
||||
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;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedRadio:hover {
|
||||
background-color: @AccentMediumHigh;
|
||||
border-color: #EEE!important;
|
||||
color: white!important;
|
||||
border-color: #eee !important;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectedRadio:active {
|
||||
background-color: #0072c6;
|
||||
border-color: #EEE!important;
|
||||
color: white!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;
|
||||
}
|
||||
@ -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>
|
||||
@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
|
||||
};
|
||||
|
||||
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
|
||||
before saving your changes
|
||||
</Text>
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"}
|
||||
|
||||
@ -60,6 +60,6 @@ export const useTheme = () => {
|
||||
}, [targetDocument, context]);
|
||||
|
||||
return {
|
||||
isDarkMode
|
||||
isDarkMode,
|
||||
};
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user