From 5d62dd6d65978b2147fffd0a51b799b9cbae63c9 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Tue, 13 Apr 2021 17:54:59 -0500
Subject: [PATCH 01/15] Refactor LUIS, QNA and Speech to use a single base
 component

---
 .../GetStarted/GetStartedNextSteps.tsx        |  10 +-
 .../src/components/ManageLuis/ManageLuis.tsx  | 629 +-------------
 .../src/components/ManageQNA/ManageQNA.tsx    | 822 +++---------------
 .../ManageService/ManageService.tsx           | 684 +++++++++++++++
 .../components/ManageSpeech/ManageSpeech.tsx  | 631 +-------------
 .../botProject/BotProjectsSettingsTabView.tsx |   2 +-
 .../botProject/RootBotExternalService.tsx     |  10 +-
 .../pages/botProject/adapters/ABSChannels.tsx |  10 +-
 8 files changed, 918 insertions(+), 1880 deletions(-)
 create mode 100644 Composer/packages/client/src/components/ManageService/ManageService.tsx

diff --git a/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx b/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
index f673e2ad70..7430ec76db 100644
--- a/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
+++ b/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
@@ -80,16 +80,16 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
   const updateLuisSettings = (newLuisSettings) => {
     setSettings(rootBotProjectId, {
       ...mergedSettings,
-      luis: { ...mergedSettings.luis, ...newLuisSettings },
+      luis: { ...mergedSettings.luis, authoringKey: newLuisSettings.key, authoringRegion: newLuisSettings.region },
     });
   };
 
   const updateQNASettings = (newQNASettings) => {
     setSettings(rootBotProjectId, {
       ...mergedSettings,
-      qna: { ...mergedSettings.qna, ...newQNASettings },
+      qna: { ...mergedSettings.qna, subscriptionKey: newQNASettings.key },
     });
-    setQnASettings(rootBotProjectId, newQNASettings.subscriptionKey);
+    setQnASettings(rootBotProjectId, newQNASettings.key);
   };
 
   const linkToPackageManager = `/bot/${rootBotProjectId}/plugin/package-manager/package-manager`;
@@ -247,7 +247,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       <div css={{ paddingTop: 20, paddingLeft: 27, paddingRight: 20 }}>
         <ManageLuis
           hidden={!displayManageLuis}
