Merge branch 'main' into gcox/mainwork

Composer/packages/client/src/components/LoadingSpinner.tsx

@@ -6,6 +6,7 @@ import { jsx, css } from '@emotion/core';
 import React from 'react';
 import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 import formatMessage from 'format-message';
+import Dialog, { DialogType } from 'office-ui-fabric-react/lib/Dialog';
 
 const container = css`
   height: 100%;
@@ -15,15 +16,39 @@ const container = css`
   justify-content: center;
 `;
 
+const modalControlGroup = css`
+  padding: 10px;
+`;
+
 interface LoadingSpinnerProps {
   message?: string;
+  inModal?: boolean;
 }
 
 export const LoadingSpinner: React.FC<LoadingSpinnerProps> = (props) => {
   const { message } = props;
-  return (
-    <div css={container}>
-      <Spinner label={message || formatMessage('Loading')} />
-    </div>
+
+  const renderLoadingSpinner = () => {
+    return (
+      <div css={container}>
+        <Spinner label={message ?? formatMessage('Loading')} />
+      </div>
+    );
+  };
+
+  return props.inModal ? (
+    <Dialog
+      dialogContentProps={{
+        type: DialogType.normal,
+      }}
+      hidden={false}
+      modalProps={{
+        isBlocking: false,
+      }}
+    >
+      <div css={modalControlGroup}>{renderLoadingSpinner()} </div>
+    </Dialog>
+  ) : (
+    renderLoadingSpinner()
   );
 };

Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx

@@ -19,6 +19,7 @@ import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices'
 import { ResourceManagementClient } from '@azure/arm-resources';
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { ProvisionHandoff } from '@bfc/ui-shared';
+import sortBy from 'lodash/sortBy';
 
 import { AuthClient } from '../../utils/authClient';
 import { AuthDialog } from '../../components/Auth/AuthDialog';
@@ -83,7 +84,7 @@ export const ManageLuis = (props: ManageLuisProps) => {
       const subscriptionClient = new SubscriptionClient(tokenCredentials);
       const subscriptionsResult = await subscriptionClient.subscriptions.list();
       // eslint-disable-next-line no-underscore-dangle
-      return subscriptionsResult._response.parsedBody;
+      return sortBy(subscriptionsResult._response.parsedBody, ['displayName']);
     } catch (err) {
       setApplicationLevelError(err);
       return [];

Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx

@@ -22,6 +22,7 @@ import { WebSiteManagementClient } from '@azure/arm-appservice';
 import { ApplicationInsightsManagementClient } from '@azure/arm-appinsights';
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { ProvisionHandoff } from '@bfc/ui-shared';
+import sortBy from 'lodash/sortBy';
 
 import { AuthClient } from '../../utils/authClient';
 import { AuthDialog } from '../../components/Auth/AuthDialog';
@@ -89,7 +90,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
       const subscriptionClient = new SubscriptionClient(tokenCredentials);
       const subscriptionsResult = await subscriptionClient.subscriptions.list();
       // eslint-disable-next-line no-underscore-dangle
-      return subscriptionsResult._response.parsedBody;
+      return sortBy(subscriptionsResult._response.parsedBody, ['displayName']);
     } catch (err) {
       setApplicationLevelError(err);
       return [];

Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx

@@ -191,6 +191,38 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
   const luisRegionFieldRef = useRef<HTMLDivElement>(null);
   const qnaKeyFieldRef = useRef<HTMLDivElement>(null);
 
+  const handleRootLUISKeyOnChange = (e, value) => {
+    if (value) {
+      setLuisKeyErrorMsg('');
+      setLocalRootLuisKey(value);
+    } else {
+      setLuisKeyErrorMsg(
+        formatMessage('LUIS key is required with the current recognizer setting to start your bot locally, and publish')
+      );
+      setLocalRootLuisKey('');
+    }
+  };
+
+  const handleRootQnAKeyOnChange = (e, value) => {
+    if (value) {
+      setQnAKeyErrorMsg('');
+      setLocalRootQnAKey(value);
+    } else {
+      setQnAKeyErrorMsg(formatMessage('QnA Maker Subscription key is required to start your bot locally, and publish'));
+      setLocalRootQnAKey('');
+    }
+  };
+
+  const handleRootLuisRegionOnChange = (e, value: IDropdownOption | undefined) => {
+    if (value != null) {
+      setLuisRegionErrorMsg('');
+      setLocalRootLuisRegion(value.key as string);
+    } else {
+      setLuisRegionErrorMsg(formatMessage('LUIS region is required'));
+      setLocalRootLuisRegion('');
+    }
+  };
+
   useEffect(() => {
     if (!localRootLuisKey) {
       setLuisKeyErrorMsg(
@@ -215,9 +247,17 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
   }, [projectId]);
 
   useEffect(() => {
-    setLocalRootLuisKey(rootLuisKey);
+    handleRootLUISKeyOnChange(null, rootLuisKey);
   }, [rootLuisKey]);
 
+  useEffect(() => {
+    handleRootQnAKeyOnChange(null, rootqnaKey);
+  }, [rootqnaKey]);
+
+  useEffect(() => {
+    handleRootLuisRegionOnChange(null, { key: rootLuisRegion, text: '' });
+  }, [rootLuisRegion]);
+
   useEffect(() => {
     if (luisKeyFieldRef.current && scrollToSectionId === '#luisKey') {
       luisKeyFieldRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -241,38 +281,6 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
     });
   };
 
-  const handleRootLUISKeyOnChange = (e, value) => {
-    if (value) {
-      setLuisKeyErrorMsg('');
-      setLocalRootLuisKey(value);
-    } else {
-      setLuisKeyErrorMsg(
-        formatMessage('LUIS key is required with the current recognizer setting to start your bot locally, and publish')
-      );
-      setLocalRootLuisKey('');
-    }
-  };
-
-  const handleRootQnAKeyOnChange = (e, value) => {
-    if (value) {
-      setQnAKeyErrorMsg('');
-      setLocalRootQnAKey(value);
-    } else {
-      setQnAKeyErrorMsg(formatMessage('QnA Maker Subscription key is required to start your bot locally, and publish'));
-      setLocalRootQnAKey('');
-    }
-  };
-
-  const handleRootLuisRegionOnChange = (e, value: IDropdownOption | undefined) => {
-    if (value != null) {
-      setLuisRegionErrorMsg('');
-      setLocalRootLuisRegion(value.key as string);
-    } else {
-      setLuisRegionErrorMsg(formatMessage('LUIS region is required'));
-      setLocalRootLuisRegion('');
-    }
-  };
-
   const handleRootLuisRegionOnBlur = () => {
     if (isLUISKeyNeeded && !localRootLuisRegion) {
       setLuisRegionErrorMsg(formatMessage('LUIS region is required'));

Composer/packages/client/src/pages/design/VisualPanel.tsx

@@ -78,7 +78,7 @@ const VisualPanel: React.FC<VisualPanelProps> = React.memo(({ projectId }) => {
         />
       )}
 
-      {loading && <LoadingSpinner />}
+      {loading && <LoadingSpinner inModal />}
       {!loading &&
         (dialogJsonVisible && currentDialog ? (
           <JsonEditor

Composer/packages/client/src/router.tsx

@@ -7,7 +7,6 @@ import React, { useEffect, Suspense } from 'react';
 import { Router, Redirect, RouteComponentProps } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 import formatMessage from 'format-message';
-import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
 
 import { resolveToBasePath } from './utils/fileUtil';
 import { data } from './styles';
@@ -43,10 +42,6 @@ const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow
 const BotCreationFlowRouterV2 = React.lazy(() => import('./components/CreationFlow/v2/CreationFlow'));
 const FormDialogPage = React.lazy(() => import('./pages/form-dialog/FormDialogPage'));
 
-const modalControlGroup = css`
-  padding: 10px;
-`;
-
 const Routes = (props) => {
   const botOpening = useRecoilValue(botOpeningState);
   const pluginPages = useRecoilValue(pluginPagesSelector);
@@ -117,19 +112,7 @@ const Routes = (props) => {
         <div
           css={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, background: 'rgba(255, 255, 255, 0.6)' }}
         >
-          <Dialog
-            dialogContentProps={{
-              type: DialogType.normal,
-            }}
-            hidden={!botOpening}
-            modalProps={{
-              isBlocking: false,
-            }}
-          >
-            <div css={modalControlGroup}>
-              <LoadingSpinner message={spinnerText} />
-            </div>
-          </Dialog>
+          <LoadingSpinner inModal message={spinnerText} />
         </div>
       )}
     </div>

Composer/packages/server-workers/src/workers/templateInstallation.worker.ts

@@ -59,7 +59,7 @@ const yeomanWork = async (
   const generatorName = npmPackageName.toLowerCase().replace('generator-', '');
   // create yeoman environment
   log('Getting Yeoman environment');
-  parentPort?.postMessage({ status: 'Getting Yeoman environment' });
+  parentPort?.postMessage({ status: 'Downloading template' });
 
   const yeomanEnv = yeoman.createEnv(
     '',
@@ -70,11 +70,10 @@ const yeomanWork = async (
   yeomanEnv.lookupLocalPackages();
 
   log('Installing Yeoman template');
-  parentPort?.postMessage({ status: 'Installing Yeoman template' });
 
   await installRemoteTemplate(yeomanEnv, templateGeneratorPath, npmPackageName, templateVersion);
   log('Instantiating Yeoman template');
-  parentPort?.postMessage({ status: 'Instantiating Yeoman template' });
+  parentPort?.postMessage({ status: 'Creating project' });
 
   await instantiateRemoteTemplate(yeomanEnv, generatorName, dstDir, projectName, runtimeType, runtimeLanguage);
 };

extensions/azurePublish/src/components/api.tsx

@@ -14,6 +14,7 @@ import { CheckNameAvailabilityResponseBody } from '@azure/arm-botservice/esm/mod
 import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices';
 import { TokenCredentials } from '@azure/ms-rest-js';
 import debug from 'debug';
+import sortBy from 'lodash/sortBy';
 
 import { AzureResourceTypes } from '../types';
 import {
@@ -45,7 +46,7 @@ export const getSubscriptions = async (token: string): Promise<Array<Subscriptio
       });
       throw new Error(subscriptionsResult._response.bodyAsText);
     }
-    return subscriptionsResult._response.parsedBody;
+    return sortBy(subscriptionsResult._response.parsedBody, ['displayName']);
   } catch (err) {
     let message = JSON.stringify(err, Object.getOwnPropertyNames(err));
     if (err?.code === 12 && err?.message?.match(/Bearer/gi)) {
@@ -81,7 +82,7 @@ export const getResourceGroups = async (token: string, subscriptionId: string):
       });
       return [];
     }
-    return resourceGroupsResult._response.parsedBody;
+    return sortBy(resourceGroupsResult._response.parsedBody, ['name']);
   } catch (err) {
     logger({
       status: AzureAPIStatus.ERROR,