fix microsoft#6708: show progress spinner when qna is being created (m…

…icrosoft#6723) Co-authored-by: Dong Lei <[email protected]>
lei9444 · Apr 7, 2021 · f4e611d · f4e611d
1 parent 2747d75
commit f4e611d
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -616,7 +616,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
                   )}
                 </p>
                 <Dropdown
-                  disabled={resourceGroups.length === 0}
+                  disabled={resourceGroups.length === 0 || loadingQNA}
                   label={formatMessage('Resource group:')}
                   options={
                     resourceGroups.map((p) => {
@@ -634,6 +634,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
                     required
                     aria-label={formatMessage('Resource group name')}
                     data-testid={'qnaResourceGroupName'}
+                    disabled={loadingQNA}
                     id={'qnaResourceGroupName'}
                     label={formatMessage('Resource group name')}
                     placeholder={formatMessage('Enter name for new resource group')}
@@ -648,6 +649,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
                   required
                   aria-label={formatMessage('QnA region')}
                   data-testid={'rootqnaRegion'}
+                  disabled={loadingQNA}
                   id={'qnaRegion'}
                   label={formatMessage('QnA region')}
                   options={QNA_REGIONS}
@@ -660,6 +662,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
                   required
                   aria-label={formatMessage('Resource name')}
                   data-testid={'qnaResourceName'}
+                  disabled={loadingQNA}
                   id={'qnaResourceName'}
                   label={formatMessage('Resource name')}
                   placeholder={formatMessage('Enter name for new QnA resources')}
@@ -669,17 +672,21 @@ export const ManageQNA = (props: ManageQNAProps) => {
                 />
               </div>
               <DialogFooter>
-                <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />
+                {loadingQNA && (
+                  <Spinner label="Creating resources..." labelPosition="right" styles={{ root: { float: 'left' } }} />
+                )}
+                <DefaultButton disabled={loadingQNA} text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />
                 <PrimaryButton
                   disabled={
+                    loadingQNA ||
                     !qnaResourceName ||
                     !resourceGroupKey ||
                     (resourceGroupKey == CREATE_NEW_KEY && !newResourceGroupName)
                   }
                   text={formatMessage('Next')}
                   onClick={createQNA}
                 />
-                <DefaultButton text={formatMessage('Cancel')} onClick={props.onDismiss} />
+                <DefaultButton disabled={loadingQNA} text={formatMessage('Cancel')} onClick={props.onDismiss} />
               </DialogFooter>
             </div>
           )}