-          setDisplayManageLuis={setDisplayManageLuis}
+          setVisible={setDisplayManageLuis}
           onDismiss={hideManageLuis}
           onGetKey={updateLuisSettings}
           onNext={() => {
@@ -257,7 +257,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
         />
         <ManageQNA
           hidden={!displayManageQNA}
-          setDisplayManageQna={setDisplayManageQNA}
+          setVisible={setDisplayManageQNA}
           onDismiss={hideManageQNA}
           onGetKey={updateQNASettings}
           onNext={() => {
diff --git a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
index 94c0a70169..b0b876d879 100644
--- a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
+++ b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
@@ -3,610 +3,63 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState, useEffect, Fragment } from 'react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import { useRecoilValue } from 'recoil';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { SubscriptionClient } from '@azure/arm-subscriptions';
-import { Subscription } from '@azure/arm-subscriptions/esm/models';
-import { TokenCredentials } from '@azure/ms-rest-js';
 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 { TokenCredentials } from '@azure/ms-rest-js';
+import formatMessage from 'format-message';
 
-import { AuthClient } from '../../utils/authClient';
-import { AuthDialog } from '../../components/Auth/AuthDialog';
-import { armScopes } from '../../constants';
-import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '../../utils/auth';
 import { LUIS_REGIONS } from '../../constants';
-import { dispatcherState } from '../../recoilModel/atoms';
+import { ManageService } from '../ManageService/ManageService';
 
 type ManageLuisProps = {
   hidden: boolean;
   onDismiss: () => void;
-  onGetKey: (settings: { authoringKey: string; authoringRegion: string }) => void;
+  onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
-  setDisplayManageLuis: (value: any) => void;
-};
-
-type KeyRec = {
-  name: string;
-  region: string;
-  resourceGroup: string;
-  key: string;
+  setVisible: (value: any) => void;
 };
 
-const dropdownStyles = { dropdown: { width: '100%' } };
-const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: 14 };
-const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
-const mainElementStyle = { marginBottom: 20 };
-const CREATE_NEW_KEY = 'CREATE_NEW';
-
 export const ManageLuis = (props: ManageLuisProps) => {
-  const [showAuthDialog, setShowAuthDialog] = useState(false);
-  const [token, setToken] = useState<string | undefined>();
-
-  const { setApplicationLevelError } = useRecoilValue(dispatcherState);
-  const [subscriptionId, setSubscription] = useState<string>('');
-  const [resourceGroups, setResourceGroups] = useState<any[]>([]);
-  const [createResourceGroup, setCreateResourceGroup] = useState<boolean>(false);
-  const [newResourceGroupName, setNewResourceGroupName] = useState<string>('');
-  const [resourceGroupKey, setResourceGroupKey] = useState<string>('');
-  const [resourceGroup, setResourceGroup] = useState<string>('');
-
-  const [showHandoff, setShowHandoff] = useState<boolean>(false);
-  const [luisResourceName, setLuisResourceName] = useState<string>('');
-  const [loadingLUIS, setLoadingLUIS] = useState<boolean>(false);
-  const [noKeys, setNoKeys] = useState<boolean>(false);
-  const [nextAction, setNextAction] = useState<string>('create');
-  const [actionOptions, setActionOptions] = useState<IChoiceGroupOption[]>([]);
-  const [localRootLuisKey, setLocalRootLuisKey] = useState<string>('');
-  const [localRootLuisRegion, setLocalRootLuisRegion] = useState<string>('');
-  const [availableSubscriptions, setAvailableSubscriptions] = useState<Subscription[]>([]);
-  const [authoringKeys, setAuthoringKeys] = useState<KeyRec[]>([]);
-
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [outcomeDescription, setOutcomeDescription] = useState<string>('');
-  const [outcomeSummary, setOutcomeSummary] = useState<any>();
-  const [outcomeError, setOutcomeError] = useState<boolean>(false);
-
-  /* Copied from Azure Publishing extension */
-  const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
-    const tokenCredentials = new TokenCredentials(token);
-    try {
-      const subscriptionClient = new SubscriptionClient(tokenCredentials);
-      const subscriptionsResult = await subscriptionClient.subscriptions.list();
-      // eslint-disable-next-line no-underscore-dangle
-      return subscriptionsResult._response.parsedBody;
-    } catch (err) {
-      setApplicationLevelError(err);
-      return [];
-    }
-  };
-
-  const hasAuth = async () => {
-    let newtoken = '';
-    if (userShouldProvideTokens()) {
-      if (isShowAuthDialog(false)) {
-        setShowAuthDialog(true);
-      }
-      newtoken = getTokenFromCache('accessToken');
-    } else {
-      newtoken = await AuthClient.getAccessToken(armScopes);
-    }
-
-    setToken(newtoken);
-
-    if (newtoken) {
-      // reset the list
-      setAvailableSubscriptions([]);
-
-      // fetch list of available subscriptions
-      setAvailableSubscriptions(await getSubscriptions(newtoken));
-    }
-  };
-
-  useEffect(() => {
-    // reset the ui
-    setSubscription('');
-    setAuthoringKeys([]);
-    setCurrentPage(1);
-    setActionOptions([
-      { key: 'create', text: formatMessage('Create a new LUIS resource'), disabled: true },
-      { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: true },
-      { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-    ]);
-    if (!props.hidden) {
-      hasAuth();
-    }
-  }, [props.hidden]);
-
-  const handleRootLuisRegionOnChange = (e, value: IDropdownOption | undefined) => {
-    if (value != null) {
-      setLocalRootLuisRegion(value.key as string);
-    } else {
-      setLocalRootLuisRegion('');
-    }
-  };
-
-  const fetchKeys = async (cognitiveServicesManagementClient, accounts) => {
-    const keyList: KeyRec[] = [];
-    for (const account in accounts) {
-      const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1');
-      const name = accounts[account].name;
-      if (resourceGroup && name) {
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name);
-        if (keys?.key1) {
-          keyList.push({
-            name: name,
-            resourceGroup: resourceGroup,
-            region: accounts[account].location || '',
-            key: keys?.key1 || '',
-          });
-        }
-      }
-    }
-    return keyList;
-  };
-
-  const fetchLUIS = async (subscriptionId) => {
-    if (token) {
-      setLoadingLUIS(true);
-      setNoKeys(false);
-      const tokenCredentials = new TokenCredentials(token);
-      const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
-      const accounts = await cognitiveServicesManagementClient.accounts.list();
-
-      const authoring: KeyRec[] = await fetchKeys(
-        cognitiveServicesManagementClient,
-        accounts.filter((a) => a.kind === 'LUIS.Authoring')
-      );
-      setLoadingLUIS(false);
-      if (authoring.length == 0) {
-        setNoKeys(true);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new LUIS resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-        ]);
-      } else {
-        setNoKeys(false);
-        setAuthoringKeys(authoring);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new LUIS resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: false },
-        ]);
-      }
-    }
-  };
-
-  const fetchResourceGroups = async (subscriptionId) => {
-    if (token) {
-      const tokenCredentials = new TokenCredentials(token);
-      const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-      const groups = await resourceClient.resourceGroups.list();
-
-      setResourceGroups([
-        {
-          id: CREATE_NEW_KEY,
-          data: { icon: 'Add' },
-          name: formatMessage('Create new'),
-        },
-        ...groups,
-      ]);
-    }
-  };
-
-  const createLUIS = async () => {
-    let authoringKey = '';
-    if (token) {
-      setLoadingLUIS(true);
-      const tokenCredentials = new TokenCredentials(token);
-
-      const resourceGroupName = resourceGroupKey === CREATE_NEW_KEY ? newResourceGroupName : resourceGroup;
-      if (resourceGroupKey === CREATE_NEW_KEY) {
-        try {
-          const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-          await resourceClient.resourceGroups.createOrUpdate(resourceGroupName, {
-            location: localRootLuisRegion,
-          });
-        } catch (err) {
-          setOutcomeDescription(
-            formatMessage(
-              'Due to the following error, we were unable to successfully add your selected LUIS keys to your bot project:'
-            )
-          );
-          setOutcomeSummary(
-            <div>
-              <p>{err.message}</p>
-            </div>
-          );
-          setOutcomeError(true);
-          setCurrentPage(3);
-          setLoadingLUIS(false);
-          return;
-        }
-      }
-
-      const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
-      try {
-        await cognitiveServicesManagementClient.accounts.create(resourceGroupName, `${luisResourceName}-authoring`, {
-          kind: 'LUIS.Authoring',
-          sku: {
-            name: 'F0',
-          },
-          location: localRootLuisRegion,
-        });
-
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(
-          resourceGroupName,
-          `${luisResourceName}-authoring`
-        );
-        if (!keys?.key1) {
-          throw new Error('No key found for newly created authoring resource');
-        } else {
-          authoringKey = keys.key1;
-          setLocalRootLuisKey(keys.key1);
-        }
-      } catch (err) {
-        setOutcomeDescription(
-          formatMessage(
-            'Due to the following error, we were unable to successfully add your selected LUIS keys to your bot project:'
-          )
-        );
-        setOutcomeSummary(
-          <div>
-            <p>{err.message}</p>
-          </div>
-        );
-        setOutcomeError(true);
-        setCurrentPage(3);
-        setLoadingLUIS(false);
-        return;
-      }
-
-      setLoadingLUIS(false);
-
-      setOutcomeDescription(
-        formatMessage('The following LUIS resource was successfully created and added to your bot project:')
-      );
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Subscription')}</label>
-            {subscriptionId}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource Group')}</label>
-            {resourceGroupName}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRootLuisRegion}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource name')}</label>
-            {luisResourceName}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
-
-      // ALL DONE!
-      // this will pass the new values back to the caller
-      props.onGetKey({
-        authoringKey: authoringKey,
-        authoringRegion: localRootLuisRegion,
-      });
-
-      setCurrentPage(3);
-    }
-  };
-
-  // allow a user to provide a subscription id if one is missing
-  const onChangeSubscription = async (_, opt) => {
-    // get list of luis keys for this subscription
-    setSubscription(opt.key);
-    fetchLUIS(opt.key);
-    fetchResourceGroups(opt.key);
-  };
-
-  const onChangeLUISAuthoring = async (_, opt) => {
-    // get list of luis keys for this subscription
-    setLocalRootLuisKey(opt.key);
-    setLocalRootLuisRegion(opt.region);
-  };
-
-  const onChangeAction = async (_, opt) => {
-    setNextAction(opt.key);
-  };
-
-  const onChangeResourceGroup = async (_, opt) => {
-    setResourceGroupKey(opt.key);
-    setResourceGroup(opt.text);
-    if (opt.key === CREATE_NEW_KEY) {
-      setCreateResourceGroup(true);
-    } else {
-      setCreateResourceGroup(false);
-    }
-  };
-
-  const performNextAction = () => {
-    if (nextAction === 'choose') {
-      // close the modal!
-      props.onGetKey({
-        authoringKey: localRootLuisKey,
-        authoringRegion: localRootLuisRegion,
-      });
-      setOutcomeDescription(formatMessage('The following LUIS keys have been successfully added to your bot project:'));
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Authoring key')}</label>
-            {localRootLuisKey}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRootLuisRegion}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
-
-      setCurrentPage(3);
-    } else if (nextAction === 'handoff') {
-      setShowHandoff(true);
-      props.onDismiss();
+  const createService = async (
+    tokenCredentials: TokenCredentials,
+    subscriptionId: string,
+    resourceGroupName: string,
+    resourceName: string,
+    region: string
+  ): Promise<string> => {
+    const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
+    await cognitiveServicesManagementClient.accounts.create(resourceGroupName, `${resourceName}-authoring`, {
+      kind: 'LUIS.Authoring',
+      sku: {
+        name: 'F0',
+      },
+      location: region,
+    });
+
+    const keys = await cognitiveServicesManagementClient.accounts.listKeys(
+      resourceGroupName,
+      `${resourceName}-authoring`
+    );
+    if (!keys?.key1) {
+      throw new Error('No key found for newly created authoring resource');
     } else {
-      setCurrentPage(2);
+      return keys.key1;
     }
   };
 
-  const iconStyles = { marginRight: '8px' };
-  const onRenderOption = (option) => {
-    return (
-      <div>
-        {option.data && option.data.icon && (
-          <Icon aria-hidden="true" iconName={option.data.icon} style={iconStyles} title={option.data.icon} />
-        )}
-        <span>{option.text}</span>
-      </div>
-    );
-  };
-
-  const renderPageOne = () => {
-    return (
-      <div>
-        <p>
-          {formatMessage(
-            'Select your Azure subscription and choose from existing LUIS keys, or create a new LUIS resource. Learn more'
-          )}
-        </p>
-        <div css={mainElementStyle}>
-          <Dropdown
-            disabled={!(availableSubscriptions?.length > 0)}
-            label={formatMessage('Select subscription')}
-            options={
-              availableSubscriptions
-                ?.filter((p) => p.subscriptionId && p.displayName)
-                .map((p) => {
-                  return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
-                }) ?? []
-            }
-            placeholder={formatMessage('Select one')}
-            selectedKey={subscriptionId}
-            styles={dropdownStyles}
-            onChange={onChangeSubscription}
-          />
-        </div>
-        <div css={mainElementStyle}>
-          {subscriptionId && <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />}
-
-          <div style={{ marginLeft: 26 }}>
-            {noKeys && subscriptionId && (
-              <span style={{ color: 'rgb(161, 159, 157)' }}>
-                {formatMessage('No existing LUIS resource found in this subscription. Click “Next” to create new.')}
-              </span>
-            )}
-            {!noKeys && subscriptionId && (
-              <div>
-                <Dropdown
-                  disabled={!(authoringKeys?.length > 0) || nextAction !== 'choose'}
-                  label={formatMessage('Authoring key')}
-                  options={
-                    authoringKeys.map((p) => {
-                      return { text: p.name, ...p };
-                    }) ?? []
-                  }
-                  placeholder={formatMessage('Select one')}
-                  styles={dropdownStyles}
-                  onChange={onChangeLUISAuthoring}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-        <DialogFooter>
-          {loadingLUIS && (
-            <Spinner label="Loading keys..." labelPosition="right" styles={{ root: { float: 'left' } }} />
-          )}
-          <PrimaryButton
-            disabled={
-              loadingLUIS ||
-              (nextAction === 'choose' && !(localRootLuisRegion && localRootLuisKey)) ||
-              (nextAction === 'create' && !subscriptionId)
-            }
-            text={formatMessage('Next')}
-            onClick={performNextAction}
-          />
-          <DefaultButton
-            disabled={loadingLUIS || showAuthDialog}
-            text={formatMessage('Cancel')}
-            onClick={props.onDismiss}
-          />
-        </DialogFooter>
-      </div>
-    );
-  };
-
-  const renderPageTwo = () => {
-    return (
-      <div>
-        <div css={mainElementStyle}>
-          <p>
-            {formatMessage(
-              'Input your details below to create a new LUIS resource. You will be able to manage your new resource in the Azure portal. Learn more'
-            )}
-          </p>
-          <Dropdown
-            disabled={resourceGroups.length === 0 || loadingLUIS}
-            label={formatMessage('Resource group:')}
-            options={
-              resourceGroups.map((p) => {
-                return { key: p.id, text: p.name, data: p.data };
-              }) ?? []
-            }
-            placeholder={formatMessage('Select one')}
-            selectedKey={resourceGroupKey}
-            styles={dropdownStyles}
-            onChange={onChangeResourceGroup}
-            onRenderOption={onRenderOption}
-          />
-          {createResourceGroup && (
-            <TextField
-              required
-              aria-label={formatMessage('Resource group name')}
-              data-testid={'luisResourceGroupName'}
-              disabled={loadingLUIS}
-              id={'luisResourceGroupName'}
-              label={formatMessage('Resource group name')}
-              placeholder={formatMessage('Enter name for new resource group')}
-              styles={{ root: { marginTop: 10 } }}
-              value={newResourceGroupName}
-              onChange={(e, val) => {
-                setNewResourceGroupName(val || '');
-              }}
-            />
-          )}
-          <Dropdown
-            required
-            aria-label={formatMessage('LUIS region')}
-            data-testid={'rootLUISRegion'}
-            disabled={loadingLUIS}
-            id={'luisRegion'}
-            label={formatMessage('LUIS region')}
-            options={LUIS_REGIONS}
-            placeholder={formatMessage('Enter LUIS region')}
-            selectedKey={localRootLuisRegion}
-            styles={dropdownStyles}
-            onChange={handleRootLuisRegionOnChange}
-          />
-          <TextField
-            required
-            aria-label={formatMessage('Resource name')}
-            data-testid={'luisResourceName'}
-            disabled={loadingLUIS}
-            id={'luisResourceName'}
-            label={formatMessage('Resource name')}
-            placeholder={formatMessage('Enter name for new LUIS resources')}
-            styles={{ root: { marginTop: 10 } }}
-            value={luisResourceName}
-            onChange={(e, val) => setLuisResourceName(val || '')}
-          />
-        </div>
-        <DialogFooter>
-          {loadingLUIS && (
-            <Spinner
-              label={formatMessage('Creating resources...')}
-              labelPosition="right"
-              styles={{ root: { float: 'left' } }}
-            />
-          )}
-          <DefaultButton disabled={loadingLUIS} text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />
-          <PrimaryButton
-            disabled={
-              loadingLUIS ||
-              !luisResourceName ||
-              !localRootLuisRegion ||
-              !resourceGroupKey ||
-              (resourceGroupKey == CREATE_NEW_KEY && !newResourceGroupName)
-            }
-            text={formatMessage('Next')}
-            onClick={createLUIS}
-          />
-          <DefaultButton disabled={loadingLUIS} text={formatMessage('Cancel')} onClick={props.onDismiss} />
-        </DialogFooter>
-      </div>
-    );
-  };
-
-  const renderPageThree = () => {
-    return (
-      <div>
-        <p>{outcomeDescription}</p>
-        <div css={summaryStyles}>{outcomeSummary}</div>
-        {outcomeError && (
-          <p>
-            {formatMessage('If you would like to try again, or select from existing resources, please click “Back”.')}
-          </p>
-        )}
-        <DialogFooter>
-          {outcomeError && <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />}
-          <PrimaryButton text={formatMessage('Done')} onClick={props.onNext} />
-        </DialogFooter>
-      </div>
-    );
-  };
-
   return (
-    <Fragment>
-      {showAuthDialog && (
-        <AuthDialog
-          needGraph={false}
-          next={hasAuth}
-          onDismiss={() => {
-            setShowAuthDialog(false);
-          }}
-        />
+    <ManageService
+      createService={createService}
+      handoffInstructions={formatMessage(
+        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a Language Understanding resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffluis'
       )}
-      <ProvisionHandoff
-        developerInstructions={formatMessage(
-          'Copy and share this information with your Azure admin. After your Luis key is provisioned, you will be ready to test your bot.'
-        )}
-        handoffInstructions={formatMessage(
-          'Using the Azure portal, create a Language Understanding resource. Create these in a subscription that the developer has accesss to. This will result in an authoring key and an endpoint key.  Provide these keys to the developer in a secure manner.'
-        )}
-        hidden={!showHandoff}
-        title={formatMessage('Share resource request')}
-        onBack={() => {
-          setShowHandoff(false);
-          props.setDisplayManageLuis(true);
-        }}
-        onDismiss={() => setShowHandoff(false)}
-      />
-      <Dialog
-        dialogContentProps={{
-          type: DialogType.normal,
-          title: currentPage === 2 ? formatMessage('Create new LUIS resources') : formatMessage('Select LUIS keys'),
-        }}
-        hidden={props.hidden}
-        minWidth={480}
-        modalProps={{
-          isBlocking: true,
-        }}
-        onDismiss={props.onDismiss}
-      >
-        {currentPage === 1 && renderPageOne()}
-        {currentPage === 2 && renderPageTwo()}
-        {currentPage === 3 && renderPageThree()}
-      </Dialog>
-    </Fragment>
+      hidden={props.hidden}
+      regions={LUIS_REGIONS}
+      serviceKeyType={'LUIS.Authoring'}
+      serviceName={'LUIS'}
+      setVisible={props.setVisible}
+      onDismiss={props.onDismiss}
+      onGetKey={props.onGetKey}
+      onNext={props.onNext}
+    />
   );
 };
diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index f4c05ea42d..a46333f065 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -3,711 +3,173 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState, useEffect, Fragment } from 'react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import { useRecoilValue } from 'recoil';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { SubscriptionClient } from '@azure/arm-subscriptions';
-import { Subscription } from '@azure/arm-subscriptions/esm/models';
-import { TokenCredentials } from '@azure/ms-rest-js';
 import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices';
+import { TokenCredentials } from '@azure/ms-rest-js';
 import { SearchManagementClient } from '@azure/arm-search';
-import { ResourceManagementClient } from '@azure/arm-resources';
 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 formatMessage from 'format-message';
+
+import { ManageService } from '../ManageService/ManageService';
 
-import { AuthClient } from '../../utils/authClient';
-import { AuthDialog } from '../../components/Auth/AuthDialog';
-import { armScopes } from '../../constants';
-import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '../../utils/auth';
-import { dispatcherState } from '../../recoilModel/atoms';
+const QNA_REGIONS = [{ key: 'westus', text: 'westus' }];
 
 type ManageQNAProps = {
   hidden: boolean;
-  setDisplayManageQna: (value: any) => void;
   onDismiss: () => void;
-  onGetKey: (settings: { subscriptionKey: string }) => void;
+  onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
+  setVisible: (value: any) => void;
 };
 
-type KeyRec = {
-  name: string;
-  region: string;
-  resourceGroup: string;
-  key: string;
-};
-
-// QnA is only available in westus
-const QNA_REGIONS = [{ key: 'westus', text: 'westus' }];
-
-const dropdownStyles = { dropdown: { width: '100%' } };
-const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: '14' };
-const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
-const mainElementStyle = { marginBottom: 20 };
-const CREATE_NEW_KEY = 'CREATE_NEW';
-
-const handoffInstructions = formatMessage(
-  'Using the Azure portal, create a Language Understanding resource. Create these in a subscription that the developer has accesss to. This will result in an authoring key and an endpoint key.  Provide these keys to the developer in a secure manner.'
-);
-
 export const ManageQNA = (props: ManageQNAProps) => {
-  const [localRootQNAKey, setLocalRootQNAKey] = useState<string>('');
-
-  const [showAuthDialog, setShowAuthDialog] = useState(false);
-  const [token, setToken] = useState<string | undefined>();
-
-  const { setApplicationLevelError } = useRecoilValue(dispatcherState);
-  const [subscriptionId, setSubscription] = useState<string>('');
-  const [resourceGroups, setResourceGroups] = useState<any[]>([]);
-  const [createResourceGroup, setCreateResourceGroup] = useState<boolean>(false);
-  const [newResourceGroupName, setNewResourceGroupName] = useState<string>('');
-  const [resourceGroupKey, setResourceGroupKey] = useState<string>('');
-  const [resourceGroup, setResourceGroup] = useState<string>('');
-
-  const [showHandoff, setShowHandoff] = useState<boolean>(false);
-  const [qnaResourceName, setQNAResourceName] = useState<string>('');
-  const [loadingQNA, setLoadingQNA] = useState<boolean>(false);
-  const [noKeys, setNoKeys] = useState<boolean>(false);
-  const [nextAction, setNextAction] = useState<string>('create');
-  const [actionOptions, setActionOptions] = useState<IChoiceGroupOption[]>([]);
-  const [availableSubscriptions, setAvailableSubscriptions] = useState<Subscription[]>([]);
-  const [qnaKeys, setQNAKeys] = useState<KeyRec[]>([]);
-  const [localRootQNARegion, setLocalRootQNARegion] = useState<string>('westus');
-
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [outcomeDescription, setOutcomeDescription] = useState<string>('');
-  const [outcomeSummary, setOutcomeSummary] = useState<any>();
-  const [outcomeError, setOutcomeError] = useState<boolean>(false);
-
-  /* Copied from Azure Publishing extension */
-  const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
-    const tokenCredentials = new TokenCredentials(token);
-    try {
-      const subscriptionClient = new SubscriptionClient(tokenCredentials);
-      const subscriptionsResult = await subscriptionClient.subscriptions.list();
-      // eslint-disable-next-line no-underscore-dangle
-      return subscriptionsResult._response.parsedBody;
-    } catch (err) {
-      setApplicationLevelError(err);
-      return [];
-    }
-  };
-
-  const hasAuth = async () => {
-    let newtoken = '';
-    if (userShouldProvideTokens()) {
-      if (isShowAuthDialog(false)) {
-        setShowAuthDialog(true);
-      }
-      newtoken = getTokenFromCache('accessToken');
-    } else {
-      newtoken = await AuthClient.getAccessToken(armScopes);
-    }
-
-    setToken(newtoken);
-
-    if (newtoken) {
-      // reset the list
-      setAvailableSubscriptions([]);
-
-      // fetch list of available subscriptions
-      setAvailableSubscriptions(await getSubscriptions(newtoken));
-    }
-  };
-
-  useEffect(() => {
-    // reset the ui
-    setSubscription('');
-    setQNAKeys([]);
-    setCurrentPage(1);
-    setActionOptions([
-      { key: 'create', text: formatMessage('Create a new QnA MAker resource'), disabled: true },
-      { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: true },
-      { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-    ]);
-    if (!props.hidden) {
-      hasAuth();
-    }
-  }, [props.hidden]);
-
-  const handleRootQNARegionOnChange = (e, value: IDropdownOption | undefined) => {
-    if (value != null) {
-      setLocalRootQNARegion(value.key as string);
-    } else {
-      setLocalRootQNARegion('');
-    }
-  };
-
-  const fetchKeys = async (cognitiveServicesManagementClient, accounts) => {
-    const keyList: KeyRec[] = [];
-    for (const account in accounts) {
-      const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1');
-      const name = accounts[account].name;
-      if (resourceGroup && name) {
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name);
-        if (keys?.key1) {
-          keyList.push({
-            name: name,
-            resourceGroup: resourceGroup,
-            region: accounts[account].location || '',
-            key: keys?.key1 || '',
-          });
-        }
-      }
-    }
-    return keyList;
-  };
-
-  const fetchQNA = async (subscriptionId) => {
-    if (token) {
-      setLoadingQNA(true);
-      setNoKeys(false);
-      const tokenCredentials = new TokenCredentials(token);
-      const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
-      const accounts = await cognitiveServicesManagementClient.accounts.list();
-
-      const keys: KeyRec[] = await fetchKeys(
-        cognitiveServicesManagementClient,
-        accounts.filter((a) => a.kind === 'QnAMaker')
-      );
-      setLoadingQNA(false);
-      if (keys.length == 0) {
-        setNoKeys(true);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new QnA Maker resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-        ]);
-      } else {
-        setNoKeys(false);
-        setQNAKeys(keys);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new QnA Maker resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: false },
-        ]);
-      }
-    }
-  };
-
-  const fetchResourceGroups = async (subscriptionId) => {
-    if (token) {
-      const tokenCredentials = new TokenCredentials(token);
-      const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-      const groups = await resourceClient.resourceGroups.list();
-
-      setResourceGroups([
-        {
-          id: CREATE_NEW_KEY,
-          data: { icon: 'Add' },
-          name: formatMessage('Create new'),
+  const createService = async (
+    tokenCredentials: TokenCredentials,
+    subscriptionId: string,
+    resourceGroupName: string,
+    resourceName: string,
+    region: string
+  ): Promise<string> => {
+    const qnaMakerSearchName = `${resourceName}-search`.toLowerCase().replace('_', '');
+    const qnaMakerWebAppName = `${resourceName}-qnahost`.toLowerCase().replace('_', '');
+    const qnaMakerServiceName = `${resourceName}-qna`;
+
+    const searchManagementClient = new SearchManagementClient(tokenCredentials as any, subscriptionId);
+    await searchManagementClient.services.createOrUpdate(resourceGroupName, qnaMakerSearchName, {
+      location: region,
+      sku: {
+        name: 'standard',
+      },
+      replicaCount: 1,
+      partitionCount: 1,
+      hostingMode: 'default',
+    });
+
+    const webSiteManagementClient = new WebSiteManagementClient(tokenCredentials, subscriptionId);
+    await webSiteManagementClient.appServicePlans.createOrUpdate(resourceGroupName, resourceGroupName, {
+      location: region,
+      sku: {
+        name: 'S1',
+        tier: 'Standard',
+        size: 'S1',
+        family: 'S',
+        capacity: 1,
+      },
+    });
+    // deploy or update exisiting app insights component
+    const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
+      tokenCredentials,
+      subscriptionId
+    );
+    await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
+      location: region,
+      applicationType: 'web',
+      kind: 'web',
+    });
+
+    // add web config for websites
+    const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
+      .primaryKey;
+    const appInsightsComponent = await applicationInsightsManagementClient.components.get(
+      resourceGroupName,
+      resourceGroupName
+    );
+    const userAppInsightsKey = appInsightsComponent.instrumentationKey;
+    const userAppInsightsName = resourceGroupName;
+    const userAppInsightsAppId = appInsightsComponent.appId;
+    const primaryEndpointKey = `${qnaMakerWebAppName}-PrimaryEndpointKey`;
+    const secondaryEndpointKey = `${qnaMakerWebAppName}-SecondaryEndpointKey`;
+    const defaultAnswer = 'No good match found in KB.';
+    const QNAMAKER_EXTENSION_VERSION = 'latest';
+
+    // deploy qna host webapp
+    const webAppResult = await webSiteManagementClient.webApps.createOrUpdate(resourceGroupName, qnaMakerWebAppName, {
+      name: qnaMakerWebAppName,
+      serverFarmId: resourceGroupName,
+      location: region,
+      siteConfig: {
+        cors: {
+          allowedOrigins: ['*'],
         },
-        ...groups,
-      ]);
-    }
-  };
-
-  const createQNA = async () => {
-    let qnaKey = '';
-    if (token) {
-      setLoadingQNA(true);
-      const tokenCredentials = new TokenCredentials(token);
-
-      const resourceGroupName = resourceGroupKey === CREATE_NEW_KEY ? newResourceGroupName : resourceGroup;
-      if (resourceGroupKey === CREATE_NEW_KEY) {
-        try {
-          const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-          await resourceClient.resourceGroups.createOrUpdate(resourceGroupName, {
-            location: localRootQNARegion,
-          });
-        } catch (err) {
-          setOutcomeDescription(
-            formatMessage(
-              'Due to the following error, we were unable to successfully add your selected QnA keys to your bot project:'
-            )
-          );
-          setOutcomeSummary(<p>{err.message}</p>);
-          setOutcomeError(true);
-          setCurrentPage(3);
-          setLoadingQNA(false);
-          return;
-        }
-      }
-
-      try {
-        const qnaMakerSearchName = `${qnaResourceName}-search`.toLowerCase().replace('_', '');
-        const qnaMakerWebAppName = `${qnaResourceName}-qnahost`.toLowerCase().replace('_', '');
-        const qnaMakerServiceName = `${qnaResourceName}-qna`;
-
-        const searchManagementClient = new SearchManagementClient(tokenCredentials as any, subscriptionId);
-        await searchManagementClient.services.createOrUpdate(resourceGroupName, qnaMakerSearchName, {
-          location: localRootQNARegion,
-          sku: {
-            name: 'standard',
+        appSettings: [
+          {
+            name: 'AzureSearchName',
+            value: qnaMakerSearchName,
           },
-          replicaCount: 1,
-          partitionCount: 1,
-          hostingMode: 'default',
-        });
-
-        const webSiteManagementClient = new WebSiteManagementClient(tokenCredentials, subscriptionId);
-        await webSiteManagementClient.appServicePlans.createOrUpdate(resourceGroupName, resourceGroupName, {
-          location: localRootQNARegion,
-          sku: {
-            name: 'S1',
-            tier: 'Standard',
-            size: 'S1',
-            family: 'S',
-            capacity: 1,
+          {
+            name: 'AzureSearchAdminKey',
+            value: azureSearchAdminKey,
           },
-        });
-        // deploy or update exisiting app insights component
-        const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
-          tokenCredentials,
-          subscriptionId
-        );
-        await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
-          location: localRootQNARegion,
-          applicationType: 'web',
-          kind: 'web',
-        });
-
-        // add web config for websites
-        const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
-          .primaryKey;
-        const appInsightsComponent = await applicationInsightsManagementClient.components.get(
-          resourceGroupName,
-          resourceGroupName
-        );
-        const userAppInsightsKey = appInsightsComponent.instrumentationKey;
-        const userAppInsightsName = resourceGroupName;
-        const userAppInsightsAppId = appInsightsComponent.appId;
-        const primaryEndpointKey = `${qnaMakerWebAppName}-PrimaryEndpointKey`;
-        const secondaryEndpointKey = `${qnaMakerWebAppName}-SecondaryEndpointKey`;
-        const defaultAnswer = 'No good match found in KB.';
-        const QNAMAKER_EXTENSION_VERSION = 'latest';
-
-        // deploy qna host webapp
-        const webAppResult = await webSiteManagementClient.webApps.createOrUpdate(
-          resourceGroupName,
-          qnaMakerWebAppName,
           {
-            name: qnaMakerWebAppName,
-            serverFarmId: resourceGroupName,
-            location: localRootQNARegion,
-            siteConfig: {
-              cors: {
-                allowedOrigins: ['*'],
-              },
-              appSettings: [
-                {
-                  name: 'AzureSearchName',
-                  value: qnaMakerSearchName,
-                },
-                {
-                  name: 'AzureSearchAdminKey',
-                  value: azureSearchAdminKey,
-                },
-                {
-                  name: 'UserAppInsightsKey',
-                  value: userAppInsightsKey,
-                },
-                {
-                  name: 'UserAppInsightsName',
-                  value: userAppInsightsName,
-                },
-                {
-                  name: 'UserAppInsightsAppId',
-                  value: userAppInsightsAppId,
-                },
-                {
-                  name: 'PrimaryEndpointKey',
-                  value: primaryEndpointKey,
-                },
-                {
-                  name: 'SecondaryEndpointKey',
-                  value: secondaryEndpointKey,
-                },
-                {
-                  name: 'DefaultAnswer',
-                  value: defaultAnswer,
-                },
-                {
-                  name: 'QNAMAKER_EXTENSION_VERSION',
-                  value: QNAMAKER_EXTENSION_VERSION,
-                },
-              ],
-            },
-            enabled: true,
-          }
-        );
-
-        // Create qna account
-        const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(
-          tokenCredentials,
-          subscriptionId
-        );
-        await cognitiveServicesManagementClient.accounts.create(resourceGroupName, qnaMakerServiceName, {
-          kind: 'QnAMaker',
-          sku: {
-            name: 'F0',
+            name: 'UserAppInsightsKey',
+            value: userAppInsightsKey,
           },
-          location: localRootQNARegion,
-          properties: {
-            apiProperties: {
-              qnaRuntimeEndpoint: `https://${webAppResult.hostNames?.[0]}`,
-            },
+          {
+            name: 'UserAppInsightsName',
+            value: userAppInsightsName,
           },
-        });
-
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, qnaMakerServiceName);
-        if (!keys?.key1) {
-          throw new Error('No key found for newly created authoring resource');
-        } else {
-          qnaKey = keys.key1;
-          setLocalRootQNAKey(keys.key1);
-        }
-      } catch (err) {
-        setOutcomeDescription(
-          formatMessage(
-            'Due to the following error, we were unable to successfully add your selected LUIS keys to your bot project:'
-          )
-        );
-        setOutcomeSummary(<p>{err.message}</p>);
-        setOutcomeError(true);
-        setCurrentPage(3);
-        setLoadingQNA(false);
-        return;
-      }
-
-      setLoadingQNA(false);
-
-      setOutcomeDescription(
-        formatMessage('The following LUIS resource was successfully created and added to your bot project:')
-      );
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Subscription')}</label>
-            {subscriptionId}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource Group')}</label>
-            {resourceGroupName}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRootQNARegion}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource name')}</label>
-            {qnaResourceName}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
-
-      // ALL DONE!
-      // this will pass the new values back to the caller
-      props.onGetKey({
-        subscriptionKey: qnaKey,
-      });
-
-      setCurrentPage(3);
-    }
-  };
-
-  // allow a user to provide a subscription id if one is missing
-  const onChangeSubscription = async (_, opt) => {
-    // get list of qna keys for this subscription
-    setSubscription(opt.key);
-    fetchQNA(opt.key);
-    fetchResourceGroups(opt.key);
-  };
-
-  const onChangeQNAKey = async (_, opt) => {
-    // get list of luis keys for this subscription
-    setLocalRootQNAKey(opt.key);
-  };
-
-  const onChangeAction = async (_, opt) => {
-    setNextAction(opt.key);
-  };
-
-  const onChangeResourceGroup = async (_, opt) => {
-    setResourceGroupKey(opt.key);
-    setResourceGroup(opt.text);
-    if (opt.key === CREATE_NEW_KEY) {
-      setCreateResourceGroup(true);
-    } else {
-      setCreateResourceGroup(false);
-    }
-  };
-
-  const performNextAction = () => {
-    if (nextAction === 'choose') {
-      props.onGetKey({
-        subscriptionKey: localRootQNAKey,
-      });
-      setOutcomeDescription(formatMessage('The following QnA key has been successfully added to your bot project:'));
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Key')}</label>
-            {localRootQNAKey}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRootQNARegion}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
+          {
+            name: 'UserAppInsightsAppId',
+            value: userAppInsightsAppId,
+          },
+          {
+            name: 'PrimaryEndpointKey',
+            value: primaryEndpointKey,
+          },
+          {
+            name: 'SecondaryEndpointKey',
+            value: secondaryEndpointKey,
+          },
+          {
+            name: 'DefaultAnswer',
+            value: defaultAnswer,
+          },
+          {
+            name: 'QNAMAKER_EXTENSION_VERSION',
+            value: QNAMAKER_EXTENSION_VERSION,
+          },
+        ],
+      },
+      enabled: true,
+    });
+
+    // Create qna account
+    const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
+    await cognitiveServicesManagementClient.accounts.create(resourceGroupName, qnaMakerServiceName, {
+      kind: 'QnAMaker',
+      sku: {
+        name: 'F0',
+      },
+      location: region,
+      properties: {
+        apiProperties: {
+          qnaRuntimeEndpoint: `https://${webAppResult.hostNames?.[0]}`,
+        },
+      },
+    });
 
