fix: revise text in Azure Bot creation dialog

Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx

@@ -50,7 +50,7 @@ describe('<CreateOptions/>', () => {
     const component = renderComponent();
     const conversationalCoreBot = await component.findByTestId('generator-conversational-core');
     fireEvent.click(conversationalCoreBot);
-    const nextButton = await component.findByText('Next');
+    const nextButton = await component.findByTestId('CreateBotNextStepButton');
     fireEvent.click(nextButton);
     expect(handleCreateNextMock).toBeCalledWith('generator-conversational-core', 'dotnet');
   });

Composer/packages/client/src/components/CreationFlow/AzureBotDialog.tsx

@@ -0,0 +1,105 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useState } from 'react';
+import formatMessage from 'format-message';
+import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { FontSizes } from '@uifabric/fluent-theme';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { DialogFooter, IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
+import { RouteComponentProps } from '@reach/router';
+
+import TelemetryClient from '../../telemetry/TelemetryClient';
+import { DialogCreationCopy } from '../../constants';
+
+type Props = {
+  isOpen: boolean;
+  onDismiss: () => void;
+  onJumpToOpenModal: (search?: string) => void;
+  onToggleCreateModal: (boolean) => void;
+} & RouteComponentProps<{}>;
+
+const dialogWrapperProps = DialogCreationCopy.CREATE_OPTIONS;
+
+const dialogStyle: { dialog: Partial<IDialogContentStyles>; modal: {} } = {
+  dialog: {
+    title: {
+      fontWeight: FontWeights.bold,
+      fontSize: FontSizes.size20,
+      paddingTop: '14px',
+      paddingBottom: '11px',
+    },
+    subText: {
+      fontSize: FontSizes.size14,
+      marginBottom: '8px',
+    },
+    button: {
+      marginTop: 0,
+    },
+  },
+  modal: {
+    main: {
+      maxWidth: '80% !important',
+      width: '480px !important',
+    },
+  },
+};
+
+export const AzureBotDialog = (props: Props) => {
+  const [option, setOption] = useState<'Create' | 'Connect'>('Create');
+
+  const { isOpen, onDismiss, onJumpToOpenModal, onToggleCreateModal: setIsOpenCreateModal } = props;
+
+  const options: IChoiceGroupOption[] = [
+    { key: 'Create', text: formatMessage('Create a new bot project') },
+    { key: 'Connect', text: formatMessage('Use an existing bot project') },
+  ];
+
+  const handleChange = (e, option) => {
+    setOption(option.key);
+  };
+
+  const handleJumpToNext = () => {
+    if (option === 'Create') {
+      TelemetryClient.track('NewBotDialogOpened', {
+        isSkillBot: false,
+        fromAbsHandoff: true,
+      });
+      setIsOpenCreateModal(true);
+    } else {
+      onJumpToOpenModal(props.location?.search);
+    }
+  };
+
+  return (
+    <DialogWrapper
+      isOpen={isOpen}
+      {...dialogWrapperProps}
+      customerStyle={dialogStyle}
+      dialogType={DialogTypes.Customer}
+      onDismiss={onDismiss}
+    >
+      <Link href="http://aka.ms/composer-abs-quickstart" target="_blank">
+        {formatMessage('Learn more.')}
+      </Link>
+      <ChoiceGroup
+        required
+        defaultSelectedKey="Create"
+        options={options}
+        styles={{
+          applicationRole: {
+            marginTop: '24px',
+          },
+        }}
+        onChange={handleChange}
+      />
+      <DialogFooter>
+        <PrimaryButton data-testid="ABSNextStepButton" text={formatMessage('Next')} onClick={handleJumpToNext} />
+        <DefaultButton data-testid="ABSCancelButton" text={formatMessage('Cancel')} onClick={onDismiss} />
+      </DialogFooter>
+    </DialogWrapper>
+  );
+};

Composer/packages/client/src/components/CreationFlow/CreateBot.tsx

@@ -326,9 +326,9 @@ export function CreateBot(props: CreateBotProps) {
             <FontIcon iconName="ChatInviteFriend" style={{ marginRight: '5px' }} />
             {formatMessage('Need another template? Send us a request')}
           </Link>
-          <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
+          <DefaultButton data-testid="CreateBotCancelButton" text={formatMessage('Cancel')} onClick={onDismiss} />
           <PrimaryButton
-            data-testid="NextStepButton"
+            data-testid="CreateBotNextStepButton"
             disabled={
               (currentTemplateId === localTemplateId && !localTemplatePathValid) ||
               (option === optionKeys.createFromTemplate && (templates.length <= 0 || currentTemplateId === null))

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -5,24 +5,18 @@
 import { jsx } from '@emotion/core';
 import { useState, Fragment, useEffect } from 'react';
 import formatMessage from 'format-message';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
-import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
-import { FontSizes } from '@uifabric/fluent-theme';
 import { BotTemplate } from '@bfc/shared';
-import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { navigate, RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
 import axios from 'axios';
 import { useRecoilValue } from 'recoil';
 
-import { DialogCreationCopy } from '../../constants';
 import { getAliasFromPayload, isElectron } from '../../utils/electronUtil';
 import { creationFlowTypeState, userHasNodeInstalledState } from '../../recoilModel';
 import { InstallDepModal } from '../InstallDepModal';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
+import { AzureBotDialog } from './AzureBotDialog';
 import { CreateBot } from './CreateBot';
 
 // -------------------- CreateOptions -------------------- //
@@ -37,8 +31,7 @@ type CreateOptionsProps = {
 } & RouteComponentProps<{}>;
 
 export function CreateOptions(props: CreateOptionsProps) {
-  const [isOpenOptionsModal, setIsOpenOptionsModal] = useState(false);
-  const [option, setOption] = useState('Create');
+  const [isOpenOptionsModal, setIsOpenOptionsModal] = useState(true);
   const [isOpenCreateModal, setIsOpenCreateModal] = useState(false);
   const {
     templates,
@@ -83,48 +76,6 @@ export function CreateOptions(props: CreateOptionsProps) {
     });
     setIsOpenCreateModal(true);
   }, [props.location?.search]);
-  const dialogWrapperProps = DialogCreationCopy.CREATE_OPTIONS;
-
-  const customerStyle = {
-    dialog: {
-      title: {
-        fontWeight: FontWeights.bold,
-        fontSize: FontSizes.size20,
-        paddingTop: '14px',
-        paddingBottom: '11px',
-      },
-      subText: {
-        fontSize: FontSizes.size14,
-      },
-    },
-    modal: {
-      main: {
-        maxWidth: '80% !important',
-        width: '480px !important',
-      },
-    },
-  };
-
-  const options: IChoiceGroupOption[] = [
-    { key: 'Create', text: formatMessage('Use Azure Bot to create a new conversation') },
-    { key: 'Connect', text: formatMessage('Apply my Azure Bot resources for an existing bot') },
-  ];
-
-  const handleChange = (e, option) => {
-    setOption(option.key);
-  };
-
-  const handleJumpToNext = () => {
-    if (option === 'Create') {
-      TelemetryClient.track('NewBotDialogOpened', {
-        isSkillBot: false,
-        fromAbsHandoff: true,
-      });
-      setIsOpenCreateModal(true);
-    } else {
-      onJumpToOpenModal(props.location?.search);
-    }
-  };
 
   useEffect(() => {
     if (!userHasNode) {
@@ -134,19 +85,12 @@ export function CreateOptions(props: CreateOptionsProps) {
 
   return (
     <Fragment>
-      <DialogWrapper
+      <AzureBotDialog
         isOpen={isOpenOptionsModal}
-        {...dialogWrapperProps}
-        customerStyle={customerStyle}
-        dialogType={DialogTypes.Customer}
         onDismiss={onDismiss}
-      >
-        <ChoiceGroup required defaultSelectedKey="Create" options={options} onChange={handleChange} />
-        <DialogFooter>
-          <PrimaryButton data-testid="NextStepButton" text={formatMessage('Next')} onClick={handleJumpToNext} />
-          <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
-        </DialogFooter>
-      </DialogWrapper>
+        onJumpToOpenModal={onJumpToOpenModal}
+        onToggleCreateModal={setIsOpenCreateModal}
+      />
       <CreateBot
         fetchReadMe={fetchReadMe}
         isOpen={isOpenCreateModal}

Composer/packages/client/src/components/CreationFlow/OpenProject.tsx

@@ -71,7 +71,7 @@ export const OpenProject: React.FC<OpenProjectProps> = (props) => {
           onOpen={handleOpen}
         />
         <DialogFooter>
-          <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
+          <DefaultButton data-testid="OpenBotCancelButton" text={formatMessage('Cancel')} onClick={onDismiss} />
         </DialogFooter>
       </div>
     </DialogWrapper>

Composer/packages/client/src/constants.tsx

@@ -200,9 +200,9 @@ export const BotStatusesCopy = {
 export const DialogCreationCopy = {
   get CREATE_OPTIONS() {
     return {
-      title: formatMessage('Your new Azure Bot is available in Composer'),
+      title: formatMessage('Choose a bot project for your Azure Bot'),
       subText: formatMessage(
-        'The Azure Bot created in Azure Bot Services contains bot resources that can be used as the basis for a new bot, or to add or replace resources of an existing bot.'
+        'Use your Azure Bot resource with a new or existing bot project. You can publish your bot project directly to Azure using the publishing profile created for you.'
       ),
     };
   },

Composer/packages/integration-tests/cypress/.gitignore

@@ -1,2 +1,3 @@
 __test_bots__
 __e2e_data.json
+screenshots

Composer/packages/integration-tests/cypress/integration/HomePage.spec.ts

@@ -11,12 +11,12 @@ context('Home Page ', () => {
   it('can open buttons in home page', () => {
     cy.findByTestId('LeftNav-CommandBarButtonHome').click();
     cy.findByTestId('homePage-Toolbar-New').click();
-    cy.findByText('Cancel').should('exist');
-    cy.findByText('Cancel').click();
+    cy.findByTestId('CreateBotCancelButton').should('exist');
+    cy.findByTestId('CreateBotCancelButton').click();
     cy.findByTestId('homePage-Toolbar-Open').click();
     cy.findByText('Select a Bot').should('exist');
-    cy.findByText('Cancel').should('exist');
-    cy.findByText('Cancel').click();
+    cy.findByTestId('OpenBotCancelButton').should('exist');
+    cy.findByTestId('OpenBotCancelButton').click();
     cy.findByTestId('homePage-Toolbar-New').click();
   });
 
@@ -59,7 +59,7 @@ context('Home Page ', () => {
     });
     cy.wait(3000);
     cy.findByTestId('@microsoft/generator-bot-empty').click();
-    cy.findByTestId('NextStepButton').click();
+    cy.findByTestId('CreateBotNextStepButton').click();
     cy.findByTestId('NewDialogRuntimeType').click();
     cy.findByText('Azure Web App').click();
     cy.enterTextAndSubmit('NewDialogName', 'TestNewProject3', 'SubmitNewBotBtn');