Merge pull request #1121 from Microsoft/corinagum/1096-2

Accessibility links fix

packages/app/client/src/commands/electronCommands.ts

@@ -57,12 +57,6 @@ export function registerCommands(commandRegistry: CommandRegistryImpl) {
     console.log('Application is up to date');
   });
 
-  // ---------------------------------------------------------------------------
-  // Open the link in the default browser
-  commandRegistry.registerCommand(Electron.OpenExternal, (url: string) => {
-    window.open(url);
-  });
-
   // ---------------------------------------------------------------------------
   // Open About dialog
   commandRegistry.registerCommand(Electron.ShowAboutDialog, () => {

packages/app/client/src/data/sagas/servicesExplorerSagas.spec.ts

@@ -219,13 +219,13 @@ describe('The ServiceExplorerSagas', () => {
       const result = await it.next().value;
       expect(result.id).toBe('open');
 
-      let link = '';
-      CommandServiceImpl.remoteCall = async (type: string, ...args: any[]) => {
-        link = args[0];
-      };
+      window.open = jest.fn();
+
       await it.next(result).value;
 
-      expect(link).toBe(`https://luis.ai/applications/${mockService.appId}/versions/${mockService.version}/build`);
+      expect(window.open).toHaveBeenCalledWith(
+        `https://luis.ai/applications/${mockService.appId}/versions/${mockService.version}/build`
+      );
     });
 
     it('should open the luis editor when the "edit" item is selected', async () => {
@@ -409,29 +409,29 @@ describe('The ServiceExplorerSagas', () => {
     });
 
     it('should open the correct domain for luis models in the "westeurope" region', () => {
-      const spy = jest.spyOn(CommandServiceImpl, 'remoteCall');
+      window.open = jest.fn();
       const link = `https://eu.luis.ai/applications/1234/versions/0.1/build`;
       const action = openServiceDeepLink(mockModel as any);
       openConnectedServiceGen(action).next();
-      expect(spy).toHaveBeenCalledWith('electron:open-external', link);
+      expect(window.open).toHaveBeenCalledWith(link);
     });
 
     it('should open the correct domain for luis models in the "australiaeast" region', () => {
+      window.open = jest.fn();
       mockModel.region = 'australiaeast';
-      const spy = jest.spyOn(CommandServiceImpl, 'remoteCall');
       const link = `https://au.luis.ai/applications/1234/versions/0.1/build`;
       const action = openServiceDeepLink(mockModel as any);
       openConnectedServiceGen(action).next();
-      expect(spy).toHaveBeenCalledWith('electron:open-external', link);
+      expect(window.open).toHaveBeenCalledWith(link);
     });
 
     it('should open the correct domain for luis models in the "westus" region', () => {
+      window.open = jest.fn();
       mockModel.region = 'westus';
-      const spy = jest.spyOn(CommandServiceImpl, 'remoteCall');
       const link = `https://luis.ai/applications/1234/versions/0.1/build`;
       const action = openServiceDeepLink(mockModel as any);
       openConnectedServiceGen(action).next();
-      expect(spy).toHaveBeenCalledWith('electron:open-external', link);
+      expect(window.open).toHaveBeenCalledWith(link);
     });
   });
 });

packages/app/client/src/data/sagas/servicesExplorerSagas.ts

@@ -278,7 +278,7 @@ function* launchConnectedServiceEditor(action: ConnectedServiceAction<ConnectedS
   return null;
 }
 
