random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-23 12:37:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

renamed dropdown -> choice

Browse Source
This commit is contained in:
Srinath Narayanan 2021-01-15 08:27:26 -08:00
parent b34628e9fc
commit 2ec2a891b4
6 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap
View File

@ -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

26
src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
View File

@ -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}`);
} }

8
src/SelfServe/Example/SelfServeExample.tsx
View File

@ -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",

20
src/SelfServe/PropertyDecorators.tsx
View File

@ -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;

2
src/SelfServe/SelfServeUtils.test.tsx
View File

@ -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[]
} }

10
src/SelfServe/SelfServeUtils.tsx
View File

@ -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;
} }
}; };