Skip to content
This repository was archived by the owner on Jan 5, 2026. It is now read-only.

Commit e200c7f

Browse files
srinaathsrinaath
authored
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
1 parent 7234dcf commit e200c7f

64 files changed

Lines changed: 2050 additions & 322 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ module.exports = {
1111
'no-dupe-class-members': 'off',
1212
'no-undef': 'off', // ts compiler catches this
1313
'prefer-const': 'error',
14-
14+
'padding-line-between-statements': [
15+
1,
16+
{ blankLine: 'always', prev: '*', next: 'case' },
17+
{ blankLine: 'always', prev: '*', next: 'case' },
18+
],
1519
// plugin: import
1620
'import/first': 'error',
1721
'import/order': ['error', { 'newlines-between': 'always' }],

‎package-lock.json‎

Lines changed: 11 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ import {
3939
TunnelInfo,
4040
TunnelError,
4141
TunnelStatus,
42+
checkOnTunnel,
43+
setTimeIntervalSinceLastPing,
44+
TunnelCheckTimeInterval,
45+
clearAllNotifications,
46+
addNotification,
4247
} from './ngrokTunnelActions';
4348

4449
describe('Ngrok Tunnel Actions', () => {
@@ -68,9 +73,50 @@ describe('Ngrok Tunnel Actions', () => {
6873
const mockDate = new Date(1466424490000);
6974
jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
7075
const expectedStatus: TunnelStatus = TunnelStatus.Active;
71-
const action = updateTunnelStatus(expectedStatus);
76+
const action = updateTunnelStatus({
77+
tunnelStatus: expectedStatus,
78+
});
7279
expect(action.type).toBe(NgrokTunnelActions.setStatus);
73-
expect(action.payload.timestamp).toBe(new Date().toLocaleString());
80+
expect(action.payload.timestamp).toBe(new Date().getTime());
7481
expect(action.payload.status).toBe(expectedStatus);
7582
});
83+
84+
it('should create a tunnel status update action on TunnelError', () => {
85+
const mockDate = new Date(1466424490000);
86+
jest.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
87+
const expectedStatus: TunnelStatus = TunnelStatus.Error;
88+
const action = updateTunnelStatus({
89+
tunnelStatus: expectedStatus,
90+
});
91+
expect(action.type).toBe(NgrokTunnelActions.setStatus);
92+
expect(action.payload.timestamp).toBe(new Date().getTime());
93+
expect(action.payload.status).toBe(expectedStatus);
94+
});
95+
96+
it('should create a checkOnTunnel action', () => {
97+
const action = checkOnTunnel({
98+
onTunnelPingError: jest.fn(),
99+
onTunnelPingSuccess: jest.fn(),
100+
});
101+
expect(action.type).toBe(NgrokTunnelActions.checkOnTunnel);
102+
});
103+
104+
it('should create a setTimeIntervalSinceLastPing action', () => {
105+
const action = setTimeIntervalSinceLastPing(TunnelCheckTimeInterval.SecondInterval);
106+
expect(action.type).toBe(NgrokTunnelActions.setTimeIntervalSinceLastPing);
107+
expect(action.payload).toBe(TunnelCheckTimeInterval.SecondInterval);
108+
});
109+
110+
it('should create a clear notifications action', () => {
111+
const action = clearAllNotifications();
112+
expect(action.type).toBe(NgrokTunnelActions.clearAllNotifications);
113+
expect(action.payload).toBeNull;
114+
});
115+
116+
it('should create add notification action', () => {
117+
const notificationId = 'notification-1';
118+
const action = addNotification(notificationId);
119+
expect(action.type).toBe(NgrokTunnelActions.addNotification);
120+
expect(action.payload).toBe(notificationId);
121+
});
76122
});

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

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,20 @@ import { Action } from 'redux';
3535
export enum NgrokTunnelActions {
3636
setDetails = 'NgrokTunnel/SET_DETAILS',
3737
updateOnError = 'NgrokTunnel/TUNNEL_ERROR',
38-
setStatus = 'NgrokTunnel/STATUS_CHECK',
38+
setStatus = 'NgrokTunnel/SET_STATUS',
39+
checkOnTunnel = 'NgrokTunnel/CHECK_ON_TUNNEL',
40+
setTimeIntervalSinceLastPing = 'NgrokTunnel/TIME_INTERVAL_SINCE_LAST_PING',
41+
clearAllNotifications = 'NgrokTunnel/CLEAR_NOTIFICATIONS',
42+
addNotification = 'NgrokTunnel/ADD_NOTIFICATION',
43+
}
44+
45+
export enum TunnelCheckTimeInterval {
46+
// 0 - 20 seconds
47+
Now,
48+
// 20 - 40 seconds
49+
FirstInterval,
50+
// 40 - 60 seconds
51+
SecondInterval,
3952
}
4053

4154
export enum TunnelStatus {
@@ -58,15 +71,26 @@ export interface TunnelError {
5871

5972
export interface TunnelStatusAndTimestamp {
6073
status: TunnelStatus;
61-
timestamp: string;
74+
timestamp: number;
75+
}
76+
77+
export interface StatusCheckOnTunnel {
78+
onTunnelPingSuccess: Function;
79+
onTunnelPingError: Function;
6280
}
6381

6482
export interface NgrokTunnelAction<T> extends Action {
6583
type: NgrokTunnelActions;
6684
payload: T;
6785
}
6886

69-
export type NgrokTunnelPayloadTypes = TunnelError | TunnelInfo | TunnelStatusAndTimestamp;
87+
export type NgrokTunnelPayloadTypes =
88+
| TunnelError
89+
| TunnelInfo
90+
| TunnelStatusAndTimestamp
91+
| StatusCheckOnTunnel
92+
| TunnelCheckTimeInterval
93+
| string;
7094

7195
export function updateNewTunnelInfo(payload: TunnelInfo): NgrokTunnelAction<TunnelInfo> {
7296
return {
@@ -75,12 +99,14 @@ export function updateNewTunnelInfo(payload: TunnelInfo): NgrokTunnelAction<Tunn
7599
};
76100
}
77101

78-
export function updateTunnelStatus(tunnelStatus: TunnelStatus): NgrokTunnelAction<TunnelStatusAndTimestamp> {
102+
export function updateTunnelStatus(payload: {
103+
tunnelStatus: TunnelStatus;
104+
}): NgrokTunnelAction<TunnelStatusAndTimestamp> {
79105
return {
80106
type: NgrokTunnelActions.setStatus,
81107
payload: {
82-
status: tunnelStatus,
83-
timestamp: new Date().toLocaleString(),
108+
status: payload.tunnelStatus,
109+
timestamp: new Date().getTime(),
84110
},
85111
};
86112
}
@@ -91,3 +117,33 @@ export function updateTunnelError(payload: TunnelError): NgrokTunnelAction<Tunne
91117
payload,
92118
};
93119
}
120+
121+
export function checkOnTunnel(payload: StatusCheckOnTunnel): NgrokTunnelAction<StatusCheckOnTunnel> {
122+
return {
123+
type: NgrokTunnelActions.checkOnTunnel,
124+
payload,
125+
};
126+
}
127+
128+
export function setTimeIntervalSinceLastPing(
129+
payload: TunnelCheckTimeInterval
130+
): NgrokTunnelAction<TunnelCheckTimeInterval> {
131+
return {
132+
type: NgrokTunnelActions.setTimeIntervalSinceLastPing,
133+
payload,
134+
};
135+
}
136+
137+
export function clearAllNotifications(): NgrokTunnelAction<void> {
138+
return {
139+
type: NgrokTunnelActions.clearAllNotifications,
140+
payload: null,
141+
};
142+
}
143+
144+
export function addNotification(payload: string): NgrokTunnelAction<string> {
145+
return {
146+
type: NgrokTunnelActions.addNotification,
147+
payload,
148+
};
149+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ export function azureAuth(
5959

6060
switch (type) {
6161
case AZURE_BEGIN_AUTH_WORKFLOW:
62+
// Falls through
63+
6264
case AZURE_INVALIDATE_ARM_TOKEN:
6365
return { ...state, access_token: '' };
6466

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,10 @@ export const editor = (state: EditorState = DEFAULT_STATE, action: EditorAction
223223
}
224224

225225
case EditorActions.open: {
226+
let makeEditorActive = true;
227+
if (action.payload.meta && action.payload.meta.makeActiveByDefault === false) {
228+
makeEditorActive = false;
229+
}
226230
const editorKey = state.activeEditor;
227231
const otherTabGroup = getOtherTabGroup(editorKey);
228232

@@ -274,10 +278,13 @@ export const editor = (state: EditorState = DEFAULT_STATE, action: EditorAction
274278
newDocs[action.payload.documentId] = {};
275279
}
276280
Object.assign(newDocs[action.payload.documentId], action.payload);
277-
281+
let activeDocumentId = state.editors[editorKey].activeDocumentId;
282+
if (makeEditorActive) {
283+
activeDocumentId = action.payload.documentId;
284+
}
278285
const editorState: Editor = {
279286
...state.editors[editorKey],
280-
activeDocumentId: action.payload.documentId,
287+
activeDocumentId,
281288
documents: newDocs,
282289
recentTabs: newRecentTabs,
283290
tabOrder: newTabOrder,

0 commit comments

Comments
 (0)