fix: ui copy updates

Composer/cypress/integration/DesignPage.spec.ts

@@ -80,7 +80,7 @@ context('breadcrumb', () => {
     cy.findByTestId('DialogHeader-TestBot_TestSample').within(() => {
       cy.findByTestId('dialogMoreButton').click({ force: true });
     });
-    cy.findAllByText('Add a trigger').click({ force: true });
+    cy.findAllByText('Add new trigger').click({ force: true });
     cy.findByTestId('triggerTypeDropDown').click();
     cy.get('[title="Intent recognized"]').click();
     cy.findByTestId('TriggerName').type('myTrigger1');
@@ -92,7 +92,7 @@ context('breadcrumb', () => {
     cy.findByTestId('DialogHeader-TestBot_TestSample').within(() => {
       cy.findByTestId('dialogMoreButton').click({ force: true });
     });
-    cy.findAllByText('Add a trigger').click({ force: true });
+    cy.findAllByText('Add new trigger').click({ force: true });
     cy.findByTestId('triggerTypeDropDown').click();
     cy.get('[title="Dialog events"]').click();
     cy.findByText('Select an event type').click();
@@ -104,7 +104,7 @@ context('breadcrumb', () => {
     cy.findByTestId('DialogHeader-TestBot_TestSample').within(() => {
       cy.findByTestId('dialogMoreButton').click({ force: true });
     });
-    cy.findAllByText('Add a trigger').click({ force: true });
+    cy.findAllByText('Add new trigger').click({ force: true });
     cy.findByTestId('triggerTypeDropDown').click();
     cy.get('[title="Custom events"]').click();
     cy.findByTestId('CustomEventName').type('myCustomEvent');
@@ -115,7 +115,7 @@ context('breadcrumb', () => {
     cy.findByTestId('DialogHeader-TestBot_TestSample').within(() => {
       cy.findByTestId('dialogMoreButton').click({ force: true });
     });
-    cy.findAllByText('Add a trigger').click({ force: true });
+    cy.findAllByText('Add new trigger').click({ force: true });
     cy.findByTestId('triggerTypeDropDown').click();
     cy.get('[title="Activities"]').click();
     cy.findByText('Select an activity type').click();

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

@@ -43,6 +43,7 @@ type ManageServiceProps = {
   createServiceInBackground?: boolean;
   handoffInstructions: string;
   hidden: boolean;
+  introText: string;
   learnMore?: string;
   onDismiss: () => void;
   onGetKey: (settings: { key: string; region: string }) => void;
@@ -96,6 +97,8 @@ 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 [userProvidedTokens, setUserProvidedTokens] = useState<boolean>(false);
   const [currentStep, setCurrentStep] = useState<Step>('intro');
   const [outcomeDescription, setOutcomeDescription] = useState<string>('');
@@ -104,12 +107,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) => {
@@ -526,9 +529,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')}
@@ -557,7 +558,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 ? (
@@ -583,15 +584,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}
@@ -612,13 +613,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}
                 />
@@ -645,22 +646,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}
@@ -690,18 +690,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}
@@ -801,15 +801,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}
@@ -849,6 +849,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 && (
@@ -862,14 +880,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);
@@ -879,10 +897,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}