microsoft · srinaath · Jan 11, 2020 · Dec 13, 2019 · Dec 17, 2019 · Dec 20, 2019
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ build/
 .vscode/*
 chrome-driver-log.txt
 .env
+/packages/**/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/client/package.json b/packages/app/client/package.json
@@ -15,7 +15,8 @@
     "lint:fix": "npm run lint -- --fix",
     "start": "run-s build:shared:dev webpackdevServer:dev",
     "webpackdevServer:dev": "webpack-dev-server --mode development --hot --inline --progress --colors --content-base ./public",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "../../../../testSetup.js",
@@ -51,8 +52,8 @@
     "@babel/preset-typescript": "^7.1.0",
     "@types/enzyme": "^3.1.10",
     "@types/jest": "24.0.13",
-    "@types/react": "~16.3.2",
-    "@types/react-dom": "^16.0.4",
+    "@types/react": "16.9.17",
+    "@types/react-dom": "16.9.4",
     "@types/request": "^2.47.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "24.8.0",
@@ -111,8 +112,8 @@
     "botframework-webchat-core": "4.7.1",
     "eslint-plugin-react": "^7.12.3",
     "markdown-it": "^8.4.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",

diff --git a/packages/app/client/src/constants.ts b/packages/app/client/src/constants.ts
@@ -39,11 +39,13 @@ export const CONTENT_TYPE_APP_SETTINGS = 'application/vnd.microsoft.bfemulator.d
 export const CONTENT_TYPE_WELCOME_PAGE = 'application/vnd.microsoft.bfemulator.document.welcome';
 export const CONTENT_TYPE_TRANSCRIPT = 'application/vnd.microsoft.bfemulator.document.transcript';
 export const CONTENT_TYPE_LIVE_CHAT = SharedConstants.ContentTypes.CONTENT_TYPE_LIVE_CHAT;
+export const CONTENT_TYPE_NGROK_DEBUGGER = SharedConstants.ContentTypes.CONTENT_TYPE_NGROK_DEBUGGER;
 
 export const NAVBAR_BOT_EXPLORER = 'navbar.botExplorer';
 export const NAVBAR_SETTINGS = 'navbar.settings';
 export const NAVBAR_NOTIFICATIONS = 'navbar.notifications';
-export const NAVBAR_RESOURCES = 'navbar:resources';
+export const NAVBAR_RESOURCES = 'navbar.resources';
+export const NAVBAR_NGROK_DEBUGGER = 'navbar.ngrokDebugger';
 
 export const EDITOR_KEY_PRIMARY = 'primary';
 export const EDITOR_KEY_SECONDARY = 'secondary';

diff --git a/packages/app/client/src/state/actions/index.ts b/packages/app/client/src/state/actions/index.ts
@@ -39,3 +39,4 @@ export * from './savedBotUrlsActions';
 export * from './updateActions';
 export * from './userActions';
 export * from './windowStateActions';
+export * from './ngrokTunnelActions';
diff --git a/packages/app/client/src/state/actions/ngrokTunnelActions.spec.ts b/packages/app/client/src/state/actions/ngrokTunnelActions.spec.ts
@@ -0,0 +1,76 @@
+//
+// 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 {
+  updateNewTunnelInfo,
+  updateTunnelError,
+  updateTunnelStatus,
+  NgrokTunnelActions,
+  TunnelInfo,
+  TunnelError,
+  TunnelStatus,
+} from './ngrokTunnelActions';
+
+describe('Ngrok Tunnel Actions', () => {
+  it('should create an update tunnel info action', () => {
+    const payload: TunnelInfo = {
+      publicUrl: 'https://d1a2bf16.ngrok.io',
+      inspectUrl: 'http://127.0.0.1:4041',
+      logPath: 'ngrok.log',
+      postmanCollectionPath: 'postman.json',
+    };
+    const action = updateNewTunnelInfo(payload);
+    expect(action.type).toBe(NgrokTunnelActions.setDetails);
+    expect(action.payload).toEqual(payload);
+  });
+
+  it('should create a update tunnel error action', () => {
+    const payload: TunnelError = {
+      statusCode: 402,
+      errorMessage: 'Tunnel has expired',
+    };
+    const action = updateTunnelError(payload);
+    expect(action.type).toBe(NgrokTunnelActions.updateOnError);
+    expect(action.payload).toEqual(payload);
+  });
+
+  it('should create a tunnel status update action', () => {
+    const mockDate = new Date(1466424490000);
+    jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
+    const expectedStatus: TunnelStatus = TunnelStatus.Active;
+    const action = updateTunnelStatus(expectedStatus);
+    expect(action.type).toBe(NgrokTunnelActions.setStatus);
+    expect(action.payload.timestamp).toBe(new Date().toLocaleString());
+    expect(action.payload.status).toBe(expectedStatus);
+  });
+});
diff --git a/packages/app/client/src/state/actions/ngrokTunnelActions.ts b/packages/app/client/src/state/actions/ngrokTunnelActions.ts
@@ -0,0 +1,93 @@
+//
+// 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 { Action } from 'redux';
+
+export enum NgrokTunnelActions {
+  setDetails = 'NgrokTunnel/SET_DETAILS',
+  updateOnError = 'NgrokTunnel/TUNNEL_ERROR',
+  setStatus = 'NgrokTunnel/STATUS_CHECK',
+}
+
+export enum TunnelStatus {
+  Active,
+  Inactive,
+  Error,
+}
+
+export interface TunnelInfo {
+  publicUrl: string;
+  inspectUrl: string;
+  logPath: string;
+  postmanCollectionPath: string;
+}
+
+export interface TunnelError {
+  statusCode: number;
+  errorMessage: string;
+}
+
+export interface TunnelStatusAndTimestamp {
+  status: TunnelStatus;
+  timestamp: string;
+}
+
+export interface NgrokTunnelAction<T> extends Action {
+  type: NgrokTunnelActions;
+  payload: T;
+}
+
+export type NgrokTunnelPayloadTypes = TunnelError | TunnelInfo | TunnelStatusAndTimestamp;
+
+export function updateNewTunnelInfo(payload: TunnelInfo): NgrokTunnelAction<TunnelInfo> {
+  return {
+    type: NgrokTunnelActions.setDetails,
+    payload,
+  };
+}
+
+export function updateTunnelStatus(tunnelStatus: TunnelStatus): NgrokTunnelAction<TunnelStatusAndTimestamp> {
+  return {
+    type: NgrokTunnelActions.setStatus,
+    payload: {
+      status: tunnelStatus,
+      timestamp: new Date().toLocaleString(),
+    },
+  };
+}
+
+export function updateTunnelError(payload: TunnelError): NgrokTunnelAction<TunnelError> {
+  return {
+    type: NgrokTunnelActions.updateOnError,
+    payload,
+  };
+}
diff --git a/packages/app/client/src/state/reducers/index.ts b/packages/app/client/src/state/reducers/index.ts
@@ -51,3 +51,4 @@ export * from './theme';
 export * from './update';
 export * from './users';
 export * from './windowState';
