Add loading text properties for option sources (#13743)

* Add loading text to deployment radio options

* Fix loading race condition

* Update text
This commit is contained in:
Charles Gagnon
2020-12-09 18:32:05 -08:00
committed by GitHub
parent 147ee53e35
commit dc8788b77f
5 changed files with 21 additions and 4 deletions

View File

@@ -189,7 +189,9 @@
"editable": false,
"options": {
"source": {
"providerId": "arc.controller.config.profiles"
"providerId": "arc.controller.config.profiles",
"loadingText": "%arc.data.controller.cluster.config.profile.loading%",
"loadingCompletedText": "%arc.data.controller.cluster.config.profile.loadingcompleted%"
},
"defaultValue": "azure-arc-aks-default-storage",
"optionsType": "radio"

View File

@@ -20,6 +20,8 @@
"arc.data.controller.kube.cluster.context": "Cluster context",
"arc.data.controller.cluster.config.profile.title": "Choose the config profile",
"arc.data.controller.cluster.config.profile": "Config profile",
"arc.data.controller.cluster.config.profile.loading": "Loading config profiles",
"arc.data.controller.cluster.config.profile.loadingcompleted": "Loading config profiles complete",
"arc.data.controller.create.azureconfig.title": "Azure and Connectivity Configuration",
"arc.data.controller.connectivitymode.description": "Select the connectivity mode for the controller.",
"arc.data.controller.create.controllerconfig.title": "Controller Configuration",

View File

@@ -244,6 +244,8 @@ export type ComponentCSSStyles = {
export interface IOptionsSource {
provider?: IOptionsSourceProvider
loadingText?: string,
loadingCompletedText?: string,
readonly variableNames?: { [index: string]: string; };
readonly providerId: string;
}

View File

@@ -986,6 +986,7 @@ async function createRadioOptions(context: FieldContext, getRadioButtonInfo?: ((
}
const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
const radioGroupLoadingComponentBuilder = new RadioGroupLoadingComponentBuilder(context.view, context.onNewDisposableCreated, context.fieldInfo);
context.fieldInfo.labelPosition = LabelPosition.Left;
context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
component: radioGroupLoadingComponentBuilder,
@@ -995,8 +996,17 @@ async function createRadioOptions(context: FieldContext, getRadioButtonInfo?: ((
getDisplayValue: async (): Promise<string> => radioGroupLoadingComponentBuilder.displayValue,
onValueChanged: radioGroupLoadingComponentBuilder.onValueChanged,
});
addLabelInputPairToContainer(context.view, context.components, label, radioGroupLoadingComponentBuilder.component(), context.fieldInfo);
const options = context.fieldInfo.options as OptionsInfo;
let loadingText = options?.source?.loadingText;
let loadingCompletedText = options?.source?.loadingCompletedText;
if (loadingText || loadingCompletedText) {
radioGroupLoadingComponentBuilder.withProps({
showText: true,
loadingText: loadingText,
loadingCompletedText: loadingCompletedText
});
}
addLabelInputPairToContainer(context.view, context.components, label, radioGroupLoadingComponentBuilder.component(), context.fieldInfo);
// Start loading the options but continue on so that we can continue setting up the rest of the components - the group
// will show a loading spinner while the options are loaded
radioGroupLoadingComponentBuilder.loadOptions(