-      setCurrentPage(3);
-    } else if (nextAction === 'handoff') {
-      setShowHandoff(true);
-      props.onDismiss();
+    const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, qnaMakerServiceName);
+    if (!keys?.key1) {
+      throw new Error('No key found for newly created authoring resource');
     } else {
-      setCurrentPage(2);
+      return keys.key1;
     }
   };
 
-  const iconStyles = { marginRight: '8px' };
-  const onRenderOption = (option) => {
-    return (
-      <div>
-        {option.data && option.data.icon && (
-          <Icon aria-hidden="true" iconName={option.data.icon} style={iconStyles} title={option.data.icon} />
-        )}
-        <span>{option.text}</span>
-      </div>
-    );
-  };
-
   return (
-    <Fragment>
-      {showAuthDialog && (
-        <AuthDialog
-          needGraph={false}
-          next={hasAuth}
-          onDismiss={() => {
-            setShowAuthDialog(false);
-          }}
-        />
+    <ManageService
+      createService={createService}
+      handoffInstructions={formatMessage(
+        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a QnAMaker resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffqnamaker'
       )}
-      <ProvisionHandoff
-        developerInstructions={formatMessage(
-          'Copy and share this information with your Azure admin. After your QNA key is provisioned, you will be ready to test your bot with qna.'
-        )}
-        handoffInstructions={handoffInstructions}
-        hidden={!showHandoff}
-        title={formatMessage('Share resource request')}
-        onBack={() => {
-          setShowHandoff(false);
-          props.setDisplayManageQna(true);
-        }}
-        onDismiss={() => setShowHandoff(false)}
-      />
-      <Dialog
-        dialogContentProps={{
-          type: DialogType.normal,
-          title: currentPage === 2 ? formatMessage('Create new QNA resources') : formatMessage('Select QNA keys'),
-        }}
-        hidden={props.hidden}
-        minWidth={480}
-        modalProps={{
-          isBlocking: true,
-        }}
-        onDismiss={props.onDismiss}
-      >
-        <div>
-          {currentPage === 1 && (
-            <div>
-              <p>
-                {formatMessage(
-                  'Select your Azure subscription and choose from existing QNA keys, or create a new QNA resource. Learn more'
-                )}
-              </p>
-              <div css={mainElementStyle}>
-                <Dropdown
-                  disabled={!(availableSubscriptions?.length > 0)}
-                  label={formatMessage('Select subscription')}
-                  options={
-                    availableSubscriptions
-                      ?.filter((p) => p.subscriptionId && p.displayName)
-                      .map((p) => {
-                        return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
-                      }) ?? []
-                  }
-                  placeholder={formatMessage('Select one')}
-                  selectedKey={subscriptionId}
-                  styles={dropdownStyles}
-                  onChange={onChangeSubscription}
-                />
-              </div>
-              <div css={mainElementStyle}>
-                {subscriptionId && (
-                  <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />
-                )}
-
-                <div style={{ marginLeft: 26 }}>
-                  {noKeys && subscriptionId && (
-                    <span style={{ color: 'rgb(161, 159, 157)' }}>
-                      {formatMessage(
-                        'No existing QNA resource found in this subscription. Click “Next” to create new.'
-                      )}
-                    </span>
-                  )}
-                  {!noKeys && subscriptionId && (
-                    <div>
-                      <Dropdown
-                        disabled={!(qnaKeys?.length > 0) || nextAction !== 'choose'}
-                        label={formatMessage('QnA Maker key')}
-                        options={
-                          qnaKeys.map((p) => {
-                            return { text: p.name, ...p };
-                          }) ?? []
-                        }
-                        placeholder={formatMessage('Select one')}
-                        styles={dropdownStyles}
-                        onChange={onChangeQNAKey}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-              <DialogFooter>
-                {loadingQNA && (
-                  <Spinner label="Loading keys..." labelPosition="right" styles={{ root: { float: 'left' } }} />
-                )}
-                <PrimaryButton
-                  disabled={
-                    loadingQNA ||
-                    showAuthDialog ||
-                    (nextAction === 'choose' && !localRootQNAKey) ||
-                    (nextAction === 'create' && !subscriptionId)
-                  }
-                  text={formatMessage('Next')}
-                  onClick={performNextAction}
-                />
-                <DefaultButton
-                  disabled={loadingQNA || showAuthDialog}
-                  text={formatMessage('Cancel')}
-                  onClick={props.onDismiss}
-                />
-              </DialogFooter>
-            </div>
-          )}
-          {currentPage === 2 && (
-            <div>
-              <div css={mainElementStyle}>
-                <p>
-                  {formatMessage(
-                    'Input your details below to create a new QNA resource. You will be able to manage your new resource in the Azure portal. Learn more'
-                  )}
-                </p>
-                <Dropdown
-                  disabled={resourceGroups.length === 0 || loadingQNA}
-                  label={formatMessage('Resource group:')}
-                  options={
-                    resourceGroups.map((p) => {
-                      return { key: p.id, text: p.name, data: p.data };
-                    }) ?? []
-                  }
-                  placeholder={formatMessage('Select one')}
-                  selectedKey={resourceGroupKey}
-                  styles={dropdownStyles}
-                  onChange={onChangeResourceGroup}
-                  onRenderOption={onRenderOption}
-                />
-                {createResourceGroup && (
-                  <TextField
-                    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')}
-                    styles={{ root: { marginTop: 10 } }}
-                    value={newResourceGroupName}
-                    onChange={(e, val) => {
-                      setNewResourceGroupName(val || '');
-                    }}
-                  />
-                )}
-                <Dropdown
-                  required
-                  aria-label={formatMessage('QnA region')}
-                  data-testid={'rootqnaRegion'}
-                  disabled={loadingQNA}
-                  id={'qnaRegion'}
-                  label={formatMessage('QnA region')}
-                  options={QNA_REGIONS}
-                  placeholder={formatMessage('Enter QnA region')}
-                  selectedKey={localRootQNARegion}
-                  styles={dropdownStyles}
-                  onChange={handleRootQNARegionOnChange}
-                />
-                <TextField
-                  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')}
-                  styles={{ root: { marginTop: 10 } }}
-                  value={qnaResourceName}
-                  onChange={(e, val) => setQNAResourceName(val || '')}
-                />
-              </div>
-              <DialogFooter>
-                {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 disabled={loadingQNA} text={formatMessage('Cancel')} onClick={props.onDismiss} />
-              </DialogFooter>
-            </div>
-          )}
-          {currentPage === 3 && (
-            <div>
-              <p>{outcomeDescription}</p>
-              <div css={summaryStyles}>{outcomeSummary}</div>
-              {outcomeError && (
-                <p>
-                  {formatMessage(
-                    'If you would like to try again, or select from existing resources, please click “Back”.'
-                  )}
-                </p>
-              )}
-              <DialogFooter>
-                {outcomeError && <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />}
-                <PrimaryButton text={formatMessage('Done')} onClick={props.onNext} />
-              </DialogFooter>
-            </div>
-          )}
-        </div>
-      </Dialog>
-    </Fragment>
+      hidden={props.hidden}
+      regions={QNA_REGIONS}
+      serviceKeyType={'QnAMaker'}
+      serviceName={'QnA Maker'}
+      setVisible={props.setVisible}
+      onDismiss={props.onDismiss}
+      onGetKey={props.onGetKey}
+      onNext={props.onNext}
+    />
   );
 };
diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
new file mode 100644
index 0000000000..95a27f8f73
--- /dev/null
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -0,0 +1,684 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useState, useEffect, Fragment } from 'react';
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import formatMessage from 'format-message';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
+import { useRecoilValue } from 'recoil';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { SubscriptionClient } from '@azure/arm-subscriptions';
+import { Subscription } from '@azure/arm-subscriptions/esm/models';
+import { TokenCredentials } from '@azure/ms-rest-js';
+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 { AuthClient } from '../../utils/authClient';
+import { AuthDialog } from '../../components/Auth/AuthDialog';
+import { armScopes } from '../../constants';
+import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '../../utils/auth';
+import { dispatcherState } from '../../recoilModel/atoms';
+
+type ManageServiceProps = {
+  createService: (
+    tokenCredentials: TokenCredentials,
+    subscriptionId: string,
+    resourceGroupName: string,
+    resourceName: string,
+    region: string
+  ) => Promise<string>;
+  handoffInstructions: string;
+  hidden: boolean;
+  learnMore?: string;
+  onDismiss: () => void;
+  onGetKey: (settings: { key: string; region: string }) => void;
+  onNext?: () => void;
+  serviceName: string;
+  regions?: IDropdownOption[];
+  serviceKeyType: string;
+  setVisible: (value: any) => void;
+};
+
+type KeyRec = {
+  name: string;
+  region: string;
+  resourceGroup: string;
+  key: string;
+};
+
+const dropdownStyles = { dropdown: { width: '100%', marginBottom: 20 } };
+const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: 14 };
+const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
+const mainElementStyle = { marginBottom: 20 };
+const CREATE_NEW_KEY = 'CREATE_NEW';
+
+export const ManageService = (props: ManageServiceProps) => {
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
+  const [token, setToken] = useState<string | undefined>();
+
+  const { setApplicationLevelError } = useRecoilValue(dispatcherState);
+  const [subscriptionId, setSubscription] = useState<string>('');
+  const [resourceGroups, setResourceGroups] = useState<any[]>([]);
+  const [createResourceGroup, setCreateResourceGroup] = useState<boolean>(false);
+  const [newResourceGroupName, setNewResourceGroupName] = useState<string>('');
+  const [resourceGroupKey, setResourceGroupKey] = useState<string>('');
+  const [resourceGroup, setResourceGroup] = useState<string>('');
+
+  const [showHandoff, setShowHandoff] = useState<boolean>(false);
+  const [resourceName, setResourceName] = useState<string>('');
+  const [loading, setLoading] = useState<string | undefined>(undefined);
+  const [noKeys, setNoKeys] = useState<boolean>(false);
+  const [nextAction, setNextAction] = useState<string>('choose');
+  const [key, setKey] = useState<string>('');
+  const [region, setRegion] = useState<string>('');
+  const [availableSubscriptions, setAvailableSubscriptions] = useState<Subscription[]>([]);
+  const [keys, setKeys] = useState<KeyRec[]>([]);
+
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [outcomeDescription, setOutcomeDescription] = useState<string>('');
+  const [outcomeSummary, setOutcomeSummary] = useState<any>();
+  const [outcomeError, setOutcomeError] = useState<boolean>(false);
+  const [locationList, setLocationList] = useState<{ key: string; text: string }[]>(props.regions || []);
+
+  const actionOptions: IChoiceGroupOption[] = [
+    { key: 'choose', text: formatMessage('Choose from existing') },
+    {
+      key: 'create',
+      text: formatMessage('Create a new {service} resource', { service: props.serviceName }),
+    },
+    { key: 'handoff', text: formatMessage('Handoff to admin') },
+  ];
+
+  const fetchLocations = async (subscriptionId) => {
+    if (token) {
+      const tokenCredentials = new TokenCredentials(token);
+      const subscriptionClient = new SubscriptionClient(tokenCredentials);
+      const locations = await subscriptionClient.subscriptions.listLocations(subscriptionId);
+      setLocationList(
+        locations.map((location) => {
+          return { key: location.name || '', text: location.displayName || '' };
+        })
+      );
+    }
+  };
+
+  /* Copied from Azure Publishing extension */
+  const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
+    const tokenCredentials = new TokenCredentials(token);
+    try {
+      const subscriptionClient = new SubscriptionClient(tokenCredentials);
+      const subscriptionsResult = await subscriptionClient.subscriptions.list();
+      // eslint-disable-next-line no-underscore-dangle
+      return subscriptionsResult._response.parsedBody;
+    } catch (err) {
+      setApplicationLevelError(err);
+      return [];
+    }
+  };
+
+  const hasAuth = async () => {
+    let newtoken = '';
+    if (userShouldProvideTokens()) {
+      if (isShowAuthDialog(false)) {
+        setShowAuthDialog(true);
+      }
+      newtoken = getTokenFromCache('accessToken');
+    } else {
+      newtoken = await AuthClient.getAccessToken(armScopes);
+    }
+
+    setToken(newtoken);
+
+    if (newtoken) {
+      // reset the list
+      setAvailableSubscriptions([]);
+
+      // fetch list of available subscriptions
+      setAvailableSubscriptions(await getSubscriptions(newtoken));
+
+      // go on to the next page post-auth
+      setCurrentPage(2);
+    }
+  };
+
+  useEffect(() => {
+    // reset the ui
+    setSubscription('');
+    setKeys([]);
+    setCurrentPage(1);
+  }, [props.hidden]);
+
+  const handleRegionOnChange = (e, value: IDropdownOption | undefined) => {
+    if (value != null) {
+      setRegion(value.key as string);
+    } else {
+      setRegion('');
+    }
+  };
+
+  const fetchKeys = async (cognitiveServicesManagementClient, accounts) => {
+    const keyList: KeyRec[] = [];
+    for (const account in accounts) {
+      const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1');
+      const name = accounts[account].name;
+      if (resourceGroup && name) {
+        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name);
+        if (keys?.key1) {
+          keyList.push({
+            name: name,
+            resourceGroup: resourceGroup,
+            region: accounts[account].location || '',
+            key: keys?.key1 || '',
+          });
+        }
+      }
+    }
+    return keyList;
+  };
+
+  const fetchAccounts = async (subscriptionId) => {
+    if (token) {
+      setLoading(formatMessage('Loading keys...'));
+      setNoKeys(false);
+      const tokenCredentials = new TokenCredentials(token);
+      const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
+      const accounts = await cognitiveServicesManagementClient.accounts.list();
+
+      const keylist: KeyRec[] = await fetchKeys(
+        cognitiveServicesManagementClient,
+        accounts.filter((a) => a.kind === props.serviceKeyType)
+      );
+      setLoading(undefined);
+      if (keylist.length == 0) {
+        setNoKeys(true);
+      } else {
+        setNoKeys(false);
+        setKeys(keylist);
+      }
+    }
+  };
+
+  const fetchResourceGroups = async (subscriptionId) => {
+    if (token) {
+      const tokenCredentials = new TokenCredentials(token);
+      const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
+      const groups = await resourceClient.resourceGroups.list();
+
+      setResourceGroups([
+        {
+          id: CREATE_NEW_KEY,
+          data: { icon: 'Add' },
+          name: formatMessage('Create new'),
+        },
+        ...groups,
+      ]);
+    }
+  };
+
+  const createService = async () => {
+    if (token) {
+      setLoading(formatMessage('Creating resources...'));
+
+      const tokenCredentials = new TokenCredentials(token);
+
+      const resourceGroupName = resourceGroupKey === CREATE_NEW_KEY ? newResourceGroupName : resourceGroup;
+      if (resourceGroupKey === CREATE_NEW_KEY) {
+        try {
+          const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
+          await resourceClient.resourceGroups.createOrUpdate(resourceGroupName, {
+            location: region,
+          });
+        } catch (err) {
+          setOutcomeDescription(
+            formatMessage(
+              'Due to the following error, we were unable to successfully add your selected {service} keys to your bot project:',
+              { service: props.serviceName }
+            )
+          );
+          setOutcomeSummary(
+            <div>
+              <p>{err.message}</p>
+            </div>
+          );
+          setOutcomeError(true);
+          setCurrentPage(3);
+          setLoading(undefined);
+          return;
+        }
+      }
+
+      try {
+        const newKey = await props.createService(
+          tokenCredentials,
+          subscriptionId,
+          resourceGroupName,
+          resourceName,
+          region
+        );
+
+        setKey(newKey);
+        // ALL DONE!
+        // this will pass the new values back to the caller
+        props.onGetKey({
+          key: newKey,
+          region: region,
+        });
+      } catch (err) {
+        setOutcomeDescription(
+          formatMessage(
+            'Due to the following error, we were unable to successfully add your selected {service} keys to your bot project:',
+            { service: props.serviceName }
+          )
+        );
+        setOutcomeSummary(
+          <div>
+            <p>{err.message}</p>
+          </div>
+        );
+        setOutcomeError(true);
+        setCurrentPage(3);
+        setLoading(undefined);
+        return;
+      }
+
+      setLoading(undefined);
+
+      setOutcomeDescription(
+        formatMessage('The following {service} resource was successfully created and added to your bot project:', {
+          service: props.serviceName,
+        })
+      );
+      setOutcomeSummary(
+        <div>
+          <p>
+            <label css={summaryLabelStyles}>{formatMessage('Subscription')}</label>
+            {subscriptionId}
+          </p>
+          <p>
+            <label css={summaryLabelStyles}>{formatMessage('Resource Group')}</label>
+            {resourceGroupName}
+          </p>
+          <p>
+            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
+            {region}
+          </p>
+          <p>
+            <label css={summaryLabelStyles}>{formatMessage('Resource name')}</label>
+            {resourceName}
+          </p>
+        </div>
+      );
+      setOutcomeError(false);
+
+      setCurrentPage(3);
+    }
+  };
+
+  // allow a user to provide a subscription id if one is missing
+  const onChangeSubscription = async (_, opt) => {
+    // get list of keys for this subscription
+    setSubscription(opt.key);
+    fetchAccounts(opt.key);
+    setLoading(formatMessage('Loading subscription...'));
+    // if we don't have a list of regions already passed in
+    if (!props.regions) {
+      fetchLocations(opt.key);
+    }
+    fetchResourceGroups(opt.key);
+  };
+
+  const onChangeKey = async (_, opt) => {
+    // get list of keys for this subscription
+    setKey(opt.key);
+    setRegion(opt.region);
+  };
+
+  const onChangeAction = async (_, opt) => {
+    setNextAction(opt.key);
+  };
+
+  const onChangeResourceGroup = async (_, opt) => {
+    setResourceGroupKey(opt.key);
+    setResourceGroup(opt.text);
+    if (opt.key === CREATE_NEW_KEY) {
+      setCreateResourceGroup(true);
+    } else {
+      setCreateResourceGroup(false);
+    }
+  };
+
+  const chooseExistingKey = () => {
+    // close the modal!
+    props.onGetKey({
+      key: key,
+      region: region,
+    });
+    setOutcomeDescription(
+      formatMessage('The following {service} keys have been successfully added to your bot project:', {
+        service: props.serviceName,
+      })
+    );
+    setOutcomeSummary(
+      <div>
+        <p>
+          <label css={summaryLabelStyles}>{formatMessage('Key')}</label>
+          {key}
+        </p>
+        <p>
+          <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
+          {region}
+        </p>
+      </div>
+    );
+    setOutcomeError(false);
+
+    setCurrentPage(3);
+  };
+
+  const performNextAction = () => {
+    if (nextAction === 'handoff') {
+      setShowHandoff(true);
+      props.onDismiss();
+    } else {
+      hasAuth();
+    }
+  };
+
+  const iconStyles = { marginRight: '8px' };
+  const onRenderOption = (option) => {
+    return (
+      <div>
+        {option.data && option.data.icon && (
+          <Icon aria-hidden="true" iconName={option.data.icon} style={iconStyles} title={option.data.icon} />
+        )}
+        <span>{option.text}</span>
+      </div>
+    );
+  };
+
+  const renderPageOne = () => {
+    return (
+      <div>
+        <p css={{ marginTop: 0 }}>
+          {formatMessage(
+            'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
+            { service: props.serviceName }
+          )}
+          {props.learnMore ? (
+            <Link href={props.learnMore} target={'_blank'}>
+              {formatMessage('Learn more')}
+            </Link>
+          ) : null}
+        </p>
+        <div css={mainElementStyle}>
+          <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />
+        </div>
+        <DialogFooter>
+          <PrimaryButton disabled={loading !== undefined} text={formatMessage('Next')} onClick={performNextAction} />
+          <DefaultButton
+            disabled={loading !== undefined || showAuthDialog}
+            text={formatMessage('Cancel')}
+            onClick={props.onDismiss}
+          />
+        </DialogFooter>
+      </div>
+    );
+  };
+
+  const renderPageChoose = () => {
+    return (
+      <div>
+        <p css={{ marginTop: 0 }}>
+          {formatMessage(
+            'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
+            { service: props.serviceName }
+          )}
+          {props.learnMore ? (
+            <Link href={props.learnMore} target={'_blank'}>
+              {formatMessage('Learn more')}
+            </Link>
+          ) : null}
+        </p>
+        <div css={mainElementStyle}>
+          <Dropdown
+            disabled={!(availableSubscriptions?.length > 0)}
+            label={formatMessage('Select subscription')}
+            options={
+              availableSubscriptions
+                ?.filter((p) => p.subscriptionId && p.displayName)
+                .map((p) => {
+                  return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
+                }) ?? []
+            }
+            placeholder={formatMessage('Select one')}
+            selectedKey={subscriptionId}
+            styles={dropdownStyles}
+            onChange={onChangeSubscription}
+          />
+        </div>
+        <div>
+          {noKeys && subscriptionId && (
+            <span style={{ color: 'rgb(161, 159, 157)' }}>
+              {formatMessage(
+                'No existing {service} resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.',
+                {
+                  service: props.serviceName,
+                }
+              )}
+            </span>
+          )}
+          {!noKeys && subscriptionId && (
+            <div>
+              <Dropdown
+                disabled={!(keys?.length > 0) || nextAction !== 'choose'}
+                label={formatMessage('{service} Key', { service: props.serviceName })}
+                options={
+                  keys.map((p) => {
+                    return { text: p.name, ...p };
+                  }) ?? []
+                }
+                placeholder={formatMessage('Select one')}
+                styles={dropdownStyles}
+                onChange={onChangeKey}
+              />
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          {loading && <Spinner label={loading} labelPosition="right" styles={{ root: { float: 'left' } }} />}
+          <DefaultButton
+            disabled={loading !== undefined}
+            text={formatMessage('Back')}
+            onClick={() => setCurrentPage(1)}
+          />
+          <PrimaryButton
+            disabled={loading !== undefined || !(region && key)}
+            text={formatMessage('Next')}
+            onClick={chooseExistingKey}
+          />
+          <DefaultButton disabled={loading !== undefined} text={formatMessage('Cancel')} onClick={props.onDismiss} />
+        </DialogFooter>
+      </div>
+    );
+  };
+
+  const renderPageCreate = () => {
+    return (
+      <div>
+        <p>
+          {formatMessage(
+            'Input your details below to create a new {service} resource. You will be able to manage your new resource in the Azure portal.',
+            { service: props.serviceName }
+          )}
+        </p>
+
+        <div css={mainElementStyle}>
+          <Dropdown
+            disabled={loading !== undefined || !(availableSubscriptions?.length > 0)}
+            label={formatMessage('Select subscription')}
+            options={
+              availableSubscriptions
+                ?.filter((p) => p.subscriptionId && p.displayName)
+                .map((p) => {
+                  return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
+                }) ?? []
+            }
+            placeholder={formatMessage('Select one')}
+            selectedKey={subscriptionId}
+            styles={dropdownStyles}
+            onChange={onChangeSubscription}
+          />
+          <Dropdown
+            disabled={!subscriptionId || resourceGroups.length === 0 || loading !== undefined}
+            label={formatMessage('Resource group')}
+            options={
+              resourceGroups.map((p) => {
+                return { key: p.id, text: p.name, data: p.data };
+              }) ?? []
+            }
+            placeholder={formatMessage('Select one')}
+            selectedKey={resourceGroupKey}
+            styles={dropdownStyles}
+            onChange={onChangeResourceGroup}
+            onRenderOption={onRenderOption}
+          />
+          {createResourceGroup && (
+            <TextField
+              required
+              aria-label={formatMessage('Resource group name')}
+              data-testid={'resourceGroupName'}
+              disabled={!subscriptionId || loading !== undefined}
+              id={'resourceGroupName'}
+              label={formatMessage('Resource group name')}
+              placeholder={formatMessage('Enter name for new resource group')}
+              styles={{ root: { marginTop: 10 } }}
+              value={newResourceGroupName}
+              onChange={(e, val) => {
+                setNewResourceGroupName(val || '');
+              }}
+            />
+          )}
+          <Dropdown
+            required
+            aria-label={formatMessage('Region')}
+            data-testid={'rootRegion'}
+            disabled={!subscriptionId || loading !== undefined}
+            id={'region'}
+            label={formatMessage('Region')}
+            options={locationList}
+            placeholder={formatMessage('Enter region')}
+            selectedKey={region}
+            styles={dropdownStyles}
+            onChange={handleRegionOnChange}
+          />
+          <TextField
+            required
+            aria-label={formatMessage('Resource name')}
+            data-testid={'resourceName'}
+            disabled={!subscriptionId || loading !== undefined}
+            id={'resourceName'}
+            label={formatMessage('Resource name')}
+            placeholder={formatMessage('Enter name for new resources')}
+            styles={{ root: { marginTop: 10 } }}
+            value={resourceName}
+            onChange={(e, val) => setResourceName(val || '')}
+          />
+        </div>
+        <DialogFooter>
+          {loading && <Spinner label={loading} labelPosition="right" styles={{ root: { float: 'left' } }} />}
+          <DefaultButton
+            disabled={loading !== undefined}
+            text={formatMessage('Back')}
+            onClick={() => setCurrentPage(1)}
+          />
+          <PrimaryButton
+            disabled={
+              loading !== undefined ||
+              !resourceName ||
+              !region ||
+              !resourceGroupKey ||
+              (resourceGroupKey == CREATE_NEW_KEY && !newResourceGroupName)
+            }
+            text={formatMessage('Next')}
+            onClick={createService}
+          />
+          <DefaultButton disabled={loading !== undefined} text={formatMessage('Cancel')} onClick={props.onDismiss} />
+        </DialogFooter>
+      </div>
+    );
+  };
+
+  const renderPageThree = () => {
+    return (
+      <div>
+        <p>{outcomeDescription}</p>
+        <div css={summaryStyles}>{outcomeSummary}</div>
+        {outcomeError && (
+          <p>
+            {formatMessage('If you would like to try again, or select from existing resources, please click “Back”.')}
+          </p>
+        )}
+        <DialogFooter>
+          {outcomeError && <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />}
+          <PrimaryButton text={formatMessage('Done')} onClick={props.onNext} />
+        </DialogFooter>
+      </div>
+    );
+  };
+
+  return (
+    <Fragment>
+      {showAuthDialog && (
+        <AuthDialog
+          needGraph={false}
+          next={hasAuth}
+          onDismiss={() => {
+            setShowAuthDialog(false);
+          }}
+        />
+      )}
+      <ProvisionHandoff
+        developerInstructions={formatMessage(
+          'Copy and share this information with your Azure admin to provision resources on your behalf.'
+        )}
+        handoffInstructions={props.handoffInstructions}
+        hidden={!showHandoff}
+        title={formatMessage('Share resource request')}
+        onBack={() => {
+          setShowHandoff(false);
+          props.setVisible(true);
+        }}
+        onDismiss={() => setShowHandoff(false)}
+      />
+      <Dialog
+        dialogContentProps={{
+          type: DialogType.normal,
+          title:
+            currentPage === 2
+              ? formatMessage('Create new {service} resources', { service: props.serviceName })
+              : formatMessage('Select {service} keys', { service: props.serviceName }),
+        }}
+        hidden={props.hidden || showAuthDialog}
+        minWidth={480}
+        modalProps={{
+          isBlocking: true,
+        }}
+        styles={{ main: { height: 510 } }}
+        onDismiss={props.onDismiss}
+      >
+        {currentPage === 1 && renderPageOne()}
+        {currentPage === 2 && nextAction === 'choose' && renderPageChoose()}
+        {currentPage === 2 && nextAction === 'create' && renderPageCreate()}
+        {currentPage === 3 && renderPageThree()}
+      </Dialog>
+    </Fragment>
+  );
+};
diff --git a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
index d00f25d8ee..d7817238cd 100644
--- a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
+++ b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
@@ -3,615 +3,58 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useState, useEffect, Fragment } from 'react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import formatMessage from 'format-message';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import { useRecoilValue } from 'recoil';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { SubscriptionClient } from '@azure/arm-subscriptions';
-import { Subscription } from '@azure/arm-subscriptions/esm/models';
-import { TokenCredentials } from '@azure/ms-rest-js';
 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 { TokenCredentials } from '@azure/ms-rest-js';
+import formatMessage from 'format-message';
 
-import { AuthClient } from '../../utils/authClient';
-import { AuthDialog } from '../Auth/AuthDialog';
-import { armScopes } from '../../constants';
-import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '../../utils/auth';
-import { dispatcherState } from '../../recoilModel/atoms';
+import { ManageService } from '../ManageService/ManageService';
 
 type ManageSpeechProps = {
   hidden: boolean;
   onDismiss: () => void;
-  setVisibility: (visible: boolean) => void;
-  onGetKey: (settings: { subscriptionKey: string; region: string }) => void;
+  onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
+  setVisible: (value: any) => void;
 };
 
-type KeyRec = {
-  name: string;
-  region: string;
-  resourceGroup: string;
-  key: string;
-};
-
-const dropdownStyles = { dropdown: { width: '100%' } };
-const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: 14 };
-const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
-const mainElementStyle = { marginBottom: 20 };
-const CREATE_NEW_KEY = 'CREATE_NEW';
-const iconStyles = { marginRight: '8px' };
-
 export const ManageSpeech = (props: ManageSpeechProps) => {
-  const [localKey, setLocalKey] = useState<string>('');
-
-  const [showAuthDialog, setShowAuthDialog] = useState(false);
-  const [token, setToken] = useState<string | undefined>();
-
-  const { setApplicationLevelError } = useRecoilValue(dispatcherState);
-  const [subscriptionId, setSubscriptionId] = useState<string>('');
-  const [resourceGroups, setResourceGroups] = useState<any[]>([]);
-  const [createResourceGroup, setCreateResourceGroup] = useState<boolean>(false);
-  const [newResourceGroupName, setNewResourceGroupName] = useState<string>('');
-  const [resourceGroupKey, setResourceGroupKey] = useState<string>('');
-  const [resourceGroup, setResourceGroup] = useState<string>('');
-  const [locationList, setLocationList] = useState<{ key: string; text: string }[]>([]);
-
-  const [showHandoff, setShowHandoff] = useState<boolean>(false);
-  const [resourceName, setResourceName] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
-  const [noKeys, setNoKeys] = useState<boolean>(false);
-  const [nextAction, setNextAction] = useState<string>('create');
-  const [actionOptions, setActionOptions] = useState<IChoiceGroupOption[]>([]);
-  const [availableSubscriptions, setAvailableSubscriptions] = useState<Subscription[]>([]);
-  const [keys, setKeys] = useState<KeyRec[]>([]);
-  const [localRegion, setLocalRegion] = useState<string>('westus');
-
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [outcomeDescription, setOutcomeDescription] = useState<string>('');
-  const [outcomeSummary, setOutcomeSummary] = useState<React.ReactNode>();
-  const [outcomeError, setOutcomeError] = useState<boolean>(false);
-
-  const handoffInstructions = formatMessage(
-    'Using the Azure portal, create a Language Understanding resource. Create these in a subscription that the developer has accesss to. This will result in an authoring key and an endpoint key.  Provide these keys to the developer in a secure manner.'
-  );
-
-  /* Copied from Azure Publishing extension */
-  const getSubscriptions = async (token: string): Promise<Array<Subscription>> => {
-    const tokenCredentials = new TokenCredentials(token);
-    try {
-      const subscriptionClient = new SubscriptionClient(tokenCredentials);
-      const subscriptionsResult = await subscriptionClient.subscriptions.list();
-      // eslint-disable-next-line no-underscore-dangle
-      return subscriptionsResult._response.parsedBody;
-    } catch (err) {
-      setApplicationLevelError(err);
-      return [];
-    }
-  };
-
-  const hasAuth = async () => {
-    let newtoken = '';
-    if (userShouldProvideTokens()) {
-      if (isShowAuthDialog(false)) {
-        setShowAuthDialog(true);
-      }
-      newtoken = getTokenFromCache('accessToken');
-    } else {
-      newtoken = await AuthClient.getAccessToken(armScopes);
-    }
-
-    setToken(newtoken);
-
-    if (newtoken) {
-      // reset the list
-      setAvailableSubscriptions([]);
-
-      // fetch list of available subscriptions
-      setAvailableSubscriptions(await getSubscriptions(newtoken));
-    }
-  };
-
-  useEffect(() => {
-    // reset the ui
-    setSubscriptionId('');
-    setKeys([]);
-    setCurrentPage(1);
-    setActionOptions([
-      { key: 'create', text: formatMessage('Create a new Speech resource'), disabled: true },
-      { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: true },
-      { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-    ]);
-    if (!props.hidden) {
-      hasAuth();
-    }
-  }, [props.hidden]);
-
-  const handleRegionOnChange = (e, value?: IDropdownOption) => {
-    if (value) {
-      setLocalRegion(value.key as string);
-    } else {
-      setLocalRegion('');
-    }
-  };
-
-  const fetchKeys = async (cognitiveServicesManagementClient, accounts) => {
-    const keyList: KeyRec[] = [];
-    for (const account in accounts) {
-      const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1');
-      const name = accounts[account].name;
-      if (resourceGroup && name) {
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name);
-        if (keys?.key1) {
-          keyList.push({
-            name: name,
-            resourceGroup: resourceGroup,
-            region: accounts[account].location || '',
-            key: keys?.key1 || '',
-          });
-        }
-      }
-    }
-    return keyList;
-  };
-
-  const fetchAccounts = async (subscriptionId) => {
-    if (token) {
-      setLoading(true);
-      setNoKeys(false);
-      const tokenCredentials = new TokenCredentials(token);
-      const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
-      const accounts = await cognitiveServicesManagementClient.accounts.list();
-
-      const keys: KeyRec[] = await fetchKeys(
-        cognitiveServicesManagementClient,
-        accounts.filter((a) => a.kind === 'SpeechServices')
-      );
-      setLoading(false);
-      if (keys.length === 0) {
-        setNoKeys(true);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new Speech resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: true },
-        ]);
-      } else {
-        setNoKeys(false);
-        setKeys(keys);
-        setActionOptions([
-          { key: 'create', text: formatMessage('Create a new Speech resource') },
-          { key: 'handoff', text: formatMessage('Generate a resource request'), disabled: false },
-          { key: 'choose', text: formatMessage('Choose from existing'), disabled: false },
-        ]);
-      }
-    }
-  };
-
-  const fetchLocations = async (subscriptionId) => {
-    if (token) {
-      const tokenCredentials = new TokenCredentials(token);
-      const subscriptionClient = new SubscriptionClient(tokenCredentials);
-      const locations = await subscriptionClient.subscriptions.listLocations(subscriptionId);
-      setLocationList(
-        locations.map((location) => {
-          return { key: location.name || '', text: location.displayName || '' };
-        })
-      );
-    }
-  };
-
-  const fetchResourceGroups = async (subscriptionId) => {
-    if (token) {
-      const tokenCredentials = new TokenCredentials(token);
-      const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-      const groups = await resourceClient.resourceGroups.list();
-
-      setResourceGroups([
-        {
-          id: CREATE_NEW_KEY,
-          data: { icon: 'Add' },
-          name: formatMessage('Create new'),
-        },
-        ...groups,
-      ]);
-    }
-  };
-
-  const createResources = async () => {
-    let key = '';
-    const serviceName = `${resourceName}`;
-
-    if (token) {
-      setLoading(true);
-      const tokenCredentials = new TokenCredentials(token);
-
-      const resourceGroupName = resourceGroupKey === CREATE_NEW_KEY ? newResourceGroupName : resourceGroup;
-      if (resourceGroupKey === CREATE_NEW_KEY) {
-        try {
-          const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-          await resourceClient.resourceGroups.createOrUpdate(resourceGroupName, {
-            location: localRegion,
-          });
-        } catch (err) {
-          setOutcomeDescription(
-            formatMessage(
-              'Due to the following error, we were unable to successfully add your selected Speech keys to your bot project:'
-            )
-          );
-          setOutcomeSummary(<p>{err.message}</p>);
-          setOutcomeError(true);
-          setCurrentPage(3);
-          setLoading(false);
-          return;
-        }
-      }
-
-      try {
-        const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(
-          tokenCredentials,
-          subscriptionId
-        );
-        await cognitiveServicesManagementClient.accounts.create(resourceGroupName, serviceName, {
-          kind: 'SpeechServices',
-          sku: {
-            name: 'S0',
-          },
-          location: localRegion,
-        });
-
-        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, serviceName);
-        if (!keys?.key1) {
-          throw new Error('No key found for newly created authoring resource');
-        } else {
-          key = keys.key1;
-          setLocalKey(keys.key1);
-        }
-      } catch (err) {
-        setOutcomeDescription(
-          formatMessage(
-            'Due to the following error, we were unable to successfully add your selected Speech keys to your bot project:'
-          )
-        );
-        setOutcomeSummary(<p>{err.message}</p>);
-        setOutcomeError(true);
-        setCurrentPage(3);
-        setLoading(false);
-        return;
-      }
-
-      setOutcomeDescription(
-        formatMessage('The following Speech resource was successfully created and added to your bot project:')
-      );
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Subscription')}</label>
-            {subscriptionId}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource Group')}</label>
-            {resourceGroupName}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRegion}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Resource name')}</label>
-            {resourceName}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
-
-      // ALL DONE!
-      // this will pass the new values back to the caller
-      // have to wait a second for the key to be available to use
-      // otherwise the ARM api will throw an "unknown error"
-      setTimeout(() => {
-        setLoading(false);
-
-        props.onGetKey({
-          subscriptionKey: key,
-          region: localRegion,
-        });
-
-        setCurrentPage(3);
-      }, 3000);
-    }
-  };
-
-  // allow a user to provide a subscription id if one is missing
-  const onChangeSubscription = async (_, opt) => {
-    // get list of keys for this subscription
-    setSubscriptionId(opt.key);
-    fetchLocations(opt.key);
-    fetchAccounts(opt.key);
-    fetchResourceGroups(opt.key);
-  };
-
-  const onChangeKey = async (_, opt) => {
-    setLocalKey(opt.key);
-    setLocalRegion(opt.data.region);
-  };
-
-  const onChangeAction = async (_, opt) => {
-    setNextAction(opt.key);
-  };
-
-  const onChangeResourceGroup = async (_, opt) => {
-    setResourceGroupKey(opt.key);
-    setResourceGroup(opt.text);
-    if (opt.key === CREATE_NEW_KEY) {
-      setCreateResourceGroup(true);
+  const createService = async (
+    tokenCredentials: TokenCredentials,
+    subscriptionId: string,
+    resourceGroupName: string,
+    resourceName: string,
+    region: string
+  ): Promise<string> => {
+    const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
+    await cognitiveServicesManagementClient.accounts.create(resourceGroupName, resourceName, {
+      kind: 'SpeechServices',
+      sku: {
+        name: 'S0',
+      },
+      location: region,
+    });
+
+    const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, resourceName);
+    if (!keys?.key1) {
+      throw new Error('No key found for newly created authoring resource');
     } else {
-      setCreateResourceGroup(false);
+      return keys.key1;
     }
   };
 
-  const performNextAction = () => {
-    if (nextAction === 'choose') {
-      props.onGetKey({
-        subscriptionKey: localKey,
-        region: localRegion,
-      });
-      setOutcomeDescription(formatMessage('The following Speech key has been successfully added to your bot project:'));
-      setOutcomeSummary(
-        <div>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Key')}</label>
-            {localKey}
-          </p>
-          <p>
-            <label css={summaryLabelStyles}>{formatMessage('Region')}</label>
-            {localRegion}
-          </p>
-        </div>
-      );
-      setOutcomeError(false);
-
-      setCurrentPage(3);
-    } else if (nextAction === 'handoff') {
-      setShowHandoff(true);
-      props.onDismiss();
-    } else {
-      setCurrentPage(2);
-    }
-  };
-
-  const onRenderOption = (option) => {
-    return (
-      <div>
-        {option.data?.icon && <Icon aria-hidden="true" iconName={option.data.icon} style={iconStyles} />}
-        <span>{option.text}</span>
-      </div>
-    );
-  };
-
   return (
-    <Fragment>
-      {showAuthDialog && (
-        <AuthDialog
-          needGraph={false}
-          next={hasAuth}
-          onDismiss={() => {
-            setShowAuthDialog(false);
-          }}
-        />
+    <ManageService
+      createService={createService}
+      handoffInstructions={formatMessage(
+        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a Speech resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffdls'
       )}
-      <ProvisionHandoff
-        developerInstructions={formatMessage(
-          'Copy and share this information with your Azure admin. After your Speech key is provisioned, you will be ready to test your bot with speech.'
-        )}
-        handoffInstructions={handoffInstructions}
-        hidden={!showHandoff}
-        title={formatMessage('Share resource request')}
-        onBack={() => {
-          setShowHandoff(false);
-          props.setVisibility(true);
-        }}
-        onDismiss={() => setShowHandoff(false)}
-      />
-      <Dialog
-        dialogContentProps={{
-          type: DialogType.normal,
-          title: currentPage === 2 ? formatMessage('Create new Speech resources') : formatMessage('Select Speech keys'),
-        }}
-        hidden={props.hidden}
-        minWidth={480}
-        modalProps={{
-          isBlocking: true,
-        }}
-        onDismiss={props.onDismiss}
-      >
-        <div>
-          {currentPage === 1 && (
-            <div>
-              <p>
-                {formatMessage(
-                  'Select your Azure subscription and choose from existing Speech keys, or create a new Speech resource. Learn more'
-                )}
-              </p>
-              <div css={mainElementStyle}>
-                <Dropdown
-                  disabled={!availableSubscriptions?.length}
-                  label={formatMessage('Select subscription')}
-                  options={
-                    availableSubscriptions
-                      ?.filter((p) => p.subscriptionId && p.displayName)
-                      .map((p) => {
-                        return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
-                      }) ?? []
-                  }
-                  placeholder={formatMessage('Select one')}
-                  selectedKey={subscriptionId}
-                  styles={dropdownStyles}
-                  onChange={onChangeSubscription}
-                />
-              </div>
-              <div css={mainElementStyle}>
-                {subscriptionId && (
-                  <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />
-                )}
-
-                <div style={{ marginLeft: 26 }}>
-                  {noKeys && subscriptionId && (
-                    <span style={{ color: 'rgb(161, 159, 157)' }}>
-                      {formatMessage(
-                        'No existing Speech resource found in this subscription. Click “Next” to create a new one.'
-                      )}
-                    </span>
-                  )}
-                  {!noKeys && subscriptionId && (
-                    <div>
-                      <Dropdown
-                        disabled={!keys?.length || nextAction !== 'choose'}
-                        label={formatMessage('Speech key')}
-                        options={
-                          keys.map((p) => {
-                            return { text: p.name, ...p, data: p };
-                          }) ?? []
-                        }
-                        placeholder={formatMessage('Select one')}
-                        styles={dropdownStyles}
-                        onChange={onChangeKey}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-              <DialogFooter>
-                {loading && (
-                  <Spinner
-                    label={formatMessage('Loading keys...')}
-                    labelPosition="right"
-                    styles={{ root: { float: 'left' } }}
-                  />
-                )}
-                <PrimaryButton
-                  disabled={
-                    loading || (nextAction === 'choose' && !localKey) || (nextAction === 'create' && !subscriptionId)
-                  }
-                  text={formatMessage('Next')}
-                  onClick={performNextAction}
-                />
-                <DefaultButton
-                  disabled={loading || showAuthDialog}
-                  text={formatMessage('Cancel')}
-                  onClick={props.onDismiss}
-                />
-              </DialogFooter>
-            </div>
-          )}
-          {currentPage === 2 && (
-            <div>
-              <div css={mainElementStyle}>
-                <p>
-                  {formatMessage(
-                    'Input your details below to create a new Speech resource. You will be able to manage your new resource in the Azure portal. Learn more'
-                  )}
-                </p>
-                <Dropdown
-                  disabled={!resourceGroups.length || loading}
-                  label={formatMessage('Resource group')}
-                  options={
-                    resourceGroups.map((p) => {
-                      return { key: p.id, text: p.name, data: p.data };
-                    }) ?? []
-                  }
-                  placeholder={formatMessage('Select one')}
-                  selectedKey={resourceGroupKey}
-                  styles={dropdownStyles}
-                  onChange={onChangeResourceGroup}
-                  onRenderOption={onRenderOption}
-                />
-                {createResourceGroup && (
-                  <TextField
-                    required
-                    aria-label={formatMessage('Resource group name')}
-                    data-testid={'resourceGroupName'}
-                    disabled={loading}
-                    label={formatMessage('Resource group name')}
-                    placeholder={formatMessage('Enter name for new resource group')}
-                    styles={{ root: { marginTop: 10 } }}
-                    value={newResourceGroupName}
-                    onChange={(e, val) => {
-                      setNewResourceGroupName(val || '');
-                    }}
-                  />
-                )}
-                <Dropdown
-                  required
-                  aria-label={formatMessage('Speech region')}
-                  data-testid={'rootRegion'}
-                  disabled={loading || !locationList}
-                  label={formatMessage('Speech region')}
-                  options={locationList}
-                  placeholder={formatMessage('Enter Speech region')}
-                  selectedKey={localRegion}
-                  styles={dropdownStyles}
-                  onChange={handleRegionOnChange}
-                />
-                <TextField
-                  required
-                  aria-label={formatMessage('Resource name')}
-                  data-testid={'resourceName'}
-                  disabled={loading}
-                  label={formatMessage('Resource name')}
-                  placeholder={formatMessage('Enter name for new Speech resources')}
-                  styles={{ root: { marginTop: 10 } }}
-                  value={resourceName}
-                  onChange={(e, val) => setResourceName(val || '')}
-                />
-              </div>
-              <DialogFooter>
-                {loading && (
-                  <Spinner
-                    label={formatMessage('Creating resources...')}
-                    labelPosition="right"
-                    styles={{ root: { float: 'left' } }}
-                  />
-                )}
-                <DefaultButton disabled={loading} text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />
-                <PrimaryButton
-                  disabled={
-                    loading ||
-                    !resourceName ||
-                    !resourceGroupKey ||
-                    (resourceGroupKey == CREATE_NEW_KEY && !newResourceGroupName)
-                  }
-                  text={formatMessage('Next')}
-                  onClick={createResources}
-                />
-                <DefaultButton disabled={loading} text={formatMessage('Cancel')} onClick={props.onDismiss} />
-              </DialogFooter>
-            </div>
-          )}
-          {currentPage === 3 && (
-            <div>
-              <p>{outcomeDescription}</p>
-              <div css={summaryStyles}>{outcomeSummary}</div>
-              {outcomeError && (
-                <p>
-                  {formatMessage(
-                    'If you would like to try again, or select from existing resources, please click “Back”.'
-                  )}
-                </p>
-              )}
-              <DialogFooter>
-                {outcomeError && <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />}
-                <PrimaryButton text={formatMessage('Done')} onClick={props.onNext} />
-              </DialogFooter>
-            </div>
-          )}
-        </div>
-      </Dialog>
-    </Fragment>
+      hidden={props.hidden}
+      serviceKeyType={'SpeechServices'}
+      serviceName={'Speech'}
+      setVisible={props.setVisible}
+      onDismiss={props.onDismiss}
+      onGetKey={props.onGetKey}
+      onNext={props.onNext}
+    />
   );
 };
diff --git a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
index fe91f067d6..ed2f0f9f8d 100644
--- a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
+++ b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
@@ -31,7 +31,7 @@ const container = css`
 const idsInTab: Record<PivotItemKey, string[]> = {
   Basics: ['runtimeSettings'],
   LuisQna: ['luisKey', 'qnaKey'],
-  Connections: ['connections', 'addNewPublishProfile'],
+  Connections: ['connections'],
   SkillConfig: [],
   Language: [],
 };
diff --git a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
index 03189e35d0..8391db2e61 100644
--- a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
+++ b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
@@ -320,16 +320,16 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
   const updateLuisSettings = (newLuisSettings) => {
     setSettings(projectId, {
       ...mergedSettings,
-      luis: { ...mergedSettings.luis, ...newLuisSettings },
+      luis: { ...mergedSettings.luis, authoringKey: newLuisSettings.key, authoringRegion: newLuisSettings.region },
     });
   };
 
   const updateQNASettings = (newQNASettings) => {
     setSettings(projectId, {
       ...mergedSettings,
-      qna: { ...mergedSettings.qna, ...newQNASettings },
+      qna: { ...mergedSettings.qna, subscriptionKey: newQNASettings.key },
     });
-    setQnASettings(projectId, newQNASettings.subscriptionKey);
+    setQnASettings(projectId, newQNASettings.key);
   };
 
   return (
@@ -418,7 +418,7 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
         />
         <ManageLuis
           hidden={!displayManageLuis}
-          setDisplayManageLuis={setDisplayManageLuis}
+          setVisible={setDisplayManageLuis}
           onDismiss={() => {
             setDisplayManageLuis(false);
           }}
@@ -429,7 +429,7 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
         />
         <ManageQNA
           hidden={!displayManageQNA}
-          setDisplayManageQna={setDisplayManageQNA}
+          setVisible={setDisplayManageQNA}
           onDismiss={() => {
             setDisplayManageQNA(false);
           }}
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
index f6cd5a3866..cc1b59d97c 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
@@ -369,11 +369,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
     };
   };
 
-  const toggleSpeechOn = async (
-    settings: { subscriptionKey: string; region: string },
-    isDefault: boolean,
-    attempt = 0
-  ) => {
+  const toggleSpeechOn = async (settings: { key: string; region: string }, isDefault: boolean, attempt = 0) => {
     setChannelStatus({
       ...channelStatus,
       [CHANNELS.SPEECH]: {
@@ -384,7 +380,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
 
     try {
       await createChannelService(CHANNELS.SPEECH, {
-        cognitiveServiceSubscriptionKey: settings.subscriptionKey,
+        cognitiveServiceSubscriptionKey: settings.key,
         cognitiveServiceRegion: settings.region,
         isDefaultBotForCogSvcAccount: isDefault,
       });
@@ -549,7 +545,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
       )}
       <ManageSpeech
         hidden={!showSpeechModal}
-        setVisibility={setShowSpeechModal}
+        setVisible={setShowSpeechModal}
         onDismiss={() => {
           setShowSpeechModal(false);
         }}

From a63a7321df391dbe9ce0f4a4c54433cddf3de7c6 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 14 Apr 2021 10:23:52 -0500
Subject: [PATCH 02/15] fix height, sort order

---
 .../ManageService/ManageService.tsx           | 305 +++++++++---------
 1 file changed, 157 insertions(+), 148 deletions(-)

diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 95a27f8f73..e4339b1372 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -20,6 +20,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';
@@ -58,6 +59,7 @@ const dropdownStyles = { dropdown: { width: '100%', marginBottom: 20 } };
 const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: 14 };
 const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
 const mainElementStyle = { marginBottom: 20 };
+const dialogBodyStyles = { height: 360 };
 const CREATE_NEW_KEY = 'CREATE_NEW';
 
 export const ManageService = (props: ManageServiceProps) => {
@@ -117,7 +119,7 @@ export const ManageService = (props: ManageServiceProps) => {
       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 [];
@@ -210,7 +212,7 @@ export const ManageService = (props: ManageServiceProps) => {
     if (token) {
       const tokenCredentials = new TokenCredentials(token);
       const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId);
-      const groups = await resourceClient.resourceGroups.list();
+      const groups = sortBy(await resourceClient.resourceGroups.list(), ['name']);
 
       setResourceGroups([
         {
@@ -407,19 +409,21 @@ export const ManageService = (props: ManageServiceProps) => {
   const renderPageOne = () => {
     return (
       <div>
-        <p css={{ marginTop: 0 }}>
-          {formatMessage(
-            'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
-            { service: props.serviceName }
-          )}
-          {props.learnMore ? (
-            <Link href={props.learnMore} target={'_blank'}>
-              {formatMessage('Learn more')}
-            </Link>
-          ) : null}
-        </p>
-        <div css={mainElementStyle}>
-          <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />
+        <div css={dialogBodyStyles}>
+          <p css={{ marginTop: 0 }}>
+            {formatMessage(
+              'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
+              { service: props.serviceName }
+            )}
+            {props.learnMore ? (
+              <Link href={props.learnMore} target={'_blank'}>
+                {formatMessage('Learn more')}
+              </Link>
+            ) : null}
+          </p>
+          <div css={mainElementStyle}>
+            <ChoiceGroup options={actionOptions} selectedKey={nextAction} onChange={onChangeAction} />
+          </div>
         </div>
         <DialogFooter>
           <PrimaryButton disabled={loading !== undefined} text={formatMessage('Next')} onClick={performNextAction} />
@@ -436,61 +440,63 @@ export const ManageService = (props: ManageServiceProps) => {
   const renderPageChoose = () => {
     return (
       <div>
-        <p css={{ marginTop: 0 }}>
-          {formatMessage(
-            'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
-            { service: props.serviceName }
-          )}
-          {props.learnMore ? (
-            <Link href={props.learnMore} target={'_blank'}>
-              {formatMessage('Learn more')}
-            </Link>
-          ) : null}
-        </p>
-        <div css={mainElementStyle}>
-          <Dropdown
-            disabled={!(availableSubscriptions?.length > 0)}
-            label={formatMessage('Select subscription')}
-            options={
-              availableSubscriptions
-                ?.filter((p) => p.subscriptionId && p.displayName)
-                .map((p) => {
-                  return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
-                }) ?? []
-            }
-            placeholder={formatMessage('Select one')}
-            selectedKey={subscriptionId}
-            styles={dropdownStyles}
-            onChange={onChangeSubscription}
-          />
-        </div>
-        <div>
-          {noKeys && subscriptionId && (
-            <span style={{ color: 'rgb(161, 159, 157)' }}>
-              {formatMessage(
-                'No existing {service} resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.',
-                {
-                  service: props.serviceName,
-                }
-              )}
-            </span>
-          )}
-          {!noKeys && subscriptionId && (
-            <div>
-              <Dropdown
-                disabled={!(keys?.length > 0) || nextAction !== 'choose'}
-                label={formatMessage('{service} Key', { service: props.serviceName })}
-                options={
-                  keys.map((p) => {
-                    return { text: p.name, ...p };
+        <div css={dialogBodyStyles}>
+          <p css={{ marginTop: 0 }}>
+            {formatMessage(
+              'Choose from existing {service} keys, create a new {service} resource, or generate a request to handoff to your Azure admin. ',
+              { service: props.serviceName }
+            )}
+            {props.learnMore ? (
+              <Link href={props.learnMore} target={'_blank'}>
+                {formatMessage('Learn more')}
+              </Link>
+            ) : null}
+          </p>
+          <div css={mainElementStyle}>
+            <Dropdown
+              disabled={!(availableSubscriptions?.length > 0)}
+              label={formatMessage('Select subscription')}
+              options={
+                availableSubscriptions
+                  ?.filter((p) => p.subscriptionId && p.displayName)
+                  .map((p) => {
+                    return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
                   }) ?? []
-                }
-                placeholder={formatMessage('Select one')}
-                styles={dropdownStyles}
-                onChange={onChangeKey}
-              />
-            </div>
-          )}
+              }
+              placeholder={formatMessage('Select one')}
+              selectedKey={subscriptionId}
+              styles={dropdownStyles}
+              onChange={onChangeSubscription}
+            />
+          </div>
+          <div>
+            {noKeys && subscriptionId && (
+              <span style={{ color: 'rgb(161, 159, 157)' }}>
+                {formatMessage(
+                  'No existing {service} resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.',
+                  {
+                    service: props.serviceName,
+                  }
+                )}
+              </span>
+            )}
+            {!noKeys && subscriptionId && (
+              <div>
+                <Dropdown
+                  disabled={!(keys?.length > 0) || nextAction !== 'choose'}
+                  label={formatMessage('{service} Key', { service: props.serviceName })}
+                  options={
+                    keys.map((p) => {
+                      return { text: p.name, ...p };
+                    }) ?? []
+                  }
+                  placeholder={formatMessage('Select one')}
+                  styles={dropdownStyles}
+                  onChange={onChangeKey}
+                />
+              </div>
+            )}
+          </div>
         </div>
         <DialogFooter>
           {loading && <Spinner label={loading} labelPosition="right" styles={{ root: { float: 'left' } }} />}
@@ -513,84 +519,86 @@ export const ManageService = (props: ManageServiceProps) => {
   const renderPageCreate = () => {
     return (
       <div>
-        <p>
-          {formatMessage(
-            'Input your details below to create a new {service} resource. You will be able to manage your new resource in the Azure portal.',
-            { service: props.serviceName }
-          )}
-        </p>
+        <div css={dialogBodyStyles}>
+          <p>
+            {formatMessage(
+              'Input your details below to create a new {service} resource. You will be able to manage your new resource in the Azure portal.',
+              { service: props.serviceName }
+            )}
+          </p>
 
-        <div css={mainElementStyle}>
-          <Dropdown
-            disabled={loading !== undefined || !(availableSubscriptions?.length > 0)}
-            label={formatMessage('Select subscription')}
-            options={
-              availableSubscriptions
-                ?.filter((p) => p.subscriptionId && p.displayName)
-                .map((p) => {
-                  return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
+          <div css={mainElementStyle}>
+            <Dropdown
+              disabled={loading !== undefined || !(availableSubscriptions?.length > 0)}
+              label={formatMessage('Select subscription')}
+              options={
+                availableSubscriptions
+                  ?.filter((p) => p.subscriptionId && p.displayName)
+                  .map((p) => {
+                    return { key: p.subscriptionId ?? '', text: p.displayName ?? 'Unnamed' };
+                  }) ?? []
+              }
+              placeholder={formatMessage('Select one')}
+              selectedKey={subscriptionId}
+              styles={dropdownStyles}
+              onChange={onChangeSubscription}
+            />
+            <Dropdown
+              disabled={!subscriptionId || resourceGroups.length === 0 || loading !== undefined}
+              label={formatMessage('Resource group')}
+              options={
+                resourceGroups.map((p) => {
+                  return { key: p.id, text: p.name, data: p.data };
                 }) ?? []
-            }
-            placeholder={formatMessage('Select one')}
-            selectedKey={subscriptionId}
-            styles={dropdownStyles}
-            onChange={onChangeSubscription}
-          />
-          <Dropdown
-            disabled={!subscriptionId || resourceGroups.length === 0 || loading !== undefined}
-            label={formatMessage('Resource group')}
-            options={
-              resourceGroups.map((p) => {
-                return { key: p.id, text: p.name, data: p.data };
-              }) ?? []
-            }
-            placeholder={formatMessage('Select one')}
-            selectedKey={resourceGroupKey}
-            styles={dropdownStyles}
-            onChange={onChangeResourceGroup}
-            onRenderOption={onRenderOption}
-          />
-          {createResourceGroup && (
+              }
+              placeholder={formatMessage('Select one')}
+              selectedKey={resourceGroupKey}
+              styles={dropdownStyles}
+              onChange={onChangeResourceGroup}
+              onRenderOption={onRenderOption}
+            />
+            {createResourceGroup && (
+              <TextField
+                required
+                aria-label={formatMessage('Resource group name')}
+                data-testid={'resourceGroupName'}
+                disabled={!subscriptionId || loading !== undefined}
+                id={'resourceGroupName'}
+                label={formatMessage('Resource group name')}
+                placeholder={formatMessage('Enter name for new resource group')}
+                styles={{ root: { marginTop: 10 } }}
+                value={newResourceGroupName}
+                onChange={(e, val) => {
+                  setNewResourceGroupName(val || '');
+                }}
+              />
+            )}
+            <Dropdown
+              required
+              aria-label={formatMessage('Region')}
+              data-testid={'rootRegion'}
+              disabled={!subscriptionId || loading !== undefined}
+              id={'region'}
+              label={formatMessage('Region')}
+              options={locationList}
+              placeholder={formatMessage('Enter region')}
+              selectedKey={region}
+              styles={dropdownStyles}
+              onChange={handleRegionOnChange}
+            />
             <TextField
               required
-              aria-label={formatMessage('Resource group name')}
-              data-testid={'resourceGroupName'}
+              aria-label={formatMessage('Resource name')}
+              data-testid={'resourceName'}
               disabled={!subscriptionId || loading !== undefined}
-              id={'resourceGroupName'}
-              label={formatMessage('Resource group name')}
-              placeholder={formatMessage('Enter name for new resource group')}
+              id={'resourceName'}
+              label={formatMessage('Resource name')}
+              placeholder={formatMessage('Enter name for new resources')}
               styles={{ root: { marginTop: 10 } }}
-              value={newResourceGroupName}
-              onChange={(e, val) => {
-                setNewResourceGroupName(val || '');
-              }}
+              value={resourceName}
+              onChange={(e, val) => setResourceName(val || '')}
             />
-          )}
-          <Dropdown
-            required
-            aria-label={formatMessage('Region')}
-            data-testid={'rootRegion'}
-            disabled={!subscriptionId || loading !== undefined}
-            id={'region'}
-            label={formatMessage('Region')}
-            options={locationList}
-            placeholder={formatMessage('Enter region')}
-            selectedKey={region}
-            styles={dropdownStyles}
-            onChange={handleRegionOnChange}
-          />
-          <TextField
-            required
-            aria-label={formatMessage('Resource name')}
-            data-testid={'resourceName'}
-            disabled={!subscriptionId || loading !== undefined}
-            id={'resourceName'}
-            label={formatMessage('Resource name')}
-            placeholder={formatMessage('Enter name for new resources')}
-            styles={{ root: { marginTop: 10 } }}
-            value={resourceName}
-            onChange={(e, val) => setResourceName(val || '')}
-          />
+          </div>
         </div>
         <DialogFooter>
           {loading && <Spinner label={loading} labelPosition="right" styles={{ root: { float: 'left' } }} />}
@@ -619,13 +627,15 @@ export const ManageService = (props: ManageServiceProps) => {
   const renderPageThree = () => {
     return (
       <div>
-        <p>{outcomeDescription}</p>
-        <div css={summaryStyles}>{outcomeSummary}</div>
-        {outcomeError && (
-          <p>
-            {formatMessage('If you would like to try again, or select from existing resources, please click “Back”.')}
-          </p>
-        )}
+        <div css={dialogBodyStyles}>
+          <p>{outcomeDescription}</p>
+          <div css={summaryStyles}>{outcomeSummary}</div>
+          {outcomeError && (
+            <p>
+              {formatMessage('If you would like to try again, or select from existing resources, please click “Back”.')}
+            </p>
+          )}
+        </div>
         <DialogFooter>
           {outcomeError && <DefaultButton text={formatMessage('Back')} onClick={() => setCurrentPage(1)} />}
           <PrimaryButton text={formatMessage('Done')} onClick={props.onNext} />
@@ -671,7 +681,6 @@ export const ManageService = (props: ManageServiceProps) => {
         modalProps={{
           isBlocking: true,
         }}
-        styles={{ main: { height: 510 } }}
         onDismiss={props.onDismiss}
       >
         {currentPage === 1 && renderPageOne()}

From 2dfede32b3523f63dab0a8bc8f846ebde20fae07 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 14 Apr 2021 11:08:31 -0500
Subject: [PATCH 03/15] fix typing

---
 .../client/src/components/ManageService/ManageService.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index e4339b1372..64a9188c06 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -88,7 +88,7 @@ export const ManageService = (props: ManageServiceProps) => {
   const [outcomeDescription, setOutcomeDescription] = useState<string>('');
   const [outcomeSummary, setOutcomeSummary] = useState<any>();
   const [outcomeError, setOutcomeError] = useState<boolean>(false);
-  const [locationList, setLocationList] = useState<{ key: string; text: string }[]>(props.regions || []);
+  const [locationList, setLocationList] = useState<IDropdownOption[]>(props.regions || []);
 
   const actionOptions: IChoiceGroupOption[] = [
     { key: 'choose', text: formatMessage('Choose from existing') },

From e192517797c823be806d028d8fe72db198eda87f Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 14 Apr 2021 11:50:17 -0500
Subject: [PATCH 04/15] use shared colors

---
 .../client/src/components/ManageService/ManageService.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 64a9188c06..4f359492c7 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -21,6 +21,7 @@ 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 { NeutralColors } from '@uifabric/fluent-theme';
 
 import { AuthClient } from '../../utils/authClient';
 import { AuthDialog } from '../../components/Auth/AuthDialog';
@@ -471,7 +472,7 @@ export const ManageService = (props: ManageServiceProps) => {
           </div>
           <div>
             {noKeys && subscriptionId && (
-              <span style={{ color: 'rgb(161, 159, 157)' }}>
+              <span style={{ color: NeutralColors.gray100 }}>
                 {formatMessage(
                   'No existing {service} resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.',
                   {

From 15e918980e0a15cf328f5672c7f1e423274c6818 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 14 Apr 2021 11:55:04 -0500
Subject: [PATCH 05/15] refactor handoff instructions to share some text

---
 .../packages/client/src/components/ManageLuis/ManageLuis.tsx | 2 +-
 .../packages/client/src/components/ManageQNA/ManageQNA.tsx   | 2 +-
 .../client/src/components/ManageService/ManageService.tsx    | 5 ++++-
 .../client/src/components/ManageSpeech/ManageSpeech.tsx      | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
index b0b876d879..fdd6eb890c 100644
--- a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
+++ b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
@@ -50,7 +50,7 @@ export const ManageLuis = (props: ManageLuisProps) => {
     <ManageService
       createService={createService}
       handoffInstructions={formatMessage(
-        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a Language Understanding resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffluis'
+        '1. Using the Azure portal, please create a Language Understanding resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffluis'
       )}
       hidden={props.hidden}
       regions={LUIS_REGIONS}
diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index a46333f065..4ddbfddbb5 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -160,7 +160,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
     <ManageService
       createService={createService}
       handoffInstructions={formatMessage(
-        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a QnAMaker resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffqnamaker'
+        '1. Using the Azure portal, please create a QnAMaker resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffqnamaker'
       )}
       hidden={props.hidden}
       regions={QNA_REGIONS}
diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 4f359492c7..591bf127e4 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -660,7 +660,10 @@ export const ManageService = (props: ManageServiceProps) => {
         developerInstructions={formatMessage(
           'Copy and share this information with your Azure admin to provision resources on your behalf.'
         )}
-        handoffInstructions={props.handoffInstructions}
+        handoffInstructions={formatMessage(
+          'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n{instructions}',
+          { instructions: props.handoffInstructions }
+        )}
         hidden={!showHandoff}
         title={formatMessage('Share resource request')}
         onBack={() => {
diff --git a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
index d7817238cd..bb35455d2f 100644
--- a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
+++ b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
@@ -46,7 +46,7 @@ export const ManageSpeech = (props: ManageSpeechProps) => {
     <ManageService
       createService={createService}
       handoffInstructions={formatMessage(
-        'I am working on a Microsoft Bot Framework project, and I now require some Azure resources to be created. Please follow the instructions below to create these resources and provide them to me.\n\n1. Using the Azure portal, please create a Speech resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffdls'
+        '1. Using the Azure portal, please create a Speech resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffdls'
       )}
       hidden={props.hidden}
       serviceKeyType={'SpeechServices'}

From 001f1c28bafe6a667046e32e16b2659762802e3a Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Thu, 15 Apr 2021 16:38:56 -0500
Subject: [PATCH 06/15] Update BotProjectsSettingsTabView.tsx

---
 .../client/src/pages/botProject/BotProjectsSettingsTabView.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
index 821e604703..7164c7b2db 100644
--- a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
+++ b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
@@ -30,7 +30,6 @@ const container = css`
 
 const idsInTab: Record<PivotItemKey, string[]> = {
   Basics: ['runtimeSettings'],
-  LuisQna: ['luisKey', 'qnaKey'],
   Connections: ['connections'],
   LuisQna: ['luisKey', 'qnaKey', 'luisRegion'],
   SkillConfig: [],

From cfa2ba8424e1073981ea55450b9fe6b3e1acc907 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Thu, 15 Apr 2021 17:38:58 -0500
Subject: [PATCH 07/15] refactor qna maker provisioning into a background
 process

---
 .../src/components/ManageQNA/ManageQNA.tsx    | 141 ++---------
 .../ManageService/ManageService.tsx           |  33 +--
 .../botProject/BotProjectsSettingsTabView.tsx |   1 -
 .../src/pages/publish/Notifications.tsx       |  40 ++++
 .../src/recoilModel/dispatchers/index.ts      |   2 +
 .../recoilModel/dispatchers/provisionQNA.ts   | 220 ++++++++++++++++++
 .../server/src/controllers/project.ts         |  19 +-
 7 files changed, 311 insertions(+), 145 deletions(-)
 create mode 100644 Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts

diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index 4ddbfddbb5..c204d56f7e 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -3,14 +3,14 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices';
 import { TokenCredentials } from '@azure/ms-rest-js';
-import { SearchManagementClient } from '@azure/arm-search';
-import { WebSiteManagementClient } from '@azure/arm-appservice';
-import { ApplicationInsightsManagementClient } from '@azure/arm-appinsights';
 import formatMessage from 'format-message';
+import { useRecoilValue } from 'recoil';
 
+import { dispatcherState, settingsState } from '../../recoilModel';
 import { ManageService } from '../ManageService/ManageService';
+import { currentProjectIdState } from '../../recoilModel';
+import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 
 const QNA_REGIONS = [{ key: 'westus', text: 'westus' }];
 
@@ -23,6 +23,10 @@ type ManageQNAProps = {
 };
 
 export const ManageQNA = (props: ManageQNAProps) => {
+  const { createQNA } = useRecoilValue(dispatcherState);
+  const projectId = useRecoilValue(currentProjectIdState);
+  const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector) || projectId;
+
   const createService = async (
     tokenCredentials: TokenCredentials,
     subscriptionId: string,
@@ -30,134 +34,17 @@ export const ManageQNA = (props: ManageQNAProps) => {
     resourceName: string,
     region: string
   ): Promise<string> => {
-    const qnaMakerSearchName = `${resourceName}-search`.toLowerCase().replace('_', '');
-    const qnaMakerWebAppName = `${resourceName}-qnahost`.toLowerCase().replace('_', '');
-    const qnaMakerServiceName = `${resourceName}-qna`;
-
-    const searchManagementClient = new SearchManagementClient(tokenCredentials as any, subscriptionId);
-    await searchManagementClient.services.createOrUpdate(resourceGroupName, qnaMakerSearchName, {
-      location: region,
-      sku: {
-        name: 'standard',
-      },
-      replicaCount: 1,
-      partitionCount: 1,
-      hostingMode: 'default',
-    });
-
-    const webSiteManagementClient = new WebSiteManagementClient(tokenCredentials, subscriptionId);
-    await webSiteManagementClient.appServicePlans.createOrUpdate(resourceGroupName, resourceGroupName, {
-      location: region,
-      sku: {
-        name: 'S1',
-        tier: 'Standard',
-        size: 'S1',
-        family: 'S',
-        capacity: 1,
-      },
-    });
-    // deploy or update exisiting app insights component
-    const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
-      tokenCredentials,
-      subscriptionId
-    );
-    await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
-      location: region,
-      applicationType: 'web',
-      kind: 'web',
-    });
-
-    // add web config for websites
-    const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
-      .primaryKey;
-    const appInsightsComponent = await applicationInsightsManagementClient.components.get(
-      resourceGroupName,
-      resourceGroupName
-    );
-    const userAppInsightsKey = appInsightsComponent.instrumentationKey;
-    const userAppInsightsName = resourceGroupName;
-    const userAppInsightsAppId = appInsightsComponent.appId;
-    const primaryEndpointKey = `${qnaMakerWebAppName}-PrimaryEndpointKey`;
-    const secondaryEndpointKey = `${qnaMakerWebAppName}-SecondaryEndpointKey`;
-    const defaultAnswer = 'No good match found in KB.';
-    const QNAMAKER_EXTENSION_VERSION = 'latest';
-
-    // deploy qna host webapp
-    const webAppResult = await webSiteManagementClient.webApps.createOrUpdate(resourceGroupName, qnaMakerWebAppName, {
-      name: qnaMakerWebAppName,
-      serverFarmId: resourceGroupName,
-      location: region,
-      siteConfig: {
-        cors: {
-          allowedOrigins: ['*'],
-        },
-        appSettings: [
-          {
-            name: 'AzureSearchName',
-            value: qnaMakerSearchName,
-          },
-          {
-            name: 'AzureSearchAdminKey',
-            value: azureSearchAdminKey,
-          },
-          {
-            name: 'UserAppInsightsKey',
-            value: userAppInsightsKey,
-          },
-          {
-            name: 'UserAppInsightsName',
-            value: userAppInsightsName,
-          },
-          {
-            name: 'UserAppInsightsAppId',
-            value: userAppInsightsAppId,
-          },
-          {
-            name: 'PrimaryEndpointKey',
-            value: primaryEndpointKey,
-          },
-          {
-            name: 'SecondaryEndpointKey',
-            value: secondaryEndpointKey,
-          },
-          {
-            name: 'DefaultAnswer',
-            value: defaultAnswer,
-          },
-          {
-            name: 'QNAMAKER_EXTENSION_VERSION',
-            value: QNAMAKER_EXTENSION_VERSION,
-          },
-        ],
-      },
-      enabled: true,
-    });
-
-    // Create qna account
-    const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId);
-    await cognitiveServicesManagementClient.accounts.create(resourceGroupName, qnaMakerServiceName, {
-      kind: 'QnAMaker',
-      sku: {
-        name: 'F0',
-      },
-      location: region,
-      properties: {
-        apiProperties: {
-          qnaRuntimeEndpoint: `https://${webAppResult.hostNames?.[0]}`,
-        },
-      },
-    });
+    // hide modal
+    props.setVisible(false);
 
-    const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, qnaMakerServiceName);
-    if (!keys?.key1) {
-      throw new Error('No key found for newly created authoring resource');
-    } else {
-      return keys.key1;
-    }
+    // start background QNA
+    createQNA(rootBotProjectId, tokenCredentials, subscriptionId, resourceGroupName, resourceName, region);
+    return '';
   };
 
   return (
     <ManageService
+      createServiceInBackground
       createService={createService}
       handoffInstructions={formatMessage(
         '1. Using the Azure portal, please create a QnAMaker resource on my behalf.\n2. Once provisioned, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffqnamaker'
diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 591bf127e4..64e6417982 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -37,6 +37,7 @@ type ManageServiceProps = {
     resourceName: string,
     region: string
   ) => Promise<string>;
+  createServiceInBackground?: boolean;
   handoffInstructions: string;
   hidden: boolean;
   learnMore?: string;
@@ -259,21 +260,25 @@ export const ManageService = (props: ManageServiceProps) => {
       }
 
       try {
-        const newKey = await props.createService(
-          tokenCredentials,
-          subscriptionId,
-          resourceGroupName,
-          resourceName,
-          region
-        );
+        if (props.createServiceInBackground) {
+          props.createService(tokenCredentials, subscriptionId, resourceGroupName, resourceName, region);
+        } else {
+          const newKey = await props.createService(
+            tokenCredentials,
+            subscriptionId,
+            resourceGroupName,
+            resourceName,
+            region
+          );
 
-        setKey(newKey);
-        // ALL DONE!
-        // this will pass the new values back to the caller
-        props.onGetKey({
-          key: newKey,
-          region: region,
-        });
+          setKey(newKey);
+          // ALL DONE!
+          // this will pass the new values back to the caller
+          props.onGetKey({
+            key: newKey,
+            region: region,
+          });
+        }
       } catch (err) {
         setOutcomeDescription(
           formatMessage(
diff --git a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
index 821e604703..7164c7b2db 100644
--- a/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
+++ b/Composer/packages/client/src/pages/botProject/BotProjectsSettingsTabView.tsx
@@ -30,7 +30,6 @@ const container = css`
 
 const idsInTab: Record<PivotItemKey, string[]> = {
   Basics: ['runtimeSettings'],
-  LuisQna: ['luisKey', 'qnaKey'],
   Connections: ['connections'],
   LuisQna: ['luisKey', 'qnaKey', 'luisRegion'],
   SkillConfig: [],
diff --git a/Composer/packages/client/src/pages/publish/Notifications.tsx b/Composer/packages/client/src/pages/publish/Notifications.tsx
index ae19861462..6f77de8828 100644
--- a/Composer/packages/client/src/pages/publish/Notifications.tsx
+++ b/Composer/packages/client/src/pages/publish/Notifications.tsx
@@ -90,3 +90,43 @@ export const getPendingNotificationCardProps = (items: BotStatus[]): CardProps =
     ),
   };
 };
+
+export const getPendingQNANotificationCardProps = (): CardProps => {
+  return {
+    title: '',
+    description: formatMessage(`Creating QnA Maker`),
+    type: 'pending',
+    onRenderCardContent: (props) => (
+      <div css={cardContent}>
+        <Icon css={infoType} iconName="CloudUpload" />
+        <div css={cardDetail}>
+          <ProgressIndicator label={props.description} />
+        </div>
+      </div>
+    ),
+  };
+};
+
+export const getCompletedQNANotificationCardProps = (opts: { time: number }): CardProps => {
+  const statusIconStyle = css({
+    margin: '12px 0 0 -1px',
+    width: '12px',
+    height: '12px',
+    fontSize: '12px',
+    color: '#27AE60',
+  });
+  return {
+    title: '',
+    description: formatMessage(`Your QnA Maker is ready! It took { time } minutes to complete.`, opts),
+    type: 'pending',
+    onRenderCardContent: (props) => (
+      <div css={cardContent}>
+        <Icon css={infoType} iconName="CloudUpload" />
+        <Icon css={statusIconStyle} iconName={'SkypeCircleCheck'} />
+        <div css={cardDetail}>
+          <div css={cardDescription}>{props.description}</div>
+        </div>
+      </div>
+    ),
+  };
+};
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/index.ts b/Composer/packages/client/src/recoilModel/dispatchers/index.ts
index 62a7b3bcde..0e0d9b9c7f 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/index.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/index.ts
@@ -16,6 +16,7 @@ import { builderDispatcher } from './builder';
 import { navigationDispatcher } from './navigation';
 import { publisherDispatcher } from './publisher';
 import { provisionDispatcher } from './provision';
+import { provisionQNADispatcher } from './provisionQNA';
 import { settingsDispatcher } from './setting';
 import { skillDispatcher } from './skill';
 import { userDispatcher } from './user';
@@ -46,6 +47,7 @@ const createDispatchers = () => {
     ...navigationDispatcher(),
     ...publisherDispatcher(),
     ...provisionDispatcher(),
+    ...provisionQNADispatcher(),
     ...settingsDispatcher(),
     ...skillDispatcher(),
     ...userDispatcher(),
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
new file mode 100644
index 0000000000..3948540db2
--- /dev/null
+++ b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
@@ -0,0 +1,220 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { CallbackInterface, useRecoilCallback } from 'recoil';
+import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices';
+import { TokenCredentials } from '@azure/ms-rest-js';
+import { SearchManagementClient } from '@azure/arm-search';
+import { WebSiteManagementClient } from '@azure/arm-appservice';
+import { ApplicationInsightsManagementClient } from '@azure/arm-appinsights';
+
+import {
+  getCompletedQNANotificationCardProps,
+  getPendingQNANotificationCardProps,
+} from '../../pages/publish/Notifications';
+import settingStorage from '../../utils/dialogSettingStorage';
+import { dispatcherState, settingsState } from '../atoms';
+
+import { setError } from './shared';
+import httpClient from './../../utils/httpUtil';
+import { createNotification, addNotificationInternal, deleteNotificationInternal } from './notification';
+// poll for the endpoint key til it is available
+const fetchEndpointKey = async (projectId: string, subscriptionKey: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    httpClient
+      .post(`/projects/${projectId}/qnaSettings/set`, {
+        projectId,
+        subscriptionKey,
+      })
+      .then((response) => {
+        if (response.status === 200) {
+          resolve(response.data);
+        } else if (response.status === 202) {
+          setTimeout(() => {
+            fetchEndpointKey(projectId, subscriptionKey).then(resolve);
+          }, 3000);
+        } else {
+          reject(response.data);
+        }
+      });
+  });
+};
+
+export const provisionQNADispatcher = () => {
+  const createQNA = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async (
+      projectId: string,
+      tokenCredentials: TokenCredentials,
+      subscriptionId: string,
+      resourceGroupName: string,
+      resourceName: string,
+      region: string
+    ) => {
+      const { snapshot } = callbackHelpers;
+
+      const startTime = new Date().getTime();
+
+      const notification = createNotification(getPendingQNANotificationCardProps());
+      // add that notification
+      addNotificationInternal(callbackHelpers, notification);
+
+      try {
+        const qnaMakerSearchName = `${resourceName}-search`.toLowerCase().replace('_', '');
+        const qnaMakerWebAppName = `${resourceName}-qnahost`.toLowerCase().replace('_', '');
+        const qnaMakerServiceName = `${resourceName}-qna`;
+
+        const searchManagementClient = new SearchManagementClient(tokenCredentials as any, subscriptionId);
+        await searchManagementClient.services.createOrUpdate(resourceGroupName, qnaMakerSearchName, {
+          location: region,
+          sku: {
+            name: 'standard',
+          },
+          replicaCount: 1,
+          partitionCount: 1,
+          hostingMode: 'default',
+        });
+
+        const webSiteManagementClient = new WebSiteManagementClient(tokenCredentials, subscriptionId);
+        await webSiteManagementClient.appServicePlans.createOrUpdate(resourceGroupName, resourceGroupName, {
+          location: region,
+          sku: {
+            name: 'S1',
+            tier: 'Standard',
+            size: 'S1',
+            family: 'S',
+            capacity: 1,
+          },
+        });
+        // deploy or update exisiting app insights component
+        const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
+          tokenCredentials,
+          subscriptionId
+        );
+        await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
+          location: region,
+          applicationType: 'web',
+          kind: 'web',
+        });
+
+        // add web config for websites
+        const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
+          .primaryKey;
+        const appInsightsComponent = await applicationInsightsManagementClient.components.get(
+          resourceGroupName,
+          resourceGroupName
+        );
+        const userAppInsightsKey = appInsightsComponent.instrumentationKey;
+        const userAppInsightsName = resourceGroupName;
+        const userAppInsightsAppId = appInsightsComponent.appId;
+        const primaryEndpointKey = `${qnaMakerWebAppName}-PrimaryEndpointKey`;
+        const secondaryEndpointKey = `${qnaMakerWebAppName}-SecondaryEndpointKey`;
+        const defaultAnswer = 'No good match found in KB.';
+        const QNAMAKER_EXTENSION_VERSION = 'latest';
+
+        // deploy qna host webapp
+        const webAppResult = await webSiteManagementClient.webApps.createOrUpdate(
+          resourceGroupName,
+          qnaMakerWebAppName,
+          {
+            name: qnaMakerWebAppName,
+            serverFarmId: resourceGroupName,
+            location: region,
+            siteConfig: {
+              cors: {
+                allowedOrigins: ['*'],
+              },
+              appSettings: [
+                {
+                  name: 'AzureSearchName',
+                  value: qnaMakerSearchName,
+                },
+                {
+                  name: 'AzureSearchAdminKey',
+                  value: azureSearchAdminKey,
+                },
+                {
+                  name: 'UserAppInsightsKey',
+                  value: userAppInsightsKey,
+                },
+                {
+                  name: 'UserAppInsightsName',
+                  value: userAppInsightsName,
+                },
+                {
+                  name: 'UserAppInsightsAppId',
+                  value: userAppInsightsAppId,
+                },
+                {
+                  name: 'PrimaryEndpointKey',
+                  value: primaryEndpointKey,
+                },
+                {
+                  name: 'SecondaryEndpointKey',
+                  value: secondaryEndpointKey,
+                },
+                {
+                  name: 'DefaultAnswer',
+                  value: defaultAnswer,
+                },
+                {
+                  name: 'QNAMAKER_EXTENSION_VERSION',
+                  value: QNAMAKER_EXTENSION_VERSION,
+                },
+              ],
+            },
+            enabled: true,
+          }
+        );
+
+        // Create qna account
+        const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(
+          tokenCredentials,
+          subscriptionId
+        );
+        await cognitiveServicesManagementClient.accounts.create(resourceGroupName, qnaMakerServiceName, {
+          kind: 'QnAMaker',
+          sku: {
+            name: 'F0',
+          },
+          location: region,
+          properties: {
+            apiProperties: {
+              qnaRuntimeEndpoint: `https://${webAppResult.hostNames?.[0]}`,
+            },
+          },
+        });
+
+        const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroupName, qnaMakerServiceName);
+        if (!keys?.key1) {
+          throw new Error('No key found for newly created authoring resource');
+        } else {
+          const endpointKey = await fetchEndpointKey(projectId, keys.key1);
+
+          const dispatcher = await snapshot.getPromise(dispatcherState);
+          const currentSettings = await snapshot.getPromise(settingsState(projectId));
+
+          dispatcher.setSettings(projectId, {
+            ...currentSettings,
+            qna: {
+              ...currentSettings.qna,
+              subscriptionKey: keys.key1,
+              endpointKey: endpointKey,
+            },
+          });
+          settingStorage.setField(projectId, 'qna.endpointKey', endpointKey);
+
+          deleteNotificationInternal(callbackHelpers, notification.id);
+          const timeElapsed = Math.floor((new Date().getTime() - startTime) / (60 * 1000));
+          const completedNotification = createNotification(getCompletedQNANotificationCardProps({ time: timeElapsed }));
+          addNotificationInternal(callbackHelpers, completedNotification);
+        }
+      } catch (error) {
+        if (notification) deleteNotificationInternal(callbackHelpers, notification.id);
+        setError(callbackHelpers, error);
+      }
+    }
+  );
+
+  return { createQNA };
+};
diff --git a/Composer/packages/server/src/controllers/project.ts b/Composer/packages/server/src/controllers/project.ts
index 75e6fbadb5..4aad9efcac 100644
--- a/Composer/packages/server/src/controllers/project.ts
+++ b/Composer/packages/server/src/controllers/project.ts
@@ -392,9 +392,22 @@ async function setQnASettings(req: Request, res: Response) {
       const qnaEndpointKey = await currentProject.updateQnaEndpointKey(req.body.subscriptionKey);
       res.status(200).json(qnaEndpointKey);
     } catch (error) {
-      res.status(400).json({
-        message: error instanceof Error ? error.message : error,
-      });
+      // QNA maker will occasionally fail to do this
+      // instead of failing, we need to tell composer to retry
+      if (
+        error.message ===
+          'Access denied due to invalid subscription key or wrong API endpoint. Make sure to provide a valid key for an active subscription and use a correct regional API endpoint for your resource.' ||
+        error.message ===
+          'No Endpoint keys found. If this is a new service, please wait a minimum of 10 minutes for the runtime to be ready.'
+      ) {
+        res.status(202).json({
+          message: 'Waiting for QnA Maker',
+        });
+      } else {
+        res.status(400).json({
+          message: error instanceof Error ? error.message : error,
+        });
+      }
     }
   } else {
     res.status(404).json({

From 4ca1b914ba55a452ea720c8e37d033e81e7fdf4c Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 10:31:03 -0500
Subject: [PATCH 08/15] fix linter quible:w

---
 Composer/packages/client/src/pages/publish/Notifications.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/publish/Notifications.tsx b/Composer/packages/client/src/pages/publish/Notifications.tsx
index 6f77de8828..b7fccef494 100644
--- a/Composer/packages/client/src/pages/publish/Notifications.tsx
+++ b/Composer/packages/client/src/pages/publish/Notifications.tsx
@@ -117,7 +117,7 @@ export const getCompletedQNANotificationCardProps = (opts: { time: number }): Ca
   });
   return {
     title: '',
-    description: formatMessage(`Your QnA Maker is ready! It took { time } minutes to complete.`, opts),
+    description: formatMessage(`Your QnA Maker is ready! It took { time } minutes to complete.`, { time: opts.time }),
     type: 'pending',
     onRenderCardContent: (props) => (
       <div css={cardContent}>

From 7d8d9900e495614157b6f01c598a940da80a71d4 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 13:03:11 -0500
Subject: [PATCH 09/15] remove dep

---
 Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index c204d56f7e..4b65b30607 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -7,7 +7,7 @@ import { TokenCredentials } from '@azure/ms-rest-js';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 
-import { dispatcherState, settingsState } from '../../recoilModel';
+import { dispatcherState } from '../../recoilModel';
 import { ManageService } from '../ManageService/ManageService';
 import { currentProjectIdState } from '../../recoilModel';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';

From dc359eceb32965c056c803a7eb5d9029bf1a00f8 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 13:48:44 -0500
Subject: [PATCH 10/15] rename setVisible to onToggleVisibility

---
 .../GetStarted/GetStartedNextSteps.tsx           |  4 ++--
 .../src/components/ManageLuis/ManageLuis.tsx     |  4 ++--
 .../src/components/ManageQNA/ManageQNA.tsx       |  6 +++---
 .../components/ManageService/ManageService.tsx   | 16 ++++------------
 .../src/components/ManageSpeech/ManageSpeech.tsx |  4 ++--
 .../pages/botProject/RootBotExternalService.tsx  |  4 ++--
 .../pages/botProject/adapters/ABSChannels.tsx    |  2 +-
 .../src/recoilModel/dispatchers/project.ts       |  1 +
 8 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx b/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
index 7430ec76db..17c7745a12 100644
--- a/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
+++ b/Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
@@ -247,23 +247,23 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       <div css={{ paddingTop: 20, paddingLeft: 27, paddingRight: 20 }}>
         <ManageLuis
           hidden={!displayManageLuis}
-          setVisible={setDisplayManageLuis}
           onDismiss={hideManageLuis}
           onGetKey={updateLuisSettings}
           onNext={() => {
             hideManageLuis();
             doNextStep('luis');
           }}
+          onToggleVisibility={setDisplayManageLuis}
         />
         <ManageQNA
           hidden={!displayManageQNA}
-          setVisible={setDisplayManageQNA}
           onDismiss={hideManageQNA}
           onGetKey={updateQNASettings}
           onNext={() => {
             hideManageQNA();
             doNextStep('qna');
           }}
+          onToggleVisibility={setDisplayManageQNA}
         />
 
         {highlightLUIS && (
diff --git a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
index fdd6eb890c..2e1183a4c8 100644
--- a/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
+++ b/Composer/packages/client/src/components/ManageLuis/ManageLuis.tsx
@@ -15,7 +15,7 @@ type ManageLuisProps = {
   onDismiss: () => void;
   onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
-  setVisible: (value: any) => void;
+  onToggleVisibility: (visible: boolean) => void;
 };
 
 export const ManageLuis = (props: ManageLuisProps) => {
@@ -56,10 +56,10 @@ export const ManageLuis = (props: ManageLuisProps) => {
       regions={LUIS_REGIONS}
       serviceKeyType={'LUIS.Authoring'}
       serviceName={'LUIS'}
-      setVisible={props.setVisible}
       onDismiss={props.onDismiss}
       onGetKey={props.onGetKey}
       onNext={props.onNext}
+      onToggleVisibility={props.onToggleVisibility}
     />
   );
 };
diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index 4b65b30607..bdcb525661 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -19,7 +19,7 @@ type ManageQNAProps = {
   onDismiss: () => void;
   onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
-  setVisible: (value: any) => void;
+  onToggleVisibility: (visible: boolean) => void;
 };
 
 export const ManageQNA = (props: ManageQNAProps) => {
@@ -35,7 +35,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
     region: string
   ): Promise<string> => {
     // hide modal
-    props.setVisible(false);
+    props.onToggleVisibility(false);
 
     // start background QNA
     createQNA(rootBotProjectId, tokenCredentials, subscriptionId, resourceGroupName, resourceName, region);
@@ -53,10 +53,10 @@ export const ManageQNA = (props: ManageQNAProps) => {
       regions={QNA_REGIONS}
       serviceKeyType={'QnAMaker'}
       serviceName={'QnA Maker'}
-      setVisible={props.setVisible}
       onDismiss={props.onDismiss}
       onGetKey={props.onGetKey}
       onNext={props.onNext}
+      onToggleVisibility={props.onToggleVisibility}
     />
   );
 };
diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 64e6417982..7d3b1a22bd 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -47,7 +47,7 @@ type ManageServiceProps = {
   serviceName: string;
   regions?: IDropdownOption[];
   serviceKeyType: string;
-  setVisible: (value: any) => void;
+  onToggleVisibility: (visible: boolean) => void;
 };
 
 type KeyRec = {
@@ -247,11 +247,7 @@ export const ManageService = (props: ManageServiceProps) => {
               { service: props.serviceName }
             )
           );
-          setOutcomeSummary(
-            <div>
-              <p>{err.message}</p>
-            </div>
-          );
+          setOutcomeSummary(<p>{err.message}</p>);
           setOutcomeError(true);
           setCurrentPage(3);
           setLoading(undefined);
@@ -286,11 +282,7 @@ export const ManageService = (props: ManageServiceProps) => {
             { service: props.serviceName }
           )
         );
-        setOutcomeSummary(
-          <div>
-            <p>{err.message}</p>
-          </div>
-        );
+        setOutcomeSummary(<p>{err.message}</p>);
         setOutcomeError(true);
         setCurrentPage(3);
         setLoading(undefined);
@@ -673,7 +665,7 @@ export const ManageService = (props: ManageServiceProps) => {
         title={formatMessage('Share resource request')}
         onBack={() => {
           setShowHandoff(false);
-          props.setVisible(true);
+          props.onToggleVisibility(true);
         }}
         onDismiss={() => setShowHandoff(false)}
       />
diff --git a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
index bb35455d2f..625e757239 100644
--- a/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
+++ b/Composer/packages/client/src/components/ManageSpeech/ManageSpeech.tsx
@@ -14,7 +14,7 @@ type ManageSpeechProps = {
   onDismiss: () => void;
   onGetKey: (settings: { key: string; region: string }) => void;
   onNext?: () => void;
-  setVisible: (value: any) => void;
+  onToggleVisibility: (visible: boolean) => void;
 };
 
 export const ManageSpeech = (props: ManageSpeechProps) => {
@@ -51,10 +51,10 @@ export const ManageSpeech = (props: ManageSpeechProps) => {
       hidden={props.hidden}
       serviceKeyType={'SpeechServices'}
       serviceName={'Speech'}
-      setVisible={props.setVisible}
       onDismiss={props.onDismiss}
       onGetKey={props.onGetKey}
       onNext={props.onNext}
+      onToggleVisibility={props.onToggleVisibility}
     />
   );
 };
diff --git a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
index 1fcf55b73d..3ba9791068 100644
--- a/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
+++ b/Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx
@@ -426,7 +426,6 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
         />
         <ManageLuis
           hidden={!displayManageLuis}
-          setVisible={setDisplayManageLuis}
           onDismiss={() => {
             setDisplayManageLuis(false);
           }}
@@ -434,10 +433,10 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
           onNext={() => {
             setDisplayManageLuis(false);
           }}
+          onToggleVisibility={setDisplayManageLuis}
         />
         <ManageQNA
           hidden={!displayManageQNA}
-          setVisible={setDisplayManageQNA}
           onDismiss={() => {
             setDisplayManageQNA(false);
           }}
@@ -445,6 +444,7 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
           onNext={() => {
             setDisplayManageQNA(false);
           }}
+          onToggleVisibility={setDisplayManageQNA}
         />
       </div>
     </CollapsableWrapper>
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
index 3523173f22..8ccc6f927b 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ABSChannels.tsx
@@ -531,7 +531,6 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
       )}
       <ManageSpeech
         hidden={!showSpeechModal}
-        setVisible={setShowSpeechModal}
         onDismiss={() => {
           setShowSpeechModal(false);
         }}
@@ -541,6 +540,7 @@ export const ABSChannels: React.FC<RuntimeSettingsProps> = (props) => {
         onNext={() => {
           setShowSpeechModal(false);
         }}
+        onToggleVisibility={setShowSpeechModal}
       />
       <div>
         <Dropdown
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/project.ts b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
index 3d6f2fbba8..449a25aede 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/project.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/project.ts
@@ -583,6 +583,7 @@ export const projectDispatcher = () => {
             } else {
               // failure
               callbackHelpers.set(botOpeningState, false);
+
               callbackHelpers.set(botOpeningMessage, response.data.latestMessage);
               clearInterval(timer);
             }

From e6c8bd493cf7a8dc847b428179d0a673d96779fa Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 14:49:58 -0500
Subject: [PATCH 11/15] Use shared color

---
 Composer/packages/client/src/pages/publish/Notifications.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/publish/Notifications.tsx b/Composer/packages/client/src/pages/publish/Notifications.tsx
index b7fccef494..e9fcd0d512 100644
--- a/Composer/packages/client/src/pages/publish/Notifications.tsx
+++ b/Composer/packages/client/src/pages/publish/Notifications.tsx
@@ -5,6 +5,7 @@ import { jsx, css } from '@emotion/core';
 import formatMessage from 'format-message';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { SharedColors } from '@uifabric/fluent-theme';
 
 import { CardProps } from '../../components/Notifications/NotificationCard';
 
@@ -113,7 +114,7 @@ export const getCompletedQNANotificationCardProps = (opts: { time: number }): Ca
     width: '12px',
     height: '12px',
     fontSize: '12px',
-    color: '#27AE60',
+    color: SharedColors.cyanBlue10,
   });
   return {
     title: '',

From 5a8dfd79301521a0df106d8622307fd844163e98 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 15:26:02 -0500
Subject: [PATCH 12/15] add conditional around missing hostname

---
 .../client/src/recoilModel/dispatchers/provisionQNA.ts      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
index 3948540db2..61d8864bb1 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
@@ -167,6 +167,10 @@ export const provisionQNADispatcher = () => {
           }
         );
 
+        if (!webAppResult.hostNames?.length) {
+          throw new Error('App service creation failed to return host name.');
+        }
+
         // Create qna account
         const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(
           tokenCredentials,
@@ -180,7 +184,7 @@ export const provisionQNADispatcher = () => {
           location: region,
           properties: {
             apiProperties: {
-              qnaRuntimeEndpoint: `https://${webAppResult.hostNames?.[0]}`,
+              qnaRuntimeEndpoint: `https://${webAppResult.hostNames[0]}`,
             },
           },
         });

From 4f405173ce80eb6e81ad4ff47af5ac61f04fc490 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Fri, 16 Apr 2021 15:26:09 -0500
Subject: [PATCH 13/15] add conditional around missing hostname

---
 .../packages/client/src/recoilModel/dispatchers/provisionQNA.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
index 61d8864bb1..5f791b280e 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
@@ -167,7 +167,7 @@ export const provisionQNADispatcher = () => {
           }
         );
 
-        if (!webAppResult.hostNames?.length) {
+        if (!webAppResult?.hostNames?.length) {
           throw new Error('App service creation failed to return host name.');
         }
 

From c125c44ddb755a2c0ecd5d1725291eed0d7e086b Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Tue, 20 Apr 2021 08:57:16 -0500
Subject: [PATCH 14/15] remove duplicate import

---
 Composer/packages/client/src/pages/publish/Notifications.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/publish/Notifications.tsx b/Composer/packages/client/src/pages/publish/Notifications.tsx
index 2dad962969..faa33dcd9f 100644
--- a/Composer/packages/client/src/pages/publish/Notifications.tsx
+++ b/Composer/packages/client/src/pages/publish/Notifications.tsx
@@ -5,7 +5,6 @@ import { jsx, css } from '@emotion/core';
 import formatMessage from 'format-message';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
-import { SharedColors } from '@uifabric/fluent-theme';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { CommunicationColors, FontSizes, SharedColors } from '@uifabric/fluent-theme';
 

From ceb0ab5d9b8413eb84a9f06fa1805748475c1a57 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Tue, 20 Apr 2021 16:04:14 -0500
Subject: [PATCH 15/15] add ability to specify pricing tiers when provisioing a
 qna

---
 .../src/components/ManageQNA/ManageQNA.tsx    |  18 ++-
 .../ManageService/ManageService.tsx           |  45 +++++--
 .../recoilModel/dispatchers/provisionQNA.ts   | 118 +++++++++++++-----
 3 files changed, 137 insertions(+), 44 deletions(-)

diff --git a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
index bdcb525661..3400334c3e 100644
--- a/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
+++ b/Composer/packages/client/src/components/ManageQNA/ManageQNA.tsx
@@ -13,6 +13,10 @@ import { currentProjectIdState } from '../../recoilModel';
 import { rootBotProjectIdSelector } from '../../recoilModel/selectors/project';
 
 const QNA_REGIONS = [{ key: 'westus', text: 'westus' }];
+const QNA_TIERS = [
+  { key: 'free', text: 'Free' },
+  { key: 'paid', text: 'Paid' },
+];
 
 type ManageQNAProps = {
   hidden: boolean;
@@ -32,13 +36,22 @@ export const ManageQNA = (props: ManageQNAProps) => {
     subscriptionId: string,
     resourceGroupName: string,
     resourceName: string,
-    region: string
+    region: string,
+    tier?: string
   ): Promise<string> => {
     // hide modal
     props.onToggleVisibility(false);
 
     // start background QNA
-    createQNA(rootBotProjectId, tokenCredentials, subscriptionId, resourceGroupName, resourceName, region);
+    createQNA(
+      rootBotProjectId,
+      tokenCredentials,
+      subscriptionId,
+      resourceGroupName,
+      resourceName,
+      region,
+      tier || 'free'
+    );
     return '';
   };
 
@@ -53,6 +66,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
       regions={QNA_REGIONS}
       serviceKeyType={'QnAMaker'}
       serviceName={'QnA Maker'}
+      tiers={QNA_TIERS}
       onDismiss={props.onDismiss}
       onGetKey={props.onGetKey}
       onNext={props.onNext}
diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx
index 7d3b1a22bd..45468e863b 100644
--- a/Composer/packages/client/src/components/ManageService/ManageService.tsx
+++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx
@@ -35,7 +35,8 @@ type ManageServiceProps = {
     subscriptionId: string,
     resourceGroupName: string,
     resourceName: string,
-    region: string
+    region: string,
+    tier?: string
   ) => Promise<string>;
   createServiceInBackground?: boolean;
   handoffInstructions: string;
@@ -47,6 +48,7 @@ type ManageServiceProps = {
   serviceName: string;
   regions?: IDropdownOption[];
   serviceKeyType: string;
+  tiers?: IDropdownOption[];
   onToggleVisibility: (visible: boolean) => void;
 };
 
@@ -57,11 +59,12 @@ type KeyRec = {
   key: string;
 };
 
-const dropdownStyles = { dropdown: { width: '100%', marginBottom: 20 } };
+const dropdownStyles = { dropdown: { width: '100%', marginBottom: 10 } };
+const inputStyles = { root: { width: '100%', marginBottom: 10 } };
 const summaryLabelStyles = { display: 'block', color: '#605E5C', fontSize: 14 };
 const summaryStyles = { background: '#F3F2F1', padding: '1px 1rem' };
 const mainElementStyle = { marginBottom: 20 };
-const dialogBodyStyles = { height: 360 };
+const dialogBodyStyles = { height: 480 };
 const CREATE_NEW_KEY = 'CREATE_NEW';
 
 export const ManageService = (props: ManageServiceProps) => {
@@ -75,6 +78,7 @@ export const ManageService = (props: ManageServiceProps) => {
   const [newResourceGroupName, setNewResourceGroupName] = useState<string>('');
   const [resourceGroupKey, setResourceGroupKey] = useState<string>('');
   const [resourceGroup, setResourceGroup] = useState<string>('');
+  const [tier, setTier] = useState<string>('');
 
   const [showHandoff, setShowHandoff] = useState<boolean>(false);
   const [resourceName, setResourceName] = useState<string>('');
@@ -168,6 +172,14 @@ export const ManageService = (props: ManageServiceProps) => {
     }
   };
 
+  const handleTierOnChange = (e, value: IDropdownOption | undefined) => {
+    if (value != null) {
+      setTier(value.key as string);
+    } else {
+      setTier('');
+    }
+  };
+
   const fetchKeys = async (cognitiveServicesManagementClient, accounts) => {
     const keyList: KeyRec[] = [];
     for (const account in accounts) {
@@ -257,14 +269,15 @@ export const ManageService = (props: ManageServiceProps) => {
 
       try {
         if (props.createServiceInBackground) {
-          props.createService(tokenCredentials, subscriptionId, resourceGroupName, resourceName, region);
+          props.createService(tokenCredentials, subscriptionId, resourceGroupName, resourceName, region, tier);
         } else {
           const newKey = await props.createService(
             tokenCredentials,
             subscriptionId,
             resourceGroupName,
             resourceName,
-            region
+            region,
+            tier
           );
 
           setKey(newKey);
@@ -518,7 +531,7 @@ export const ManageService = (props: ManageServiceProps) => {
     return (
       <div>
         <div css={dialogBodyStyles}>
-          <p>
+          <p css={{ marginTop: 0 }}>
             {formatMessage(
               'Input your details below to create a new {service} resource. You will be able to manage your new resource in the Azure portal.',
               { service: props.serviceName }
@@ -564,7 +577,7 @@ export const ManageService = (props: ManageServiceProps) => {
                 id={'resourceGroupName'}
                 label={formatMessage('Resource group name')}
                 placeholder={formatMessage('Enter name for new resource group')}
-                styles={{ root: { marginTop: 10 } }}
+                styles={inputStyles}
                 value={newResourceGroupName}
                 onChange={(e, val) => {
                   setNewResourceGroupName(val || '');
@@ -592,10 +605,25 @@ export const ManageService = (props: ManageServiceProps) => {
               id={'resourceName'}
               label={formatMessage('Resource name')}
               placeholder={formatMessage('Enter name for new resources')}
-              styles={{ root: { marginTop: 10 } }}
+              styles={inputStyles}
               value={resourceName}
               onChange={(e, val) => setResourceName(val || '')}
             />
+            {props.tiers && (
+              <Dropdown
+                required
+                aria-label={formatMessage('Pricing tier')}
+                data-testid={'tier'}
+                disabled={!subscriptionId || loading !== undefined}
+                id={'tier'}
+                label={formatMessage('Pricing tier')}
+                options={props.tiers}
+                placeholder={formatMessage('Select one')}
+                selectedKey={tier}
+                styles={dropdownStyles}
+                onChange={handleTierOnChange}
+              />
+            )}
           </div>
         </div>
         <DialogFooter>
@@ -611,6 +639,7 @@ export const ManageService = (props: ManageServiceProps) => {
               !resourceName ||
               !region ||
               !resourceGroupKey ||
+              (props.tiers && !tier) ||
               (resourceGroupKey == CREATE_NEW_KEY && !newResourceGroupName)
             }
             text={formatMessage('Next')}
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
index 5f791b280e..7da779d8bf 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/provisionQNA.ts
@@ -6,6 +6,7 @@ import { CallbackInterface, useRecoilCallback } from 'recoil';
 import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices';
 import { TokenCredentials } from '@azure/ms-rest-js';
 import { SearchManagementClient } from '@azure/arm-search';
+import { SkuName } from '@azure/arm-search/lib/models';
 import { WebSiteManagementClient } from '@azure/arm-appservice';
 import { ApplicationInsightsManagementClient } from '@azure/arm-appinsights';
 
@@ -19,6 +20,57 @@ import { dispatcherState, settingsState } from '../atoms';
 import { setError } from './shared';
 import httpClient from './../../utils/httpUtil';
 import { createNotification, addNotificationInternal, deleteNotificationInternal } from './notification';
+
+type SkuList = {
+  search: {
+    name: SkuName;
+  };
+  qna: {
+    name: string;
+  };
+  appservice: {
+    name: string;
+    tier: string;
+    size: string;
+    family: string;
+    capacity: number;
+  };
+  appinsights?: boolean;
+};
+
+const FREE_SKUS: SkuList = {
+  search: {
+    name: 'free',
+  },
+  appservice: {
+    name: 'F1',
+    tier: 'Free',
+    size: 'F1',
+    family: 'F',
+    capacity: 1,
+  },
+  qna: {
+    name: 'F0',
+  },
+};
+
+const PAID_SKUS: SkuList = {
+  search: {
+    name: 'standard',
+  },
+  appservice: {
+    name: 'S1',
+    tier: 'Standard',
+    size: 'S1',
+    family: 'S',
+    capacity: 1,
+  },
+  qna: {
+    name: 'S0',
+  },
+  appinsights: true,
+};
+
 // poll for the endpoint key til it is available
 const fetchEndpointKey = async (projectId: string, subscriptionKey: string): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -49,11 +101,12 @@ export const provisionQNADispatcher = () => {
       subscriptionId: string,
       resourceGroupName: string,
       resourceName: string,
-      region: string
+      region: string,
+      tier: string
     ) => {
       const { snapshot } = callbackHelpers;
-
       const startTime = new Date().getTime();
+      const skus: SkuList = tier === 'free' ? FREE_SKUS : PAID_SKUS;
 
       const notification = createNotification(getPendingQNANotificationCardProps());
       // add that notification
@@ -67,9 +120,7 @@ export const provisionQNADispatcher = () => {
         const searchManagementClient = new SearchManagementClient(tokenCredentials as any, subscriptionId);
         await searchManagementClient.services.createOrUpdate(resourceGroupName, qnaMakerSearchName, {
           location: region,
-          sku: {
-            name: 'standard',
-          },
+          sku: skus.search,
           replicaCount: 1,
           partitionCount: 1,
           hostingMode: 'default',
@@ -78,40 +129,41 @@ export const provisionQNADispatcher = () => {
         const webSiteManagementClient = new WebSiteManagementClient(tokenCredentials, subscriptionId);
         await webSiteManagementClient.appServicePlans.createOrUpdate(resourceGroupName, resourceGroupName, {
           location: region,
-          sku: {
-            name: 'S1',
-            tier: 'Standard',
-            size: 'S1',
-            family: 'S',
-            capacity: 1,
-          },
-        });
-        // deploy or update exisiting app insights component
-        const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
-          tokenCredentials,
-          subscriptionId
-        );
-        await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
-          location: region,
-          applicationType: 'web',
-          kind: 'web',
+          sku: skus.appservice,
         });
 
         // add web config for websites
-        const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
-          .primaryKey;
-        const appInsightsComponent = await applicationInsightsManagementClient.components.get(
-          resourceGroupName,
-          resourceGroupName
-        );
-        const userAppInsightsKey = appInsightsComponent.instrumentationKey;
-        const userAppInsightsName = resourceGroupName;
-        const userAppInsightsAppId = appInsightsComponent.appId;
         const primaryEndpointKey = `${qnaMakerWebAppName}-PrimaryEndpointKey`;
         const secondaryEndpointKey = `${qnaMakerWebAppName}-SecondaryEndpointKey`;
         const defaultAnswer = 'No good match found in KB.';
         const QNAMAKER_EXTENSION_VERSION = 'latest';
 
+        const azureSearchAdminKey = (await searchManagementClient.adminKeys.get(resourceGroupName, qnaMakerSearchName))
+          .primaryKey;
+
+        // if app insights is included, set this up too
+        let userAppInsightsAppId, userAppInsightsKey, userAppInsightsName;
+        if (skus.appinsights) {
+          // deploy or update exisiting app insights component
+          const applicationInsightsManagementClient = new ApplicationInsightsManagementClient(
+            tokenCredentials,
+            subscriptionId
+          );
+          await applicationInsightsManagementClient.components.createOrUpdate(resourceGroupName, resourceGroupName, {
+            location: region,
+            applicationType: 'web',
+            kind: 'web',
+          });
+
+          const appInsightsComponent = await applicationInsightsManagementClient.components.get(
+            resourceGroupName,
+            resourceGroupName
+          );
+          userAppInsightsKey = appInsightsComponent.instrumentationKey;
+          userAppInsightsName = resourceGroupName;
+          userAppInsightsAppId = appInsightsComponent.appId;
+        }
+
         // deploy qna host webapp
         const webAppResult = await webSiteManagementClient.webApps.createOrUpdate(
           resourceGroupName,
@@ -178,9 +230,7 @@ export const provisionQNADispatcher = () => {
         );
         await cognitiveServicesManagementClient.accounts.create(resourceGroupName, qnaMakerServiceName, {
           kind: 'QnAMaker',
-          sku: {
-            name: 'F0',
-          },
+          sku: skus.qna,
           location: region,
           properties: {
             apiProperties: {