-function openLuisDeepLink(luisService: ILuisService): Promise<any> {
+function openLuisDeepLink(luisService: ILuisService) {
   const { appId, version, region } = luisService;
   let regionPrefix: string;
   switch (region) {
@@ -297,23 +297,23 @@ function openLuisDeepLink(luisService: ILuisService): Promise<any> {
   const linkArray = ['https://', `${ encodeURI(regionPrefix) }`, 'luis.ai/applications/'];
   linkArray.push(`${ encodeURI(appId) }`, '/versions/', `${ encodeURI(version) }`, '/build');
   const link = linkArray.join('');
-  return CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, link);
+  window.open(link);
 }
 
-function openQnaMakerDeepLink(service: IQnAService): Promise<any> {
+function openQnaMakerDeepLink(service: IQnAService) {
   const { kbId } = service;
   const link = `https://qnamaker.ai/Edit/KnowledgeBase?kbid=${ encodeURIComponent(kbId) }`;
-  return CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, link);
+  window.open(link);
 }
 
-function openAzureBotServiceDeepLink(service: IBotService): Promise<any> {
+function openAzureBotServiceDeepLink(service: IBotService) {
   const { tenantId, subscriptionId, resourceGroup, id } = service;
   const linkArray = [`https://ms.portal.azure.com/#@${ encodeURI(tenantId) }`];
   linkArray.push(`/resource/subscriptions/${ encodeURI(subscriptionId) }`);
   linkArray.push(`/resourceGroups/${ encodeURI(resourceGroup) }`);
   linkArray.push(`/providers/Microsoft.BotService/botServices/${ encodeURI(id) }`);
   const link = linkArray.join('');
-  return CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, link + '/channels');
+  window.open(link + '/channels');
 }
 
 export function* servicesExplorerSagas(): IterableIterator<ForkEffect> {

packages/app/client/src/ui/dialogs/azureLoginPromptDialog/azureLoginPromptDialog.tsx

@@ -6,7 +6,6 @@ import * as styles from '../dialogStyles.scss';
 export interface AzureLoginPromptDialogProps {
   cancel: () => void;
   confirm: () => void;
-  onAnchorClick: (url: string) => void;
 }
 
 export class AzureLoginPromptDialog extends Component<AzureLoginPromptDialogProps, {}> {
@@ -15,14 +14,14 @@ export class AzureLoginPromptDialog extends Component<AzureLoginPromptDialogProp
       <Dialog cancel={ this.props.cancel } title="Sign in with an Azure account" className={styles.dialogMedium}>
         <p>{ 'Use your Azure account to sign in to all your Azure services, ' +
         'such as Azure Bot Service, Dispatch, LUIS, and QnA Maker.' }
-          <a href="javascript:void(0);" onClick={ this.onLearnMoreAzureAccount }>
+          <a href="https://azure.microsoft.com/en-us/services/bot-service">
             Don't have an Azure Account? Sign up.
           </a>
         </p>
         <p>{ 'By signing in to your services, you can register any app in that ' +
         'service with your bot without having to enter in credentials manually.' }</p>
         <p>
-          <a href="javascript:void(0);" onClick={ this.onLearnMoreRegister }>
+          <a href="https://aka.ms/about-bot-file">
             Learn more about registering services
           </a>
         </p>
@@ -33,12 +32,4 @@ export class AzureLoginPromptDialog extends Component<AzureLoginPromptDialogProp
       </Dialog>
     );
   }
-
-  private onLearnMoreAzureAccount = () => {
-    this.props.onAnchorClick('https://azure.microsoft.com/en-us/services/bot-service');
-  }
-
-  private onLearnMoreRegister = () => {
-    this.props.onAnchorClick('https://aka.ms/about-bot-file');
-  }
 }

packages/app/client/src/ui/dialogs/azureLoginPromptDialog/azureLoginPromptDialogContainer.ts

@@ -34,16 +34,11 @@
 import { connect } from 'react-redux';
 import { DialogService } from '../service';
 import { AzureLoginPromptDialog, AzureLoginPromptDialogProps } from './azureLoginPromptDialog';
-import { SharedConstants } from '@bfemulator/app-shared';
-import { CommandServiceImpl } from '../../../platform/commands/commandServiceImpl';
 
 const mapDispatchToProps = (_dispatch: () => void): AzureLoginPromptDialogProps => {
   return {
     cancel: () => DialogService.hideDialog(0),
-    confirm: () => DialogService.hideDialog(1),
-    onAnchorClick: (url) => {
-      CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, url).catch();
-    }
+    confirm: () => DialogService.hideDialog(1)
   };
 };
 

packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.tsx

@@ -145,9 +145,7 @@ export class BotCreationDialog extends React.Component<{}, BotCreationDialogStat
               label="Encrypt keys stored in your bot configuration."
               checked={ encryptKey }
               onChange={ this.onEncryptKeyChange }/>
-            <a
-              href="javascript:void(0);"
-              onClick={ this.onLearnMoreEncryptionClick }>
+            <a href="https://aka.ms/bot-framework-bot-file-encryption">
               &nbsp;Learn more.
             </a>
           </Row>
@@ -263,11 +261,6 @@ export class BotCreationDialog extends React.Component<{}, BotCreationDialogStat
   //   this.setState({ secret: generatedSecret });
   // }
 
