mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-04-17 23:28:30 +01:00
6aaddd9c60
* added localization for selfserve model * added comment * addressed PR comments * fixed format errors * Addressed PR comments
379 lines
12 KiB
TypeScript
379 lines
12 KiB
TypeScript
import * as React from "react";
|
|
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
|
import { Slider } from "office-ui-fabric-react/lib/Slider";
|
|
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 { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
|
import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
|
import * as InputUtils from "./InputUtils";
|
|
import "./SmartUiComponent.less";
|
|
import {
|
|
ChoiceItem,
|
|
Description,
|
|
Info,
|
|
InputType,
|
|
InputTypeValue,
|
|
NumberUiType,
|
|
SmartUiInput,
|
|
} from "../../../SelfServe/SelfServeTypes";
|
|
import { TFunction } from "i18next";
|
|
|
|
/**
|
|
* Generic UX renderer
|
|
* It takes:
|
|
* - a JSON object as data
|
|
* - a Map of callbacks
|
|
* - a descriptor of the UX.
|
|
*/
|
|
|
|
interface BaseDisplay {
|
|
dataFieldName: string;
|
|
errorMessage?: string;
|
|
type: InputTypeValue;
|
|
}
|
|
|
|
interface BaseInput extends BaseDisplay {
|
|
labelTKey: string;
|
|
placeholderTKey?: string;
|
|
errorMessage?: string;
|
|
}
|
|
|
|
/**
|
|
* For now, this only supports integers
|
|
*/
|
|
interface NumberInput extends BaseInput {
|
|
min: number;
|
|
max: number;
|
|
step: number;
|
|
defaultValue?: number;
|
|
uiType: NumberUiType;
|
|
}
|
|
|
|
interface BooleanInput extends BaseInput {
|
|
trueLabelTKey: string;
|
|
falseLabelTKey: string;
|
|
defaultValue?: boolean;
|
|
}
|
|
|
|
interface StringInput extends BaseInput {
|
|
defaultValue?: string;
|
|
}
|
|
|
|
interface ChoiceInput extends BaseInput {
|
|
choices: ChoiceItem[];
|
|
defaultKey?: string;
|
|
}
|
|
|
|
interface DescriptionDisplay extends BaseDisplay {
|
|
description: Description;
|
|
}
|
|
|
|
type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
|
|
|
|
interface Node {
|
|
id: string;
|
|
info?: Info;
|
|
input?: AnyDisplay;
|
|
children?: Node[];
|
|
}
|
|
|
|
export interface SmartUiDescriptor {
|
|
root: Node;
|
|
}
|
|
|
|
/************************** Component implementation starts here ************************************* */
|
|
export interface SmartUiComponentProps {
|
|
descriptor: SmartUiDescriptor;
|
|
currentValues: Map<string, SmartUiInput>;
|
|
onInputChange: (input: AnyDisplay, newValue: InputType) => void;
|
|
onError: (hasError: boolean) => void;
|
|
disabled: boolean;
|
|
getTranslation: TFunction;
|
|
}
|
|
|
|
interface SmartUiComponentState {
|
|
errors: Map<string, string>;
|
|
}
|
|
|
|
export class SmartUiComponent extends React.Component<SmartUiComponentProps, SmartUiComponentState> {
|
|
private shouldCheckErrors = true;
|
|
private static readonly labelStyle = {
|
|
color: "#393939",
|
|
fontFamily: "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
|
fontSize: 12,
|
|
};
|
|
|
|
componentDidUpdate(): void {
|
|
if (!this.shouldCheckErrors) {
|
|
this.shouldCheckErrors = true;
|
|
return;
|
|
}
|
|
this.props.onError(this.state.errors.size > 0);
|
|
this.shouldCheckErrors = false;
|
|
}
|
|
|
|
constructor(props: SmartUiComponentProps) {
|
|
super(props);
|
|
this.state = {
|
|
errors: new Map(),
|
|
};
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
private renderTextInput(input: StringInput): 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)}
|
|
type="text"
|
|
value={value || ""}
|
|
placeholder={this.props.getTranslation(input.placeholderTKey)}
|
|
disabled={disabled}
|
|
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)}{" "}
|
|
{description.link && (
|
|
<Link target="_blank" href={input.description.link.href}>
|
|
{this.props.getTranslation(input.description.link.textTKey)}
|
|
</Link>
|
|
)}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
private clearError(dataFieldName: string): void {
|
|
const { errors } = this.state;
|
|
errors.delete(dataFieldName);
|
|
this.setState({ errors });
|
|
}
|
|
|
|
private onValidate = (input: NumberInput, value: string, min: number, max: number): string => {
|
|
const newValue = InputUtils.onValidateValueChange(value, min, max);
|
|
const dataFieldName = input.dataFieldName;
|
|
if (newValue) {
|
|
this.props.onInputChange(input, newValue);
|
|
this.clearError(dataFieldName);
|
|
return newValue.toString();
|
|
} else {
|
|
const { errors } = this.state;
|
|
errors.set(dataFieldName, `Invalid value '${value}'. It must be between ${min} and ${max}`);
|
|
this.setState({ errors });
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
private onIncrement = (input: NumberInput, value: string, step: number, max: number): string => {
|
|
const newValue = InputUtils.onIncrementValue(value, step, max);
|
|
const dataFieldName = input.dataFieldName;
|
|
if (newValue) {
|
|
this.props.onInputChange(input, newValue);
|
|
this.clearError(dataFieldName);
|
|
return newValue.toString();
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
private onDecrement = (input: NumberInput, value: string, step: number, min: number): string => {
|
|
const newValue = InputUtils.onDecrementValue(value, step, min);
|
|
const dataFieldName = input.dataFieldName;
|
|
if (newValue) {
|
|
this.props.onInputChange(input, newValue);
|
|
this.clearError(dataFieldName);
|
|
return newValue.toString();
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
private renderNumberInput(input: NumberInput): JSX.Element {
|
|
const { labelTKey, min, max, dataFieldName, step } = input;
|
|
const props = {
|
|
label: this.props.getTranslation(labelTKey),
|
|
min: min,
|
|
max: max,
|
|
ariaLabel: labelTKey,
|
|
step: step,
|
|
};
|
|
|
|
const value = this.props.currentValues.get(dataFieldName)?.value as number;
|
|
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
|
if (input.uiType === NumberUiType.Spinner) {
|
|
return (
|
|
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
|
<SpinButton
|
|
{...props}
|
|
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}
|
|
disabled={disabled}
|
|
styles={{
|
|
label: {
|
|
...SmartUiComponent.labelStyle,
|
|
fontWeight: 600,
|
|
},
|
|
}}
|
|
/>
|
|
{this.state.errors.has(dataFieldName) && (
|
|
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
|
)}
|
|
</Stack>
|
|
);
|
|
} else if (input.uiType === NumberUiType.Slider) {
|
|
return (
|
|
<div id={`${input.dataFieldName}-slider-input`}>
|
|
<Slider
|
|
{...props}
|
|
value={value}
|
|
disabled={disabled}
|
|
onChange={(newValue) => this.props.onInputChange(input, newValue)}
|
|
styles={{
|
|
root: { width: 400 },
|
|
titleLabel: {
|
|
...SmartUiComponent.labelStyle,
|
|
fontWeight: 600,
|
|
},
|
|
valueLabel: SmartUiComponent.labelStyle,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
} else {
|
|
return <>Unsupported number UI type {input.uiType}</>;
|
|
}
|
|
}
|
|
|
|
private renderBooleanInput(input: BooleanInput): 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)}
|
|
checked={value || false}
|
|
onText={this.props.getTranslation(input.trueLabelTKey)}
|
|
offText={this.props.getTranslation(input.falseLabelTKey)}
|
|
disabled={disabled}
|
|
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
|
|
styles={{ root: { width: 400 } }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
private renderChoiceInput(input: ChoiceInput): JSX.Element {
|
|
const { labelTKey, 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;
|
|
if (!selectedKey) {
|
|
selectedKey = "";
|
|
}
|
|
return (
|
|
<Dropdown
|
|
id={`${input.dataFieldName}-dropdown-input`}
|
|
label={this.props.getTranslation(labelTKey)}
|
|
selectedKey={selectedKey}
|
|
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
|
placeholder={this.props.getTranslation(placeholderTKey)}
|
|
disabled={disabled}
|
|
options={choices.map((c) => ({
|
|
key: c.key,
|
|
text: this.props.getTranslation(c.label),
|
|
}))}
|
|
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 renderDisplay(input: AnyDisplay): JSX.Element {
|
|
if (input.errorMessage) {
|
|
return this.renderError(input);
|
|
}
|
|
const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
|
|
if (inputHidden) {
|
|
return <></>;
|
|
}
|
|
switch (input.type) {
|
|
case "string":
|
|
if ("description" in input) {
|
|
return this.renderDescription(input as DescriptionDisplay);
|
|
}
|
|
return this.renderTextInput(input as StringInput);
|
|
case "number":
|
|
return this.renderNumberInput(input as NumberInput);
|
|
case "boolean":
|
|
return this.renderBooleanInput(input as BooleanInput);
|
|
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 };
|
|
|
|
return (
|
|
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
|
<Stack.Item>
|
|
{node.info && this.renderInfo(node.info as Info)}
|
|
{node.input && this.renderDisplay(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);
|
|
}
|
|
}
|