[ISSUE#1397] Fix file explorer opening when clicking on HeroCard button

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

@@ -52,6 +52,7 @@ import {
   BotCreationDialog,
   DialogService,
   OpenBotDialogContainer,
+  OpenUrlDialogContainer,
   PostMigrationDialogContainer,
   ProgressIndicatorContainer,
   SecretPromptDialogContainer,
@@ -240,6 +241,13 @@ export class UiCommands {
     }
   }
 
+  // ---------------------------------------------------------------------------
+  // Shows the confirmation dialog when open url
+  @Command(UI.ShowOpenUrlDialog)
+  protected async showOpenUrlDialog(url: string) {
+    return await DialogService.showDialog(OpenUrlDialogContainer, { url });
+  }
+
   // ---------------------------------------------------------------------------
   // Connect to a bot via URL
   @Command(UI.OpenBotViaUrl)

packages/app/client/src/ui/dialogs/index.ts

@@ -49,3 +49,5 @@ export * from './resourcesSettings/resourcesSettingsContainer';
 export * from './updateAvailableDialog';
 export * from './updateUnavailableDialog';
 export * from './openBotDialog/openBotDialogContainer';
+export * from './openUrlDialog/openUrlDialog';
+export * from './openUrlDialog/openUrlDialogContainer';

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

@@ -0,0 +1,39 @@
+//
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+//
+// Microsoft Bot Framework: http://botframework.com
+//
+// Bot Framework Emulator Github:
+// https://github.com/Microsoft/BotFramwork-Emulator
+//
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License:
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+
+.open-url-dialog {
+    min-width: 400px;
+    width: 400px;
+    max-height: 120px;
+    height: 120px;
+}

packages/app/client/src/ui/dialogs/openUrlDialog/openUrlDialog.scss.d.ts

@@ -0,0 +1,2 @@
+// This is a generated file. Changes are likely to result in being overwritten
+export const openUrlDialog: string;

packages/app/client/src/ui/dialogs/openUrlDialog/openUrlDialog.spec.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+//
+// Microsoft Bot Framework: http://botframework.com
+//
+// Bot Framework Emulator Github:
+// https://github.com/Microsoft/BotFramwork-Emulator
+//
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License:
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
+import { createStore } from 'redux';
+
+import { azureAuth } from '../../../data/reducer/azureAuthReducer';
+
+import { OpenUrlDialog } from './openUrlDialog';
+import { OpenUrlDialogContainer } from './openUrlDialogContainer';
+
+jest.mock('../service', () => ({
+  DialogService: {
+    showDialog: () => Promise.resolve(1),
+    hideDialog: () => Promise.resolve(0),
+  },
+}));
+
+jest.mock('./openUrlDialog.scss', () => ({}));
+
+jest.mock('../../dialogs/', () => ({
+  OpenUrlDialogContainer: () => undefined,
+  OpenUrlDialog: () => undefined,
+  DialogService: { showDialog: () => Promise.resolve(true) },
+  SecretPromptDialog: () => undefined,
+}));
+
+describe('The OpenUrlDialog component should', () => {
+  it('should render dialog', () => {
+    const parent = mount(
+      <Provider store={createStore(azureAuth)}>
+        <OpenUrlDialogContainer />
+      </Provider>
+    );
+    expect(parent.find(OpenUrlDialogContainer)).not.toBe(null);
+  });
+
+  it('should contain both a cancel and confirm function in the props', () => {
+    const parent = mount(
+      <Provider store={createStore(azureAuth)}>
+        <OpenUrlDialogContainer />
+      </Provider>
+    );
+
+    const prompt = parent.find(OpenUrlDialog);
+    expect(typeof (prompt.props() as any).cancel).toBe('function');
+    expect(typeof (prompt.props() as any).confirm).toBe('function');
+  });
+
+  it('should contain the url in the props', () => {
+    const parent = mount(
+      <Provider store={createStore(azureAuth)}>
+        <OpenUrlDialogContainer url={'http://contoso'} />
+      </Provider>
+    );
+
+    const prompt = parent.find(OpenUrlDialog);
+    expect(prompt.props().url).toEqual('http://contoso');
+  });
+});

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

@@ -0,0 +1,63 @@
+///
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+//
+// Microsoft Bot Framework: http://botframework.com
+//
+// Bot Framework Emulator Github:
+// https://github.com/Microsoft/BotFramwork-Emulator
+//
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License:
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+
+import { Dialog, DialogFooter, DefaultButton, PrimaryButton } from '@bfemulator/ui-react';
+import * as React from 'react';
+import { Component } from 'react';
+
+import * as styles from './openUrlDialog.scss';
+
+export interface OpenUrlDialogProps {
+  url?: string;
+  cancel: () => void;
+  confirm: () => void;
+}
+
+export class OpenUrlDialog extends Component<OpenUrlDialogProps, {}> {
+  constructor(props: OpenUrlDialogProps) {
+    super(props);
+  }
+
+  public render() {
+    return (
+      <Dialog cancel={this.props.cancel} className={styles.openUrlDialog} title="Confirm Open URL">
+        <p>{'\n\n Do you want to open this URL?'}</p>
+        <p>{'\n' + this.props.url}</p>
+        <DialogFooter>
+          <DefaultButton text="Cancel" type="button" onClick={this.props.cancel} />
+          <PrimaryButton text="Confirm" type="button" onClick={this.props.confirm} />
+        </DialogFooter>
+      </Dialog>
+    );
+  }
+}

packages/app/client/src/ui/dialogs/openUrlDialog/openUrlDialogContainer.ts

@@ -0,0 +1,50 @@
+//
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license.
+//
+// Microsoft Bot Framework: http://botframework.com
+//
+// Bot Framework Emulator Github:
+// https://github.com/Microsoft/BotFramwork-Emulator
+//
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License:
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+
+import { connect } from 'react-redux';
+
+import { DialogService } from '../service';
+
+import { OpenUrlDialog, OpenUrlDialogProps } from './openUrlDialog';
+
+const mapDispatchToProps = (_dispatch: () => void): OpenUrlDialogProps => {
+  return {
+    cancel: () => DialogService.hideDialog(0),
+    confirm: () => DialogService.hideDialog(1),
+  };
+};
+
+export const OpenUrlDialogContainer = connect(
+  null,
+  mapDispatchToProps
+)(OpenUrlDialog);

packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx

@@ -56,6 +56,7 @@ export interface ChatProps {
   showContextMenuForActivity: (activity: Partial<Activity>) => void;
   setInspectorObject: (documentId: string, activity: Partial<Activity & { showInInspector: true }>) => void;
   webchatStore: any;
+  showOpenUrlDialog?: (url) => any;
 }
 
 interface ChatState {
@@ -109,6 +110,7 @@ export class Chat extends Component<ChatProps, ChatState> {
           <ReactWebChat
             store={webchatStore}
             activityMiddleware={this.createActivityMiddleware}
+            cardActionMiddleware={this.cardActionMiddleware}
             bot={bot}
             directLine={document.directLine}
             disabled={isDisabled}
@@ -140,6 +142,35 @@ export class Chat extends Component<ChatProps, ChatState> {
     );
   }
 
+  private cardActionMiddleware = () => next => async ({ cardAction, getSignInUrl }) => {
+    const { type, value } = cardAction;
+
+    switch (type) {
+      case 'signin': {
+        const popup = window.open();
+        const url = await getSignInUrl();
+        popup.location.href = url;
+        break;
+      }
+      case 'downloadFile':
+      case 'playAudio':
+      case 'playVideo':
+      case 'showImage':
+      case 'openUrl':
+        if (value) {
+          this.props.showOpenUrlDialog(value).then(result => {
+            if (result == 1) {
+              window.open(value, '_blank');
+            }
+          });
+        }
+        break;
+
+      default:
+        return next({ cardAction, getSignInUrl });
+    }
+  };
+
   private createActivityMiddleware = () => next => card => children => {
     const { valueType } = card.activity;
 

packages/app/client/src/ui/editor/emulator/parts/chat/chatContainer.ts

@@ -33,13 +33,15 @@
 import { connect } from 'react-redux';
 import { User } from '@bfemulator/sdk-shared';
 import { Activity } from 'botframework-schema';
+import { SharedConstants } from '@bfemulator/app-shared';
 
-import { RootState } from '../../../../../data/store';
 import {
   setHighlightedObjects,
   setInspectorObjects,
   showContextMenuForActivity,
 } from '../../../../../data/action/chatActions';
+import { RootState } from '../../../../../data/store';
+import { executeCommand } from '../../../../../data/action/commandAction';
 
 import { Chat, ChatProps } from './chat';
 
@@ -63,6 +65,11 @@ const mapDispatchToProps = (dispatch, ownProps: ChatProps): Partial<ChatProps> =
       dispatch(setInspectorObjects(documentId, activity));
     },
     showContextMenuForActivity: (activity: Partial<Activity>) => dispatch(showContextMenuForActivity(activity)),
+    showOpenUrlDialog: async (url: string) => {
+      return new Promise(resolve => {
+        dispatch(executeCommand(false, SharedConstants.Commands.UI.ShowOpenUrlDialog, resolve, url));
+      });
+    },
     ...ownProps,
   };
 };

packages/app/shared/src/constants/sharedConstants.ts

@@ -178,6 +178,7 @@ export const SharedConstants = {
       ShowUpdateUnavailableDialog: 'update-unavailable-dialog:show',
       ShowProgressIndicator: 'progress-indicator:show',
       OpenBotViaUrl: 'connect-bot',
+      ShowOpenUrlDialog: 'chat:open-url',
       ShowDataCollectionDialog: 'data-collection:show',
     },
   },