mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 17:01:13 +00:00
Added the Self Serve Data Model (#367)
* added recursion and inition decorators * working version * added todo comment and removed console.log * Added Recursive add * removed type requirement * proper resolution of promises * added custom element and base class * Made selfServe standalone page * Added custom renderer as async type * Added overall defaults * added inital open from data explorer * removed landingpage * added feature for self serve type * renamed sqlx->example and added invalid type * Added comments for Example * removed unnecessary changes * Resolved PR comments Added tests Moved onSubmt and initialize inside base class Moved testExplorer to separate folder made fields of SelfServe Class non static * fixed lint errors * fixed compilation errors * Removed reactbinding changes * renamed dropdown -> choice * Added SelfServeComponent * Addressed PR comments * merged master * added selfservetype.none for emulator and hosted experience * fixed formatting errors * Removed "any" type * undid package.json changes
This commit is contained in:
Srinath Narayanan
committed by
GitHub
GitHub
parent
2b2de7c645
commit
c1937ca464
@@ -48,6 +48,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
|
||||
{ key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
|
||||
{ key: "feature.enablettl", label: "Enable TTL", value: "true" },
|
||||
{ key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
|
||||
{ key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
|
||||
{
|
||||
key: "feature.enableLinkInjection",
|
||||
label: "Enable Injecting Notebook Viewer Link into the first cell",
|
||||
|
||||
@@ -157,14 +157,14 @@ exports[`Feature panel renders all flags 1`] = `
|
||||
/>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
key="feature.enableLinkInjection"
|
||||
label="Enable Injecting Notebook Viewer Link into the first cell"
|
||||
key="feature.selfServeType"
|
||||
label="Self serve feature"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
key="feature.canexceedmaximumvalue"
|
||||
label="Can exceed max value"
|
||||
key="feature.enableLinkInjection"
|
||||
label="Enable Injecting Notebook Viewer Link into the first cell"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
</Stack>
|
||||
@@ -172,6 +172,12 @@ exports[`Feature panel renders all flags 1`] = `
|
||||
className="checkboxRow"
|
||||
horizontalAlign="space-between"
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
key="feature.canexceedmaximumvalue"
|
||||
label="Can exceed max value"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
<StyledCheckboxBase
|
||||
checked={false}
|
||||
key="feature.enablefixedcollectionwithsharedthroughput"
|
||||
|
||||
@@ -1026,6 +1026,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"notificationConsoleData": [Function],
|
||||
"onRefreshDatabasesKeyPress": [Function],
|
||||
"onRefreshResourcesClick": [Function],
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"onToggleKeyDown": [Function],
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
@@ -1071,6 +1072,8 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"renewToken": [Function],
|
||||
"renewTokenError": [Function],
|
||||
"resourceTokenCollection": [Function],
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
@@ -1117,6 +1120,14 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"selfServeComponentAdapter": SelfServeComponentAdapter {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeType": [Function],
|
||||
"serverId": [Function],
|
||||
"settingsPane": SettingsPane {
|
||||
"container": [Circular],
|
||||
@@ -1163,6 +1174,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"shouldShowContextSwitchPrompt": [Function],
|
||||
"shouldShowDataAccessExpiryDialog": [Function],
|
||||
"shouldShowShareDialogContents": [Function],
|
||||
"signInAad": [Function],
|
||||
"sparkClusterConnectionInfo": [Function],
|
||||
"splashScreenAdapter": SplashScreenComponentAdapter {
|
||||
"clearMostRecent": [Function],
|
||||
@@ -1229,6 +1241,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"toggleLeftPaneExpandedKeyPress": [Function],
|
||||
"toggleRead": [Function],
|
||||
"toggleReadWrite": [Function],
|
||||
"tokenForRenewal": [Function],
|
||||
"uploadFilePane": UploadFilePane {
|
||||
"container": [Circular],
|
||||
"extensions": [Function],
|
||||
@@ -2296,6 +2309,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"notificationConsoleData": [Function],
|
||||
"onRefreshDatabasesKeyPress": [Function],
|
||||
"onRefreshResourcesClick": [Function],
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"onToggleKeyDown": [Function],
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
@@ -2341,6 +2355,8 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"renewToken": [Function],
|
||||
"renewTokenError": [Function],
|
||||
"resourceTokenCollection": [Function],
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
@@ -2387,6 +2403,14 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"selfServeComponentAdapter": SelfServeComponentAdapter {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeType": [Function],
|
||||
"serverId": [Function],
|
||||
"settingsPane": SettingsPane {
|
||||
"container": [Circular],
|
||||
@@ -2433,6 +2457,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"shouldShowContextSwitchPrompt": [Function],
|
||||
"shouldShowDataAccessExpiryDialog": [Function],
|
||||
"shouldShowShareDialogContents": [Function],
|
||||
"signInAad": [Function],
|
||||
"sparkClusterConnectionInfo": [Function],
|
||||
"splashScreenAdapter": SplashScreenComponentAdapter {
|
||||
"clearMostRecent": [Function],
|
||||
@@ -2499,6 +2524,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"toggleLeftPaneExpandedKeyPress": [Function],
|
||||
"toggleRead": [Function],
|
||||
"toggleReadWrite": [Function],
|
||||
"tokenForRenewal": [Function],
|
||||
"uploadFilePane": UploadFilePane {
|
||||
"container": [Circular],
|
||||
"extensions": [Function],
|
||||
@@ -3579,6 +3605,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"notificationConsoleData": [Function],
|
||||
"onRefreshDatabasesKeyPress": [Function],
|
||||
"onRefreshResourcesClick": [Function],
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"onToggleKeyDown": [Function],
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
@@ -3624,6 +3651,8 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"renewToken": [Function],
|
||||
"renewTokenError": [Function],
|
||||
"resourceTokenCollection": [Function],
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
@@ -3670,6 +3699,14 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"selfServeComponentAdapter": SelfServeComponentAdapter {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeType": [Function],
|
||||
"serverId": [Function],
|
||||
"settingsPane": SettingsPane {
|
||||
"container": [Circular],
|
||||
@@ -3716,6 +3753,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"shouldShowContextSwitchPrompt": [Function],
|
||||
"shouldShowDataAccessExpiryDialog": [Function],
|
||||
"shouldShowShareDialogContents": [Function],
|
||||
"signInAad": [Function],
|
||||
"sparkClusterConnectionInfo": [Function],
|
||||
"splashScreenAdapter": SplashScreenComponentAdapter {
|
||||
"clearMostRecent": [Function],
|
||||
@@ -3782,6 +3820,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"toggleLeftPaneExpandedKeyPress": [Function],
|
||||
"toggleRead": [Function],
|
||||
"toggleReadWrite": [Function],
|
||||
"tokenForRenewal": [Function],
|
||||
"uploadFilePane": UploadFilePane {
|
||||
"container": [Circular],
|
||||
"extensions": [Function],
|
||||
@@ -4849,6 +4888,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"notificationConsoleData": [Function],
|
||||
"onRefreshDatabasesKeyPress": [Function],
|
||||
"onRefreshResourcesClick": [Function],
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"onToggleKeyDown": [Function],
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
@@ -4894,6 +4934,8 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"title": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"renewToken": [Function],
|
||||
"renewTokenError": [Function],
|
||||
"resourceTokenCollection": [Function],
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
@@ -4940,6 +4982,14 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"selfServeComponentAdapter": SelfServeComponentAdapter {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
|
||||
"parameters": [Function],
|
||||
},
|
||||
"selfServeType": [Function],
|
||||
"serverId": [Function],
|
||||
"settingsPane": SettingsPane {
|
||||
"container": [Circular],
|
||||
@@ -4986,6 +5036,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"shouldShowContextSwitchPrompt": [Function],
|
||||
"shouldShowDataAccessExpiryDialog": [Function],
|
||||
"shouldShowShareDialogContents": [Function],
|
||||
"signInAad": [Function],
|
||||
"sparkClusterConnectionInfo": [Function],
|
||||
"splashScreenAdapter": SplashScreenComponentAdapter {
|
||||
"clearMostRecent": [Function],
|
||||
@@ -5052,6 +5103,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"toggleLeftPaneExpandedKeyPress": [Function],
|
||||
"toggleRead": [Function],
|
||||
"toggleReadWrite": [Function],
|
||||
"tokenForRenewal": [Function],
|
||||
"uploadFilePane": UploadFilePane {
|
||||
"container": [Circular],
|
||||
"extensions": [Function],
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { Descriptor, SmartUiComponent } from "./SmartUiComponent";
|
||||
import { shallow } from "enzyme";
|
||||
import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
|
||||
|
||||
describe("SmartUiComponent", () => {
|
||||
const exampleData: Descriptor = {
|
||||
const exampleData: SmartUiDescriptor = {
|
||||
root: {
|
||||
id: "root",
|
||||
info: {
|
||||
@@ -24,7 +24,7 @@ describe("SmartUiComponent", () => {
|
||||
max: 500,
|
||||
step: 10,
|
||||
defaultValue: 400,
|
||||
inputType: "spin"
|
||||
uiType: UiType.Spinner
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -37,7 +37,21 @@ describe("SmartUiComponent", () => {
|
||||
max: 500,
|
||||
step: 10,
|
||||
defaultValue: 400,
|
||||
inputType: "slider"
|
||||
uiType: UiType.Slider
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "throughput3",
|
||||
input: {
|
||||
label: "Throughput (invalid)",
|
||||
dataFieldName: "throughput3",
|
||||
type: "boolean",
|
||||
min: 400,
|
||||
max: 500,
|
||||
step: 10,
|
||||
defaultValue: 400,
|
||||
uiType: UiType.Spinner,
|
||||
errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -64,11 +78,11 @@ describe("SmartUiComponent", () => {
|
||||
input: {
|
||||
label: "Database",
|
||||
dataFieldName: "database",
|
||||
type: "enum",
|
||||
type: "object",
|
||||
choices: [
|
||||
{ label: "Database 1", key: "db1", value: "database1" },
|
||||
{ label: "Database 2", key: "db2", value: "database2" },
|
||||
{ label: "Database 3", key: "db3", value: "database3" }
|
||||
{ label: "Database 1", key: "db1" },
|
||||
{ label: "Database 2", key: "db2" },
|
||||
{ label: "Database 3", key: "db3" }
|
||||
],
|
||||
defaultKey: "db2"
|
||||
}
|
||||
@@ -77,10 +91,11 @@ describe("SmartUiComponent", () => {
|
||||
}
|
||||
};
|
||||
|
||||
const exampleCallbacks = (): void => undefined;
|
||||
|
||||
it("should render", () => {
|
||||
const wrapper = shallow(<SmartUiComponent descriptor={exampleData} onChange={exampleCallbacks} />);
|
||||
it("should render", async () => {
|
||||
const wrapper = shallow(
|
||||
<SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
|
||||
);
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5,11 +5,9 @@ import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
|
||||
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 { InputType } from "../../Tables/Constants";
|
||||
import { RadioSwitchComponent } from "../RadioSwitchComponent/RadioSwitchComponent";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Link, MessageBar, MessageBarType } from "office-ui-fabric-react";
|
||||
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
|
||||
@@ -21,45 +19,16 @@ import "./SmartUiComponent.less";
|
||||
* - a descriptor of the UX.
|
||||
*/
|
||||
|
||||
export type InputTypeValue = "number" | "string" | "boolean" | "enum";
|
||||
export type InputTypeValue = "number" | "string" | "boolean" | "object";
|
||||
|
||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||
export type EnumItem = { label: string; key: string; value: any };
|
||||
|
||||
export type InputType = number | string | boolean | EnumItem;
|
||||
|
||||
interface BaseInput {
|
||||
label: string;
|
||||
dataFieldName: string;
|
||||
type: InputTypeValue;
|
||||
placeholder?: string;
|
||||
export enum UiType {
|
||||
Spinner = "Spinner",
|
||||
Slider = "Slider"
|
||||
}
|
||||
|
||||
/**
|
||||
* For now, this only supports integers
|
||||
*/
|
||||
export interface NumberInput extends BaseInput {
|
||||
min?: number;
|
||||
max?: number;
|
||||
step: number;
|
||||
defaultValue: number;
|
||||
inputType: "spin" | "slider";
|
||||
}
|
||||
export type ChoiceItem = { label: string; key: string };
|
||||
|
||||
export interface BooleanInput extends BaseInput {
|
||||
trueLabel: string;
|
||||
falseLabel: string;
|
||||
defaultValue: boolean;
|
||||
}
|
||||
|
||||
export interface StringInput extends BaseInput {
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
export interface EnumInput extends BaseInput {
|
||||
choices: EnumItem[];
|
||||
defaultKey: string;
|
||||
}
|
||||
export type InputType = number | string | boolean | ChoiceItem;
|
||||
|
||||
export interface Info {
|
||||
message: string;
|
||||
@@ -69,28 +38,62 @@ export interface Info {
|
||||
};
|
||||
}
|
||||
|
||||
export type AnyInput = NumberInput | BooleanInput | StringInput | EnumInput;
|
||||
interface BaseInput {
|
||||
label: string;
|
||||
dataFieldName: string;
|
||||
type: InputTypeValue;
|
||||
placeholder?: string;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
export interface Node {
|
||||
/**
|
||||
* For now, this only supports integers
|
||||
*/
|
||||
interface NumberInput extends BaseInput {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
defaultValue?: number;
|
||||
uiType: UiType;
|
||||
}
|
||||
|
||||
interface BooleanInput extends BaseInput {
|
||||
trueLabel: string;
|
||||
falseLabel: string;
|
||||
defaultValue?: boolean;
|
||||
}
|
||||
|
||||
interface StringInput extends BaseInput {
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
interface ChoiceInput extends BaseInput {
|
||||
choices: ChoiceItem[];
|
||||
defaultKey?: string;
|
||||
}
|
||||
|
||||
type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
|
||||
|
||||
interface Node {
|
||||
id: string;
|
||||
info?: Info;
|
||||
input?: AnyInput;
|
||||
children?: Node[];
|
||||
}
|
||||
|
||||
export interface Descriptor {
|
||||
export interface SmartUiDescriptor {
|
||||
root: Node;
|
||||
}
|
||||
|
||||
/************************** Component implementation starts here ************************************* */
|
||||
|
||||
export interface SmartUiComponentProps {
|
||||
descriptor: Descriptor;
|
||||
onChange: (newValues: Map<string, InputType>) => void;
|
||||
descriptor: SmartUiDescriptor;
|
||||
currentValues: Map<string, InputType>;
|
||||
onInputChange: (input: AnyInput, newValue: InputType) => void;
|
||||
}
|
||||
|
||||
interface SmartUiComponentState {
|
||||
currentValues: Map<string, InputType>;
|
||||
errors: Map<string, string>;
|
||||
}
|
||||
|
||||
@@ -104,7 +107,6 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
constructor(props: SmartUiComponentProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentValues: new Map(),
|
||||
errors: new Map()
|
||||
};
|
||||
}
|
||||
@@ -113,42 +115,37 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return (
|
||||
<MessageBar>
|
||||
{info.message}
|
||||
<Link href={info.link.href} target="_blank">
|
||||
{info.link.text}
|
||||
</Link>
|
||||
{info.link && (
|
||||
<Link href={info.link.href} target="_blank">
|
||||
{info.link.text}
|
||||
</Link>
|
||||
)}
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
private onInputChange = (newValue: string | number | boolean, dataFieldName: string) => {
|
||||
const { currentValues } = this.state;
|
||||
currentValues.set(dataFieldName, newValue);
|
||||
this.setState({ currentValues }, () => this.props.onChange(this.state.currentValues));
|
||||
};
|
||||
|
||||
private renderStringInput(input: StringInput): JSX.Element {
|
||||
private renderTextInput(input: StringInput): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName) as string;
|
||||
return (
|
||||
<div className="stringInputContainer">
|
||||
<div>
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-input`}
|
||||
label={input.label}
|
||||
type="text"
|
||||
value={input.defaultValue}
|
||||
placeholder={input.placeholder}
|
||||
onChange={(_, newValue) => this.onInputChange(newValue, input.dataFieldName)}
|
||||
styles={{
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600
|
||||
}
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textBox-input`}
|
||||
label={input.label}
|
||||
type="text"
|
||||
value={value}
|
||||
placeholder={input.placeholder}
|
||||
onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -159,10 +156,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
this.setState({ errors });
|
||||
}
|
||||
|
||||
private onValidate = (value: string, min: number, max: number, dataFieldName: string): string => {
|
||||
private onValidate = (input: AnyInput, value: string, min: number, max: number): string => {
|
||||
const newValue = InputUtils.onValidateValueChange(value, min, max);
|
||||
const dataFieldName = input.dataFieldName;
|
||||
if (newValue) {
|
||||
this.onInputChange(newValue, dataFieldName);
|
||||
this.props.onInputChange(input, newValue);
|
||||
this.clearError(dataFieldName);
|
||||
return newValue.toString();
|
||||
} else {
|
||||
@@ -173,20 +171,22 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private onIncrement = (value: string, step: number, max: number, dataFieldName: string): string => {
|
||||
private onIncrement = (input: AnyInput, value: string, step: number, max: number): string => {
|
||||
const newValue = InputUtils.onIncrementValue(value, step, max);
|
||||
const dataFieldName = input.dataFieldName;
|
||||
if (newValue) {
|
||||
this.onInputChange(newValue, dataFieldName);
|
||||
this.props.onInputChange(input, newValue);
|
||||
this.clearError(dataFieldName);
|
||||
return newValue.toString();
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private onDecrement = (value: string, step: number, min: number, dataFieldName: string): string => {
|
||||
private onDecrement = (input: AnyInput, value: string, step: number, min: number): string => {
|
||||
const newValue = InputUtils.onDecrementValue(value, step, min);
|
||||
const dataFieldName = input.dataFieldName;
|
||||
if (newValue) {
|
||||
this.onInputChange(newValue, dataFieldName);
|
||||
this.props.onInputChange(input, newValue);
|
||||
this.clearError(dataFieldName);
|
||||
return newValue.toString();
|
||||
}
|
||||
@@ -194,18 +194,26 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput): JSX.Element {
|
||||
const { label, min, max, defaultValue, dataFieldName, step } = input;
|
||||
const props = { label, min, max, ariaLabel: label, step };
|
||||
const { label, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
label: label,
|
||||
min: min,
|
||||
max: max,
|
||||
ariaLabel: label,
|
||||
step: step
|
||||
};
|
||||
|
||||
if (input.inputType === "spin") {
|
||||
const value = this.props.currentValues.get(dataFieldName) as number;
|
||||
if (input.uiType === UiType.Spinner) {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<SpinButton
|
||||
{...props}
|
||||
defaultValue={defaultValue.toString()}
|
||||
onValidate={newValue => this.onValidate(newValue, min, max, dataFieldName)}
|
||||
onIncrement={newValue => this.onIncrement(newValue, step, max, dataFieldName)}
|
||||
onDecrement={newValue => this.onDecrement(newValue, step, min, dataFieldName)}
|
||||
id={`${input.dataFieldName}-spinner-input`}
|
||||
value={value?.toString()}
|
||||
onValidate={newValue => this.onValidate(input, newValue, props.min, props.max)}
|
||||
onIncrement={newValue => this.onIncrement(input, newValue, props.step, props.max)}
|
||||
onDecrement={newValue => this.onDecrement(input, newValue, props.step, props.min)}
|
||||
labelPosition={Position.top}
|
||||
styles={{
|
||||
label: {
|
||||
@@ -217,34 +225,35 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
{this.state.errors.has(dataFieldName) && (
|
||||
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else if (input.uiType === UiType.Slider) {
|
||||
return (
|
||||
<div id={`${input.dataFieldName}-slider-input`}>
|
||||
<Slider
|
||||
{...props}
|
||||
value={value}
|
||||
onChange={newValue => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
titleLabel: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600
|
||||
},
|
||||
valueLabel: SmartUiComponent.labelStyle
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (input.inputType === "slider") {
|
||||
return (
|
||||
<Slider
|
||||
// showValue={true}
|
||||
// valueFormat={}
|
||||
{...props}
|
||||
defaultValue={defaultValue}
|
||||
onChange={newValue => this.onInputChange(newValue, dataFieldName)}
|
||||
styles={{
|
||||
titleLabel: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600
|
||||
},
|
||||
valueLabel: SmartUiComponent.labelStyle
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <>Unsupported number input type {input.inputType}</>;
|
||||
return <>Unsupported number UI type {input.uiType}</>;
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput): JSX.Element {
|
||||
const { dataFieldName } = input;
|
||||
const value = this.props.currentValues.get(input.dataFieldName) as boolean;
|
||||
const selectedKey = value || input.defaultValue ? "true" : "false";
|
||||
return (
|
||||
<div>
|
||||
<div id={`${input.dataFieldName}-radioSwitch-input`}>
|
||||
<div className="inputLabelContainer">
|
||||
<Text variant="small" nowrap className="inputLabel">
|
||||
{input.label}
|
||||
@@ -255,41 +264,33 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
{
|
||||
label: input.falseLabel,
|
||||
key: "false",
|
||||
onSelect: () => this.onInputChange(false, dataFieldName)
|
||||
onSelect: () => this.props.onInputChange(input, false)
|
||||
},
|
||||
{
|
||||
label: input.trueLabel,
|
||||
key: "true",
|
||||
onSelect: () => this.onInputChange(true, dataFieldName)
|
||||
onSelect: () => this.props.onInputChange(input, true)
|
||||
}
|
||||
]}
|
||||
selectedKey={
|
||||
(this.state.currentValues.has(dataFieldName)
|
||||
? (this.state.currentValues.get(dataFieldName) as boolean)
|
||||
: input.defaultValue)
|
||||
? "true"
|
||||
: "false"
|
||||
}
|
||||
selectedKey={selectedKey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderEnumInput(input: EnumInput): JSX.Element {
|
||||
const { label, defaultKey, dataFieldName, choices, placeholder } = input;
|
||||
private renderChoiceInput(input: ChoiceInput): JSX.Element {
|
||||
const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
|
||||
const value = this.props.currentValues.get(dataFieldName) as string;
|
||||
return (
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropown-input`}
|
||||
label={label}
|
||||
selectedKey={
|
||||
this.state.currentValues.has(dataFieldName)
|
||||
? (this.state.currentValues.get(dataFieldName) as string)
|
||||
: defaultKey
|
||||
}
|
||||
onChange={(_, item: IDropdownOption) => this.onInputChange(item.key.toString(), dataFieldName)}
|
||||
selectedKey={value ? value : defaultKey}
|
||||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={placeholder}
|
||||
options={choices.map(c => ({
|
||||
key: c.key,
|
||||
text: c.value
|
||||
text: c.label
|
||||
}))}
|
||||
styles={{
|
||||
label: {
|
||||
@@ -302,34 +303,48 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
);
|
||||
}
|
||||
|
||||
private renderError(input: AnyInput): JSX.Element {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderInput(input: AnyInput): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input);
|
||||
}
|
||||
switch (input.type) {
|
||||
case "string":
|
||||
return this.renderStringInput(input as StringInput);
|
||||
return this.renderTextInput(input as StringInput);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput);
|
||||
case "enum":
|
||||
return this.renderEnumInput(input as EnumInput);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
}
|
||||
|
||||
private renderNode(node: Node): JSX.Element {
|
||||
const containerStackTokens: IStackTokens = { childrenGap: 10 };
|
||||
const containerStackTokens: IStackTokens = { childrenGap: 15 };
|
||||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
{node.info && this.renderInfo(node.info)}
|
||||
{node.input && this.renderInput(node.input)}
|
||||
<Stack.Item>
|
||||
{node.info && this.renderInfo(node.info as Info)}
|
||||
{node.input && this.renderInput(node.input)}
|
||||
</Stack.Item>
|
||||
{node.children && node.children.map(child => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return <>{this.renderNode(this.props.descriptor.root)}</>;
|
||||
const containerStackTokens: IStackTokens = { childrenGap: 20 };
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
|
||||
{this.renderNode(this.props.descriptor.root)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,40 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SmartUiComponent should render 1`] = `
|
||||
<Fragment>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"padding": 10,
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledMessageBarBase>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
<StackItem>
|
||||
<StyledMessageBarBase>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
<div
|
||||
key="throughput"
|
||||
>
|
||||
@@ -26,11 +42,11 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<StackItem>
|
||||
<CustomizedSpinButton
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
@@ -38,8 +54,8 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
defaultValue="400"
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
@@ -64,7 +80,7 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
<div
|
||||
@@ -74,34 +90,60 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
defaultValue={400}
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"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,
|
||||
},
|
||||
}
|
||||
<StackItem>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"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,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
<div
|
||||
key="throughput3"
|
||||
>
|
||||
<Stack
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 15,
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<StyledMessageBarBase
|
||||
messageBarType={1}
|
||||
>
|
||||
Error:
|
||||
label, truelabel and falselabel are required for boolean input 'throughput3'
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
<div
|
||||
@@ -111,16 +153,16 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<div>
|
||||
<StackItem>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
id="containerId-input"
|
||||
id="containerId-textBox-input"
|
||||
label="Container id"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
@@ -140,7 +182,7 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
<div
|
||||
@@ -150,40 +192,44 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<StackItem>
|
||||
<div
|
||||
className="inputLabelContainer"
|
||||
id="analyticalStore-radioSwitch-input"
|
||||
>
|
||||
<Text
|
||||
className="inputLabel"
|
||||
nowrap={true}
|
||||
variant="small"
|
||||
<div
|
||||
className="inputLabelContainer"
|
||||
>
|
||||
Analytical Store
|
||||
</Text>
|
||||
<Text
|
||||
className="inputLabel"
|
||||
nowrap={true}
|
||||
variant="small"
|
||||
>
|
||||
Analytical Store
|
||||
</Text>
|
||||
</div>
|
||||
<RadioSwitchComponent
|
||||
choices={
|
||||
Array [
|
||||
Object {
|
||||
"key": "false",
|
||||
"label": "Disabled",
|
||||
"onSelect": [Function],
|
||||
},
|
||||
Object {
|
||||
"key": "true",
|
||||
"label": "Enabled",
|
||||
"onSelect": [Function],
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="true"
|
||||
/>
|
||||
</div>
|
||||
<RadioSwitchComponent
|
||||
choices={
|
||||
Array [
|
||||
Object {
|
||||
"key": "false",
|
||||
"label": "Disabled",
|
||||
"onSelect": [Function],
|
||||
},
|
||||
Object {
|
||||
"key": "true",
|
||||
"label": "Enabled",
|
||||
"onSelect": [Function],
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="true"
|
||||
/>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
<div
|
||||
@@ -193,48 +239,51 @@ exports[`SmartUiComponent should render 1`] = `
|
||||
className="widgetRendererContainer"
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
"childrenGap": 15,
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledWithResponsiveMode
|
||||
label="Database"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "database1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "database2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "database3",
|
||||
},
|
||||
]
|
||||
}
|
||||
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,
|
||||
},
|
||||
<StackItem>
|
||||
<StyledWithResponsiveMode
|
||||
id="database-dropown-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,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Fragment>
|
||||
</Stack>
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user