fix: show bot url as tooltip (microsoft#2676)

* show botendpoint as tooltip * fix lint * Fix tests * add a button to write to clipboard * fix lint * remove close delay and URL prefix Co-authored-by: Chris Whitten <[email protected]> Co-authored-by: Andy Brown <[email protected]>
Appnet1337 · Apr 21, 2020 · 8f3e17c · 8f3e17c
1 parent 8c3878a
commit 8f3e17c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx b/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx
@@ -11,7 +11,12 @@ describe('<EmulatorOpenButton />', () => {
   it('should show the button to open emulator', () => {
     const onClick = jest.fn(() => {});
     const { container, getByText } = render(
-      <EmulatorOpenButton onClick={onClick} botStatus={BotStatus.connected} hidden={false} />
+      <EmulatorOpenButton
+        botEndpoint={'http://localhost:3979/api/messages'}
+        onClick={onClick}
+        botStatus={BotStatus.connected}
+        hidden={false}
+      />
     );
 
     expect(container).toHaveTextContent('Test in Emulator');
@@ -24,7 +29,12 @@ describe('<EmulatorOpenButton />', () => {
   it('should hidden the button if set hidden', () => {
     const onClick = jest.fn(() => {});
     const { container } = render(
-      <EmulatorOpenButton onClick={onClick} botStatus={BotStatus.connected} hidden={true} />
+      <EmulatorOpenButton
+        botEndpoint={'http://localhost:3979/api/messages'}
+        onClick={onClick}
+        botStatus={BotStatus.connected}
+        hidden={true}
+      />
     );
 
     expect(container).not.toHaveTextContent('Test in Emulator');
@@ -33,7 +43,12 @@ describe('<EmulatorOpenButton />', () => {
   it('should show the button if the bot status is not connected', () => {
     const onClick = jest.fn(() => {});
     const { container } = render(
-      <EmulatorOpenButton onClick={onClick} botStatus={BotStatus.publishing} hidden={false} />
+      <EmulatorOpenButton
+        botEndpoint={'http://localhost:3979/api/messages'}
+        onClick={onClick}
+        botStatus={BotStatus.publishing}
+        hidden={false}
+      />
     );
 
     expect(container).not.toHaveTextContent('Test in Emulator');

diff --git a/Composer/packages/client/src/components/TestController/emulatorOpenButton.tsx b/Composer/packages/client/src/components/TestController/emulatorOpenButton.tsx
@@ -4,30 +4,42 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import formatMessage from 'format-message';
-import { ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { ActionButton, IconButton } from 'office-ui-fabric-react/lib/Button';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { Fragment } from 'react';
 
 import { BotStatus } from './../../constants';
 
 interface IEmulatorOpenButtonProps {
+  botEndpoint: string;
   botStatus: BotStatus;
   hidden: boolean;
   onClick: () => void;
 }
 
 export const EmulatorOpenButton: React.FC<IEmulatorOpenButtonProps> = props => {
-  const { onClick, botStatus, hidden } = props;
+  const { onClick, botStatus, hidden, botEndpoint } = props;
   const connected = botStatus === BotStatus.connected;
 
   if (hidden || !connected) return null;
 
   return (
-    <ActionButton
-      iconProps={{
-        iconName: 'OpenInNewTab',
-      }}
-      onClick={onClick}
+    <TooltipHost
+      content={
+        <Fragment>
+          {botEndpoint}
+          <IconButton iconProps={{ iconName: 'copy' }} onClick={() => navigator.clipboard.writeText(botEndpoint)} />
+        </Fragment>
+      }
     >
-      {formatMessage('Test in Emulator')}
-    </ActionButton>
+      <ActionButton
+        iconProps={{
+          iconName: 'OpenInNewTab',
+        }}
+        onClick={onClick}
+      >
+        {formatMessage('Test in Emulator')}
+      </ActionButton>
+    </TooltipHost>
   );
 };
diff --git a/Composer/packages/client/src/components/TestController/index.tsx b/Composer/packages/client/src/components/TestController/index.tsx
@@ -129,7 +129,12 @@ export const TestController: React.FC = () => {
   return (
     <Fragment>
       <div css={bot} ref={botActionRef}>
-        <EmulatorOpenButton botStatus={botStatus} hidden={showError} onClick={handleOpenEmulator} />
+        <EmulatorOpenButton
+          botEndpoint={botEndpoints[projectId] || 'http://localhost:3979/api/messages'}
+          botStatus={botStatus}
+          hidden={showError}
+          onClick={handleOpenEmulator}
+        />
         <Loading botStatus={botStatus} />
         <div ref={addRef}>
           <ErrorInfo hidden={!showError} onClick={handleErrorButtonClick} count={errorLength} />