srravich/1973-Ngrok-Status-Viewer UX/UI fixes (#2061)

Ngrok tab updated

Tunnel classes updated

Stable ngrok tests

Reducer specs updated

Ngrok tunnel action test updated

Removed ngrok notification icon

Safe commit for tracking notifications

Saga update

Reverted to electron rebuilder to support windows

handling timeouts

* Copy fixes and typo fixes

* Added fetch with timeout test

* Cancel ping interval


* Switch case rule set to warning rather than error

* Pr feedback addressed

Added tests fro ngrokCommands
Removed comments
fixed typos
Added high contrast specific var

.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,