-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show tunneling information notification when starting bot with …
…remote skills (#7611) * add util to get device OS * add port to local publish result * add port to botEndpointsState * show ngrok notification when starting a bot with remote skills * only show the remote skills notification onces per session per bot * update l10n file * address feedback * update locale file after merge * fix failing test Co-authored-by: Soroush <[email protected]>
- Loading branch information
1 parent
a326776
commit 0c914b2
Showing
16 changed files
with
229 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
Composer/packages/client/src/components/Notifications/TunnelingSetupNotification.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| /** @jsx jsx */ | ||
| import { jsx, css } from '@emotion/core'; | ||
| import React from 'react'; | ||
| import formatMessage from 'format-message'; | ||
| import { IconButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button'; | ||
| import { NeutralColors, FontSizes, FluentTheme } from '@uifabric/fluent-theme'; | ||
| import { Link } from 'office-ui-fabric-react/lib/Link'; | ||
| import { FontWeights } from '@uifabric/styling'; | ||
|
|
||
| import { platform, OS } from '../../utils/os'; | ||
|
|
||
| import { CardProps } from './NotificationCard'; | ||
|
|
||
| const container = css` | ||
| padding: 0 16px 16px 40px; | ||
| position: relative; | ||
| `; | ||
|
|
||
| const commandContainer = css` | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| position: relative; | ||
| padding: 4px 28px 4px 8px; | ||
| background-color: ${NeutralColors.gray20}; | ||
| line-height: 22px; | ||
| margin: 1rem 0; | ||
| `; | ||
|
|
||
| const copyContainer = css` | ||
| margin: 0; | ||
| margin-bottom: 4px; | ||
| font-size: ${FontSizes.size16}; | ||
| font-weight: ${FontWeights.semibold}; | ||
| `; | ||
|
|
||
| const copyIconColor = FluentTheme.palette.themeDark; | ||
| const copyIconStyles: IButtonStyles = { | ||
| root: { position: 'absolute', right: 0, color: copyIconColor, height: '22px' }, | ||
| rootHovered: { backgroundColor: 'transparent', color: copyIconColor }, | ||
| rootPressed: { backgroundColor: 'transparent', color: copyIconColor }, | ||
| }; | ||
|
|
||
| const linkContainer = css` | ||
| margin: 0; | ||
| `; | ||
|
|
||
| const getNgrok = () => { | ||
| const os = platform(); | ||
| if (os === OS.Windows) { | ||
| return 'ngrok.exe'; | ||
| } | ||
|
|
||
| return 'ngrok'; | ||
| }; | ||
|
|
||
| export const TunnelingSetupNotification: React.FC<CardProps> = (props) => { | ||
| const { title, data } = props; | ||
| const port = data?.port; | ||
| const command = `${getNgrok()} http ${port} --host-header=localhost`; | ||
|
|
||
| const copyLocationToClipboard = async () => { | ||
| try { | ||
| await window.navigator.clipboard.writeText(command); | ||
| } catch (e) { | ||
| // eslint-disable-next-line no-console | ||
| console.error('Something went wrong when trying to copy the command to clipboard.', e); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div css={container}> | ||
| <h2 css={copyContainer}>{title}</h2> | ||
| <p css={linkContainer}> | ||
| {formatMessage.rich('<a>Install ngrok</a> and run the following command to continue', { | ||
| a: ({ children }) => ( | ||
| <Link key="ngrok-download" href="https://ngrok.com/download" rel="noopener noreferrer" target="_blank"> | ||
| {children} | ||
| </Link> | ||
| ), | ||
| })} | ||
| </p> | ||
| <div css={commandContainer}> | ||
| {command} | ||
| <IconButton | ||
| ariaLabel={formatMessage('Copy command to clipboard')} | ||
| iconProps={{ iconName: 'Copy' }} | ||
| styles={copyIconStyles} | ||
| title={formatMessage('Copy command to clipboard')} | ||
| onClick={copyLocationToClipboard} | ||
| /> | ||
| </div> | ||
| <p css={linkContainer}> | ||
| <Link | ||
| href="https://docs.microsoft.com/en-us/composer/how-to-connect-to-a-skill" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| > | ||
| {formatMessage('Learn more')} | ||
| </Link> | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 8 additions & 33 deletions
41
Composer/packages/client/src/recoilModel/utils/fontUtil.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| import { platform, OS } from '../os'; | ||
|
|
||
| describe('platform', () => { | ||
| it.each([ | ||
| [ | ||
| OS.Windows, | ||
| '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) @bfc/electron-server/1.4.0-nightly.237625.d1378c6 Chrome/80.0.3987.165 Electron/8.2.4 Safari/537.36', | ||
| ], | ||
| [ | ||
| OS.MacOS, | ||
| '5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36 Edg/90.0.818.46', | ||
| ], | ||
| [ | ||
| OS.Linux, | ||
| 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36', | ||
| ], | ||
| [ | ||
| OS.Unix, | ||
| 'Mozilla/5.0 (X11; CrOS x86_64 13020.67.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36', | ||
| ], | ||
| ])('%s', (expectedOS, userAgentString) => { | ||
| expect(platform(userAgentString)).toBe(expectedOS); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| export enum OS { | ||
| Windows = 'Windows', | ||
| MacOS = 'MacOS', | ||
| Linux = 'Linux', | ||
| Unix = 'Unix', | ||
| Unknown = 'Unknown', | ||
| } | ||
|
|
||
| export function platform(userAgent: string = window.navigator.userAgent): OS { | ||
| if (userAgent.includes('Win')) { | ||
| return OS.Windows; | ||
| } | ||
|
|
||
| if (userAgent.includes('Mac')) { | ||
| return OS.MacOS; | ||
| } | ||
|
|
||
| if (userAgent.includes('Linux')) { | ||
| return OS.Linux; | ||
| } | ||
|
|
||
| if (userAgent.includes('X11')) { | ||
| return OS.Unix; | ||
| } | ||
|
|
||
| return OS.Unknown; | ||
| } |
Oops, something went wrong.