mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-02-23 04:27:09 +00:00
renamed dropdown -> choice
This commit is contained in:
parent
b34628e9fc
commit
2ec2a891b4
@ -157,8 +157,8 @@ exports[`Feature panel renders all flags 1`] = `
|
|||||||
/>
|
/>
|
||||||
<StyledCheckboxBase
|
<StyledCheckboxBase
|
||||||
checked={false}
|
checked={false}
|
||||||
key="feature.selfServeTypeForTest"
|
key="feature.selfServeType"
|
||||||
label="Self serve type passed on for testing"
|
label="Self serve feature"
|
||||||
onChange={[Function]}
|
onChange={[Function]}
|
||||||
/>
|
/>
|
||||||
<StyledCheckboxBase
|
<StyledCheckboxBase
|
||||||
|
@ -28,13 +28,13 @@ export enum UiType {
|
|||||||
|
|
||||||
type numberPromise = () => Promise<number>;
|
type numberPromise = () => Promise<number>;
|
||||||
type stringPromise = () => Promise<string>;
|
type stringPromise = () => Promise<string>;
|
||||||
type dropdownItemPromise = () => Promise<DropdownItem[]>;
|
type choiceItemPromise = () => Promise<ChoiceItem[]>;
|
||||||
type infoPromise = () => Promise<Info>;
|
type infoPromise = () => Promise<Info>;
|
||||||
|
|
||||||
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
||||||
export type DropdownItem = { label: string; key: string };
|
export type ChoiceItem = { label: string; key: string };
|
||||||
|
|
||||||
export type InputType = number | string | boolean | DropdownItem;
|
export type InputType = number | string | boolean | ChoiceItem;
|
||||||
|
|
||||||
export interface BaseInput {
|
export interface BaseInput {
|
||||||
label: (() => Promise<string>) | string;
|
label: (() => Promise<string>) | string;
|
||||||
@ -66,8 +66,8 @@ export interface StringInput extends BaseInput {
|
|||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DropdownInput extends BaseInput {
|
export interface ChoiceInput extends BaseInput {
|
||||||
choices: (() => Promise<DropdownItem[]>) | DropdownItem[];
|
choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
|
||||||
defaultKey?: string;
|
defaultKey?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -79,7 +79,7 @@ export interface Info {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export type AnyInput = NumberInput | BooleanInput | StringInput | DropdownInput;
|
export type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
|
||||||
|
|
||||||
export interface Node {
|
export interface Node {
|
||||||
id: string;
|
id: string;
|
||||||
@ -214,9 +214,9 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
return booleanInput;
|
return booleanInput;
|
||||||
}
|
}
|
||||||
default: {
|
default: {
|
||||||
const enumInput = input as DropdownInput;
|
const enumInput = input as ChoiceInput;
|
||||||
if (enumInput.choices instanceof Function) {
|
if (enumInput.choices instanceof Function) {
|
||||||
enumInput.choices = await (enumInput.choices as dropdownItemPromise)();
|
enumInput.choices = await (enumInput.choices as choiceItemPromise)();
|
||||||
}
|
}
|
||||||
return enumInput;
|
return enumInput;
|
||||||
}
|
}
|
||||||
@ -332,7 +332,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
const value = this.state.currentValues.get(dataFieldName) as number;
|
const value = this.state.currentValues.get(dataFieldName) as number;
|
||||||
if (input.uiType === UiType.Spinner) {
|
if (input.uiType === UiType.Spinner) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<SpinButton
|
<SpinButton
|
||||||
{...props}
|
{...props}
|
||||||
value={value?.toString()}
|
value={value?.toString()}
|
||||||
@ -350,7 +350,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
{this.state.errors.has(dataFieldName) && (
|
{this.state.errors.has(dataFieldName) && (
|
||||||
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
} else if (input.uiType === UiType.Slider) {
|
} else if (input.uiType === UiType.Slider) {
|
||||||
return (
|
return (
|
||||||
@ -406,7 +406,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderDropdownInput(input: DropdownInput): JSX.Element {
|
private renderChoiceInput(input: ChoiceInput): JSX.Element {
|
||||||
const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
|
const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
@ -418,7 +418,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
}
|
}
|
||||||
onChange={(_, item: IDropdownOption) => this.onInputChange(input, item.key.toString())}
|
onChange={(_, item: IDropdownOption) => this.onInputChange(input, item.key.toString())}
|
||||||
placeholder={placeholder as string}
|
placeholder={placeholder as string}
|
||||||
options={(choices as DropdownItem[]).map(c => ({
|
options={(choices as ChoiceItem[]).map(c => ({
|
||||||
key: c.key,
|
key: c.key,
|
||||||
text: c.label
|
text: c.label
|
||||||
}))}
|
}))}
|
||||||
@ -449,7 +449,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||||||
case "boolean":
|
case "boolean":
|
||||||
return this.renderBooleanInput(input as BooleanInput);
|
return this.renderBooleanInput(input as BooleanInput);
|
||||||
case "object":
|
case "object":
|
||||||
return this.renderDropdownInput(input as DropdownInput);
|
return this.renderChoiceInput(input as ChoiceInput);
|
||||||
default:
|
default:
|
||||||
throw new Error(`Unknown input type: ${input.type}`);
|
throw new Error(`Unknown input type: ${input.type}`);
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { PropertyInfo, OnChange, Values } from "../PropertyDecorators";
|
import { PropertyInfo, OnChange, Values } from "../PropertyDecorators";
|
||||||
import { ClassInfo, IsDisplayable } from "../ClassDecorators";
|
import { ClassInfo, IsDisplayable } from "../ClassDecorators";
|
||||||
import { SelfServeBaseClass } from "../SelfServeUtils";
|
import { SelfServeBaseClass } from "../SelfServeUtils";
|
||||||
import { DropdownItem, Info, InputType, UiType } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
|
import { ChoiceItem, Info, InputType, UiType } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||||
import { SessionStorageUtility } from "../../Shared/StorageUtility";
|
import { SessionStorageUtility } from "../../Shared/StorageUtility";
|
||||||
|
|
||||||
export enum Regions {
|
export enum Regions {
|
||||||
@ -10,7 +10,7 @@ export enum Regions {
|
|||||||
EastUS2 = "EUS2"
|
EastUS2 = "EUS2"
|
||||||
}
|
}
|
||||||
|
|
||||||
export const regionDropdownItems: DropdownItem[] = [
|
export const regionDropdownItems: ChoiceItem[] = [
|
||||||
{ label: "North Central US", key: Regions.NorthCentralUS },
|
{ label: "North Central US", key: Regions.NorthCentralUS },
|
||||||
{ label: "West US", key: Regions.WestUS },
|
{ label: "West US", key: Regions.WestUS },
|
||||||
{ label: "East US 2", key: Regions.EastUS2 }
|
{ label: "East US 2", key: Regions.EastUS2 }
|
||||||
@ -123,11 +123,11 @@ export default class SelfServeExample extends SelfServeBaseClass {
|
|||||||
|
|
||||||
/*
|
/*
|
||||||
@Values() :
|
@Values() :
|
||||||
- input: NumberInputOptions | StringInputOptions | BooleanInputOptions | DropdownInputOptions
|
- input: NumberInputOptions | StringInputOptions | BooleanInputOptions | ChoiceInputOptions
|
||||||
- role: Specifies the required options to display the property as TextBox, Number Spinner/Slider, Radio buton or Dropdown.
|
- role: Specifies the required options to display the property as TextBox, Number Spinner/Slider, Radio buton or Dropdown.
|
||||||
*/
|
*/
|
||||||
@Values({ label: "Regions", choices: regionDropdownItems })
|
@Values({ label: "Regions", choices: regionDropdownItems })
|
||||||
regions: DropdownItem;
|
regions: ChoiceItem;
|
||||||
|
|
||||||
@Values({
|
@Values({
|
||||||
label: "Enable Logging",
|
label: "Enable Logging",
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { DropdownItem, Info, InputType, UiType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
import { ChoiceItem, Info, InputType, UiType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||||
import { addPropertyToMap } from "./SelfServeUtils";
|
import { addPropertyToMap } from "./SelfServeUtils";
|
||||||
|
|
||||||
interface Decorator {
|
interface Decorator {
|
||||||
@ -27,11 +27,11 @@ export interface BooleanInputOptions extends InputOptionsBase {
|
|||||||
falseLabel: (() => Promise<string>) | string;
|
falseLabel: (() => Promise<string>) | string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DropdownInputOptions extends InputOptionsBase {
|
export interface ChoiceInputOptions extends InputOptionsBase {
|
||||||
choices: (() => Promise<DropdownItem[]>) | DropdownItem[];
|
choices: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
|
||||||
}
|
}
|
||||||
|
|
||||||
type InputOptions = NumberInputOptions | StringInputOptions | BooleanInputOptions | DropdownInputOptions;
|
type InputOptions = NumberInputOptions | StringInputOptions | BooleanInputOptions | ChoiceInputOptions;
|
||||||
|
|
||||||
function isNumberInputOptions(inputOptions: InputOptions): inputOptions is NumberInputOptions {
|
function isNumberInputOptions(inputOptions: InputOptions): inputOptions is NumberInputOptions {
|
||||||
return !!(inputOptions as NumberInputOptions).min;
|
return !!(inputOptions as NumberInputOptions).min;
|
||||||
@ -41,8 +41,8 @@ function isBooleanInputOptions(inputOptions: InputOptions): inputOptions is Bool
|
|||||||
return !!(inputOptions as BooleanInputOptions).trueLabel;
|
return !!(inputOptions as BooleanInputOptions).trueLabel;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isDropdownInputOptions(inputOptions: InputOptions): inputOptions is DropdownInputOptions {
|
function isChoiceInputOptions(inputOptions: InputOptions): inputOptions is ChoiceInputOptions {
|
||||||
return !!(inputOptions as DropdownInputOptions).choices;
|
return !!(inputOptions as ChoiceInputOptions).choices;
|
||||||
}
|
}
|
||||||
|
|
||||||
const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
|
const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
|
||||||
@ -92,11 +92,11 @@ export const Values = (inputOptions: InputOptions): PropertyDecorator => {
|
|||||||
{ name: "trueLabel", value: booleanInputOptions.trueLabel },
|
{ name: "trueLabel", value: booleanInputOptions.trueLabel },
|
||||||
{ name: "falseLabel", value: booleanInputOptions.falseLabel }
|
{ name: "falseLabel", value: booleanInputOptions.falseLabel }
|
||||||
);
|
);
|
||||||
} else if (isDropdownInputOptions(inputOptions)) {
|
} else if (isChoiceInputOptions(inputOptions)) {
|
||||||
const dropdownInputOptions = inputOptions as DropdownInputOptions;
|
const choiceInputOptions = inputOptions as ChoiceInputOptions;
|
||||||
return addToMap(
|
return addToMap(
|
||||||
{ name: "label", value: dropdownInputOptions.label },
|
{ name: "label", value: choiceInputOptions.label },
|
||||||
{ name: "choices", value: dropdownInputOptions.choices }
|
{ name: "choices", value: choiceInputOptions.choices }
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
const stringInputOptions = inputOptions as StringInputOptions;
|
const stringInputOptions = inputOptions as StringInputOptions;
|
||||||
|
@ -252,7 +252,7 @@ describe("SelfServeUtils", () => {
|
|||||||
type: "object",
|
type: "object",
|
||||||
label: "Invalid Regions",
|
label: "Invalid Regions",
|
||||||
placeholder: "placeholder text",
|
placeholder: "placeholder text",
|
||||||
errorMessage: "label and choices are required for Dropdown input 'invalidRegions'."
|
errorMessage: "label and choices are required for Choice input 'invalidRegions'."
|
||||||
},
|
},
|
||||||
children: [] as Node[]
|
children: [] as Node[]
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import "reflect-metadata";
|
import "reflect-metadata";
|
||||||
import {
|
import {
|
||||||
DropdownItem,
|
ChoiceItem,
|
||||||
Node,
|
Node,
|
||||||
Info,
|
Info,
|
||||||
InputTypeValue,
|
InputTypeValue,
|
||||||
@ -9,7 +9,7 @@ import {
|
|||||||
NumberInput,
|
NumberInput,
|
||||||
StringInput,
|
StringInput,
|
||||||
BooleanInput,
|
BooleanInput,
|
||||||
DropdownInput,
|
ChoiceInput,
|
||||||
InputType
|
InputType
|
||||||
} from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
} from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||||
|
|
||||||
@ -58,7 +58,7 @@ export interface CommonInputTypes {
|
|||||||
step?: (() => Promise<number>) | number;
|
step?: (() => Promise<number>) | number;
|
||||||
trueLabel?: (() => Promise<string>) | string;
|
trueLabel?: (() => Promise<string>) | string;
|
||||||
falseLabel?: (() => Promise<string>) | string;
|
falseLabel?: (() => Promise<string>) | string;
|
||||||
choices?: (() => Promise<DropdownItem[]>) | DropdownItem[];
|
choices?: (() => Promise<ChoiceItem[]>) | ChoiceItem[];
|
||||||
uiType?: string;
|
uiType?: string;
|
||||||
errorMessage?: string;
|
errorMessage?: string;
|
||||||
onChange?: (currentState: Map<string, InputType>, newValue: InputType) => Map<string, InputType>;
|
onChange?: (currentState: Map<string, InputType>, newValue: InputType) => Map<string, InputType>;
|
||||||
@ -187,8 +187,8 @@ const getInput = (value: CommonInputTypes): AnyInput => {
|
|||||||
return value as BooleanInput;
|
return value as BooleanInput;
|
||||||
default:
|
default:
|
||||||
if (!value.label || !value.choices) {
|
if (!value.label || !value.choices) {
|
||||||
value.errorMessage = `label and choices are required for Dropdown input '${value.id}'.`;
|
value.errorMessage = `label and choices are required for Choice input '${value.id}'.`;
|
||||||
}
|
}
|
||||||
return value as DropdownInput;
|
return value as ChoiceInput;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user