applied requested changes

web/src/js/__tests__/components/Header/MenuToggleSpec.js

@@ -24,6 +24,7 @@ test("OptionsToggle", async () => {
             <OptionsToggle name='anticache'>toggle anticache</OptionsToggle>,
                 {store}
         );
+    globalThis.fetch = jest.fn()
 
     expect(asFragment()).toMatchSnapshot();
     fireEvent.click(screen.getByText("toggle anticache"));

web/src/js/__tests__/ducks/optionsSpec.js

@@ -23,11 +23,10 @@ describe('option reducer', () => {
     })
 })
 
-let store = mockStore()
-
 describe('option actions', () => {
 
     it('should be possible to update option', () => {
+        let store = mockStore()
         let mockResponse = { status: 200 },
             promise = Promise.resolve(mockResponse)
         global.fetch = r => { return promise }
@@ -42,7 +41,8 @@ describe('option actions', () => {
 describe('sendUpdate', () => {
 
     it('should handle error', async () => {
-        let mockResponse = { status: 404, text: "fooerror" },
+        let store = mockStore()
+        let mockResponse = { status: 404, text: () => "fooerror" },
             promise = Promise.resolve(mockResponse)
         global.fetch = r => { return promise }
         await store.dispatch(OptionsActions.pureSendUpdate("bar", "error"))
@@ -55,6 +55,7 @@ describe('sendUpdate', () => {
 describe('save', () => {
 
     it('should dump options', () => {
+        let store = mockStore()
         global.fetch = jest.fn()
         store.dispatch(OptionsActions.save())
         expect(fetch).toBeCalledWith(

web/src/js/components/ContentView/ContentLoader.tsx

@@ -50,7 +50,6 @@ export default function withContentLoader(View) {
 
         updateContent(props) {
             if (this.state.request) {
-                console.log("request:",this.state.request)
                 this.state.request.abort()
             }
             // We have a few special cases where we do not need to make an HTTP request.

web/src/js/components/FlowView/Details.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {formatTimeDelta, formatTimeStamp} from '../../utils'
-import { Flow, HTTPMessage } from '../../flow'
+import { Flow, HTTPMessage, Connection } from '../../flow'
 
 type TimeStampProps = {
     t: number,
@@ -27,15 +27,7 @@ export function TimeStamp({t, deltaTo, title}: TimeStampProps) {
 }
 
 type ConnectionInfoProps = {
-    conn: {
+    conn: Connection,
-        address: string[],
-        sni: string,
-        tls_version: string,
-        cipher_name: string,
-        alpn_proto_negotiated: string,
-        ip_address: string[],
-        source_address: string[],
-    },
 }
 
 export function ConnectionInfo({conn}: ConnectionInfoProps) {
@@ -44,7 +36,7 @@ export function ConnectionInfo({conn}: ConnectionInfoProps) {
             <tbody>
             <tr key="address">
                 <td>Address:</td>
-                <td>{conn.address.join(':')}</td>
+                <td>{conn.address?.join(':')}</td>
             </tr>
             {conn.sni && (
                 <tr key="sni">

web/src/js/contrib/CodeMirror.tsx

@@ -52,7 +52,7 @@ export default class CodeMirror extends React.Component<CodeMirrorProps, CodeMir
     }
 
     UNSAFE_componentWillMount() {
-        //this.componentWillReceiveProps = _.debounce(this.componentWillReceiveProps, 0);
+        this.componentWillReceiveProps = _.debounce(this.componentWillReceiveProps, 0);
         if (this.props.path) {
             console.error('Warning: react-codemirror: the `path` prop has been changed to `name`');
         }

web/src/js/ducks/options.ts

@@ -36,27 +36,27 @@ const reducer: Reducer<OptionsState> = (state = defaultState, action) => {
 }
 export default reducer
 
-export function pureSendUpdate(option: Option, value) {
+export function pureSendUpdate(option, value) {
     return async dispatch => {
         try {
             const response = await fetchApi.put('/options', {[option]: value});
             if (response.status === 200) {
                 dispatch(optionsEditorActions.updateSuccess(option))
             } else {
-                throw await response.text
+                throw await response.text()
             }
         } catch (error) {
-            return dispatch(optionsEditorActions.updateError(option, error))
+            dispatch(optionsEditorActions.updateError(option, error))
         }
     }
 }
 
-export function update(name: Option, value: any): AppThunk {
+let sendUpdate = _.throttle(pureSendUpdate, 500, {leading: true, trailing: true})
-    let sendUpdate = _.throttle(pureSendUpdate(name, value), 500, {leading: true, trailing: true})
 
+export function update(name: Option, value: any): AppThunk {
     return dispatch => {
         dispatch(optionsEditorActions.startUpdate(name, value))
-        sendUpdate();
+        dispatch(sendUpdate(name, value));
     }
 }
 

web/src/js/flow.ts

@@ -34,13 +34,18 @@ export type Address = [string, number];
 
 export interface Connection {
     id: string
+    ip_address?: string[]
+    address?: string[]
+    source_address?: string[]
     peername?: Address
     sockname?: Address
 
     tls_established: boolean
     sni?: string | boolean
     cipher?: string
+    cipher_name?: string
     alpn?: string
+    alpn_proto_negotiated?: string
     tls_version?: string
 
     timestamp_start?: number