mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 17:01:13 +00:00
Added more selfserve changes (#443)
* exposed baselineValues * added getOnSaveNotification * disable UI when onSave is taking place * added optional polling * Added portal notifications * minor edits * added label for description * Added correlationids and polling of refresh * added label tooltip * removed ClassInfo decorator * Added dynamic decription * added info and warninf types for description * promise retry changes * compile errors fixed * merged sqlxEdits * undid sqlx changes * added completed notification * passed retryInterval in notif options * added polling on landing on the page * edits for error display * added link generation * addressed PR comments * modified test * fixed compilation error
This commit is contained in:
Srinath Narayanan
committed by
GitHub
GitHub
parent
c1b74266eb
commit
ecdc41ada9
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { shallow } from "enzyme";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
|
||||
import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
|
||||
import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes";
|
||||
|
||||
describe("SmartUiComponent", () => {
|
||||
const exampleData: SmartUiDescriptor = {
|
||||
@@ -18,10 +18,12 @@ describe("SmartUiComponent", () => {
|
||||
{
|
||||
id: "description",
|
||||
input: {
|
||||
labelTKey: undefined,
|
||||
dataFieldName: "description",
|
||||
type: "string",
|
||||
description: {
|
||||
textTKey: "this is an example description text.",
|
||||
type: DescriptionType.Text,
|
||||
link: {
|
||||
href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
|
||||
textTKey: "Click here for more information.",
|
||||
|
||||
@@ -6,12 +6,13 @@ import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
DescriptionType,
|
||||
Info,
|
||||
InputType,
|
||||
InputTypeValue,
|
||||
@@ -19,6 +20,7 @@ import {
|
||||
SmartUiInput,
|
||||
} from "../../../SelfServe/SelfServeTypes";
|
||||
import { TFunction } from "i18next";
|
||||
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
|
||||
|
||||
/**
|
||||
* Generic UX renderer
|
||||
@@ -29,15 +31,14 @@ import { TFunction } from "i18next";
|
||||
*/
|
||||
|
||||
interface BaseDisplay {
|
||||
labelTKey: string;
|
||||
dataFieldName: string;
|
||||
errorMessage?: string;
|
||||
type: InputTypeValue;
|
||||
}
|
||||
|
||||
interface BaseInput extends BaseDisplay {
|
||||
labelTKey: string;
|
||||
placeholderTKey?: string;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -67,7 +68,8 @@ interface ChoiceInput extends BaseInput {
|
||||
}
|
||||
|
||||
interface DescriptionDisplay extends BaseDisplay {
|
||||
description: Description;
|
||||
description?: Description;
|
||||
isDynamicDescription?: boolean;
|
||||
}
|
||||
|
||||
type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
|
||||
@@ -123,25 +125,28 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
private renderInfo(info: Info): JSX.Element {
|
||||
return (
|
||||
<MessageBar styles={{ root: { width: 400 } }}>
|
||||
{this.props.getTranslation(info.messageTKey)}
|
||||
{info.link && (
|
||||
<Link href={info.link.href} target="_blank">
|
||||
{this.props.getTranslation(info.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</MessageBar>
|
||||
info && (
|
||||
<Text>
|
||||
{this.props.getTranslation(info.messageTKey)}
|
||||
{` `}
|
||||
{info.link && (
|
||||
<Link href={info.link.href} target="_blank">
|
||||
{this.props.getTranslation(info.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
private renderTextInput(input: StringInput): JSX.Element {
|
||||
private renderTextInput(input: StringInput, labelId: string): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<div className="stringInputContainer">
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textField-input`}
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
aria-labelledby={labelId}
|
||||
type="text"
|
||||
value={value || ""}
|
||||
placeholder={this.props.getTranslation(input.placeholderTKey)}
|
||||
@@ -149,32 +154,36 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDescription(input: DescriptionDisplay): JSX.Element {
|
||||
const description = input.description;
|
||||
return (
|
||||
<Text id={`${input.dataFieldName}-text-display`}>
|
||||
{this.props.getTranslation(input.description.textTKey)}{" "}
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
|
||||
const dataFieldName = input.dataFieldName;
|
||||
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
|
||||
if (!description) {
|
||||
return this.renderError("Description is not provided.");
|
||||
}
|
||||
const descriptionElement = (
|
||||
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
|
||||
{this.props.getTranslation(description.textTKey)}
|
||||
{` `}
|
||||
{description.link && (
|
||||
<Link target="_blank" href={input.description.link.href}>
|
||||
{this.props.getTranslation(input.description.link.textTKey)}
|
||||
<Link target="_blank" href={description.link.href}>
|
||||
{this.props.getTranslation(description.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
|
||||
if (description.type === DescriptionType.Text) {
|
||||
return descriptionElement;
|
||||
}
|
||||
const messageBarType =
|
||||
description.type === DescriptionType.InfoMessageBar ? MessageBarType.info : MessageBarType.warning;
|
||||
return <MessageBar messageBarType={messageBarType}>{descriptionElement}</MessageBar>;
|
||||
}
|
||||
|
||||
private clearError(dataFieldName: string): void {
|
||||
@@ -220,13 +229,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput): JSX.Element {
|
||||
private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
|
||||
const { labelTKey, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
label: this.props.getTranslation(labelTKey),
|
||||
min: min,
|
||||
max: max,
|
||||
ariaLabel: labelTKey,
|
||||
ariaLabel: this.props.getTranslation(labelTKey),
|
||||
step: step,
|
||||
};
|
||||
|
||||
@@ -243,13 +251,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
|
||||
onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
|
||||
labelPosition={Position.top}
|
||||
aria-labelledby={labelId}
|
||||
disabled={disabled}
|
||||
styles={{
|
||||
label: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{this.state.errors.has(dataFieldName) && (
|
||||
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
||||
@@ -266,10 +269,6 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onChange={(newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
titleLabel: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
valueLabel: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
@@ -280,13 +279,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput): JSX.Element {
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
aria-labelledby={labelId}
|
||||
checked={value || false}
|
||||
onText={this.props.getTranslation(input.trueLabelTKey)}
|
||||
offText={this.props.getTranslation(input.falseLabelTKey)}
|
||||
@@ -297,8 +296,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
);
|
||||
}
|
||||
|
||||
private renderChoiceInput(input: ChoiceInput): JSX.Element {
|
||||
const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
|
||||
const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
|
||||
const value = this.props.currentValues.get(dataFieldName)?.value as string;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
||||
let selectedKey = value ? value : defaultKey;
|
||||
@@ -308,7 +307,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return (
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropdown-input`}
|
||||
label={this.props.getTranslation(labelTKey)}
|
||||
aria-labelledby={labelId}
|
||||
selectedKey={selectedKey}
|
||||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={this.props.getTranslation(placeholderTKey)}
|
||||
@@ -319,40 +318,53 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
}))}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
label: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
dropdown: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private renderError(input: AnyDisplay): JSX.Element {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
|
||||
private renderError(errorMessage: string): JSX.Element {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderDisplay(input: AnyDisplay): JSX.Element {
|
||||
private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input);
|
||||
return this.renderError(input.errorMessage);
|
||||
}
|
||||
const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
|
||||
if (inputHidden) {
|
||||
return <></>;
|
||||
}
|
||||
const labelId = `${input.dataFieldName}-label`;
|
||||
return (
|
||||
<Stack>
|
||||
{input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
)}
|
||||
{this.renderDisplay(input, labelId)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
|
||||
switch (input.type) {
|
||||
case "string":
|
||||
if ("description" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay);
|
||||
if ("description" in input || "isDynamicDescription" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId);
|
||||
}
|
||||
return this.renderTextInput(input as StringInput);
|
||||
return this.renderTextInput(input as StringInput, labelId);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput);
|
||||
return this.renderNumberInput(input as NumberInput, labelId);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput);
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput);
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
@@ -363,10 +375,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
<Stack.Item>
|
||||
{node.info && this.renderInfo(node.info as Info)}
|
||||
{node.input && this.renderDisplay(node.input)}
|
||||
</Stack.Item>
|
||||
<Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
|
||||
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -9,25 +9,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledMessageBarBase
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
<StackItem />
|
||||
<div
|
||||
key="description"
|
||||
>
|
||||
@@ -40,18 +22,21 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Text
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -67,53 +52,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={true}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label="Throughput (input)"
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={true}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -130,37 +115,39 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"titleLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -197,35 +184,34 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
disabled={true}
|
||||
id="containerId-textField-input"
|
||||
label="Container id"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"subComponentStyles": Object {
|
||||
"label": Object {
|
||||
"root": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
disabled={true}
|
||||
id="containerId-textField-input"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -241,22 +227,31 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledToggleBase
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
label="Analytical Store"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -272,47 +267,50 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledWithResponsiveMode
|
||||
disabled={true}
|
||||
id="database-dropdown-input"
|
||||
label="Database"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
disabled={true}
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -328,25 +326,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledMessageBarBase
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
<StackItem />
|
||||
<div
|
||||
key="description"
|
||||
>
|
||||
@@ -359,18 +339,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Text
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -386,53 +369,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label="Throughput (input)"
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -449,36 +432,38 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"titleLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -515,34 +500,33 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
id="containerId-textField-input"
|
||||
label="Container id"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"subComponentStyles": Object {
|
||||
"label": Object {
|
||||
"root": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
id="containerId-textField-input"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -558,21 +542,30 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledToggleBase
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
label="Analytical Store"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -588,46 +581,49 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledWithResponsiveMode
|
||||
id="database-dropdown-input"
|
||||
label="Database"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user