Ngrok Status Viewer UI Updates

.eslintrc.js

@@ -11,7 +11,11 @@ module.exports = {
     'no-dupe-class-members': 'off',
     'no-undef': 'off', // ts compiler catches this
     'prefer-const': 'error',
-
+    'padding-line-between-statements': [
+      1,
+      { blankLine: 'always', prev: '*', next: 'case' },
+      { blankLine: 'always', prev: '*', next: 'case' },
+    ],
     // plugin: import
     'import/first': 'error',
     'import/order': ['error', { 'newlines-between': 'always' }],

packages/app/client/src/state/actions/ngrokTunnelActions.spec.ts

@@ -39,6 +39,11 @@ import {
   TunnelInfo,
   TunnelError,
   TunnelStatus,
+  checkOnTunnel,
+  setTimeIntervalSinceLastPing,
+  TunnelCheckTimeInterval,
+  clearAllNotifications,
+  addNotification,
 } from './ngrokTunnelActions';
 
 describe('Ngrok Tunnel Actions', () => {
@@ -68,9 +73,50 @@ describe('Ngrok Tunnel Actions', () => {
     const mockDate = new Date(1466424490000);
     jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
     const expectedStatus: TunnelStatus = TunnelStatus.Active;
-    const action = updateTunnelStatus(expectedStatus);
+    const action = updateTunnelStatus({
+      tunnelStatus: expectedStatus,
+    });
     expect(action.type).toBe(NgrokTunnelActions.setStatus);
-    expect(action.payload.timestamp).toBe(new Date().toLocaleString());
+    expect(action.payload.timestamp).toBe(new Date().getTime());
     expect(action.payload.status).toBe(expectedStatus);
   });
+
+  it('should create a tunnel status update action on TunnelError', () => {
+    const mockDate = new Date(1466424490000);
+    jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
+    const expectedStatus: TunnelStatus = TunnelStatus.Error;
+    const action = updateTunnelStatus({
+      tunnelStatus: expectedStatus,
+    });
+    expect(action.type).toBe(NgrokTunnelActions.setStatus);
+    expect(action.payload.timestamp).toBe(new Date().getTime());
+    expect(action.payload.status).toBe(expectedStatus);
+  });
+
+  it('should create a checkOnTunnel action', () => {
+    const action = checkOnTunnel({
+      onTunnelPingError: jest.fn(),
+      onTunnelPingSuccess: jest.fn(),
+    });
+    expect(action.type).toBe(NgrokTunnelActions.checkOnTunnel);
+  });
+
+  it('should create a setTimeIntervalSinceLastPing action', () => {
+    const action = setTimeIntervalSinceLastPing(TunnelCheckTimeInterval.SecondInterval);
+    expect(action.type).toBe(NgrokTunnelActions.setTimeIntervalSinceLastPing);
+    expect(action.payload).toBe(TunnelCheckTimeInterval.SecondInterval);
+  });
+
+  it('should create a clear notifications action', () => {
+    const action = clearAllNotifications();
+    expect(action.type).toBe(NgrokTunnelActions.clearAllNotifications);
+    expect(action.payload).toBeNull;
+  });
+
+  it('should create add notification action', () => {
+    const notificationId = 'notification-1';
+    const action = addNotification(notificationId);
+    expect(action.type).toBe(NgrokTunnelActions.addNotification);
+    expect(action.payload).toBe(notificationId);
+  });
 });

packages/app/client/src/state/actions/ngrokTunnelActions.ts

@@ -35,7 +35,20 @@ import { Action } from 'redux';
 export enum NgrokTunnelActions {
   setDetails = 'NgrokTunnel/SET_DETAILS',
   updateOnError = 'NgrokTunnel/TUNNEL_ERROR',
-  setStatus = 'NgrokTunnel/STATUS_CHECK',
+  setStatus = 'NgrokTunnel/SET_STATUS',
+  checkOnTunnel = 'NgrokTunnel/CHECK_ON_TUNNEL',
+  setTimeIntervalSinceLastPing = 'NgrokTunnel/TIME_INTERVAL_SINCE_LAST_PING',
+  clearAllNotifications = 'NgrokTunnel/CLEAR_NOTIFICATIONS',
+  addNotification = 'NgrokTunnel/ADD_NOTIFICATION',
+}
+
+export enum TunnelCheckTimeInterval {
+  // 0 - 20 seconds
+  Now,
+  // 20 - 40 seconds
+  FirstInterval,
+  // 40 - 60 seconds
+  SecondInterval,
 }
 
 export enum TunnelStatus {
@@ -58,15 +71,26 @@ export interface TunnelError {
 
 export interface TunnelStatusAndTimestamp {
   status: TunnelStatus;
-  timestamp: string;
+  timestamp: number;
+}
+
+export interface StatusCheckOnTunnel {
+  onTunnelPingSuccess: Function;
+  onTunnelPingError: Function;
 }
 
 export interface NgrokTunnelAction<T> extends Action {
   type: NgrokTunnelActions;
   payload: T;
 }
 
-export type NgrokTunnelPayloadTypes = TunnelError | TunnelInfo | TunnelStatusAndTimestamp;
+export type NgrokTunnelPayloadTypes =
+  | TunnelError
+  | TunnelInfo
+  | TunnelStatusAndTimestamp
+  | StatusCheckOnTunnel
+  | TunnelCheckTimeInterval
+  | string;
 
 export function updateNewTunnelInfo(payload: TunnelInfo): NgrokTunnelAction<TunnelInfo> {
   return {
@@ -75,12 +99,14 @@ export function updateNewTunnelInfo(payload: TunnelInfo): NgrokTunnelAction<Tunn
   };
 }
 
-export function updateTunnelStatus(tunnelStatus: TunnelStatus): NgrokTunnelAction<TunnelStatusAndTimestamp> {
+export function updateTunnelStatus(payload: {
+  tunnelStatus: TunnelStatus;
+}): NgrokTunnelAction<TunnelStatusAndTimestamp> {
   return {
     type: NgrokTunnelActions.setStatus,
     payload: {
-      status: tunnelStatus,
-      timestamp: new Date().toLocaleString(),
+      status: payload.tunnelStatus,
+      timestamp: new Date().getTime(),
     },
   };
 }
@@ -91,3 +117,33 @@ export function updateTunnelError(payload: TunnelError): NgrokTunnelAction<Tunne
     payload,
   };
 }
+
+export function checkOnTunnel(payload: StatusCheckOnTunnel): NgrokTunnelAction<StatusCheckOnTunnel> {
+  return {
+    type: NgrokTunnelActions.checkOnTunnel,
+    payload,
+  };
+}
+
+export function setTimeIntervalSinceLastPing(
+  payload: TunnelCheckTimeInterval
+): NgrokTunnelAction<TunnelCheckTimeInterval> {
+  return {
+    type: NgrokTunnelActions.setTimeIntervalSinceLastPing,
+    payload,
+  };
+}
+
+export function clearAllNotifications(): NgrokTunnelAction<void> {
+  return {
+    type: NgrokTunnelActions.clearAllNotifications,
+    payload: null,
+  };
+}
+
+export function addNotification(payload: string): NgrokTunnelAction<string> {
+  return {
+    type: NgrokTunnelActions.addNotification,
+    payload,
+  };
+}

packages/app/client/src/state/reducers/azureAuth.ts

@@ -59,6 +59,8 @@ export function azureAuth(
 
   switch (type) {
     case AZURE_BEGIN_AUTH_WORKFLOW:
+    // Falls through
+
     case AZURE_INVALIDATE_ARM_TOKEN:
       return { ...state, access_token: '' };
 

packages/app/client/src/state/reducers/editor.ts

@@ -223,6 +223,10 @@ export const editor = (state: EditorState = DEFAULT_STATE, action: EditorAction
     }
 
     case EditorActions.open: {
+      let makeEditorActive = true;
+      if (action.payload.meta && action.payload.meta.makeActiveByDefault === false) {
+        makeEditorActive = false;
+      }
       const editorKey = state.activeEditor;
       const otherTabGroup = getOtherTabGroup(editorKey);
 
@@ -274,10 +278,13 @@ export const editor = (state: EditorState = DEFAULT_STATE, action: EditorAction
         newDocs[action.payload.documentId] = {};
       }
       Object.assign(newDocs[action.payload.documentId], action.payload);
-
+      let activeDocumentId = state.editors[editorKey].activeDocumentId;
+      if (makeEditorActive) {
+        activeDocumentId = action.payload.documentId;
+      }
       const editorState: Editor = {
         ...state.editors[editorKey],
-        activeDocumentId: action.payload.documentId,
+        activeDocumentId,
         documents: newDocs,
         recentTabs: newRecentTabs,
         tabOrder: newTabOrder,