fix: ui copy updates

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -14,7 +14,7 @@ context('Luis Deploy', () => {
 
   it('can deploy luis success', () => {
     cy.visitPage('Project settings');
-    cy.findByText('Development Resources').click();
+    cy.findByText('Development resources').click();
     cy.findAllByTestId('rootLUISAuthoringKey').type('12345678', { delay: 200 });
     cy.findAllByTestId('rootLUISRegion').click();
     cy.findByText('West US').click();

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

@@ -35,10 +35,10 @@ export const GetStarted: React.FC<GetStartedProps> = (props) => {
     return (
       <Stack grow styles={{ root: { alignSelf: 'flex-start', padding: '0 20px' } }}>
         <Pivot styles={{ link: { fontSize: '20px' }, linkIsSelected: { fontSize: '20px' } }}>
-          <PivotItem headerText={formatMessage('Next steps')}>
+          <PivotItem headerText={formatMessage('Get started')}>
             <GetStartedNextSteps {...props} />
           </PivotItem>
-          <PivotItem headerText={formatMessage('Learning')}>
+          <PivotItem headerText={formatMessage('Learn more')}>
             <GetStartedLearn projectId={projectId} onDismiss={onDismiss} />
           </PivotItem>
         </Pivot>

Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx

@@ -132,8 +132,10 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
     if (props.requiresLUIS) {
       newNextSteps.push({
         key: 'luis',
-        label: formatMessage('Add a LUIS key'),
-        description: formatMessage('Setup Language Understanding so that you can start and test your bot.'),
+        label: formatMessage('Set up Language Understanding'),
+        description: formatMessage(
+          'Use machine learning to understand natural language input and direct the conversation flow.'
+        ),
         learnMore: 'https://aka.ms/composer-luis-learnmore',
         required: true,
         checked: hasLUIS,
@@ -153,8 +155,10 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
     if (props.requiresQNA) {
       newNextSteps.push({
         key: 'qna',
-        label: formatMessage('Add a QnA Maker key'),
-        description: formatMessage('Your template requires QnA Maker to access content for your bot.'),
+        label: formatMessage('Set up QnA Maker'),
+        description: formatMessage(
+          'Use Azure QnA Maker to create a simple question-and-answer bot from a website FAQ.'
+        ),
         learnMore: 'https://aka.ms/composer-addqnamaker-learnmore',
         required: true,
         checked: hasQNA,
@@ -196,7 +200,9 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       newRecomendedSteps.push({
         key: 'publishing',
         label: formatMessage('Create a publishing profile'),
-        description: formatMessage('Set up hosting and other Azure resources to enable publishing'),
+        description: formatMessage(
+          'A publishing profile provides the secure connectivity required to publish your bot.'
+        ),
         checked: hasPublishingProfile,
         learnMore: 'https://aka.ms/composer-getstarted-publishingprofile',
         onClick: () => {
@@ -225,8 +231,10 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
 
     newRecomendedSteps.push({
       key: 'editlg',
-      label: formatMessage('Edit what your bot says'),
-      description: formatMessage('Customize your bot by editing and adding bot responses.'),
+      label: formatMessage('Edit bot responses'),
+      description: formatMessage(
+        "Define your bot's responses, add phrase variations, execute simple expressions based on context, or refer to conversational memory."
+      ),
       learnMore: 'https://aka.ms/composer-getstarted-editbotsays',
       checked: false,
       onClick: () => {
@@ -237,8 +245,8 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
     });
     newRecomendedSteps.push({
       key: 'editlu',
-      label: formatMessage('Train your language model'),
-      description: formatMessage('Ensure your bot can understand your users by frequently training your LUIS model.'),
+      label: formatMessage('Edit user input and triggers'),
+      description: formatMessage('Define user input and trigger phrases to direct the conversation flow.'),
       learnMore: 'https://aka.ms/composer-luis-learnmore',
       checked: false,
       onClick: () => {
@@ -254,7 +262,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       {
         key: 'packages',
         label: formatMessage('Add packages'),
-        description: formatMessage('Visit the Package manager to browse packages to add to your bot.'),
+        description: formatMessage('Extend your bot with reusable dialogs, bot response templates and custom actions.'),
         learnMore: 'https://aka.ms/composer-getstarted-addpackages',
         checked: false,
         onClick: () => {
@@ -265,10 +273,8 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       },
       {
         key: 'insights',
-        label: formatMessage('Enable Insights'),
-        description: formatMessage(
-          'Collect service-level and conversation-level data to help gauge the performance and efficacy of your bot.'
-        ),
+        label: formatMessage('Enable App Insights'),
+        description: formatMessage('Collect information about the use and performance of your bot.'),
         learnMore: 'https://aka.ms/composer-getstarted-enableinsights',
         checked: false,
         onClick: () => {
@@ -279,8 +285,10 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
       },
       {
         key: 'devops',
-        label: formatMessage('Publish to Dev Ops'),
-        description: formatMessage('Learn how to publish to a Dev Ops pipeline using CI / CD.'),
+        label: formatMessage('Set up continuous deployment (DevOps)'),
+        description: formatMessage(
+          'Build a continuous integration and deployment (CI/CD) pipeline with Azure Resource Manager templates.'
+        ),
         learnMore: 'https://aka.ms/bfcomposercicd',
         checked: false,
         onClick: () => {

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

@@ -50,13 +50,16 @@ export const ManageLuis = (props: ManageLuisProps) => {
     <ManageService
       createService={createService}
       handoffInstructions={formatMessage(
-        '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'
+        '1. Using the Azure portal, please create a Language Understanding resource.\n2. Once created, securely share the resulting credentials with me as described in the link below.\n\nDetailed instructions:\nhttps://aka.ms/bfcomposerhandoffluis'
       )}
       hidden={props.hidden}
+      introText={formatMessage(
+        'To understand natural language input and direct the conversation flow, your bot needs a language understanding service. '
+      )}
       learnMore={'https://aka.ms/composer-luis-learnmore'}
       regions={LUIS_REGIONS}
       serviceKeyType={'LUIS.Authoring'}
-      serviceName={'LUIS'}
+      serviceName={'Language Understanding'}
       onDismiss={props.onDismiss}
       onGetKey={props.onGetKey}
       onNext={props.onNext}

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

@@ -63,6 +63,7 @@ export const ManageQNA = (props: ManageQNAProps) => {
         '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}
+      introText={formatMessage('Use Azure QnA Maker to create a simple question-and-answer bot from a website FAQ. ')}
       learnMore={'https://aka.ms/composer-addqnamaker-learnmore'}
       regions={QNA_REGIONS}
       serviceKeyType={'QnAMaker'}

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

@@ -23,6 +23,7 @@ import { ProvisionHandoff } from '@bfc/ui-shared';
 import sortBy from 'lodash/sortBy';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { AzureTenant } from '@botframework-composer/types';
+import { escapeRegExp } from 'lodash';
 
 import TelemetryClient from '../../telemetry/TelemetryClient';
 import { AuthClient } from '../../utils/authClient';
@@ -42,6 +43,7 @@ type ManageServiceProps = {
   createServiceInBackground?: boolean;
   handoffInstructions: string;
   hidden: boolean;
+  introText: string;
   learnMore?: string;
   onDismiss: () => void;
   onGetKey: (settings: { key: string; region: string }) => void;
@@ -95,6 +97,7 @@ export const ManageService = (props: ManageServiceProps) => {
   const [availableSubscriptions, setAvailableSubscriptions] = useState<Subscription[]>([]);
   const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState<string>();
   const [keys, setKeys] = useState<KeyRec[]>([]);
+  const [dialogTitle, setDialogTitle] = useState<string>('');
 
   const [currentStep, setCurrentStep] = useState<Step>('intro');
   const [outcomeDescription, setOutcomeDescription] = useState<string>('');
@@ -103,12 +106,12 @@ export const ManageService = (props: ManageServiceProps) => {
   const [locationList, setLocationList] = useState<IDropdownOption[]>(props.regions || []);
 
   const actionOptions: IChoiceGroupOption[] = [
-    { key: 'choose', text: formatMessage('Choose from existing') },
+    { key: 'choose', text: formatMessage('Use existing resources') },
     {
       key: 'create',
-      text: formatMessage('Create a new {service} resource', { service: props.serviceName }),
+      text: formatMessage('Create and configure new Azure resources', { service: props.serviceName }),
     },
-    { key: 'handoff', text: formatMessage('Handoff to admin') },
+    { key: 'handoff', text: formatMessage('Generate instructions for Azure administrator') },
   ];
 
   const fetchLocations = async (subscriptionId) => {
@@ -505,9 +508,7 @@ export const ManageService = (props: ManageServiceProps) => {
       <div>
         <div css={dialogBodyStyles}>
           <p css={{ marginTop: 0 }}>
-            {formatMessage(
-              'Select your Azure directory, then choose the subscription where your existing resource is located and the keys you want to use. '
-            )}
+            {props.introText}
             {props.learnMore ? (
               <Link href={props.learnMore} target={'_blank'}>
                 {formatMessage('Learn more')}
@@ -536,7 +537,7 @@ export const ManageService = (props: ManageServiceProps) => {
         <div css={dialogBodyStyles}>
           <p css={{ marginTop: 0 }}>
             {formatMessage(
-              'Select your Azure directory, then choose the subscription where you’d like your new {service} resource. ',
+              'Select your Azure directory, then choose the subscription where your existing {service} resource is located. ',
               { service: props.serviceName }
             )}
             {props.learnMore ? (
@@ -562,15 +563,15 @@ export const ManageService = (props: ManageServiceProps) => {
               required
               disabled={!(availableSubscriptions?.length > 0)}
               errorMessage={subscriptionsErrorMessage}
-              label={formatMessage('Subscription')}
+              label={formatMessage('Azure subscription')}
               options={
                 availableSubscriptions
                   ?.filter((p) => p.subscriptionId && p.displayName)
                   .map((p) => {
                     return { key: p.subscriptionId ?? '', text: p.displayName ?? formatMessage('Unnamed') };
                   }) ?? []
               }
-              placeholder={formatMessage('Select one')}
+              placeholder={formatMessage('Select a subscription')}
               selectedKey={subscriptionId}
               styles={dropdownStyles}
               onChange={onChangeSubscription}
@@ -591,13 +592,13 @@ export const ManageService = (props: ManageServiceProps) => {
               <div>
                 <Dropdown
                   disabled={!(keys?.length > 0) || nextAction !== 'choose'}
-                  label={formatMessage('{service} Key', { service: props.serviceName })}
+                  label={formatMessage('{service} resource name', { service: props.serviceName })}
                   options={
                     keys.map((p) => {
                       return { text: p.name, ...p };
                     }) ?? []
                   }
-                  placeholder={formatMessage('Select one')}
+                  placeholder={formatMessage('Select resource')}
                   styles={dropdownStyles}
                   onChange={onChangeKey}
                 />
@@ -624,22 +625,21 @@ export const ManageService = (props: ManageServiceProps) => {
       <div>
         <div css={dialogBodyStyles}>
           <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 }
-            )}
+            {formatMessage('Select the resource group and region in which your {service} service will be created.', {
+              service: props.serviceName,
+            })}
           </p>
 
           <div css={mainElementStyle}>
             <Dropdown
               disabled={!subscriptionId || resourceGroups.length === 0 || !!loading}
-              label={formatMessage('Resource group')}
+              label={formatMessage('Azure resource group')}
               options={
                 resourceGroups.map((p) => {
                   return { key: p.id, text: p.name, data: p.data };
                 }) ?? []
               }
-              placeholder={formatMessage('Select one')}
+              placeholder={formatMessage('Select a resource group')}
               selectedKey={resourceGroupKey}
               styles={dropdownStyles}
               onChange={onChangeResourceGroup}
@@ -669,18 +669,18 @@ export const ManageService = (props: ManageServiceProps) => {
               id={'region'}
               label={formatMessage('Region')}
               options={locationList}
-              placeholder={formatMessage('Enter region')}
+              placeholder={formatMessage('Select region')}
               selectedKey={region}
               styles={dropdownStyles}
               onChange={handleRegionOnChange}
             />
             <TextField
               required
-              aria-label={formatMessage('Resource name')}
+              aria-label={formatMessage('{service} resource name', { service: props.serviceName })}
               data-testid={'resourceName'}
               disabled={!subscriptionId || !!loading}
               id={'resourceName'}
-              label={formatMessage('Resource name')}
+              label={formatMessage('{service} resource name', { service: props.serviceName })}
               placeholder={formatMessage('Enter name for new resources')}
               styles={inputStyles}
               value={resourceName}
@@ -780,15 +780,15 @@ export const ManageService = (props: ManageServiceProps) => {
               required
               disabled={availableSubscriptions?.length === 0}
               errorMessage={subscriptionsErrorMessage}
-              label={formatMessage('Subscription')}
+              label={formatMessage('Azure subscription')}
               options={
                 availableSubscriptions
                   ?.filter((p) => p.subscriptionId && p.displayName)
                   .map((p) => {
                     return { key: p.subscriptionId ?? '', text: p.displayName ?? formatMessage('Unnamed') };
                   }) ?? []
               }
-              placeholder={formatMessage('Select one')}
+              placeholder={formatMessage('Select subscription')}
               selectedKey={subscriptionId}
               styles={dropdownStyles}
               onChange={onChangeSubscription}
@@ -828,6 +828,24 @@ export const ManageService = (props: ManageServiceProps) => {
     }
   };
 
+  useEffect(() => {
+    switch (currentStep) {
+      case 'intro':
+        setDialogTitle(formatMessage('Set up {service}', { service: props.serviceName }));
+        break;
+      case 'subscription':
+        if (nextAction === 'choose') {
+          setDialogTitle(formatMessage('Select {service} resources', { service: props.serviceName }));
+        } else {
+          setDialogTitle(formatMessage('Create {service} resources', { service: props.serviceName }));
+        }
+        break;
+      case 'resourceCreation':
+        setDialogTitle(formatMessage('Create {service} resources', { service: props.serviceName }));
+        break;
+    }
+  }, [currentStep, props.serviceName]);
+
   return (
     <Fragment>
       {showAuthDialog && (
@@ -841,14 +859,14 @@ export const ManageService = (props: ManageServiceProps) => {
       )}
       <ProvisionHandoff
         developerInstructions={formatMessage(
-          'Copy and share this information with your Azure admin to provision resources on your behalf.'
+          'If Azure resources and subscription are managed by others, use the following information to request creation of the resources that you need to build and run your bot.'
         )}
         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 }
+          'I am creating a conversational experience using Microsoft Bot Framework project. For my project to work, it needs Azure resources including {service}. Below are the steps to create these resources.\n\n{instructions}',
+          { instructions: props.handoffInstructions, service: props.serviceName }
         )}
         hidden={!showHandoff}
-        title={formatMessage('Share resource request')}
+        title={formatMessage('Generate instructions for Azure administrator')}
         onBack={() => {
           setShowHandoff(false);
           props.onToggleVisibility(true);
@@ -858,10 +876,7 @@ export const ManageService = (props: ManageServiceProps) => {
       <Dialog
         dialogContentProps={{
           type: DialogType.normal,
-          title:
-            nextAction === 'create'
-              ? formatMessage('Create new {service} resource', { service: props.serviceName })
-              : formatMessage('Select {service} key', { service: props.serviceName }),
+          title: dialogTitle,
         }}
         hidden={props.hidden || showAuthDialog}
         minWidth={480}

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

@@ -49,6 +49,7 @@ export const ManageSpeech = (props: ManageSpeechProps) => {
         '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}
+      introText={formatMessage('Use Speech to enable voice input and output for your bot.')}
       serviceKeyType={'SpeechServices'}
       serviceName={'Speech'}
       onDismiss={props.onDismiss}

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

@@ -216,7 +216,7 @@ export const ProjectTree: React.FC<Props> = ({
     };
     const menu: TreeMenuItem[] = [
       {
-        label: formatMessage('Add a trigger'),
+        label: formatMessage('Add new trigger'),
         icon: 'Add',
         onClick: () => {
           onDialogCreateTrigger(skillId, dialog.id);
@@ -230,7 +230,7 @@ export const ProjectTree: React.FC<Props> = ({
     ];
 
     const QnAMenuItem = {
-      label: formatMessage('Add new knowledge base'),
+      label: formatMessage('Add QnA Maker knowledge base'),
       icon: 'Add',
       onClick: () => {
         createQnAFromUrlDialogBegin({ projectId: skillId, dialogId: dialog.id });