+export * from './ngrokTunnel';
diff --git a/packages/app/client/src/state/reducers/ngrokTunnel.spec.ts b/packages/app/client/src/state/reducers/ngrokTunnel.spec.ts
@@ -0,0 +1,128 @@
+//
+// 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 {
+  TunnelStatus,
+  NgrokTunnelAction,
+  TunnelInfo,
+  NgrokTunnelPayloadTypes,
+  NgrokTunnelActions,
+  TunnelError,
+  TunnelStatusAndTs,
+} from '../actions/ngrokTunnelActions';
+
+import { ngrokTunnel, NgrokTunnelState } from './ngrokTunnel';
+
+describe('Ngrok Tunnel reducer', () => {
+  const DEFAULT_STATE: NgrokTunnelState = {
+    inspectUrl: 'http://127.0.0.1:4040',
+    publicUrl: '',
+    logPath: '',
+    postmanCollectionPath: '',
+    errors: {} as TunnelError,
+    tunnelStatus: TunnelStatus.Inactive,
+    lastTunnelStatusCheckTS: '',
+  };
+
+  afterEach(() => {
+    const emptyAction: NgrokTunnelAction<NgrokTunnelPayloadTypes> = {
+      type: null,
+      payload: null,
+    };
+    ngrokTunnel({ ...DEFAULT_STATE }, emptyAction);
+  });
+
+  it('Tunnel info should be set from payload', () => {
+    const payload: TunnelInfo = {
+      publicUrl: 'https://abc.io/',
+      inspectUrl: 'http://127.0.0.1:4003',
+      logPath: 'logger.txt',
+      postmanCollectionPath: 'postman.json',
+    };
+    const setDetailsAction: NgrokTunnelAction<NgrokTunnelPayloadTypes> = {
+      type: NgrokTunnelActions.setDetails,
+      payload,
+    };
+    const startingState = { ...DEFAULT_STATE };
+    const endingState = ngrokTunnel(startingState, setDetailsAction);
+
+    expect(endingState.publicUrl).toBe(payload.publicUrl);
+    expect(endingState.logPath).toBe(payload.logPath);
+    expect(endingState.postmanCollectionPath).toBe(payload.postmanCollectionPath);
+    expect(endingState.inspectUrl).toBe(payload.inspectUrl);
+  });
+
+  it('Tunnel errors should be set from payload', () => {
+    const payload: TunnelError = {
+      statusCode: 422,
+      errorMessage: '<h1>Too many connections<h1>',
+    };
+    const updateErrorAction: NgrokTunnelAction<NgrokTunnelPayloadTypes> = {
+      type: NgrokTunnelActions.updateOnError,
+      payload,
+    };
+    const startingState = { ...DEFAULT_STATE };
+    const endingState = ngrokTunnel(startingState, updateErrorAction);
+
+    expect(endingState.publicUrl).toBe(DEFAULT_STATE.publicUrl);
+    expect(endingState.errors.statusCode).toBe(payload.statusCode);
+    expect(endingState.errors.errorMessage).toBe(payload.errorMessage);
+  });
+
+  it('Tunnel status should be set from payload', () => {
+    const payload: TunnelStatusAndTs = {
+      status: TunnelStatus.Active,
+      ts: '12/27/2019, 1:30:00 PM',
+    };
+    const nextPayload: TunnelStatusAndTs = {
+      status: TunnelStatus.Error,
+      ts: '12/27/2019, 1:33:00 PM',
+    };
+    const actions: NgrokTunnelAction<NgrokTunnelPayloadTypes>[] = [
+      {
+        type: NgrokTunnelActions.setStatus,
+        payload,
+      },
+      {
+        type: NgrokTunnelActions.setStatus,
+        payload: nextPayload,
+      },
+    ];
+    const startingState = { ...DEFAULT_STATE };
+    const transientState = ngrokTunnel(startingState, actions[0]);
+    expect(transientState.tunnelStatus).toBe(payload.status);
+
+    const finalState = ngrokTunnel(startingState, actions[1]);
+    expect(finalState.tunnelStatus).toBe(nextPayload.status);
+  });
+});