-  private onLearnMoreEncryptionClick = (): void => {
-    const url = 'https://aka.ms/bot-framework-bot-file-encryption';
-    CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, url).catch();
-  }
-
   private onSaveAndConnect = async () => {
     try {
       const path = await this.showBotSaveDialog();

packages/app/client/src/ui/dialogs/botSettingsEditor/botSettingsEditor.scss

@@ -19,8 +19,8 @@
 
 .encrypt-key-check-box {
   margin-top: 30px;
+
   span {
-    width: auto;
     margin-right: 3px;
   }
 }

packages/app/client/src/ui/dialogs/connectServicePromptDialog/connectServicePromptDialog.tsx

@@ -1,14 +1,13 @@
 import { DefaultButton, Dialog, DialogFooter, PrimaryButton } from '@bfemulator/ui-react';
 import { ServiceTypes } from 'botframework-config/lib/schema';
 import * as React from 'react';
-import { Component, MouseEvent, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import * as styles from '../dialogStyles.scss';
 
 export interface ConnectServicePromptDialogProps {
   cancel: () => void;
   confirm: () => void;
   addServiceManually: () => void;
-  onAnchorClick: (url: string) => void;
   serviceType?: ServiceTypes;
 }
 
@@ -61,9 +60,7 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
       <>
         <p>
           { `Sign in to your Azure account to select the LUIS applications you'd like to associate with this bot. ` }
-          <a href="javascript:void(0);"
-             data-href="http://aka.ms/bot-framework-emulator-LUIS-docs-home"
-             onClick={ this.onAnchorClick }>Learn more about LUIS.
+          <a href="http://aka.ms/bot-framework-emulator-LUIS-docs-home">
           </a>
         </p>
         <p>
@@ -81,9 +78,7 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p>
           { 'Sign in to your Azure account to select the QnA ' +
           'Maker knowledge bases you\'d like to associate with this bot. ' }
-          <a href="javascript:void(0);"
-             data-href="http://aka.ms/bot-framework-emulator-qna-docs-home"
-             onClick={ this.onAnchorClick }>Learn more about QnA Maker.
+          <a href="http://aka.ms/bot-framework-emulator-qna-docs-home">
           </a>
         </p>
         <p>
@@ -101,9 +96,7 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
       <>
         <p>
           { `Sign in to your Azure account to select the Dispatch model you'd like to associate with this bot. ` }
-          <a href="javascript:void(0);"
-             data-href="https://aka.ms/bot-framework-emulator-create-dispatch"
-             onClick={ this.onAnchorClick }>Learn more about Dispatch models.
+          <a href="https://aka.ms/bot-framework-emulator-create-dispatch">Learn more about Dispatch models.
           </a>
         </p>
         <p>
@@ -123,7 +116,7 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
         <p>
           { 'Sign in to your Azure account to select the Azure Application ' +
           'Insights you\'d like to associate with this bot. ' }
-          <a href="javascript:void(0);" onClick={ this.onAnchorClick }>
+          <a href="https://aka.ms/bot-framework-emulator-appinsights-docs">
             Learn more about Azure Application Insights.
           </a>
         </p>
@@ -137,9 +130,4 @@ export class ConnectServicePromptDialog extends Component<ConnectServicePromptDi
       </>
     );
   }
-
-  private onAnchorClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    const { href } = event.currentTarget.dataset;
-    this.props.onAnchorClick(href);
-  }
 }

packages/app/client/src/ui/dialogs/connectServicePromptDialog/connectServicePromptDialogContainer.ts

@@ -31,9 +31,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
-import { SharedConstants } from '@bfemulator/app-shared';
 import { connect } from 'react-redux';
-import { CommandServiceImpl } from '../../../platform/commands/commandServiceImpl';
 import { DialogService } from '../service';
 import { ConnectServicePromptDialog, ConnectServicePromptDialogProps } from './connectServicePromptDialog';
 
@@ -44,10 +42,7 @@ const mapDispatchToProps = (
     ...ownProps,
     cancel: () => DialogService.hideDialog(0),
     confirm: () => DialogService.hideDialog(1),
-    addServiceManually: () => DialogService.hideDialog(2),
-    onAnchorClick: (url) => {
-      CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.OpenExternal, url).catch();
-    }
+    addServiceManually: () => DialogService.hideDialog(2)
   };
 };