Merge branch 'master' of https://github.com/Microsoft/BotFramework-Em…

…ulator into toanzian/split-button

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

@@ -133,7 +133,7 @@ describe('The ServiceExplorerSagas', () => {
     });
 
     it('should launch the luis models picklist after the luis models are retrieved', async () => {
-      DialogService.showDialog = () => Promise.resolve([{ id: 'a new service to add' }]);
+      DialogService.showDialog = () => Promise.resolve([{ id: 'a new service to add' }]) as any;
       const action = launchConnectedServicePicker(payload);
       const it = launchConnectedServicePickerGen(action);
       let token = it.next().value.SELECT.selector(mockStore.getState());
@@ -164,7 +164,7 @@ describe('The ServiceExplorerSagas', () => {
       mockStore.dispatch(load([mockBot]));
       mockStore.dispatch(setActive(mockBot));
 
-      DialogService.showDialog = () => Promise.resolve([{ id: 'a new service to add' }]);
+      DialogService.showDialog = () => Promise.resolve([{ id: 'a new service to add' }]) as any;
       const action = launchConnectedServicePicker(payload);
       const it = launchConnectedServicePickerGen(action);
       let token = it.next().value.SELECT.selector(mockStore.getState());

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

@@ -31,17 +31,22 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
+import { ServiceCodes, SharedConstants } from '@bfemulator/app-shared';
+import { BotConfigWithPath } from '@bfemulator/sdk-shared';
+import { BotConfigurationBase } from 'botframework-config/lib/botConfigurationBase';
 import {
   IBotService,
   IConnectedService,
+  IGenericService,
   ILuisService,
   IQnAService,
   ServiceTypes
 } from 'botframework-config/lib/schema';
-import { BotConfigurationBase } from 'botframework-config/lib/botConfigurationBase';
 import { ForkEffect, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 import { CommandServiceImpl } from '../../platform/commands/commandServiceImpl';
 import { DialogService } from '../../ui/dialogs/service';
+import { serviceTypeLabels } from '../../utils/serviceTypeLables';
+import { ArmTokenData, beginAzureAuthWorkflow } from '../action/azureAuthActions';
 import {
   ConnectedServiceAction,
   ConnectedServicePayload,
@@ -53,14 +58,10 @@ import {
   OPEN_CONTEXT_MENU_FOR_CONNECTED_SERVICE,
   OPEN_SERVICE_DEEP_LINK
 } from '../action/connectedServiceActions';
-import { ServiceCodes, SharedConstants } from '@bfemulator/app-shared';
+import { sortExplorerContents } from '../action/explorerActions';
+import { SortCriteria } from '../reducer/explorer';
 import { RootState } from '../store';
-import { ArmTokenData, beginAzureAuthWorkflow } from '../action/azureAuthActions';
 import { getArmToken } from './azureAuthSaga';
-import { BotConfigWithPath } from '@bfemulator/sdk-shared';
-import { SortCriteria } from '../reducer/explorer';
-import { sortExplorerContents } from '../action/explorerActions';
-import { serviceTypeLabels } from '../../utils/serviceTypeLables';
 
 declare type ServicesPayload = { services: IConnectedService[], code: ServiceCodes };
 
@@ -185,8 +186,11 @@ function* openConnectedServiceDeepLink(action: ConnectedServiceAction<ConnectedS
     case ServiceTypes.QnA:
       return openQnaMakerDeepLink(connectedService as IQnAService);
 
+    case ServiceTypes.Generic:
+      return window.open((connectedService as IGenericService).url);
+
     default:
-      return Promise.reject('unknown service type');
+      throw new Error('Unknown service type');
   }
 }
 
@@ -199,6 +203,7 @@ function* openContextMenuForService(action: ConnectedServiceAction<ConnectedServ
   ];
   const response = yield CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.DisplayContextMenu, menuItems);
   const { connectedService } = action.payload;
+  action.payload.serviceType = connectedService.type;
   switch (response.id) {
     case 'open':
       yield* openConnectedServiceDeepLink(action);
@@ -224,15 +229,21 @@ function* openAddConnectedServiceContextMenu(action: ConnectedServiceAction<Conn
     { label: 'Add QnA Maker', id: ServiceTypes.QnA },
     { label: 'Add Dispatch', id: ServiceTypes.Dispatch },
     { type: 'separator' },
-    { label: 'Add Azure Cosmos DB account', id: ServiceTypes.CosmosDB},
-    { label: 'Add Azure Storage account', id: ServiceTypes.BlobStorage},
-    { label: 'Add Azure Application Insights', id: ServiceTypes.AppInsights},
+    { label: 'Add Azure Cosmos DB account', id: ServiceTypes.CosmosDB },
+    { label: 'Add Azure Storage account', id: ServiceTypes.BlobStorage },
+    { label: 'Add Azure Application Insights', id: ServiceTypes.AppInsights },
+    { type: 'separator' },
+    { label: 'Add other service …', id: ServiceTypes.Generic },
   ];
 
   const response = yield CommandServiceImpl.remoteCall(SharedConstants.Commands.Electron.DisplayContextMenu, menuItems);
   const { id: serviceType } = response;
   action.payload.serviceType = serviceType;
-  yield* launchConnectedServicePicker(action);
+  if (serviceType === ServiceTypes.Generic) {
+    yield* launchConnectedServiceEditor(action);
+  } else {
+    yield* launchConnectedServicePicker(action);
+  }
 }
 
 function* openSortContextMenu(action: ConnectedServiceAction<ConnectedServicePayload>): IterableIterator<any> {

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss

@@ -1,3 +1,68 @@
-.connectedServiceEditor {
+.connected-service-editor {
   width: 400px;
 }
+
+.header {
+  display: flex;
+  width: 100%;
+
+  > * {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 5px;
+    padding-left: 8px;
+  }
+}
+
+ul.kv-pair-container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  max-height: 180px;
+  overflow: auto;
+
+  > li {
+    width: 100%;
+    display: flex;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  input[disabled] {
+    border: none;
+  }
+}
+
+.no-border {
+  border: none;
+}
+
+.add-kv-pair-button {
+  border: none;
+  padding: 0 0 0 18px;
+  background: transparent;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    color: var(-p-button-color);
+
+    &::before {
+      background: var(--p-button-bg-hover);
+    }
+  }
+
+  &::before {
+    position: absolute;
+    left: 0;
+    content: '';
+    width: 16px;
+    height: 16px;
+    -webkit-mask: url("../../../../media/ic_add_thin.svg");
+    -webkit-mask-size: 16px;
+    background: var(--p-button-bg);
+  }
+}

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.scss.d.ts

@@ -1,2 +1,6 @@
 // This is a generated file. Changes are likely to result in being overwritten
 export const connectedServiceEditor: string;
+export const header: string;
+export const kvPairContainer: string;
+export const noBorder: string;
+export const addKvPairButton: string;

packages/app/client/src/ui/shell/explorer/servicesExplorer/connectedServiceEditor/connectedServiceEditor.spec.tsx

@@ -1,5 +1,6 @@
 import { PrimaryButton } from '@bfemulator/ui-react';
 import { LuisService } from 'botframework-config/lib/models';
+import { ServiceTypes } from 'botframework-config/lib/schema';
 import { mount } from 'enzyme';
 import * as React from 'react';
 import { Provider } from 'react-redux';
@@ -8,7 +9,6 @@ import { azureAuth } from '../../../../../data/reducer/azureAuthReducer';
 import { DialogService } from '../../../../dialogs/service';
 import { ConnectedServiceEditor } from './connectedServiceEditor';
 import { ConnectedServiceEditorContainer } from './connectedServiceEditorContainer';
-import { ServiceTypes } from 'botframework-config/lib/schema';
 
 jest.mock('../../../../dialogs/service', () => ({
   DialogService: {
@@ -101,9 +101,20 @@ describe('The ConnectedServiceEditor component ', () => {
     const submitBtn = node.find(PrimaryButton);
     expect(submitBtn.props.disabled).toBeFalsy();
   });
+
+  it('should update the connectedServiceCopy.configuration when the "onKvPairChange()" handler is called', () => {
+    const instance = node.instance();
+    const mockData = {
+      someKey: 'Some Value'
+    };
+
+    instance.onKvPairChange(mockData);
+
+    expect(instance.state.connectedServiceCopy.configuration).toEqual(mockData);
+  });
 });
 
-describe('The ConnectedServiceEditor component\'s should render the correct content when the service type is', () => {
+describe('The ConnectedServiceEditor component should render the correct content when the service type is', () => {
   let parent;
   let node;
   let mockService = JSON.parse(`{
@@ -120,7 +131,9 @@ describe('The ConnectedServiceEditor component\'s should render the correct cont
     ServiceTypes.QnA,
     ServiceTypes.AppInsights,
     ServiceTypes.BlobStorage,
-    ServiceTypes.CosmosDB];
+    ServiceTypes.CosmosDB,
+    ServiceTypes.Generic
+  ];
 
   beforeEach(() => {
     mockService.type = services.shift();
@@ -196,4 +209,14 @@ describe('The ConnectedServiceEditor component\'s should render the correct cont
     ]);
     expect(instance.headerContent).toEqual(instance.cosmosDbHeader);
   });
+
+  it('ServiceTypes.Generic', () => {
+    const instance = node.instance();
+    expect(instance.editableFields).toEqual([
+      'name',
+      'url'
+    ]);
+
+    expect(instance.headerContent).toEqual(instance.genericHeader);
+  });
 });