Added SelfServe UI updates (#559)
* Added SelfServe UI modifications * fixed lint error * addressed PR comments
This commit is contained in:
Srinath Narayanan
GitHub
parent
9db0975f7f
commit
be4e490a64
File diff suppressed because it is too large
Load Diff
|
|
@ -80,7 +80,7 @@
|
|||
"ms": "2.1.3",
|
||||
"msal": "1.4.4",
|
||||
"object.entries": "1.1.0",
|
||||
"office-ui-fabric-react": "7.134.1",
|
||||
"office-ui-fabric-react": "7.164.2",
|
||||
"p-retry": "4.2.0",
|
||||
"plotly.js-cartesian-dist-min": "1.52.3",
|
||||
"promise-polyfill": "8.1.0",
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
"pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js --mode development --progress",
|
||||
"copyToConsumers": "node copyToConsumers",
|
||||
"test": "rimraf coverage && jest",
|
||||
"test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
|
||||
"test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles selfServeExample.spec.ts",
|
||||
"watch": "npm run start",
|
||||
"wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
|
||||
"build:ase": "gulp build:ase",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="ChevronDown"
|
||||
styles={
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -354,7 +354,6 @@ exports[`test render renders with filters 1`] = `
|
|||
data-is-scrollable="true"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="stickyAbove-42"
|
||||
style={
|
||||
Object {
|
||||
|
|
@ -375,7 +374,6 @@ exports[`test render renders with filters 1`] = `
|
|||
>
|
||||
<div>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
style={
|
||||
Object {
|
||||
"pointerEvents": "none",
|
||||
|
|
@ -395,7 +393,6 @@ exports[`test render renders with filters 1`] = `
|
|||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
aria-hidden={false}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "",
|
||||
|
|
@ -411,6 +408,7 @@ exports[`test render renders with filters 1`] = `
|
|||
>
|
||||
<TextFieldBase
|
||||
ariaLabel="Directory filter text box"
|
||||
canRevealPassword={false}
|
||||
className="directoryListFilterTextBox"
|
||||
deferredValidationTime={200}
|
||||
onChange={[Function]}
|
||||
|
|
@ -1123,7 +1121,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"iconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1149,7 +1147,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"menuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1168,7 +1166,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
|
|
@ -1247,7 +1245,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
|
|
@ -1279,8 +1277,10 @@ exports[`test render renders with filters 1`] = `
|
|||
},
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#201f1e",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"borderColor": "Highlight",
|
||||
"color": "Highlight",
|
||||
},
|
||||
|
|
@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"splitButtonContainer": Array [
|
||||
Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "none",
|
||||
},
|
||||
},
|
||||
|
|
@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 3,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "none",
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
|
|
@ -1373,19 +1373,20 @@ exports[`test render renders with filters 1`] = `
|
|||
"borderBottomRightRadius": "0",
|
||||
"borderTopRightRadius": "0",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid WindowText",
|
||||
"borderRightWidth": "0",
|
||||
"color": "WindowText",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
".ms-Button--primary + .ms-Button": Object {
|
||||
"border": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "1px solid WindowText",
|
||||
"borderLeftWidth": "0",
|
||||
},
|
||||
|
|
@ -1398,10 +1399,11 @@ exports[`test render renders with filters 1`] = `
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1411,10 +1413,11 @@ exports[`test render renders with filters 1`] = `
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1424,12 +1427,11 @@ exports[`test render renders with filters 1`] = `
|
|||
"border": "none",
|
||||
"outline": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
},
|
||||
"@media screen and (forced-colors: active)": Object {
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
|
|
@ -1441,7 +1443,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"color": "Window",
|
||||
},
|
||||
|
|
@ -1450,7 +1452,7 @@ exports[`test render renders with filters 1`] = `
|
|||
".ms-Button.is-disabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -1466,7 +1468,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1478,7 +1480,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1495,7 +1497,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1518,7 +1520,7 @@ exports[`test render renders with filters 1`] = `
|
|||
":hover": Object {
|
||||
"backgroundColor": "#edebe9",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "Highlight",
|
||||
},
|
||||
},
|
||||
|
|
@ -1526,6 +1528,11 @@ exports[`test render renders with filters 1`] = `
|
|||
},
|
||||
},
|
||||
Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
".ms-Button-menuIcon": Object {
|
||||
"color": "WindowText",
|
||||
},
|
||||
},
|
||||
"border": "1px solid #8a8886",
|
||||
"borderBottomRightRadius": "2px",
|
||||
"borderLeft": "none",
|
||||
|
|
@ -1571,7 +1578,7 @@ exports[`test render renders with filters 1`] = `
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -1580,7 +1587,7 @@ exports[`test render renders with filters 1`] = `
|
|||
},
|
||||
".ms-Button-menuIcon": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1588,7 +1595,7 @@ exports[`test render renders with filters 1`] = `
|
|||
":hover": Object {
|
||||
"cursor": "default",
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -1893,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
|
|||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
|
||||
data-is-focusable={false}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
|
|
@ -1905,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
|
|||
type="button"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-flexContainer flexContainer-55"
|
||||
className="ms-Button-flexContainer flexContainer-58"
|
||||
data-automationid="splitbuttonprimary"
|
||||
>
|
||||
<div
|
||||
|
|
@ -1936,7 +1943,6 @@ exports[`test render renders with filters 1`] = `
|
|||
</List>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="stickyBelow-43"
|
||||
style={
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
styles={
|
||||
Object {
|
||||
|
|
@ -131,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
styles={
|
||||
Object {
|
||||
|
|
@ -155,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Heart"
|
||||
styles={
|
||||
Object {
|
||||
|
|
@ -180,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<Styled
|
||||
<Separator
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
|
|||
<div
|
||||
className="infoPanelMain"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
className="infoIconMain"
|
||||
iconName="Help"
|
||||
styles={
|
||||
|
|
|
|||
|
|
@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
|
|||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
|
@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
|
|||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
|||
</Stack>
|
||||
</CollapsibleSectionComponent>
|
||||
</Stack>
|
||||
<Styled
|
||||
<Separator
|
||||
styles={
|
||||
Object {
|
||||
"root": Array [
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
ariaLabel="Info"
|
||||
iconName="Info"
|
||||
styles={
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import * as React from "react";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import { TFunction } from "i18next";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
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 { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import * as React from "react";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
|
|
@ -19,8 +18,9 @@ import {
|
|||
NumberUiType,
|
||||
SmartUiInput,
|
||||
} from "../../../SelfServe/SelfServeTypes";
|
||||
import { TFunction } from "i18next";
|
||||
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
|
||||
/**
|
||||
* Generic UX renderer
|
||||
|
|
@ -138,11 +138,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
);
|
||||
}
|
||||
|
||||
private renderTextInput(input: StringInput, labelId: string): JSX.Element {
|
||||
private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): 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">
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textField-input`}
|
||||
aria-labelledby={labelId}
|
||||
|
|
@ -155,17 +156,23 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
root: { width: 400 },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const dataFieldName = input.dataFieldName;
|
||||
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
|
||||
if (!description) {
|
||||
if (!input.isDynamicDescription) {
|
||||
return this.renderError("Description is not provided.");
|
||||
}
|
||||
// If input is a dynamic description and description is not available, empty element is rendered
|
||||
return <></>;
|
||||
}
|
||||
const descriptionElement = (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
|
||||
{this.props.getTranslation(description.textTKey)}{" "}
|
||||
{description.link && (
|
||||
|
|
@ -174,6 +181,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
if (description.type === DescriptionType.Text) {
|
||||
|
|
@ -227,7 +235,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
return undefined;
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
|
||||
private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const { labelTKey, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
min: min,
|
||||
|
|
@ -240,6 +248,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
||||
if (input.uiType === NumberUiType.Spinner) {
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
||||
<SpinButton
|
||||
{...props}
|
||||
|
|
@ -253,12 +263,17 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
disabled={disabled}
|
||||
/>
|
||||
{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>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
} else if (input.uiType === NumberUiType.Slider) {
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<div id={`${input.dataFieldName}-slider-input`}>
|
||||
<Slider
|
||||
{...props}
|
||||
|
|
@ -271,16 +286,19 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
return <>Unsupported number UI type {input.uiType}</>;
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): 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 (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
aria-labelledby={labelId}
|
||||
|
|
@ -291,10 +309,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
|
||||
styles={{ root: { width: 400 } }}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): 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;
|
||||
|
|
@ -303,6 +322,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
selectedKey = "";
|
||||
}
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropdown-input`}
|
||||
aria-labelledby={labelId}
|
||||
|
|
@ -310,6 +331,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={this.props.getTranslation(placeholderTKey)}
|
||||
disabled={disabled}
|
||||
dropdownWidth="auto"
|
||||
options={choices.map((c) => ({
|
||||
key: c.key,
|
||||
text: this.props.getTranslation(c.label),
|
||||
|
|
@ -319,6 +341,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
dropdown: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -326,7 +349,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
|
||||
private renderElement(input: AnyDisplay, info: Info): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input.errorMessage);
|
||||
}
|
||||
|
|
@ -335,34 +358,31 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
return <></>;
|
||||
}
|
||||
const labelId = `${input.dataFieldName}-label`;
|
||||
return (
|
||||
<Stack>
|
||||
{input.labelTKey && (
|
||||
const labelElement: JSX.Element = input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
)}
|
||||
{this.renderDisplay(input, labelId)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
|
||||
}
|
||||
|
||||
private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
|
||||
private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
switch (input.type) {
|
||||
case "string":
|
||||
if ("description" in input || "isDynamicDescription" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId);
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
|
||||
}
|
||||
return this.renderTextInput(input as StringInput, labelId);
|
||||
return this.renderTextInput(input as StringInput, labelId, labelElement);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput, labelId);
|
||||
return this.renderNumberInput(input as NumberInput, labelId, labelElement);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId);
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId);
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
|
|
@ -373,7 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
|||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
<Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
|
||||
<Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
|
||||
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
|
|
@ -37,6 +38,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -52,6 +54,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
|
|
@ -100,6 +103,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -115,6 +119,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
|
|
@ -148,6 +153,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -184,6 +190,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
|
|
@ -192,9 +199,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
disabled={true}
|
||||
|
|
@ -210,7 +214,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
|
|
@ -227,6 +231,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
|
|
@ -252,6 +257,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -267,6 +273,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
|
|
@ -278,6 +285,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
disabled={true}
|
||||
dropdownWidth="auto"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
|
|
@ -311,6 +319,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
|||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -339,6 +348,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
|
|
@ -354,6 +364,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -369,6 +380,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
|
|
@ -417,6 +429,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -432,6 +445,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
|
|
@ -464,6 +478,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -500,6 +515,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
|
|
@ -508,9 +524,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
id="containerId-textField-input"
|
||||
|
|
@ -525,7 +538,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
|
|
@ -542,6 +555,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
|
|
@ -566,6 +580,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
@ -581,6 +596,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
|
|
@ -591,6 +607,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
dropdownWidth="auto"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
|
|
@ -624,6 +641,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
|||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -310,7 +310,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
>
|
||||
<i
|
||||
aria-hidden={true}
|
||||
className="panelWarningIcon root-109"
|
||||
className="panelWarningIcon root-141"
|
||||
data-icon-name="WarningSolid"
|
||||
>
|
||||
|
||||
|
|
@ -325,7 +325,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
variant="small"
|
||||
>
|
||||
<span
|
||||
className="panelWarningErrorMessage css-110"
|
||||
className="panelWarningErrorMessage css-142"
|
||||
>
|
||||
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
|
||||
</span>
|
||||
|
|
@ -348,7 +348,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
variant="small"
|
||||
>
|
||||
<span
|
||||
className="css-110"
|
||||
className="css-142"
|
||||
>
|
||||
Confirm by typing the collection id
|
||||
</span>
|
||||
|
|
@ -367,6 +367,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
>
|
||||
<TextFieldBase
|
||||
autoFocus={true}
|
||||
canRevealPassword={false}
|
||||
deferredValidationTime={200}
|
||||
id="confirmCollectionId"
|
||||
onChange={[Function]}
|
||||
|
|
@ -648,18 +649,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
validateOnLoad={true}
|
||||
>
|
||||
<div
|
||||
className="ms-TextField root-112"
|
||||
className="ms-TextField root-144"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-wrapper"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-fieldGroup fieldGroup-113"
|
||||
className="ms-TextField-fieldGroup fieldGroup-145"
|
||||
>
|
||||
<input
|
||||
aria-invalid={false}
|
||||
autoFocus={true}
|
||||
className="ms-TextField-field field-114"
|
||||
className="ms-TextField-field field-146"
|
||||
id="confirmCollectionId"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
|
|
@ -682,7 +683,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
variant="small"
|
||||
>
|
||||
<span
|
||||
className="css-120"
|
||||
className="css-155"
|
||||
>
|
||||
Help us improve Azure Cosmos DB!
|
||||
</span>
|
||||
|
|
@ -692,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
variant="small"
|
||||
>
|
||||
<span
|
||||
className="css-120"
|
||||
className="css-155"
|
||||
>
|
||||
What is the reason why you are deleting this container?
|
||||
</span>
|
||||
|
|
@ -711,6 +712,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
}
|
||||
>
|
||||
<TextFieldBase
|
||||
canRevealPassword={false}
|
||||
deferredValidationTime={200}
|
||||
id="deleteCollectionFeedbackInput"
|
||||
multiline={true}
|
||||
|
|
@ -994,17 +996,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
validateOnLoad={true}
|
||||
>
|
||||
<div
|
||||
className="ms-TextField ms-TextField--multiline root-112"
|
||||
className="ms-TextField ms-TextField--multiline root-144"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-wrapper"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-fieldGroup fieldGroup-121"
|
||||
className="ms-TextField-fieldGroup fieldGroup-156"
|
||||
>
|
||||
<textarea
|
||||
aria-invalid={false}
|
||||
className="ms-TextField-field field-122"
|
||||
className="ms-TextField-field field-157"
|
||||
id="deleteCollectionFeedbackInput"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
|
|
@ -1900,7 +1902,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"iconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1926,7 +1928,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"menuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -1945,7 +1947,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
|
|
@ -2003,11 +2005,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
},
|
||||
},
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"borderColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -2034,7 +2037,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
|
|
@ -2066,8 +2069,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
},
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#d2d0ce",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -2084,7 +2089,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"border": "1px solid #106ebe",
|
||||
"color": "#ffffff",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"borderColor": "Highlight",
|
||||
"color": "Window",
|
||||
|
|
@ -2096,11 +2101,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"border": "1px solid #005a9e",
|
||||
"color": "#ffffff",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"borderColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -2116,7 +2122,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"splitButtonContainer": Array [
|
||||
Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "none",
|
||||
},
|
||||
},
|
||||
|
|
@ -2134,7 +2140,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 3,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "none",
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
|
|
@ -2163,19 +2169,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"borderBottomRightRadius": "0",
|
||||
"borderTopRightRadius": "0",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid WindowText",
|
||||
"borderRightWidth": "0",
|
||||
"color": "WindowText",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
".ms-Button--primary + .ms-Button": Object {
|
||||
"border": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "1px solid WindowText",
|
||||
"borderLeftWidth": "0",
|
||||
},
|
||||
|
|
@ -2188,10 +2195,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -2201,10 +2209,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -2214,12 +2223,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"border": "none",
|
||||
"outline": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
},
|
||||
"@media screen and (forced-colors: active)": Object {
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
|
|
@ -2231,7 +2239,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"color": "Window",
|
||||
},
|
||||
|
|
@ -2240,7 +2248,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
".ms-Button.is-disabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -2256,7 +2264,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
},
|
||||
},
|
||||
|
|
@ -2268,7 +2276,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
|
|
@ -2281,7 +2289,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -2303,17 +2311,22 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
":hover": Object {
|
||||
"backgroundColor": "#106ebe",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "Highlight",
|
||||
},
|
||||
},
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
".ms-Button-menuIcon": Object {
|
||||
"color": "WindowText",
|
||||
},
|
||||
},
|
||||
"border": "1px solid #8a8886",
|
||||
"borderBottomRightRadius": "2px",
|
||||
"borderLeft": "none",
|
||||
|
|
@ -2359,7 +2372,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -2368,7 +2381,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
},
|
||||
".ms-Button-menuIcon": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -2376,7 +2389,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
":hover": Object {
|
||||
"cursor": "default",
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid GrayText",
|
||||
"color": "GrayText",
|
||||
|
|
@ -2398,7 +2411,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
"splitButtonMenuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
|
|
@ -2686,7 +2699,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
variantClassName="ms-Button--primary"
|
||||
>
|
||||
<button
|
||||
className="ms-Button ms-Button--primary root-124"
|
||||
className="ms-Button ms-Button--primary root-159"
|
||||
data-is-focusable={true}
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
|
|
@ -2698,14 +2711,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
|
|||
type="button"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-flexContainer flexContainer-125"
|
||||
className="ms-Button-flexContainer flexContainer-160"
|
||||
data-automationid="splitbuttonprimary"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-textContainer textContainer-126"
|
||||
className="ms-Button-textContainer textContainer-161"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-label label-128"
|
||||
className="ms-Button-label label-163"
|
||||
id="id__6"
|
||||
key="id__6"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
"Enable DB level throughput": "Enable Database Level Throughput",
|
||||
"Database Throughput": "Database Throughput",
|
||||
"UpdateInProgressMessage": "Data is being updated",
|
||||
"UpdateCompletedMessageTitle":"Update succeeded",
|
||||
"UpdateCompletedMessageText": "Data updation completed.",
|
||||
"UpdateCompletedMessageTitle": "Update succeeded",
|
||||
"UpdateCompletedMessageText": "Data update completed.",
|
||||
"SubmissionMessageSuccessTitle": "Update started",
|
||||
"SubmissionMessageForNewRegionText": "Data update started. Region changed.",
|
||||
"SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
|
||||
|
|
@ -36,7 +36,6 @@
|
|||
"SubmissionMessageErrorText": "Data update failed because of errors.",
|
||||
"OnSaveFailureMessage": "Data save operation not currently permitted."
|
||||
},
|
||||
"SqlX": {
|
||||
}
|
||||
"SqlX": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators";
|
||||
import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
|
|
@ -12,14 +12,14 @@ import {
|
|||
SmartUiInput,
|
||||
} from "../SelfServeTypes";
|
||||
import {
|
||||
getMaxCollectionThroughput,
|
||||
getMaxDatabaseThroughput,
|
||||
getMinCollectionThroughput,
|
||||
getMinDatabaseThroughput,
|
||||
initialize,
|
||||
onRefreshSelfServeExample,
|
||||
Regions,
|
||||
update,
|
||||
initialize,
|
||||
getMinDatabaseThroughput,
|
||||
getMaxDatabaseThroughput,
|
||||
getMinCollectionThroughput,
|
||||
getMaxCollectionThroughput,
|
||||
} from "./SelfServeExample.rp";
|
||||
|
||||
const regionDropdownItems: ChoiceItem[] = [
|
||||
|
|
@ -203,11 +203,7 @@ export default class SelfServeExample extends SelfServeBaseClass {
|
|||
public initialize = async (): Promise<Map<string, SmartUiInput>> => {
|
||||
const initializeResponse = await initialize();
|
||||
const defaults = new Map<string, SmartUiInput>();
|
||||
const currentRegionText = `current region selected is ${initializeResponse.regions}`;
|
||||
defaults.set("currentRegionText", {
|
||||
value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
|
||||
hidden: false,
|
||||
});
|
||||
defaults.set("currentRegionText", undefined);
|
||||
defaults.set("regions", { value: initializeResponse.regions });
|
||||
defaults.set("enableLogging", { value: initializeResponse.enableLogging });
|
||||
const accountName = initializeResponse.accountName;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import { Spinner, SpinnerSize } from "office-ui-fabric-react";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import * as React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { configContext, updateConfigContext } from "../ConfigContext";
|
||||
import { SelfServeFrameInputs } from "../Contracts/ViewModels";
|
||||
import { updateUserContext } from "../UserContext";
|
||||
import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
|
||||
import "./SelfServe.less";
|
||||
import { SelfServeComponent } from "./SelfServeComponent";
|
||||
import { SelfServeDescriptor } from "./SelfServeTypes";
|
||||
import { SelfServeType } from "./SelfServeUtils";
|
||||
import { SelfServeFrameInputs } from "../Contracts/ViewModels";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import { configContext, updateConfigContext } from "../ConfigContext";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { updateUserContext } from "../UserContext";
|
||||
import "./SelfServe.less";
|
||||
import { Spinner, SpinnerSize } from "office-ui-fabric-react";
|
||||
initializeIcons();
|
||||
|
||||
const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
import React from "react";
|
||||
import { TFunction } from "i18next";
|
||||
import {
|
||||
CommandBar,
|
||||
ICommandBarItemProps,
|
||||
IStackTokens,
|
||||
MessageBar,
|
||||
MessageBarType,
|
||||
Separator,
|
||||
Spinner,
|
||||
SpinnerSize,
|
||||
Stack,
|
||||
} from "office-ui-fabric-react";
|
||||
import promiseRetry, { AbortError } from "p-retry";
|
||||
import React from "react";
|
||||
import { Translation } from "react-i18next";
|
||||
import * as _ from "underscore";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||
import "../i18n";
|
||||
import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
|
||||
import {
|
||||
AnyDisplay,
|
||||
Node,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
DescriptionDisplay,
|
||||
InputType,
|
||||
Node,
|
||||
NumberInput,
|
||||
RefreshResult,
|
||||
SelfServeDescriptor,
|
||||
SmartUiInput,
|
||||
DescriptionDisplay,
|
||||
StringInput,
|
||||
NumberInput,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
} from "./SelfServeTypes";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||
import { Translation } from "react-i18next";
|
||||
import { TFunction } from "i18next";
|
||||
import "../i18n";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
|
||||
import promiseRetry, { AbortError } from "p-retry";
|
||||
|
||||
interface SelfServeNotification {
|
||||
message: string;
|
||||
|
|
@ -127,7 +129,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
this.props.descriptor.inputNames.map((inputName) => {
|
||||
let initialValue = initialValues.get(inputName);
|
||||
if (!initialValue) {
|
||||
initialValue = { value: undefined, hidden: false };
|
||||
initialValue = { value: undefined, hidden: false, disabled: false };
|
||||
}
|
||||
currentValues = currentValues.set(inputName, initialValue);
|
||||
baselineValues = baselineValues.set(inputName, initialValue);
|
||||
|
|
@ -311,34 +313,41 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
this.performSave();
|
||||
};
|
||||
|
||||
public isDiscardButtonDisabled = (): boolean => {
|
||||
if (this.state.isSaving) {
|
||||
return true;
|
||||
}
|
||||
public isInputModified = (): boolean => {
|
||||
for (const key of this.state.currentValues.keys()) {
|
||||
const currentValue = JSON.stringify(this.state.currentValues.get(key));
|
||||
const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
|
||||
const currentValue = this.state.currentValues.get(key);
|
||||
if (currentValue && currentValue.hidden === undefined) {
|
||||
currentValue.hidden = false;
|
||||
}
|
||||
if (currentValue && currentValue.disabled === undefined) {
|
||||
currentValue.disabled = false;
|
||||
}
|
||||
|
||||
if (currentValue !== baselineValue) {
|
||||
return false;
|
||||
const baselineValue = this.state.baselineValues.get(key);
|
||||
if (baselineValue && baselineValue.hidden === undefined) {
|
||||
baselineValue.hidden = false;
|
||||
}
|
||||
if (baselineValue && baselineValue.disabled === undefined) {
|
||||
baselineValue.disabled = false;
|
||||
}
|
||||
|
||||
if (!_.isEqual(currentValue, baselineValue)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
public isRefreshing = (): boolean => {
|
||||
return this.state.isSaving || this.state.isInitializing || this.state.refreshResult?.isUpdateInProgress;
|
||||
};
|
||||
|
||||
public isDiscardButtonDisabled = (): boolean => {
|
||||
return this.isRefreshing() || !this.isInputModified();
|
||||
};
|
||||
|
||||
public isSaveButtonDisabled = (): boolean => {
|
||||
if (this.state.hasErrors || this.state.isSaving) {
|
||||
return true;
|
||||
}
|
||||
for (const key of this.state.currentValues.keys()) {
|
||||
const currentValue = JSON.stringify(this.state.currentValues.get(key));
|
||||
const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
|
||||
|
||||
if (currentValue !== baselineValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
return this.state.hasErrors || this.isRefreshing() || !this.isInputModified();
|
||||
};
|
||||
|
||||
private performRefresh = async (): Promise<void> => {
|
||||
|
|
@ -397,7 +406,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
key: "save",
|
||||
text: this.getCommonTranslation("Save"),
|
||||
iconProps: { iconName: "Save" },
|
||||
split: true,
|
||||
disabled: this.isSaveButtonDisabled(),
|
||||
onClick: () => this.onSaveButtonClick(),
|
||||
},
|
||||
|
|
@ -405,21 +413,21 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
key: "discard",
|
||||
text: this.getCommonTranslation("Discard"),
|
||||
iconProps: { iconName: "Undo" },
|
||||
split: true,
|
||||
disabled: this.isDiscardButtonDisabled(),
|
||||
onClick: () => {
|
||||
this.discard();
|
||||
},
|
||||
buttonStyles: commandBarItemStyles,
|
||||
},
|
||||
{
|
||||
key: "refresh",
|
||||
text: this.getCommonTranslation("Refresh"),
|
||||
disabled: this.state.isInitializing,
|
||||
iconProps: { iconName: "Refresh" },
|
||||
split: true,
|
||||
onClick: () => {
|
||||
this.onRefreshClicked();
|
||||
},
|
||||
buttonStyles: commandBarItemStyles,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
|
@ -432,7 +440,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const containerStackTokens: IStackTokens = { childrenGap: 5 };
|
||||
if (this.state.compileErrorMessage) {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
|
||||
}
|
||||
|
|
@ -445,13 +452,13 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
|||
|
||||
return (
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<Stack tokens={containerStackTokens} styles={{ root: { padding: 10 } }}>
|
||||
<CommandBar styles={{ root: { paddingLeft: 0 } }} items={this.getCommandBarItems()} />
|
||||
<Stack tokens={containerStackTokens}>
|
||||
<Stack.Item>
|
||||
<CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
|
||||
<Separator styles={separatorStyles} />
|
||||
</Stack.Item>
|
||||
{this.state.isInitializing ? (
|
||||
<Spinner
|
||||
size={SpinnerSize.large}
|
||||
styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
|
||||
/>
|
||||
<Spinner size={SpinnerSize.large} />
|
||||
) : (
|
||||
<>
|
||||
{this.state.notification && (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "office-ui-fabric-react";
|
||||
import { StyleConstants } from "../Common/Constants";
|
||||
|
||||
export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };
|
||||
|
||||
export const commandBarStyles: ICommandBarStyles = { root: { paddingLeft: 0 } };
|
||||
|
||||
export const containerStackTokens: IStackTokens = { childrenGap: 5, padding: 10 };
|
||||
|
||||
export const separatorStyles: Partial<ISeparatorStyles> = {
|
||||
root: {
|
||||
selectors: {
|
||||
"::before": {
|
||||
background: StyleConstants.BaseMedium,
|
||||
},
|
||||
},
|
||||
padding: 0,
|
||||
height: 1,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import "reflect-metadata";
|
||||
import { userContext } from "../UserContext";
|
||||
import {
|
||||
Node,
|
||||
AnyDisplay,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
|
|
@ -10,13 +10,13 @@ import {
|
|||
Info,
|
||||
InputType,
|
||||
InputTypeValue,
|
||||
Node,
|
||||
NumberInput,
|
||||
RefreshParams,
|
||||
SelfServeDescriptor,
|
||||
SmartUiInput,
|
||||
StringInput,
|
||||
RefreshParams,
|
||||
} from "./SelfServeTypes";
|
||||
import { userContext } from "../UserContext";
|
||||
|
||||
export enum SelfServeType {
|
||||
// No self serve type passed, launch explorer
|
||||
|
|
@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
|
|||
const subscriptionId = userContext.subscriptionId;
|
||||
const resourceGroupName = userContext.resourceGroup;
|
||||
const databaseAccountName = userContext.databaseAccount.name;
|
||||
return `www.portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
|
||||
return `https://portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,14 +12,19 @@ describe("Self Serve", () => {
|
|||
|
||||
// id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE}
|
||||
await frame.waitForSelector("#description-text-display");
|
||||
await frame.waitForSelector("#currentRegionText-text-display");
|
||||
|
||||
const regions = await frame.waitForSelector("#regions-dropdown-input");
|
||||
|
||||
const currentRegionsDescription = await frame.$$("#currentRegionText-text-display");
|
||||
expect(currentRegionsDescription).toHaveLength(0);
|
||||
let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
|
||||
expect(disabledLoggingToggle).toHaveLength(0);
|
||||
|
||||
await regions.click();
|
||||
const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0");
|
||||
await regionsDropdownElement1.click();
|
||||
|
||||
await frame.waitForSelector("#currentRegionText-text-display");
|
||||
disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
|
||||
expect(disabledLoggingToggle).toHaveLength(1);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue