fix: rephrase Enable Orchestrator dialog (#7639)

* "Add a skill" page changes

* Update EnableOrchestrator.tsx

* Update skill.test.tsx

* Update package.json

* Update yarn.lock

* Update en-US.json

Composer/packages/client/__tests__/components/skill.test.tsx

@@ -65,7 +65,7 @@ describe('<SkillForm />', () => {
         recoilInitState
       );
 
-      const urlInput = getByLabelText('Skill Manifest Url');
+      const urlInput = getByLabelText('Skill Manifest URL');
       act(() => {
         fireEvent.change(urlInput, {
           target: { value: 'https://onenote-dev.azurewebsites.net/manifests/OneNoteSync-2-1-preview-1-manifest.json' },

Composer/packages/client/src/components/AddRemoteSkillModal/CreateSkillModal.tsx

@@ -10,7 +10,6 @@ import { useRecoilValue } from 'recoil';
 import debounce from 'lodash/debounce';
 import { isUsingAdaptiveRuntime, SDKKinds } from '@bfc/shared';
 import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
-import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Separator } from 'office-ui-fabric-react/lib/Separator';
 import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
 
@@ -196,23 +195,16 @@ export const CreateSkillModal: React.FC<CreateSkillModalProps> = (props) => {
       ) : (
         <Fragment>
           <div style={{ marginBottom: '16px' }}>
-            {addSkillDialog.SKILL_MANIFEST_FORM.preSubText}
-            <Link href="https://aka.ms/bf-composer-docs-publish-bot" style={{ padding: '0 5px' }} target="_blank">
-              {formatMessage('Get an overview')}
-            </Link>
-            or
-            <Link href="https://aka.ms/bf-composer-docs-publish-bot" style={{ padding: '0 5px' }} target="_blank">
-              {formatMessage('learn how to build a skill')}
-            </Link>
-            {addSkillDialog.SKILL_MANIFEST_FORM.afterSubText}
+            {addSkillDialog.SKILL_MANIFEST_FORM.subText('https://aka.ms/bf-composer-docs-publish-bot')}
           </div>
           <Separator />
           <Stack horizontal horizontalAlign="start" styles={{ root: { height: 300 } }}>
             <div style={{ width: '50%' }}>
               <TextField
                 required
                 errorMessage={formDataErrors.manifestUrl}
-                label={formatMessage('Skill Manifest Url')}
+                label={formatMessage('Skill Manifest URL')}
+                placeholder={formatMessage('Ask the skill owner for the URL and provide your bot’s App ID')}
                 value={formData.manifestUrl || ''}
                 onChange={handleManifestUrlChange}
               />

Composer/packages/client/src/components/AddRemoteSkillModal/EnableOrchestrator.tsx

@@ -32,16 +32,18 @@ const EnableOrchestrator: React.FC<OrchestratorProps> = (props) => {
   };
   return (
     <Stack data-testid="orchestrator-skill">
-      <StackItem styles={{ root: { height: 300, width: '60%' } }}>
+      <StackItem styles={{ root: { height: 150, width: '90%' } }}>
         <div style={{ marginBottom: '16px' }}>
-          {enableOrchestratorDialog.content}
+          {enableOrchestratorDialog.subText}
           <Link href={learnMoreUrl} target="_blank">
             <div>{formatMessage('Learn more about Orchestrator')}</div>
           </Link>
         </div>
         <Checkbox
           defaultChecked
-          label={formatMessage('Make Orchestrator my preferred recognizer for multi-bot projects')}
+          label={formatMessage(
+            'Use Orchestrator for multi-bot projects (bots that consist of multiple bots or connect to skills).'
+          )}
           styles={{ root: { margin: '20px 0' } }}
           onChange={onChange}
         />

Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx

@@ -60,7 +60,6 @@ export const OrchestratorForSkillsDialog = () => {
     <DialogWrapper
       dialogType={DialogTypes.CreateFlow}
       isOpen={setVisibility()}
-      subText={enableOrchestratorDialog.subText}
       title={enableOrchestratorDialog.title}
       onDismiss={onDismissHandler}
     >

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

@@ -98,7 +98,7 @@ export const ProjectHeader = (props: ProjectHeaderProps) => {
         isDisableForPVA: false,
       },
       {
-        label: isRunning ? formatMessage('Stop bot') : formatMessage('Start bot'),
+        label: isRunning ? formatMessage('Stop this bot') : formatMessage('Start this bot'),
         icon: isRunning ? 'CircleStopSolid' : 'TriangleSolidRight12',
         onClick: () => {
           isRunning ? onBotStop(projectId) : onBotStart(projectId);
@@ -115,21 +115,21 @@ export const ProjectHeader = (props: ProjectHeaderProps) => {
         onClick: () => {},
       },
       {
-        label: formatMessage('Share as a skill'),
+        label: formatMessage('Export as skill'),
         onClick: () => {
           onBotEditManifest(projectId);
         },
         isDisableForPVA: true,
       },
       {
-        label: formatMessage('Export this bot as .zip'),
+        label: formatMessage('Export as .zip'),
         onClick: () => {
           onBotExportZip(projectId);
         },
         isDisableForPVA: false,
       },
       {
-        label: formatMessage('Settings'),
+        label: formatMessage('Bot settings'),
         onClick: () => {
           navigateTo(createBotSettingUrl(link.projectId, link.skillId));
         },

Composer/packages/client/src/constants.ts → Composer/packages/client/src/constants.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import React from 'react';
 import {
   webAppRuntimeKey,
   functionsRuntimeKey,
@@ -10,6 +11,7 @@ import {
 } from '@botframework-composer/types';
 import formatMessage from 'format-message';
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 
 export const BASEPATH = process.env.PUBLIC_URL || '/';
 export const BASEURL = `${process.env.PUBLIC_URL || ''}/api`;
@@ -323,10 +325,17 @@ export const addSkillDialog = {
   get SKILL_MANIFEST_FORM() {
     return {
       title: formatMessage('Add a skill'),
-      preSubText: formatMessage(`Skills extend your bot's conversational capabilities . To know more about skills`),
-      afterSubText: formatMessage(
-        `To make sure the skill will work correctly, we perform some validation checks. When you’re ready to add a skill, enter the Skill manifest URL provided to you by the skill author.`
-      ),
+      subText: (url: string) =>
+        formatMessage.rich(
+          `To connect to a skill, your bot needs the information captured in the skill's manifest of the bot, and, for secure access, the skill needs to know your bot's AppID. <link>Learn more.</link>`,
+          {
+            link: ({ children }) => (
+              <Link key="learn-more-about-skills" href={url} rel="noopener noreferrer" target="_blank">
+                {children}
+              </Link>
+            ),
+          }
+        ),
     };
   },
   get SKILL_MANIFEST_FORM_EDIT() {
@@ -358,14 +367,11 @@ export const selectIntentDialog = {
 
 export const enableOrchestratorDialog = {
   get title() {
-    return formatMessage('Enable Orchestrator Recognizer');
+    return formatMessage('Enable Orchestrator');
   },
   get subText() {
-    return formatMessage('Enable Orchestrator as the recognizer for routing to other skills');
-  },
-  get content() {
     return formatMessage(
-      'Multi-bot projects work best with the Orchestrator recognizer set at the dispatching dialog (typically the root dialog). Orchestrator helps identify and dispatch user intents from the root dialog to the respective skill that handles the intent. Orchestrator does not support entity extraction. If you plan to combine entity extraction and routing at the root dialog, use LUIS instead.'
+      'A bot that consists of multiple bots or connects to skills (multi-bot project) needs Orchestrator to detect and route user input to the appropriate bot or skill.'
     );
   },
 };

Composer/packages/client/src/pages/design/exportSkillModal/constants.tsx

@@ -180,8 +180,11 @@ export const editorSteps: { [key in ManifestEditorSteps]: EditorStep } = {
     buttons: [cancelButton, nextButton],
     content: Description,
     editJson: false,
-    title: () => formatMessage('Describe your skill'),
-    subText: () => formatMessage('To make your bot available for others as a skill, we need to generate a manifest.'),
+    title: () => formatMessage('Export your bot'),
+    subText: () =>
+      formatMessage(
+        'A skill is a bot that can perform a set of tasks one or more bots.  To make your bot available as a skill, it needs a manifest - a JSON file that describes the actions the skill can perform.'
+      ),
     validate,
   },
   [ManifestEditorSteps.SELECT_PROFILE]: {
@@ -241,9 +244,9 @@ export const editorSteps: { [key in ManifestEditorSteps]: EditorStep } = {
     content: AddCallers,
     subText: () =>
       formatMessage(
-        'Add Microsoft App Ids of bots that can access this skill. You can skip this step and add this information later from the project settings tab.'
+        'To ensure a secure connection, provide the App ID of the bots that can connect to your skill.  If you don’t have this information, you can also add this information in Skill Configuration. Learn more.'
       ),
-    title: () => formatMessage('Which bots are allowed to use this skill?'),
+    title: () => formatMessage('Which bots can connect to this skill?'),
   },
   [ManifestEditorSteps.MANIFEST_REVIEW]: {
     buttons: [
@@ -273,9 +276,9 @@ export const editorSteps: { [key in ManifestEditorSteps]: EditorStep } = {
     editJson: false,
     subText: () =>
       formatMessage(
-        'These tasks will be used to generate the manifest and describe the capabilities of this skill to those who may want to use it.'
+        'The capabilities of your bot are defined in its dialogs and triggers. Selected dialogs will be included in the manifest. Internal dialogs or actions may not be relevant to other bots. Learn more.'
       ),
-    title: () => formatMessage('Select which dialogs are included in the skill manifest'),
+    title: () => formatMessage('Select dialogs'),
   },
   [ManifestEditorSteps.SELECT_TRIGGERS]: {
     buttons: [
@@ -294,9 +297,9 @@ export const editorSteps: { [key in ManifestEditorSteps]: EditorStep } = {
     editJson: false,
     subText: () =>
       formatMessage(
-        'These tasks will be used to generate the manifest and describe the capabilities of this skill to those who may want to use it.'
+        'Triggers selected below will enable other bots to access the capabilities of your skill. Learn more.'
       ),
-    title: () => formatMessage('Select which tasks this skill can perform'),
+    title: () => formatMessage('Select triggers'),
   },
   [ManifestEditorSteps.SAVE_MANIFEST]: {
     buttons: [

Composer/packages/client/src/pages/design/exportSkillModal/content/AddCallers.tsx

@@ -81,7 +81,7 @@ export const AddCallers: React.FC<ContentProps> = ({ projectId, callers, onUpdat
   return (
     <div>
       <div css={header}>
-        <div css={tableColumnHeader()}>{formatMessage('Allowed Callers')}</div>
+        <div css={tableColumnHeader()}>{formatMessage('Available as skill to the following bots:')}</div>
       </div>
       {callers?.map((caller, index) => {
         const isFocus = focusCallerIndex === index;

Composer/packages/client/src/pages/home/CardWidget.tsx

@@ -60,7 +60,7 @@ export const CardWidget: React.FC<CardWidgetProps> = ({
       ? home.cardItem
       : imageCover
       ? home.mediaCardItem
-      : home.meidiaCardNoCoverItem;
+      : home.mediaCardNoCoverItem;
 
   const onImageLoading = (state: ImageLoadState) => {
     if (state === ImageLoadState.error) {

Composer/packages/client/src/pages/home/styles.ts

@@ -270,7 +270,7 @@ export const mediaCardItem = {
   `,
 };
 
-export const meidiaCardNoCoverItem = {
+export const mediaCardNoCoverItem = {
   ...mediaCardItem,
   imageCover: css`
     ${mediaCardItem.imageCover};