random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added SelfServe UI updates (#559) 

* Added SelfServe UI modifications

* fixed lint error

* addressed PR comments
This commit is contained in:
Srinath Narayanan 2021-03-18 13:40:48 -07:00 committed by GitHub
parent 9db0975f7f
commit be4e490a64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 800 additions and 26941 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26525
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -80,7 +80,7 @@
"ms": "2.1.3", "ms": "2.1.3",
"msal": "1.4.4", "msal": "1.4.4",
"object.entries": "1.1.0", "object.entries": "1.1.0",
"office-ui-fabric-react": "7.134.1", "office-ui-fabric-react": "7.164.2",
"p-retry": "4.2.0", "p-retry": "4.2.0",
"plotly.js-cartesian-dist-min": "1.52.3", "plotly.js-cartesian-dist-min": "1.52.3",
"promise-polyfill": "8.1.0", "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", "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js --mode development --progress",
"copyToConsumers": "node copyToConsumers", "copyToConsumers": "node copyToConsumers",
"test": "rimraf coverage && jest", "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", "watch": "npm run start",
"wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/", "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
"build:ase": "gulp build:ase", "build:ase": "gulp build:ase",

2
src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap
View File

@ -12,7 +12,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
} }
} }
> >
<StyledIconBase <Icon
iconName="ChevronDown" iconName="ChevronDown"
styles={ styles={
Object { Object {

66
src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
View File

@ -354,7 +354,6 @@ exports[`test render renders with filters 1`] = `
data-is-scrollable="true" data-is-scrollable="true"
> >
<div <div
aria-hidden="true"
className="stickyAbove-42" className="stickyAbove-42"
style={ style={
Object { Object {
@ -375,7 +374,6 @@ exports[`test render renders with filters 1`] = `
> >
<div> <div>
<div <div
aria-hidden={true}
style={ style={
Object { Object {
"pointerEvents": "none", "pointerEvents": "none",
@ -395,7 +393,6 @@ exports[`test render renders with filters 1`] = `
style={Object {}} style={Object {}}
> >
<div <div
aria-hidden={false}
style={ style={
Object { Object {
"backgroundColor": "", "backgroundColor": "",
@ -411,6 +408,7 @@ exports[`test render renders with filters 1`] = `
> >
<TextFieldBase <TextFieldBase
ariaLabel="Directory filter text box" ariaLabel="Directory filter text box"
canRevealPassword={false}
className="directoryListFilterTextBox" className="directoryListFilterTextBox"
deferredValidationTime={200} deferredValidationTime={200}
onChange={[Function]} onChange={[Function]}
@ -1123,7 +1121,7 @@ exports[`test render renders with filters 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1149,7 +1147,7 @@ exports[`test render renders with filters 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1168,7 +1166,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1247,7 +1245,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1279,8 +1277,10 @@ exports[`test render renders with filters 1`] = `
}, },
}, },
Object { Object {
"backgroundColor": "#f3f2f1",
"color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#201f1e", "color": "#201f1e",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Highlight", "color": "Highlight",
}, },
@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1373,19 +1373,20 @@ exports[`test render renders with filters 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderRightWidth": "0", "borderRightWidth": "0",
"color": "WindowText", "color": "WindowText",
"forcedColorAdjust": "none",
}, },
}, },
}, },
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "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", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1398,10 +1399,11 @@ exports[`test render renders with filters 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -1411,10 +1413,11 @@ exports[`test render renders with filters 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -1424,12 +1427,11 @@ exports[`test render renders with filters 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": 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": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
},
"@media screen and (forced-colors: active)": Object {
"forcedColorAdjust": "none", "forcedColorAdjust": "none",
}, },
}, },
@ -1441,7 +1443,7 @@ exports[`test render renders with filters 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1450,7 +1452,7 @@ exports[`test render renders with filters 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1466,7 +1468,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1478,7 +1480,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1495,7 +1497,7 @@ exports[`test render renders with filters 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1518,7 +1520,7 @@ exports[`test render renders with filters 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#edebe9", "backgroundColor": "#edebe9",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
@ -1526,6 +1528,11 @@ exports[`test render renders with filters 1`] = `
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
".ms-Button-menuIcon": Object {
"color": "WindowText",
},
},
"border": "1px solid #8a8886", "border": "1px solid #8a8886",
"borderBottomRightRadius": "2px", "borderBottomRightRadius": "2px",
"borderLeft": "none", "borderLeft": "none",
@ -1571,7 +1578,7 @@ exports[`test render renders with filters 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1580,7 +1587,7 @@ exports[`test render renders with filters 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1588,7 +1595,7 @@ exports[`test render renders with filters 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -1893,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
> >
<button <button
aria-disabled={true} 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} data-is-focusable={false}
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
@ -1905,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
type="button" type="button"
> >
<span <span
className="ms-Button-flexContainer flexContainer-55" className="ms-Button-flexContainer flexContainer-58"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<div <div
@ -1936,7 +1943,6 @@ exports[`test render renders with filters 1`] = `
</List> </List>
</div> </div>
<div <div
aria-hidden="true"
className="stickyBelow-43" className="stickyBelow-43"
style={ style={
Object { Object {

8
src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
View File

@ -107,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
} }
variant="tiny" variant="tiny"
> >
<StyledIconBase <Icon
iconName="RedEye" iconName="RedEye"
styles={ styles={
Object { Object {
@ -131,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
} }
variant="tiny" variant="tiny"
> >
<StyledIconBase <Icon
iconName="Download" iconName="Download"
styles={ styles={
Object { Object {
@ -155,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
} }
variant="tiny" variant="tiny"
> >
<StyledIconBase <Icon
iconName="Heart" iconName="Heart"
styles={ styles={
Object { Object {
@ -180,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
} }
} }
> >
<Styled <Separator
styles={ styles={
Object { Object {
"root": Object { "root": Object {

2
src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap
View File

@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
<div <div
className="infoPanelMain" className="infoPanelMain"
> >
<StyledIconBase <Icon
className="infoIconMain" className="infoIconMain"
iconName="Help" iconName="Help"
styles={ styles={

8
src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap
View File

@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
Invalid Date Invalid Date
</Text> </Text>
<Text> <Text>
<StyledIconBase <Icon
iconName="RedEye" iconName="RedEye"
/> />
0 0
</Text> </Text>
<Text> <Text>
<StyledIconBase <Icon
iconName="Download" iconName="Download"
/> />
0 0
@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
Invalid Date Invalid Date
</Text> </Text>
<Text> <Text>
<StyledIconBase <Icon
iconName="RedEye" iconName="RedEye"
/> />
0 0
</Text> </Text>
<Text> <Text>
<StyledIconBase <Icon
iconName="Download" iconName="Download"
/> />
0 0

2
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
View File

@ -114,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
</Stack> </Stack>
</CollapsibleSectionComponent> </CollapsibleSectionComponent>
</Stack> </Stack>
<Styled <Separator
styles={ styles={
Object { Object {
"root": Array [ "root": Array [

2
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
View File

@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
} }
} }
> >
<StyledIconBase <Icon
ariaLabel="Info" ariaLabel="Info"
iconName="Info" iconName="Info"
styles={ styles={

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

@ -1,14 +1,13 @@
import * as React from "react"; import { TFunction } from "i18next";
import { Position } from "office-ui-fabric-react/lib/utilities/positioning"; 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 { Slider } from "office-ui-fabric-react/lib/Slider";
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton"; import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown"; import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import { Text } from "office-ui-fabric-react/lib/Text"; import { Text } from "office-ui-fabric-react/lib/Text";
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack"; import { TextField } from "office-ui-fabric-react/lib/TextField";
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react"; import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
import * as InputUtils from "./InputUtils"; import * as React from "react";
import "./SmartUiComponent.less";
import { import {
ChoiceItem, ChoiceItem,
Description, Description,
@ -19,8 +18,9 @@ import {
NumberUiType, NumberUiType,
SmartUiInput, SmartUiInput,
} from "../../../SelfServe/SelfServeTypes"; } from "../../../SelfServe/SelfServeTypes";
import { TFunction } from "i18next";
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent"; import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
import * as InputUtils from "./InputUtils";
import "./SmartUiComponent.less";
/** /**
* Generic UX renderer * 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 value = this.props.currentValues.get(input.dataFieldName)?.value as string;
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled; const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
return ( return (
<div className="stringInputContainer"> <Stack>
{labelElement}
<TextField <TextField
id={`${input.dataFieldName}-textField-input`} id={`${input.dataFieldName}-textField-input`}
aria-labelledby={labelId} aria-labelledby={labelId}
@ -155,17 +156,23 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
root: { width: 400 }, 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 dataFieldName = input.dataFieldName;
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description); const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
if (!description) { if (!description) {
if (!input.isDynamicDescription) {
return this.renderError("Description is not provided."); 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 = ( const descriptionElement = (
<Stack>
{labelElement}
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}> <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
{this.props.getTranslation(description.textTKey)}{" "} {this.props.getTranslation(description.textTKey)}{" "}
{description.link && ( {description.link && (
@ -174,6 +181,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
</Link> </Link>
)} )}
</Text> </Text>
</Stack>
); );
if (description.type === DescriptionType.Text) { if (description.type === DescriptionType.Text) {
@ -227,7 +235,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return undefined; 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 { labelTKey, min, max, dataFieldName, step } = input;
const props = { const props = {
min: min, 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; const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
if (input.uiType === NumberUiType.Spinner) { if (input.uiType === NumberUiType.Spinner) {
return ( return (
<Stack>
{labelElement}
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}> <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
<SpinButton <SpinButton
{...props} {...props}
@ -253,12 +263,17 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
disabled={disabled} disabled={disabled}
/> />
{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>
)} )}
</Stack> </Stack>
</Stack>
); );
} else if (input.uiType === NumberUiType.Slider) { } else if (input.uiType === NumberUiType.Slider) {
return ( return (
<Stack>
{labelElement}
<div id={`${input.dataFieldName}-slider-input`}> <div id={`${input.dataFieldName}-slider-input`}>
<Slider <Slider
{...props} {...props}
@ -271,16 +286,19 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
}} }}
/> />
</div> </div>
</Stack>
); );
} else { } else {
return <>Unsupported number UI type {input.uiType}</>; 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 value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled; const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
return ( return (
<Stack>
{labelElement}
<Toggle <Toggle
id={`${input.dataFieldName}-toggle-input`} id={`${input.dataFieldName}-toggle-input`}
aria-labelledby={labelId} aria-labelledby={labelId}
@ -291,10 +309,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)} onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
styles={{ root: { width: 400 } }} 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 { defaultKey, dataFieldName, choices, placeholderTKey } = input;
const value = this.props.currentValues.get(dataFieldName)?.value as string; const value = this.props.currentValues.get(dataFieldName)?.value as string;
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled; const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
@ -303,6 +322,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
selectedKey = ""; selectedKey = "";
} }
return ( return (
<Stack>
{labelElement}
<Dropdown <Dropdown
id={`${input.dataFieldName}-dropdown-input`} id={`${input.dataFieldName}-dropdown-input`}
aria-labelledby={labelId} 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())} onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
placeholder={this.props.getTranslation(placeholderTKey)} placeholder={this.props.getTranslation(placeholderTKey)}
disabled={disabled} disabled={disabled}
dropdownWidth="auto"
options={choices.map((c) => ({ options={choices.map((c) => ({
key: c.key, key: c.key,
text: this.props.getTranslation(c.label), text: this.props.getTranslation(c.label),
@ -319,6 +341,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
dropdown: SmartUiComponent.labelStyle, dropdown: SmartUiComponent.labelStyle,
}} }}
/> />
</Stack>
); );
} }
@ -326,7 +349,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>; 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) { if (input.errorMessage) {
return this.renderError(input.errorMessage); return this.renderError(input.errorMessage);
} }
@ -335,34 +358,31 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return <></>; return <></>;
} }
const labelId = `${input.dataFieldName}-label`; const labelId = `${input.dataFieldName}-label`;
return ( const labelElement: JSX.Element = input.labelTKey && (
<Stack>
{input.labelTKey && (
<Label id={labelId}> <Label id={labelId}>
<ToolTipLabelComponent <ToolTipLabelComponent
label={this.props.getTranslation(input.labelTKey)} label={this.props.getTranslation(input.labelTKey)}
toolTipElement={this.renderInfo(info)} toolTipElement={this.renderInfo(info)}
/> />
</Label> </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) { switch (input.type) {
case "string": case "string":
if ("description" in input || "isDynamicDescription" in input) { 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": case "number":
return this.renderNumberInput(input as NumberInput, labelId); return this.renderNumberInput(input as NumberInput, labelId, labelElement);
case "boolean": case "boolean":
return this.renderBooleanInput(input as BooleanInput, labelId); return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
case "object": case "object":
return this.renderChoiceInput(input as ChoiceInput, labelId); return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
default: default:
throw new Error(`Unknown input type: ${input.type}`); throw new Error(`Unknown input type: ${input.type}`);
} }
@ -373,7 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
return ( return (
<Stack tokens={containerStackTokens} className="widgetRendererContainer"> <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>)} {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
</Stack> </Stack>
); );

34
src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
View File

@ -22,6 +22,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<Text <Text
aria-labelledby="description-label" aria-labelledby="description-label"
@ -37,6 +38,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
</StyledLinkBase> </StyledLinkBase>
</Text> </Text>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -52,6 +54,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="throughput-label" id="throughput-label"
@ -100,6 +103,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
/> />
</Stack> </Stack>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -115,6 +119,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="throughput2-label" id="throughput2-label"
@ -148,6 +153,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
/> />
</div> </div>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -184,6 +190,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="containerId-label" id="containerId-label"
@ -192,9 +199,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
label="Container id" label="Container id"
/> />
</StyledLabelBase> </StyledLabelBase>
<div
className="stringInputContainer"
>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="containerId-label" aria-labelledby="containerId-label"
disabled={true} disabled={true}
@ -210,7 +214,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
type="text" type="text"
value="" value=""
/> />
</div> </Stack>
</Stack> </Stack>
</StackItem> </StackItem>
</Stack> </Stack>
@ -227,6 +231,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="analyticalStore-label" id="analyticalStore-label"
@ -252,6 +257,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
/> />
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -267,6 +273,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="database-label" id="database-label"
@ -278,6 +285,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<StyledWithResponsiveMode <StyledWithResponsiveMode
aria-labelledby="database-label" aria-labelledby="database-label"
disabled={true} disabled={true}
dropdownWidth="auto"
id="database-dropdown-input" id="database-dropdown-input"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -311,6 +319,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
} }
/> />
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -339,6 +348,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<Text <Text
aria-labelledby="description-label" aria-labelledby="description-label"
@ -354,6 +364,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
</StyledLinkBase> </StyledLinkBase>
</Text> </Text>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -369,6 +380,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="throughput-label" id="throughput-label"
@ -417,6 +429,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
/> />
</Stack> </Stack>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -432,6 +445,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="throughput2-label" id="throughput2-label"
@ -464,6 +478,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
/> />
</div> </div>
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -500,6 +515,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="containerId-label" id="containerId-label"
@ -508,9 +524,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
label="Container id" label="Container id"
/> />
</StyledLabelBase> </StyledLabelBase>
<div
className="stringInputContainer"
>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="containerId-label" aria-labelledby="containerId-label"
id="containerId-textField-input" id="containerId-textField-input"
@ -525,7 +538,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
type="text" type="text"
value="" value=""
/> />
</div> </Stack>
</Stack> </Stack>
</StackItem> </StackItem>
</Stack> </Stack>
@ -542,6 +555,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="analyticalStore-label" id="analyticalStore-label"
@ -566,6 +580,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
/> />
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>
@ -581,6 +596,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
> >
<StackItem> <StackItem>
<Stack>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="database-label" id="database-label"
@ -591,6 +607,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
</StyledLabelBase> </StyledLabelBase>
<StyledWithResponsiveMode <StyledWithResponsiveMode
aria-labelledby="database-label" aria-labelledby="database-label"
dropdownWidth="auto"
id="database-dropdown-input" id="database-dropdown-input"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -624,6 +641,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
} }
/> />
</Stack> </Stack>
</Stack>
</StackItem> </StackItem>
</Stack> </Stack>
</div> </div>

99
src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@ -310,7 +310,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="panelWarningIcon root-109" className="panelWarningIcon root-141"
data-icon-name="WarningSolid" data-icon-name="WarningSolid"
> >
@ -325,7 +325,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <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. Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span> </span>
@ -348,7 +348,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-110" className="css-142"
> >
Confirm by typing the collection id Confirm by typing the collection id
</span> </span>
@ -367,6 +367,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
> >
<TextFieldBase <TextFieldBase
autoFocus={true} autoFocus={true}
canRevealPassword={false}
deferredValidationTime={200} deferredValidationTime={200}
id="confirmCollectionId" id="confirmCollectionId"
onChange={[Function]} onChange={[Function]}
@ -648,18 +649,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField root-112" className="ms-TextField root-144"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-113" className="ms-TextField-fieldGroup fieldGroup-145"
> >
<input <input
aria-invalid={false} aria-invalid={false}
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-114" className="ms-TextField-field field-146"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -682,7 +683,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-120" className="css-155"
> >
Help us improve Azure Cosmos DB! Help us improve Azure Cosmos DB!
</span> </span>
@ -692,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-120" className="css-155"
> >
What is the reason why you are deleting this container? What is the reason why you are deleting this container?
</span> </span>
@ -711,6 +712,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
} }
> >
<TextFieldBase <TextFieldBase
canRevealPassword={false}
deferredValidationTime={200} deferredValidationTime={200}
id="deleteCollectionFeedbackInput" id="deleteCollectionFeedbackInput"
multiline={true} multiline={true}
@ -994,17 +996,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField ms-TextField--multiline root-112" className="ms-TextField ms-TextField--multiline root-144"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-121" className="ms-TextField-fieldGroup fieldGroup-156"
> >
<textarea <textarea
aria-invalid={false} aria-invalid={false}
className="ms-TextField-field field-122" className="ms-TextField-field field-157"
id="deleteCollectionFeedbackInput" id="deleteCollectionFeedbackInput"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -1900,7 +1902,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1926,7 +1928,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1945,7 +1947,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "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", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -2034,7 +2037,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -2066,8 +2069,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}, },
}, },
Object { Object {
"backgroundColor": "#f3f2f1",
"color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2084,7 +2089,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -2096,11 +2101,12 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -2116,7 +2122,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -2134,7 +2140,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2163,19 +2169,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderRightWidth": "0", "borderRightWidth": "0",
"color": "WindowText", "color": "WindowText",
"forcedColorAdjust": "none",
}, },
}, },
}, },
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "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", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -2188,10 +2195,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -2201,10 +2209,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
"forcedColorAdjust": "none",
}, },
}, },
}, },
@ -2214,12 +2223,11 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": 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": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
},
"@media screen and (forced-colors: active)": Object {
"forcedColorAdjust": "none", "forcedColorAdjust": "none",
}, },
}, },
@ -2231,7 +2239,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -2240,7 +2248,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2256,7 +2264,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -2268,7 +2276,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -2281,7 +2289,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -2303,17 +2311,22 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
".ms-Button-menuIcon": Object {
"color": "WindowText",
},
},
"border": "1px solid #8a8886", "border": "1px solid #8a8886",
"borderBottomRightRadius": "2px", "borderBottomRightRadius": "2px",
"borderLeft": "none", "borderLeft": "none",
@ -2359,7 +2372,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2368,7 +2381,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2376,7 +2389,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -2398,7 +2411,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active)": Object { "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2686,7 +2699,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variantClassName="ms-Button--primary" variantClassName="ms-Button--primary"
> >
<button <button
className="ms-Button ms-Button--primary root-124" className="ms-Button ms-Button--primary root-159"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2698,14 +2711,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button" type="button"
> >
<span <span
className="ms-Button-flexContainer flexContainer-125" className="ms-Button-flexContainer flexContainer-160"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-126" className="ms-Button-textContainer textContainer-161"
> >
<span <span
className="ms-Button-label label-128" className="ms-Button-label label-163"
id="id__6" id="id__6"
key="id__6" key="id__6"
> >

5
src/Localization/en/translations.json
View File

@ -28,7 +28,7 @@
"Database Throughput": "Database Throughput", "Database Throughput": "Database Throughput",
"UpdateInProgressMessage": "Data is being updated", "UpdateInProgressMessage": "Data is being updated",
"UpdateCompletedMessageTitle": "Update succeeded", "UpdateCompletedMessageTitle": "Update succeeded",
"UpdateCompletedMessageText": "Data updation completed.", "UpdateCompletedMessageText": "Data update completed.",
"SubmissionMessageSuccessTitle": "Update started", "SubmissionMessageSuccessTitle": "Update started",
"SubmissionMessageForNewRegionText": "Data update started. Region changed.", "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
"SubmissionMessageForSameRegionText": "Data update started. Region not changed.", "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
@ -36,7 +36,6 @@
"SubmissionMessageErrorText": "Data update failed because of errors.", "SubmissionMessageErrorText": "Data update failed because of errors.",
"OnSaveFailureMessage": "Data save operation not currently permitted." "OnSaveFailureMessage": "Data save operation not currently permitted."
}, },
"SqlX": { "SqlX": {}
}
} }
} }

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

@ -1,4 +1,4 @@
import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators"; import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
import { import {
ChoiceItem, ChoiceItem,
Description, Description,
@ -12,14 +12,14 @@ import {
SmartUiInput, SmartUiInput,
} from "../SelfServeTypes"; } from "../SelfServeTypes";
import { import {
getMaxCollectionThroughput,
getMaxDatabaseThroughput,
getMinCollectionThroughput,
getMinDatabaseThroughput,
initialize,
onRefreshSelfServeExample, onRefreshSelfServeExample,
Regions, Regions,
update, update,
initialize,
getMinDatabaseThroughput,
getMaxDatabaseThroughput,
getMinCollectionThroughput,
getMaxCollectionThroughput,
} from "./SelfServeExample.rp"; } from "./SelfServeExample.rp";
const regionDropdownItems: ChoiceItem[] = [ const regionDropdownItems: ChoiceItem[] = [
@ -203,11 +203,7 @@ export default class SelfServeExample extends SelfServeBaseClass {
public initialize = async (): Promise<Map<string, SmartUiInput>> => { public initialize = async (): Promise<Map<string, SmartUiInput>> => {
const initializeResponse = await initialize(); const initializeResponse = await initialize();
const defaults = new Map<string, SmartUiInput>(); const defaults = new Map<string, SmartUiInput>();
const currentRegionText = `current region selected is ${initializeResponse.regions}`; defaults.set("currentRegionText", undefined);
defaults.set("currentRegionText", {
value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
hidden: false,
});
defaults.set("regions", { value: initializeResponse.regions }); defaults.set("regions", { value: initializeResponse.regions });
defaults.set("enableLogging", { value: initializeResponse.enableLogging }); defaults.set("enableLogging", { value: initializeResponse.enableLogging });
const accountName = initializeResponse.accountName; const accountName = initializeResponse.accountName;

14
src/SelfServe/SelfServe.tsx
View File

@ -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 * as React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
import { sendMessage } from "../Common/MessageHandler"; 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 { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
import "./SelfServe.less";
import { SelfServeComponent } from "./SelfServeComponent"; import { SelfServeComponent } from "./SelfServeComponent";
import { SelfServeDescriptor } from "./SelfServeTypes"; import { SelfServeDescriptor } from "./SelfServeTypes";
import { SelfServeType } from "./SelfServeUtils"; 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(); initializeIcons();
const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => { const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {

97
src/SelfServe/SelfServeComponent.tsx
View File

@ -1,34 +1,36 @@
import React from "react"; import { TFunction } from "i18next";
import { import {
CommandBar, CommandBar,
ICommandBarItemProps, ICommandBarItemProps,
IStackTokens,
MessageBar, MessageBar,
MessageBarType, MessageBarType,
Separator,
Spinner, Spinner,
SpinnerSize, SpinnerSize,
Stack, Stack,
} from "office-ui-fabric-react"; } 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 { import {
AnyDisplay, AnyDisplay,
Node, BooleanInput,
ChoiceInput,
DescriptionDisplay,
InputType, InputType,
Node,
NumberInput,
RefreshResult, RefreshResult,
SelfServeDescriptor, SelfServeDescriptor,
SmartUiInput, SmartUiInput,
DescriptionDisplay,
StringInput, StringInput,
NumberInput,
BooleanInput,
ChoiceInput,
} from "./SelfServeTypes"; } 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 { interface SelfServeNotification {
message: string; message: string;
@ -127,7 +129,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
this.props.descriptor.inputNames.map((inputName) => { this.props.descriptor.inputNames.map((inputName) => {
let initialValue = initialValues.get(inputName); let initialValue = initialValues.get(inputName);
if (!initialValue) { if (!initialValue) {
initialValue = { value: undefined, hidden: false }; initialValue = { value: undefined, hidden: false, disabled: false };
} }
currentValues = currentValues.set(inputName, initialValue); currentValues = currentValues.set(inputName, initialValue);
baselineValues = baselineValues.set(inputName, initialValue); baselineValues = baselineValues.set(inputName, initialValue);
@ -311,34 +313,41 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
this.performSave(); this.performSave();
}; };
public isDiscardButtonDisabled = (): boolean => { public isInputModified = (): boolean => {
if (this.state.isSaving) {
return true;
}
for (const key of this.state.currentValues.keys()) { for (const key of this.state.currentValues.keys()) {
const currentValue = JSON.stringify(this.state.currentValues.get(key)); const currentValue = this.state.currentValues.get(key);
const baselineValue = JSON.stringify(this.state.baselineValues.get(key)); if (currentValue && currentValue.hidden === undefined) {
currentValue.hidden = false;
}
if (currentValue && currentValue.disabled === undefined) {
currentValue.disabled = false;
}
if (currentValue !== baselineValue) { const baselineValue = this.state.baselineValues.get(key);
return false; if (baselineValue && baselineValue.hidden === undefined) {
baselineValue.hidden = false;
} }
if (baselineValue && baselineValue.disabled === undefined) {
baselineValue.disabled = false;
} }
if (!_.isEqual(currentValue, baselineValue)) {
return true; 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 => { public isSaveButtonDisabled = (): boolean => {
if (this.state.hasErrors || this.state.isSaving) { return this.state.hasErrors || this.isRefreshing() || !this.isInputModified();
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;
}; };
private performRefresh = async (): Promise<void> => { private performRefresh = async (): Promise<void> => {
@ -397,7 +406,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
key: "save", key: "save",
text: this.getCommonTranslation("Save"), text: this.getCommonTranslation("Save"),
iconProps: { iconName: "Save" }, iconProps: { iconName: "Save" },
split: true,
disabled: this.isSaveButtonDisabled(), disabled: this.isSaveButtonDisabled(),
onClick: () => this.onSaveButtonClick(), onClick: () => this.onSaveButtonClick(),
}, },
@ -405,21 +413,21 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
key: "discard", key: "discard",
text: this.getCommonTranslation("Discard"), text: this.getCommonTranslation("Discard"),
iconProps: { iconName: "Undo" }, iconProps: { iconName: "Undo" },
split: true,
disabled: this.isDiscardButtonDisabled(), disabled: this.isDiscardButtonDisabled(),
onClick: () => { onClick: () => {
this.discard(); this.discard();
}, },
buttonStyles: commandBarItemStyles,
}, },
{ {
key: "refresh", key: "refresh",
text: this.getCommonTranslation("Refresh"), text: this.getCommonTranslation("Refresh"),
disabled: this.state.isInitializing, disabled: this.state.isInitializing,
iconProps: { iconName: "Refresh" }, iconProps: { iconName: "Refresh" },
split: true,
onClick: () => { onClick: () => {
this.onRefreshClicked(); this.onRefreshClicked();
}, },
buttonStyles: commandBarItemStyles,
}, },
]; ];
}; };
@ -432,7 +440,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
}; };
public render(): JSX.Element { public render(): JSX.Element {
const containerStackTokens: IStackTokens = { childrenGap: 5 };
if (this.state.compileErrorMessage) { if (this.state.compileErrorMessage) {
return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>; return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
} }
@ -445,13 +452,13 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
return ( return (
<div style={{ overflowX: "auto" }}> <div style={{ overflowX: "auto" }}>
<Stack tokens={containerStackTokens} styles={{ root: { padding: 10 } }}> <Stack tokens={containerStackTokens}>
<CommandBar styles={{ root: { paddingLeft: 0 } }} items={this.getCommandBarItems()} /> <Stack.Item>
<CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
<Separator styles={separatorStyles} />
</Stack.Item>
{this.state.isInitializing ? ( {this.state.isInitializing ? (
<Spinner <Spinner size={SpinnerSize.large} />
size={SpinnerSize.large}
styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
/>
) : ( ) : (
<> <>
{this.state.notification && ( {this.state.notification && (

20
src/SelfServe/SelfServeStyles.tsx Normal file
View File

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

8
src/SelfServe/SelfServeUtils.tsx
View File

@ -1,6 +1,6 @@
import "reflect-metadata"; import "reflect-metadata";
import { userContext } from "../UserContext";
import { import {
Node,
AnyDisplay, AnyDisplay,
BooleanInput, BooleanInput,
ChoiceInput, ChoiceInput,
@ -10,13 +10,13 @@ import {
Info, Info,
InputType, InputType,
InputTypeValue, InputTypeValue,
Node,
NumberInput, NumberInput,
RefreshParams,
SelfServeDescriptor, SelfServeDescriptor,
SmartUiInput, SmartUiInput,
StringInput, StringInput,
RefreshParams,
} from "./SelfServeTypes"; } from "./SelfServeTypes";
import { userContext } from "../UserContext";
export enum SelfServeType { export enum SelfServeType {
// No self serve type passed, launch explorer // No self serve type passed, launch explorer
@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
const subscriptionId = userContext.subscriptionId; const subscriptionId = userContext.subscriptionId;
const resourceGroupName = userContext.resourceGroup; const resourceGroupName = userContext.resourceGroup;
const databaseAccountName = userContext.databaseAccount.name; 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}`;
}; };

7
test/selfServe/selfServeExample.spec.ts
View File

@ -12,14 +12,19 @@ describe("Self Serve", () => {
// id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE} // id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE}
await frame.waitForSelector("#description-text-display"); await frame.waitForSelector("#description-text-display");
await frame.waitForSelector("#currentRegionText-text-display");
const regions = await frame.waitForSelector("#regions-dropdown-input"); 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]"); let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
expect(disabledLoggingToggle).toHaveLength(0); expect(disabledLoggingToggle).toHaveLength(0);
await regions.click(); await regions.click();
const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0"); const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0");
await regionsDropdownElement1.click(); await regionsDropdownElement1.click();
await frame.waitForSelector("#currentRegionText-text-display");
disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]"); disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
expect(disabledLoggingToggle).toHaveLength(1); expect(disabledLoggingToggle).toHaveLength(1);