From ecdc41ada9627076de1111428915c648fbfdc302 Mon Sep 17 00:00:00 2001 From: Srinath Narayanan Date: Tue, 9 Mar 2021 16:07:23 -0800 Subject: [PATCH] Added more selfserve changes (#443) * exposed baselineValues * added getOnSaveNotification * disable UI when onSave is taking place * added optional polling * Added portal notifications * minor edits * added label for description * Added correlationids and polling of refresh * added label tooltip * removed ClassInfo decorator * Added dynamic decription * added info and warninf types for description * promise retry changes * compile errors fixed * merged sqlxEdits * undid sqlx changes * added completed notification * passed retryInterval in notif options * added polling on landing on the page * edits for error display * added link generation * addressed PR comments * modified test * fixed compilation error --- src/Contracts/SelfServeContracts.ts | 9 + .../SmartUi/SmartUiComponent.test.tsx | 4 +- .../Controls/SmartUi/SmartUiComponent.tsx | 139 ++-- .../SmartUiComponent.test.tsx.snap | 724 +++++++++--------- src/Localization/en/translations.json | 19 +- src/SelfServe/Decorators.tsx | 22 +- src/SelfServe/Example/SelfServeExample.rp.ts | 11 +- src/SelfServe/Example/SelfServeExample.tsx | 125 ++- src/SelfServe/SelfServeComponent.test.tsx | 20 +- src/SelfServe/SelfServeComponent.tsx | 255 ++++-- src/SelfServe/SelfServeTypes.ts | 59 +- src/SelfServe/SelfServeUtils.test.tsx | 10 +- src/SelfServe/SelfServeUtils.tsx | 48 +- src/SelfServe/SqlX/SqlX.tsx | 10 +- src/Utils/arm/request.ts | 33 +- test/selfServe/selfServeExample.spec.ts | 1 + 16 files changed, 886 insertions(+), 603 deletions(-) create mode 100644 src/Contracts/SelfServeContracts.ts diff --git a/src/Contracts/SelfServeContracts.ts b/src/Contracts/SelfServeContracts.ts new file mode 100644 index 000000000..942aa3dab --- /dev/null +++ b/src/Contracts/SelfServeContracts.ts @@ -0,0 +1,9 @@ +/** + * Messaging types used with SelfServe Component <-> Portal communication + * and Hosted <-> SelfServe Component communication + */ + +export enum SelfServeMessageTypes { + TelemetryInfo = "TelemetryInfo", + Notification = "Notification", +} diff --git a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx index f9ed76dfa..91bc16815 100644 --- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx +++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { shallow } from "enzyme"; import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent"; -import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes"; +import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes"; describe("SmartUiComponent", () => { const exampleData: SmartUiDescriptor = { @@ -18,10 +18,12 @@ describe("SmartUiComponent", () => { { id: "description", input: { + labelTKey: undefined, dataFieldName: "description", type: "string", description: { textTKey: "this is an example description text.", + type: DescriptionType.Text, link: { href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction", textTKey: "Click here for more information.", diff --git a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx index f0ce2adcc..fbedd7529 100644 --- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx +++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx @@ -6,12 +6,13 @@ import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown"; import { TextField } from "office-ui-fabric-react/lib/TextField"; import { Text } from "office-ui-fabric-react/lib/Text"; import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack"; -import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react"; +import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react"; import * as InputUtils from "./InputUtils"; import "./SmartUiComponent.less"; import { ChoiceItem, Description, + DescriptionType, Info, InputType, InputTypeValue, @@ -19,6 +20,7 @@ import { SmartUiInput, } from "../../../SelfServe/SelfServeTypes"; import { TFunction } from "i18next"; +import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent"; /** * Generic UX renderer @@ -29,15 +31,14 @@ import { TFunction } from "i18next"; */ interface BaseDisplay { + labelTKey: string; dataFieldName: string; errorMessage?: string; type: InputTypeValue; } interface BaseInput extends BaseDisplay { - labelTKey: string; placeholderTKey?: string; - errorMessage?: string; } /** @@ -67,7 +68,8 @@ interface ChoiceInput extends BaseInput { } interface DescriptionDisplay extends BaseDisplay { - description: Description; + description?: Description; + isDynamicDescription?: boolean; } type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay; @@ -123,25 +125,28 @@ export class SmartUiComponent extends React.Component - {this.props.getTranslation(info.messageTKey)} - {info.link && ( - - {this.props.getTranslation(info.link.textTKey)} - - )} - + info && ( + + {this.props.getTranslation(info.messageTKey)} + {` `} + {info.link && ( + + {this.props.getTranslation(info.link.textTKey)} + + )} + + ) ); } - private renderTextInput(input: StringInput): JSX.Element { + private renderTextInput(input: StringInput, labelId: string): 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 (
this.props.onInputChange(input, newValue)} styles={{ root: { width: 400 }, - subComponentStyles: { - label: { - root: { - ...SmartUiComponent.labelStyle, - fontWeight: 600, - }, - }, - }, }} />
); } - private renderDescription(input: DescriptionDisplay): JSX.Element { - const description = input.description; - return ( - - {this.props.getTranslation(input.description.textTKey)}{" "} + private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element { + const dataFieldName = input.dataFieldName; + const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description); + if (!description) { + return this.renderError("Description is not provided."); + } + const descriptionElement = ( + + {this.props.getTranslation(description.textTKey)} + {` `} {description.link && ( - - {this.props.getTranslation(input.description.link.textTKey)} + + {this.props.getTranslation(description.link.textTKey)} )} ); + + if (description.type === DescriptionType.Text) { + return descriptionElement; + } + const messageBarType = + description.type === DescriptionType.InfoMessageBar ? MessageBarType.info : MessageBarType.warning; + return {descriptionElement}; } private clearError(dataFieldName: string): void { @@ -220,13 +229,12 @@ export class SmartUiComponent extends React.Component this.onIncrement(input, newValue, props.step, props.max)} onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)} labelPosition={Position.top} + aria-labelledby={labelId} disabled={disabled} - styles={{ - label: { - ...SmartUiComponent.labelStyle, - fontWeight: 600, - }, - }} /> {this.state.errors.has(dataFieldName) && ( Error: {this.state.errors.get(dataFieldName)} @@ -266,10 +269,6 @@ export class SmartUiComponent extends React.Component this.props.onInputChange(input, newValue)} styles={{ root: { width: 400 }, - titleLabel: { - ...SmartUiComponent.labelStyle, - fontWeight: 600, - }, valueLabel: SmartUiComponent.labelStyle, }} /> @@ -280,13 +279,13 @@ export class SmartUiComponent extends React.Component this.props.onInputChange(input, item.key.toString())} placeholder={this.props.getTranslation(placeholderTKey)} @@ -319,40 +318,53 @@ export class SmartUiComponent extends React.Component ); } - private renderError(input: AnyDisplay): JSX.Element { - return Error: {input.errorMessage}; + private renderError(errorMessage: string): JSX.Element { + return Error: {errorMessage}; } - private renderDisplay(input: AnyDisplay): JSX.Element { + private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element { if (input.errorMessage) { - return this.renderError(input); + return this.renderError(input.errorMessage); } const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden; if (inputHidden) { return <>; } + const labelId = `${input.dataFieldName}-label`; + return ( + + {input.labelTKey && ( + + )} + {this.renderDisplay(input, labelId)} + + ); + } + + private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element { switch (input.type) { case "string": - if ("description" in input) { - return this.renderDescription(input as DescriptionDisplay); + if ("description" in input || "isDynamicDescription" in input) { + return this.renderDescription(input as DescriptionDisplay, labelId); } - return this.renderTextInput(input as StringInput); + return this.renderTextInput(input as StringInput, labelId); case "number": - return this.renderNumberInput(input as NumberInput); + return this.renderNumberInput(input as NumberInput, labelId); case "boolean": - return this.renderBooleanInput(input as BooleanInput); + return this.renderBooleanInput(input as BooleanInput, labelId); case "object": - return this.renderChoiceInput(input as ChoiceInput); + return this.renderChoiceInput(input as ChoiceInput, labelId); default: throw new Error(`Unknown input type: ${input.type}`); } @@ -363,10 +375,7 @@ export class SmartUiComponent extends React.Component - - {node.info && this.renderInfo(node.info as Info)} - {node.input && this.renderDisplay(node.input)} - + {node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)} {node.children && node.children.map((child) =>
{this.renderNode(child)}
)} ); diff --git a/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap b/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap index ec2697d01..46f6e0141 100644 --- a/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap +++ b/src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap @@ -9,25 +9,7 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } } > - - - Start at $24/mo per database - - More Details - - - +
@@ -40,18 +22,21 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > - - this is an example description text. - - + - Click here for more information. - - + this is an example description text. + + + Click here for more information. + + +
@@ -67,53 +52,53 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > - - + + + + + tokens={ + Object { + "childrenGap": 2, + } + } + > + + @@ -130,37 +115,39 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > -
- + + + +
+ -
+ /> +
+ @@ -197,35 +184,34 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > -
- + + + +
+ -
+ type="text" + value="" + /> +
+ @@ -241,22 +227,31 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > - + + + + + /> + @@ -272,47 +267,50 @@ exports[`SmartUiComponent disable all inputs 1`] = ` } > - + + + + + selectedKey="db2" + styles={ + Object { + "dropdown": Object { + "color": "#393939", + "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif", + "fontSize": 12, + }, + "root": Object { + "width": 400, + }, + } + } + /> + @@ -328,25 +326,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } } > - - - Start at $24/mo per database - - More Details - - - +
@@ -359,18 +339,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > - - this is an example description text. - - + - Click here for more information. - - + this is an example description text. + + + Click here for more information. + + +
@@ -386,53 +369,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > - - + + + + + tokens={ + Object { + "childrenGap": 2, + } + } + > + + @@ -449,36 +432,38 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > -
- + + + +
+ -
+ /> +
+ @@ -515,34 +500,33 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > -
- + + + +
+ -
+ type="text" + value="" + /> +
+ @@ -558,21 +542,30 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > - + + + + + /> + @@ -588,46 +581,49 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state } > - + + + + + selectedKey="db2" + styles={ + Object { + "dropdown": Object { + "color": "#393939", + "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif", + "fontSize": 12, + }, + "root": Object { + "width": 400, + }, + } + } + /> + diff --git a/src/Localization/en/translations.json b/src/Localization/en/translations.json index 5732c02a3..e179ccf8b 100644 --- a/src/Localization/en/translations.json +++ b/src/Localization/en/translations.json @@ -9,9 +9,11 @@ "North Central US": "North Central US", "West US": "West US", "East US 2": "East US 2", - "ClassInfo": "This is a self serve class", + "Current Region": "Current Region", "RegionDropdownInfo": "More regions can be added in the future.", - "ValidationError": "Regions and AccountName should not be empty.", + "RegionsAndAccountNameValidationError": "Regions and account name should not be empty.", + "DbThroughputValidationError": "Please update throughput for database.", + "DescriptionLabel": "Description", "DescriptionText": "This class sets collection and database throughput.", "DecriptionLinkText": "Click here for more information", "Regions": "Regions", @@ -22,10 +24,17 @@ "Account Name": "Account Name", "AccountNamePlaceHolder": "Enter the account name", "Collection Throughput": "Collection Throughput", - "Enable DB level throughput": "Enable DB level throughput", + "Enable DB level throughput": "Enable Database Level Throughput", "Database Throughput": "Database Throughput", - "RefreshMessage": "Self Serve Example successfully refreshing", - "SubmissionMessage": "Submitted successfully" + "UpdateInProgressMessage": "Data is being updated", + "UpdateCompletedMessageTitle":"Update succeeded", + "UpdateCompletedMessageText": "Data updation completed.", + "SubmissionMessageSuccessTitle": "Update started", + "SubmissionMessageForNewRegionText": "Data update started. Region changed.", + "SubmissionMessageForSameRegionText": "Data update started. Region not changed.", + "SubmissionMessageErrorTitle": "Data update failed", + "SubmissionMessageErrorText": "Data update failed because of errors.", + "OnSaveFailureMessage": "Data save operation not currently permitted." }, "SqlX": { } diff --git a/src/SelfServe/Decorators.tsx b/src/SelfServe/Decorators.tsx index e524ce7a7..a855533ec 100644 --- a/src/SelfServe/Decorators.tsx +++ b/src/SelfServe/Decorators.tsx @@ -1,4 +1,4 @@ -import { ChoiceItem, Description, Info, InputType, NumberUiType, SmartUiInput } from "./SelfServeTypes"; +import { ChoiceItem, Description, Info, InputType, NumberUiType, SmartUiInput, RefreshParams } from "./SelfServeTypes"; import { addPropertyToMap, DecoratorProperties, buildSmartUiDescriptor } from "./SelfServeUtils"; type ValueOf = T[keyof T]; @@ -33,7 +33,9 @@ export interface ChoiceInputOptions extends InputOptionsBase { } export interface DescriptionDisplayOptions { + labelTKey?: string; description?: (() => Promise) | Description; + isDynamicDescription?: boolean; } type InputOptions = @@ -56,7 +58,7 @@ const isChoiceInputOptions = (inputOptions: InputOptions): inputOptions is Choic }; const isDescriptionDisplayOptions = (inputOptions: InputOptions): inputOptions is DescriptionDisplayOptions => { - return "description" in inputOptions; + return "description" in inputOptions || "isDynamicDescription" in inputOptions; }; const addToMap = (...decorators: Decorator[]): PropertyDecorator => { @@ -80,7 +82,11 @@ const addToMap = (...decorators: Decorator[]): PropertyDecorator => { }; export const OnChange = ( - onChange: (currentState: Map, newValue: InputType) => Map + onChange: ( + newValue: InputType, + currentState: Map, + baselineValues: ReadonlyMap + ) => Map ): PropertyDecorator => { return addToMap({ name: "onChange", value: onChange }); }; @@ -111,7 +117,11 @@ export const Values = (inputOptions: InputOptions): PropertyDecorator => { { name: "choices", value: inputOptions.choices } ); } else if (isDescriptionDisplayOptions(inputOptions)) { - return addToMap({ name: "description", value: inputOptions.description }); + return addToMap( + { name: "labelTKey", value: inputOptions.labelTKey }, + { name: "description", value: inputOptions.description }, + { name: "isDynamicDescription", value: inputOptions.isDynamicDescription } + ); } else { return addToMap( { name: "labelTKey", value: inputOptions.labelTKey }, @@ -126,8 +136,8 @@ export const IsDisplayable = (): ClassDecorator => { }; }; -export const ClassInfo = (info: (() => Promise) | Info): ClassDecorator => { +export const RefreshOptions = (refreshParams: RefreshParams): ClassDecorator => { return (target) => { - addPropertyToMap(target.prototype, "root", target.name, "info", info); + addPropertyToMap(target.prototype, "root", target.name, "refreshParams", refreshParams); }; }; diff --git a/src/SelfServe/Example/SelfServeExample.rp.ts b/src/SelfServe/Example/SelfServeExample.rp.ts index 62dfbc3ec..e73aea914 100644 --- a/src/SelfServe/Example/SelfServeExample.rp.ts +++ b/src/SelfServe/Example/SelfServeExample.rp.ts @@ -64,13 +64,20 @@ export const initialize = async (): Promise => { }; export const onRefreshSelfServeExample = async (): Promise => { + const refreshCountString = SessionStorageUtility.getEntry("refreshCount"); + const refreshCount = refreshCountString ? parseInt(refreshCountString) : 0; + const subscriptionId = userContext.subscriptionId; const resourceGroup = userContext.resourceGroup; const databaseAccountName = userContext.databaseAccount.name; const databaseAccountGetResults = await get(subscriptionId, resourceGroup, databaseAccountName); const isUpdateInProgress = databaseAccountGetResults.properties.provisioningState !== "Succeeded"; + + const progressToBeSent = refreshCount % 5 === 0 ? isUpdateInProgress : true; + SessionStorageUtility.setEntry("refreshCount", (refreshCount + 1).toString()); + return { - isUpdateInProgress: isUpdateInProgress, - notificationMessage: "RefreshMessage", + isUpdateInProgress: progressToBeSent, + updateInProgressMessageTKey: "UpdateInProgressMessage", }; }; diff --git a/src/SelfServe/Example/SelfServeExample.tsx b/src/SelfServe/Example/SelfServeExample.tsx index 01dca3a29..ff00ec800 100644 --- a/src/SelfServe/Example/SelfServeExample.tsx +++ b/src/SelfServe/Example/SelfServeExample.tsx @@ -1,13 +1,14 @@ -import { PropertyInfo, OnChange, Values, IsDisplayable, ClassInfo } from "../Decorators"; +import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators"; import { ChoiceItem, + Description, + DescriptionType, Info, InputType, NumberUiType, + OnSaveResult, RefreshResult, SelfServeBaseClass, - SelfServeNotification, - SelfServeNotificationType, SmartUiInput, } from "../SelfServeTypes"; import { @@ -27,16 +28,19 @@ const regionDropdownItems: ChoiceItem[] = [ { label: "East US 2", key: Regions.EastUS2 }, ]; -const selfServeExampleInfo: Info = { - messageTKey: "ClassInfo", -}; - const regionDropdownInfo: Info = { messageTKey: "RegionDropdownInfo", }; -const onRegionsChange = (currentState: Map, newValue: InputType): Map => { +const onRegionsChange = (newValue: InputType, currentState: Map): Map => { currentState.set("regions", { value: newValue }); + + const currentRegionText = `current region selected is ${newValue}`; + currentState.set("currentRegionText", { + value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description, + hidden: false, + }); + const currentEnableLogging = currentState.get("enableLogging"); if (newValue === Regions.NorthCentralUS) { currentState.set("enableLogging", { value: false, disabled: true }); @@ -47,8 +51,8 @@ const onRegionsChange = (currentState: Map, newValue: Inpu }; const onEnableDbLevelThroughputChange = ( - currentState: Map, - newValue: InputType + newValue: InputType, + currentState: Map ): Map => { currentState.set("enableDbLevelThroughput", { value: newValue }); const currentDbThroughput = currentState.get("dbThroughput"); @@ -57,9 +61,15 @@ const onEnableDbLevelThroughputChange = ( return currentState; }; -const validate = (currentvalues: Map): void => { +const validate = ( + currentvalues: Map, + baselineValues: ReadonlyMap +): void => { + if (currentvalues.get("dbThroughput") === baselineValues.get("dbThroughput")) { + throw new Error("DbThroughputValidationError"); + } if (!currentvalues.get("regions").value || !currentvalues.get("accountName").value) { - throw new Error("ValidationError"); + throw new Error("RegionsAndAccountNameValidationError"); } }; @@ -86,12 +96,12 @@ const validate = (currentvalues: Map): void => { */ @IsDisplayable() /* - @ClassInfo() - - optional - - input: Info | () => Promise - - role: Display an Info bar as the first element of the UI. + @RefreshOptions() + - role: Passes the refresh options to be used by the self serve model. + - inputs: + retryIntervalInMs - The time interval between refresh attempts when an update in ongoing. */ -@ClassInfo(selfServeExampleInfo) +@RefreshOptions({ retryIntervalInMs: 2000 }) export default class SelfServeExample extends SelfServeBaseClass { /* onRefresh() @@ -109,18 +119,21 @@ export default class SelfServeExample extends SelfServeBaseClass { /* onSave() - - input: (currentValues: Map) => Promise + - input: (currentValues: Map, baselineValues: ReadonlyMap) => Promise - role: Callback that is triggerred when the submit button is clicked. You should perform your rest API calls here using the data from the different inputs passed as a Map to this callback function. In this example, the onSave callback simply sets the value for keys corresponding to the field name - in the SessionStorage. - - returns: SelfServeNotification - - message: The message to be displayed in the message bar after the onSave is completed - type: The type of message bar to be used (info, warning, error) + in the SessionStorage. It uses the currentValues and baselineValues maps to perform custom validations + as well. + + - returns: The initialize, success and failure messages to be displayed in the Portal Notification blade after the operation is completed. */ - public onSave = async (currentValues: Map): Promise => { - validate(currentValues); + public onSave = async ( + currentValues: Map, + baselineValues: ReadonlyMap + ): Promise => { + validate(currentValues, baselineValues); const regions = Regions[currentValues.get("regions")?.value as keyof typeof Regions]; const enableLogging = currentValues.get("enableLogging")?.value as boolean; const accountName = currentValues.get("accountName")?.value as string; @@ -128,8 +141,48 @@ export default class SelfServeExample extends SelfServeBaseClass { const enableDbLevelThroughput = currentValues.get("enableDbLevelThroughput")?.value as boolean; let dbThroughput = currentValues.get("dbThroughput")?.value as number; dbThroughput = enableDbLevelThroughput ? dbThroughput : undefined; - await update(regions, enableLogging, accountName, collectionThroughput, dbThroughput); - return { message: "SubmissionMessage", type: SelfServeNotificationType.info }; + try { + await update(regions, enableLogging, accountName, collectionThroughput, dbThroughput); + if (currentValues.get("regions") === baselineValues.get("regions")) { + return { + operationStatusUrl: undefined, + portalNotification: { + initialize: { + titleTKey: "SubmissionMessageSuccessTitle", + messageTKey: "SubmissionMessageForSameRegionText", + }, + success: { + titleTKey: "UpdateCompletedMessageTitle", + messageTKey: "UpdateCompletedMessageText", + }, + failure: { + titleTKey: "SubmissionMessageErrorTitle", + messageTKey: "SubmissionMessageErrorText", + }, + }, + }; + } else { + return { + operationStatusUrl: undefined, + portalNotification: { + initialize: { + titleTKey: "SubmissionMessageSuccessTitle", + messageTKey: "SubmissionMessageForNewRegionText", + }, + success: { + titleTKey: "UpdateCompletedMessageTitle", + messageTKey: "UpdateCompletedMessageText", + }, + failure: { + titleTKey: "SubmissionMessageErrorTitle", + messageTKey: "SubmissionMessageErrorText", + }, + }, + }; + } + } catch (error) { + throw new Error("OnSaveFailureMessage"); + } }; /* @@ -150,6 +203,11 @@ export default class SelfServeExample extends SelfServeBaseClass { public initialize = async (): Promise> => { const initializeResponse = await initialize(); const defaults = new Map(); + const currentRegionText = `current region selected is ${initializeResponse.regions}`; + defaults.set("currentRegionText", { + value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description, + hidden: false, + }); defaults.set("regions", { value: initializeResponse.regions }); defaults.set("enableLogging", { value: initializeResponse.enableLogging }); const accountName = initializeResponse.accountName; @@ -172,15 +230,24 @@ export default class SelfServeExample extends SelfServeBaseClass { e) Text (with optional hyperlink) for descriptions */ @Values({ + labelTKey: "DescriptionLabel", description: { textTKey: "DescriptionText", + type: DescriptionType.Text, link: { - href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction", + href: "https://aka.ms/cosmos-create-account-portal", textTKey: "DecriptionLinkText", }, }, }) description: string; + + @Values({ + labelTKey: "Current Region", + isDynamicDescription: true, + }) + currentRegionText: string; + /* @PropertyInfo() - optional @@ -192,8 +259,8 @@ export default class SelfServeExample extends SelfServeBaseClass { /* @OnChange() - optional - - input: (currentValues: Map, newValue: InputType) => Map - - role: Takes a Map of current values and the newValue for this property as inputs. This is called when a property, + - input: (currentValues: Map, newValue: InputType, baselineValues: ReadonlyMap) => Map + - role: Takes a Map of current values, the newValue for this property and a ReadonlyMap of baselineValues as inputs. This is called when a property, say prop1, changes its value in the UI. This can be used to a) Change the value (and reflect it in the UI) for prop2 based on prop1. b) Change the visibility for prop2 in the UI, based on prop1 diff --git a/src/SelfServe/SelfServeComponent.test.tsx b/src/SelfServe/SelfServeComponent.test.tsx index afb002498..80ec112af 100644 --- a/src/SelfServe/SelfServeComponent.test.tsx +++ b/src/SelfServe/SelfServeComponent.test.tsx @@ -1,7 +1,7 @@ import React from "react"; import { shallow } from "enzyme"; import { SelfServeComponent, SelfServeComponentState } from "./SelfServeComponent"; -import { NumberUiType, SelfServeDescriptor, SelfServeNotificationType, SmartUiInput } from "./SelfServeTypes"; +import { NumberUiType, OnSaveResult, SelfServeDescriptor, SmartUiInput } from "./SelfServeTypes"; describe("SelfServeComponent", () => { const defaultValues = new Map([ @@ -17,13 +17,20 @@ describe("SelfServeComponent", () => { const initializeMock = jest.fn(async () => new Map(defaultValues)); const onSaveMock = jest.fn(async () => { - return { message: "submitted successfully", type: SelfServeNotificationType.info }; + return { + operationStatusUrl: undefined, + } as OnSaveResult; }); + const refreshResult = { + isUpdateInProgress: false, + updateInProgressMessageTKey: "refresh performed successfully", + }; + const onRefreshMock = jest.fn(async () => { - return { isUpdateInProgress: false, notificationMessage: "refresh performed successfully" }; + return { ...refreshResult }; }); const onRefreshIsUpdatingMock = jest.fn(async () => { - return { isUpdateInProgress: true, notificationMessage: "refresh performed successfully" }; + return { ...refreshResult, isUpdateInProgress: true }; }); const exampleData: SelfServeDescriptor = { @@ -136,16 +143,15 @@ describe("SelfServeComponent", () => { wrapper.update(); state = wrapper.state() as SelfServeComponentState; isEqual(state.baselineValues, updatedValues); - selfServeComponent.resetBaselineValues(); + selfServeComponent.updateBaselineValues(); state = wrapper.state() as SelfServeComponentState; isEqual(state.baselineValues, defaultValues); isEqual(state.currentValues, state.baselineValues); - // clicking refresh calls onRefresh. If component is not updating, it calls initialize() as well + // clicking refresh calls onRefresh. selfServeComponent.onRefreshClicked(); await new Promise((resolve) => setTimeout(resolve, 0)); expect(onRefreshMock).toHaveBeenCalledTimes(2); - expect(initializeMock).toHaveBeenCalledTimes(2); selfServeComponent.onSaveButtonClick(); expect(onSaveMock).toHaveBeenCalledTimes(1); diff --git a/src/SelfServe/SelfServeComponent.tsx b/src/SelfServe/SelfServeComponent.tsx index 0d80b3654..f258cbf8e 100644 --- a/src/SelfServe/SelfServeComponent.tsx +++ b/src/SelfServe/SelfServeComponent.tsx @@ -15,20 +15,45 @@ import { InputType, RefreshResult, SelfServeDescriptor, - SelfServeNotification, SmartUiInput, DescriptionDisplay, StringInput, NumberInput, BooleanInput, ChoiceInput, - SelfServeNotificationType, } from "./SelfServeTypes"; import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent"; -import { getMessageBarType } from "./SelfServeUtils"; 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; + type: MessageBarType; + isCancellable: boolean; +} + +interface PortalNotificationContent { + retryIntervalInMs: number; + operationStatusUrl: string; + portalNotification?: { + initialize: { + title: string; + message: string; + }; + success: { + title: string; + message: string; + }; + failure: { + title: string; + message: string; + }; + }; +} export interface SelfServeComponentProps { descriptor: SelfServeDescriptor; @@ -39,17 +64,26 @@ export interface SelfServeComponentState { currentValues: Map; baselineValues: Map; isInitializing: boolean; + isSaving: boolean; hasErrors: boolean; compileErrorMessage: string; - notification: SelfServeNotification; refreshResult: RefreshResult; + notification: SelfServeNotification; } export class SelfServeComponent extends React.Component { + private static readonly defaultRetryIntervalInMs = 30000; private smartUiGeneratorClassName: string; + private retryIntervalInMs: number; + private retryOptions: promiseRetry.Options; + private translationFunction: TFunction; componentDidMount(): void { - this.performRefresh(); + this.performRefresh().then(() => { + if (this.state.refreshResult?.isUpdateInProgress) { + promiseRetry(() => this.pollRefresh(), this.retryOptions); + } + }); this.initializeSmartUiComponent(); } @@ -60,12 +94,18 @@ export class SelfServeComponent extends React.Component { @@ -109,7 +149,7 @@ export class SelfServeComponent extends React.Component { + public updateBaselineValues = (): void => { const currentValues = this.state.currentValues; let baselineValues = this.state.baselineValues; for (const key of currentValues.keys()) { @@ -204,7 +244,11 @@ export class SelfServeComponent extends React.Component { if (input.onChange) { - const newValues = input.onChange(this.state.currentValues, newValue); + const newValues = input.onChange( + newValue, + this.state.currentValues, + this.state.baselineValues as ReadonlyMap + ); this.setState({ currentValues: newValues }); } else { const dataFieldName = input.dataFieldName; @@ -215,42 +259,60 @@ export class SelfServeComponent extends React.Component => { + this.setState({ isSaving: true, notification: undefined }); + try { + const onSaveResult = await this.props.descriptor.onSave( + this.state.currentValues, + this.state.baselineValues as ReadonlyMap + ); + if (onSaveResult.portalNotification) { + const requestInitializedPortalNotification = onSaveResult.portalNotification.initialize; + const requestSucceededPortalNotification = onSaveResult.portalNotification.success; + const requestFailedPortalNotification = onSaveResult.portalNotification.failure; + + this.sendNotificationMessage({ + retryIntervalInMs: this.retryIntervalInMs, + operationStatusUrl: onSaveResult.operationStatusUrl, + portalNotification: { + initialize: { + title: this.getTranslation(requestInitializedPortalNotification.titleTKey), + message: this.getTranslation(requestInitializedPortalNotification.messageTKey), + }, + success: { + title: this.getTranslation(requestSucceededPortalNotification.titleTKey), + message: this.getTranslation(requestSucceededPortalNotification.messageTKey), + }, + failure: { + title: this.getTranslation(requestFailedPortalNotification.titleTKey), + message: this.getTranslation(requestFailedPortalNotification.messageTKey), + }, + }, + }); + } + promiseRetry(() => this.pollRefresh(), this.retryOptions); + } catch (error) { + this.setState({ + notification: { + type: MessageBarType.error, + isCancellable: true, + message: this.getTranslation(error.message), + }, + }); + throw error; + } finally { + this.setState({ isSaving: false }); + } + await this.onRefreshClicked(); + this.updateBaselineValues(); + }; + public onSaveButtonClick = (): void => { - const onSavePromise = this.props.descriptor.onSave(this.state.currentValues); - onSavePromise.catch((error) => { - this.setState({ - notification: { - message: `${error.message}`, - type: SelfServeNotificationType.error, - }, - }); - }); - onSavePromise.then((notification: SelfServeNotification) => { - this.setState({ - notification: { - message: notification.message, - type: notification.type, - }, - }); - this.resetBaselineValues(); - this.onRefreshClicked(); - }); + this.performSave(); }; public isDiscardButtonDisabled = (): 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)); - - if (currentValue !== baselineValue) { - return false; - } - } - return true; - }; - - public isSaveButtonDisabled = (): boolean => { - if (this.state.hasErrors) { + if (this.state.isSaving) { return true; } for (const key of this.state.currentValues.keys()) { @@ -264,38 +326,84 @@ export class SelfServeComponent extends React.Component => { + 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; + }; + + private performRefresh = async (): Promise => { const refreshResult = await this.props.descriptor.onRefresh(); - this.setState({ refreshResult: { ...refreshResult } }); - return refreshResult; + let updateInProgressNotification: SelfServeNotification; + if (this.state.refreshResult?.isUpdateInProgress && !refreshResult.isUpdateInProgress) { + await this.initializeSmartUiComponent(); + } + if (refreshResult.isUpdateInProgress) { + updateInProgressNotification = { + type: MessageBarType.info, + isCancellable: false, + message: this.getTranslation(refreshResult.updateInProgressMessageTKey), + }; + } + this.setState({ + refreshResult: { ...refreshResult }, + notification: updateInProgressNotification, + }); }; public onRefreshClicked = async (): Promise => { this.setState({ isInitializing: true }); - const refreshResult = await this.performRefresh(); - if (!refreshResult.isUpdateInProgress) { - this.initializeSmartUiComponent(); - } + await this.performRefresh(); this.setState({ isInitializing: false }); }; - public getCommonTranslation = (translationFunction: TFunction, key: string): string => { - return translationFunction(`Common.${key}`); + public pollRefresh = async (): Promise => { + try { + await this.performRefresh(); + } catch (error) { + throw new AbortError(error); + } + const refreshResult = this.state.refreshResult; + if (refreshResult.isUpdateInProgress) { + throw new Error("update in progress. retrying ..."); + } }; - private getCommandBarItems = (translate: TFunction): ICommandBarItemProps[] => { + public getCommonTranslation = (key: string): string => { + return this.getTranslation(key, "Common"); + }; + + private getTranslation = (messageKey: string, prefix = `${this.smartUiGeneratorClassName}`): string => { + const translationKey = `${prefix}.${messageKey}`; + const translation = this.translationFunction ? this.translationFunction(translationKey) : messageKey; + if (translation === translationKey) { + return messageKey; + } + return translation; + }; + + private getCommandBarItems = (): ICommandBarItemProps[] => { return [ { key: "save", - text: this.getCommonTranslation(translate, "Save"), + text: this.getCommonTranslation("Save"), iconProps: { iconName: "Save" }, split: true, disabled: this.isSaveButtonDisabled(), - onClick: this.onSaveButtonClick, + onClick: () => this.onSaveButtonClick(), }, { key: "discard", - text: this.getCommonTranslation(translate, "Discard"), + text: this.getCommonTranslation("Discard"), iconProps: { iconName: "Undo" }, split: true, disabled: this.isDiscardButtonDisabled(), @@ -305,7 +413,7 @@ export class SelfServeComponent extends React.Component { - const translation = translationFunction(messageKey); - if (translation === `${this.smartUiGeneratorClassName}.${messageKey}`) { - return messageKey; - } - return translation; + private sendNotificationMessage = (portalNotificationContent: PortalNotificationContent): void => { + sendMessage({ + type: SelfServeMessageTypes.Notification, + data: { portalNotificationContent }, + }); }; public render(): JSX.Element { @@ -332,14 +439,14 @@ export class SelfServeComponent extends React.Component {(translate) => { - const getTranslation = (key: string): string => { - return translate(`${this.smartUiGeneratorClassName}.${key}`); - }; + if (!this.translationFunction) { + this.translationFunction = translate; + } return (
- + {this.state.isInitializing ? ( ) : ( <> - {this.state.refreshResult?.isUpdateInProgress && ( - - {getTranslation(this.state.refreshResult.notificationMessage)} - - )} {this.state.notification && ( this.setState({ notification: undefined })} + messageBarType={this.state.notification.type} + onDismiss={ + this.state.notification.isCancellable + ? () => this.setState({ notification: undefined }) + : undefined + } > - {this.getNotificationMessageTranslation(getTranslation, this.state.notification.message)} + {this.state.notification.message} )} )} diff --git a/src/SelfServe/SelfServeTypes.ts b/src/SelfServe/SelfServeTypes.ts index 96fa966e7..611d19364 100644 --- a/src/SelfServe/SelfServeTypes.ts +++ b/src/SelfServe/SelfServeTypes.ts @@ -3,7 +3,11 @@ interface BaseInput { errorMessage?: string; type: InputTypeValue; labelTKey?: (() => Promise) | string; - onChange?: (currentState: Map, newValue: InputType) => Map; + onChange?: ( + newValue: InputType, + currentState: Map, + baselineValues: ReadonlyMap + ) => Map; placeholderTKey?: (() => Promise) | string; } @@ -44,16 +48,23 @@ export interface Node { export interface SelfServeDescriptor { root: Node; initialize?: () => Promise>; - onSave?: (currentValues: Map) => Promise; + onSave?: ( + currentValues: Map, + baselineValues: ReadonlyMap + ) => Promise; inputNames?: string[]; onRefresh?: () => Promise; + refreshParams?: RefreshParams; } export type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay; export abstract class SelfServeBaseClass { public abstract initialize: () => Promise>; - public abstract onSave: (currentValues: Map) => Promise; + public abstract onSave: ( + currentValues: Map, + baselineValues: ReadonlyMap + ) => Promise; public abstract onRefresh: () => Promise; public toSelfServeDescriptor(): SelfServeDescriptor { @@ -70,7 +81,7 @@ export abstract class SelfServeBaseClass { throw new Error(`onRefresh() was not declared for the class '${className}'`); } if (!selfServeDescriptor?.root) { - throw new Error(`@SmartUi decorator was not declared for the class '${className}'`); + throw new Error(`@IsDisplayable decorator was not declared for the class '${className}'`); } selfServeDescriptor.initialize = this.initialize; @@ -89,7 +100,7 @@ export enum NumberUiType { export type ChoiceItem = { label: string; key: string }; -export type InputType = number | string | boolean | ChoiceItem; +export type InputType = number | string | boolean | ChoiceItem | Description; export interface Info { messageTKey: string; @@ -99,8 +110,15 @@ export interface Info { }; } +export enum DescriptionType { + Text, + InfoMessageBar, + WarningMessageBar, +} + export interface Description { textTKey: string; + type: DescriptionType; link?: { href: string; textTKey: string; @@ -113,18 +131,29 @@ export interface SmartUiInput { disabled?: boolean; } -export enum SelfServeNotificationType { - info = "info", - warning = "warning", - error = "error", -} - -export interface SelfServeNotification { - message: string; - type: SelfServeNotificationType; +export interface OnSaveResult { + operationStatusUrl: string; + portalNotification?: { + initialize: { + titleTKey: string; + messageTKey: string; + }; + success: { + titleTKey: string; + messageTKey: string; + }; + failure: { + titleTKey: string; + messageTKey: string; + }; + }; } export interface RefreshResult { isUpdateInProgress: boolean; - notificationMessage: string; + updateInProgressMessageTKey: string; +} + +export interface RefreshParams { + retryIntervalInMs: number; } diff --git a/src/SelfServe/SelfServeUtils.test.tsx b/src/SelfServe/SelfServeUtils.test.tsx index c870d3718..e1fe1a3f8 100644 --- a/src/SelfServe/SelfServeUtils.test.tsx +++ b/src/SelfServe/SelfServeUtils.test.tsx @@ -1,11 +1,11 @@ -import { NumberUiType, RefreshResult, SelfServeBaseClass, SelfServeNotification, SmartUiInput } from "./SelfServeTypes"; +import { NumberUiType, OnSaveResult, RefreshResult, SelfServeBaseClass, SmartUiInput } from "./SelfServeTypes"; import { DecoratorProperties, mapToSmartUiDescriptor, updateContextWithDecorator } from "./SelfServeUtils"; describe("SelfServeUtils", () => { it("initialize should be declared for self serve classes", () => { class Test extends SelfServeBaseClass { public initialize: () => Promise>; - public onSave: (currentValues: Map) => Promise; + public onSave: (currentValues: Map) => Promise; public onRefresh: () => Promise; } expect(() => new Test().toSelfServeDescriptor()).toThrow("initialize() was not declared for the class 'Test'"); @@ -14,7 +14,7 @@ describe("SelfServeUtils", () => { it("onSave should be declared for self serve classes", () => { class Test extends SelfServeBaseClass { public initialize = jest.fn(); - public onSave: () => Promise; + public onSave: () => Promise; public onRefresh: () => Promise; } expect(() => new Test().toSelfServeDescriptor()).toThrow("onSave() was not declared for the class 'Test'"); @@ -29,14 +29,14 @@ describe("SelfServeUtils", () => { expect(() => new Test().toSelfServeDescriptor()).toThrow("onRefresh() was not declared for the class 'Test'"); }); - it("@SmartUi decorator must be present for self serve classes", () => { + it("@IsDisplayable decorator must be present for self serve classes", () => { class Test extends SelfServeBaseClass { public initialize = jest.fn(); public onSave = jest.fn(); public onRefresh = jest.fn(); } expect(() => new Test().toSelfServeDescriptor()).toThrow( - "@SmartUi decorator was not declared for the class 'Test'" + "@IsDisplayable decorator was not declared for the class 'Test'" ); }); diff --git a/src/SelfServe/SelfServeUtils.tsx b/src/SelfServe/SelfServeUtils.tsx index d46aff571..e86b59ede 100644 --- a/src/SelfServe/SelfServeUtils.tsx +++ b/src/SelfServe/SelfServeUtils.tsx @@ -1,4 +1,3 @@ -import { MessageBarType } from "office-ui-fabric-react"; import "reflect-metadata"; import { Node, @@ -15,8 +14,9 @@ import { SelfServeDescriptor, SmartUiInput, StringInput, - SelfServeNotificationType, + RefreshParams, } from "./SelfServeTypes"; +import { userContext } from "../UserContext"; export enum SelfServeType { // No self serve type passed, launch explorer @@ -28,6 +28,14 @@ export enum SelfServeType { sqlx = "sqlx", } +export enum BladeType { + SqlKeys = "keys", + MongoKeys = "mongoDbKeys", + CassandraKeys = "cassandraDbKeys", + GremlinKeys = "keys", + TableKeys = "tableKeys", +} + export interface DecoratorProperties { id: string; info?: (() => Promise) | Info; @@ -44,9 +52,13 @@ export interface DecoratorProperties { uiType?: string; errorMessage?: string; description?: (() => Promise) | Description; - onChange?: (currentState: Map, newValue: InputType) => Map; - onSave?: (currentValues: Map) => Promise; - initialize?: () => Promise>; + isDynamicDescription?: boolean; + refreshParams?: RefreshParams; + onChange?: ( + newValue: InputType, + currentState: Map, + baselineValues: ReadonlyMap + ) => Map; } const setValue = ( @@ -83,7 +95,7 @@ export const updateContextWithDecorator = { if (!(context instanceof Map)) { - throw new Error(`@SmartUi should be the first decorator for the class '${className}'.`); + throw new Error(`@IsDisplayable should be the first decorator for the class '${className}'.`); } const propertyObject = context.get(propertyName) ?? { id: propertyName }; @@ -108,16 +120,17 @@ export const mapToSmartUiDescriptor = ( className: string, context: Map ): SelfServeDescriptor => { + const inputNames: string[] = []; const root = context.get("root"); context.delete("root"); - const inputNames: string[] = []; const smartUiDescriptor: SelfServeDescriptor = { root: { id: className, - info: root?.info, + info: undefined, children: [], }, + refreshParams: root?.refreshParams, }; while (context.size > 0) { @@ -155,7 +168,10 @@ const getInput = (value: DecoratorProperties): AnyDisplay => { } return value as NumberInput; case "string": - if (value.description) { + if (value.description || value.isDynamicDescription) { + if (value.description && value.isDynamicDescription) { + value.errorMessage = `dynamic descriptions should not have defaults set here.`; + } return value as DescriptionDisplay; } if (!value.labelTKey) { @@ -175,13 +191,9 @@ const getInput = (value: DecoratorProperties): AnyDisplay => { } }; -export const getMessageBarType = (type: SelfServeNotificationType): MessageBarType => { - switch (type) { - case SelfServeNotificationType.info: - return MessageBarType.info; - case SelfServeNotificationType.warning: - return MessageBarType.warning; - case SelfServeNotificationType.error: - return MessageBarType.error; - } +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}`; }; diff --git a/src/SelfServe/SqlX/SqlX.tsx b/src/SelfServe/SqlX/SqlX.tsx index 77cb812f9..4b6a0bc2c 100644 --- a/src/SelfServe/SqlX/SqlX.tsx +++ b/src/SelfServe/SqlX/SqlX.tsx @@ -1,18 +1,19 @@ import { IsDisplayable, OnChange, Values } from "../Decorators"; import { ChoiceItem, + DescriptionType, InputType, NumberUiType, + OnSaveResult, RefreshResult, SelfServeBaseClass, - SelfServeNotification, SmartUiInput, } from "../SelfServeTypes"; import { refreshDedicatedGatewayProvisioning } from "./SqlX.rp"; const onEnableDedicatedGatewayChange = ( - currentState: Map, - newValue: InputType + newValue: InputType, + currentState: Map ): Map => { const sku = currentState.get("sku"); const instances = currentState.get("instances"); @@ -49,7 +50,7 @@ export default class SqlX extends SelfServeBaseClass { return refreshDedicatedGatewayProvisioning(); }; - public onSave = async (currentValues: Map): Promise => { + public onSave = async (currentValues: Map): Promise => { validate(currentValues); // TODO: add pre processing logic before calling the updateDedicatedGatewayProvisioning() RP call. throw new Error(`onSave not implemented. No. of properties to save: ${currentValues.size}`); @@ -63,6 +64,7 @@ export default class SqlX extends SelfServeBaseClass { @Values({ description: { textTKey: "Provisioning dedicated gateways for SqlX accounts.", + type: DescriptionType.Text, link: { href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction", textTKey: "Learn more about dedicated gateway.", diff --git a/src/Utils/arm/request.ts b/src/Utils/arm/request.ts index b2d4adce8..2d733cac4 100644 --- a/src/Utils/arm/request.ts +++ b/src/Utils/arm/request.ts @@ -47,15 +47,14 @@ interface Options { queryParams?: ARMQueryParams; } -// TODO: This is very similar to what is happening in ResourceProviderClient.ts. Should probably merge them. -export async function armRequest({ +export async function armRequestWithoutPolling({ host, path, apiVersion, method, body: requestBody, queryParams, -}: Options): Promise { +}: Options): Promise<{ result: T; operationStatusUrl: string }> { const url = new URL(path, host); url.searchParams.append("api-version", configContext.armAPIVersion || apiVersion); if (queryParams) { @@ -92,13 +91,33 @@ export async function armRequest({ throw error; } - const operationStatusUrl = response.headers && response.headers.get("location"); + const operationStatusUrl = (response.headers && response.headers.get("location")) || ""; + const responseBody = (await response.json()) as T; + return { result: responseBody, operationStatusUrl: operationStatusUrl }; +} + +// TODO: This is very similar to what is happening in ResourceProviderClient.ts. Should probably merge them. +export async function armRequest({ + host, + path, + apiVersion, + method, + body: requestBody, + queryParams, +}: Options): Promise { + const armRequestResult = await armRequestWithoutPolling({ + host, + path, + apiVersion, + method, + body: requestBody, + queryParams, + }); + const operationStatusUrl = armRequestResult.operationStatusUrl; if (operationStatusUrl) { return await promiseRetry(() => getOperationStatus(operationStatusUrl)); } - - const responseBody = (await response.json()) as T; - return responseBody; + return armRequestResult.result; } async function getOperationStatus(operationStatusUrl: string) { diff --git a/test/selfServe/selfServeExample.spec.ts b/test/selfServe/selfServeExample.spec.ts index 7519c6c2e..875041e06 100644 --- a/test/selfServe/selfServeExample.spec.ts +++ b/test/selfServe/selfServeExample.spec.ts @@ -20,6 +20,7 @@ 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"); let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");