[#1906] Fixed bugs within connected service editor.

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1993](https://github.com/microsoft/BotFramework-Emulator/pull/1993)
   - [1994](https://github.com/microsoft/BotFramework-Emulator/pull/1994)
   - [1997](https://github.com/microsoft/BotFramework-Emulator/pull/1997)
+  - [2000](https://github.com/microsoft/BotFramework-Emulator/pull/2000)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 

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

@@ -207,21 +207,21 @@ describe('The ConnectedServiceEditor component should render the correct content
     const instance = node.instance();
     expect(instance.learnMoreLinkButton).not.toBeFalsy();
     expect(instance.editableFields).toEqual(['name', 'appId', 'authoringKey', 'version', 'region', 'subscriptionKey']);
-    expect(instance.headerContent).toEqual(instance.luisAndDispatchHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.luisAndDispatchHeader));
   });
 
   it('ServiceTypes.Dispatch', () => {
     const instance = node.instance();
     expect(instance.learnMoreLinkButton).not.toBeFalsy();
     expect(instance.editableFields).toEqual(['name', 'appId', 'authoringKey', 'version', 'region', 'subscriptionKey']);
-    expect(instance.headerContent).toEqual(instance.luisAndDispatchHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.luisAndDispatchHeader));
   });
 
   it('ServiceTypes.QnA', () => {
     const instance = node.instance();
     expect(instance.learnMoreLinkButton).not.toBeFalsy();
     expect(instance.editableFields).toEqual(['name', 'kbId', 'hostname', 'subscriptionKey', 'endpointKey']);
-    expect(instance.headerContent).toEqual(instance.qnaHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.qnaHeader));
   });
 
   it('ServiceTypes.AppInsights', () => {
@@ -236,7 +236,7 @@ describe('The ConnectedServiceEditor component should render the correct content
       'instrumentationKey',
       'applicationId',
     ]);
-    expect(instance.headerContent).toEqual(instance.appInsightsAndBlobStorageHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.appInsightsAndBlobStorageHeader));
   });
 
   it('ServiceTypes.Blob', () => {
@@ -251,7 +251,7 @@ describe('The ConnectedServiceEditor component should render the correct content
       'connectionString',
       'container',
     ]);
-    expect(instance.headerContent).toEqual(instance.appInsightsAndBlobStorageHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.appInsightsAndBlobStorageHeader));
   });
 
   it('ServiceTypes.CosmosDB', () => {
@@ -267,13 +267,13 @@ describe('The ConnectedServiceEditor component should render the correct content
       'database',
       'collection',
     ]);
-    expect(instance.headerContent).toEqual(instance.cosmosDbHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.cosmosDbHeader));
   });
 
   it('ServiceTypes.Generic', () => {
     const instance = node.instance();
     expect(instance.editableFields).toEqual(['name', 'url']);
 
-    expect(instance.headerContent).toEqual(instance.genericHeader);
+    expect(JSON.stringify(instance.headerContent)).toEqual(JSON.stringify(instance.genericHeader));
   });
 });

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

@@ -34,7 +34,7 @@
 import { DefaultButton, Dialog, DialogFooter, LinkButton, PrimaryButton, TextField } from '@bfemulator/ui-react';
 import { BotConfigurationBase } from 'botframework-config/lib/botConfigurationBase';
 import { ConnectedService } from 'botframework-config/lib/models';
-import { IConnectedService, IGenericService, ServiceTypes } from 'botframework-config/lib/schema';
+import { IConnectedService, IGenericService, ServiceTypes, IQnAService } from 'botframework-config/lib/schema';
 import * as React from 'react';
 import { ChangeEvent, Component, ReactNode } from 'react';
 
@@ -100,13 +100,17 @@ const portalMap = {
 export class ConnectedServiceEditor extends Component<ConnectedServiceEditorProps, ConnectedServiceEditorState> {
   constructor(props: ConnectedServiceEditorProps, state: ConnectedServiceEditorState) {
     super(props, state);
+    const connectedService = props.connectedService || {
+      type: props.serviceType,
+      name: '',
+    };
+    // if qnamaker, initialize with sample hostname so that botframework-config doesn't throw
+    if (props.serviceType === ServiceTypes.QnA) {
+      (connectedService as IQnAService).hostname =
+        (connectedService as IQnAService).hostname || 'https://myqna.azurewebsites.net';
+    }
     this.state = {
-      connectedServiceCopy: BotConfigurationBase.serviceFromJSON(
-        props.connectedService || {
-          type: props.serviceType,
-          name: '',
-        }
-      ),
+      connectedServiceCopy: BotConfigurationBase.serviceFromJSON(connectedService),
     };
   }
 
@@ -228,13 +232,10 @@ export class ConnectedServiceEditor extends Component<ConnectedServiceEditorProp
 
   private get luisAndDispatchHeader(): ReactNode {
     const { serviceType } = this.props;
-    const textString = 'Learn more about keys in ' + labelMap[serviceType].toString();
     return (
       <p>
         {`You can find your LUIS app ID and subscription key in ${portalMap[serviceType]}. `}
-        <LinkButton className={styles.link} linkRole={true} onClick={this.learnMoreLinkButton}>
-          {textString}
-        </LinkButton>
+        {this.learnMoreLinkButton}
       </p>
     );
   }
@@ -301,7 +302,7 @@ export class ConnectedServiceEditor extends Component<ConnectedServiceEditorProp
     }
   };
 
-  private learnMoreLinkButton = (): ReactNode => {
+  private get learnMoreLinkButton(): ReactNode {
     const { serviceType } = this.props;
 
     switch (serviceType) {
@@ -387,7 +388,7 @@ export class ConnectedServiceEditor extends Component<ConnectedServiceEditorProp
       default:
         return '';
     }
-  };
+  }
 
   private onAzurePortalClick = this.createAnchorClickHandler('https://portal.azure.com');