v3-28-0: react-scripts 5.0.1

allproxy · davechri · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 6, 2023
commit 6001fa967ed6ce717726770544920b68ff2f9028
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,10 +3,6 @@
         "browser": true,
         "es2021": true
     },
-    "extends": [
-        "plugin:react/recommended",
-        "standard"
-    ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaFeatures": {
@@ -16,10 +12,12 @@
         "sourceType": "module"
     },
     "plugins": [
-        "react",
         "@typescript-eslint"
     ],
     "rules": {
-        "semi": [ 2, "always" ]
+        "semi": [
+            2,
+            "always"
+        ]
     }
-}
+}
diff --git a/README.md b/README.md
@@ -8,13 +8,13 @@ MITM debugging proxy with a web GUI to view and modify all of the HTTP and HTTPS
 
 ### Install
 
-> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.27.0/allproxy-3.27.0-x64.dmg)**
+> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.28.0/allproxy-3.28.0-x64.dmg)**
 
-> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.27.0/allproxy-3.27.0-1.x86_64.rpm)**
+> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.28.0/allproxy-3.28.0-1.x86_64.rpm)**
 
-> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.27.0/allproxy_3.27.0_amd64.deb)**
+> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.28.0/allproxy_3.28.0_amd64.deb)**
 
-> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.27.0/allproxy-3.27.0.Setup.exe)**
+> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.28.0/allproxy-3.28.0.Setup.exe)**
 
 > Other install options:
 > 1. Install NPM package: **npm install -g allproxy**

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -24,7 +24,7 @@
     "mobx-react-lite": "^3.2.0",
     "react-bootstrap": "^1.5.2",
     "react-json-view": "^1.21.3",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-tagsinput": "^3.19.0",
     "socket.io-client": "^4.0.1",
     "typescript": "^4.4.3",
@@ -37,12 +37,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -56,16 +50,16 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.26.0"
+    "eslint-plugin-react": "^7.33.2"
   }
-}
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -17,7 +17,7 @@ import { observer } from 'mobx-react-lite';
 import { themeStore } from './store/ThemeStore';
 
 const theme = localStorage.getItem('allproxy-theme');
-let defaultTheme: 'dark' | 'light' = 'dark'
+let defaultTheme: 'dark' | 'light' = 'dark';
 if (theme === 'dark' || theme === 'light') {
   defaultTheme = theme;
 }
@@ -89,7 +89,7 @@ function App() {
 }
 
 const Updating = observer(() => {
-  return <StatusBox show={snapshotStore.isUpdating()}>Updating...</StatusBox>
-})
+  return <StatusBox show={snapshotStore.isUpdating()}>Updating...</StatusBox>;
+});
 
 export default App;
diff --git a/client/src/ImportJSONFile.ts b/client/src/ImportJSONFile.ts
@@ -38,9 +38,9 @@ export function importJSONFile(fileName: string, jsonContent: string, primaryJso
             }
         }
 
-        let json: { [key: string]: any } | undefined
+        let json: { [key: string]: any } | undefined;
         try {
-            json = JSON.parse(record)
+            json = JSON.parse(record);
         } catch (e) {
             try {
                 json = JSON.parse(untruncateJson(record));

diff --git a/client/src/PickButtonStyle.ts b/client/src/PickButtonStyle.ts
@@ -30,13 +30,13 @@ const colorStyles = [
 ];
 
 let index = 0;
-const styleMap: { [key: string]: { background: string, color: string, lightColor: string, filter: string } } = {}
+const styleMap: { [key: string]: { background: string, color: string, lightColor: string, filter: string } } = {};
 
 export function pickLabelStyle(name: string): { background: string, color: string, filter: string } {
     let style = styleMap[name];
     if (style === undefined) {
         //console.log(index, name)
-        style = { background: '', color: '', lightColor: '', filter: '' }
+        style = { background: '', color: '', lightColor: '', filter: '' };
         const s = colorStyles[index];
         style.background = s.background;
         style.lightColor = s.color;

diff --git a/client/src/UntruncateJSON.ts b/client/src/UntruncateJSON.ts
@@ -54,7 +54,7 @@ export function untruncateJson(json: string): string {
 
                     // Field doesn't start with expected "?
                     if (!field.startsWith('"')) {
-                        json += '"' + field + '": "..."'
+                        json += '"' + field + '": "..."';
                         //console.log("Doesn't start with quote")
                     } else {
                         // Colon is missing?

diff --git a/client/src/components/BreakpointModal.tsx b/client/src/components/BreakpointModal.tsx
@@ -1,4 +1,4 @@
-import { IconButton, List, ListItem, Modal } from '@material-ui/core'
+import { IconButton, List, ListItem, Modal } from '@material-ui/core';
 import BreakpointStore from '../store/BreakpointStore';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
@@ -13,7 +13,7 @@ type Props = {
 const BreakpointModal = observer(({ open, onClose, store }: Props) => {
 	useEffect(() => {
 		store.editing(open);
-	})
+	});
 
 	function close() {
 		onClose();

diff --git a/client/src/components/BreakpointResponseModal.tsx b/client/src/components/BreakpointResponseModal.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { Modal } from '@material-ui/core'
+import { Modal } from '@material-ui/core';
 import MessageStore from '../store/MessageStore';
 import ReactJson, { InteractionProps } from 'react-json-view';
 import React from 'react';
@@ -136,6 +136,6 @@ const BreakpointResponseModal = observer(({ open, onClose, store }: Props) => {
 		setResponseBody(props.updated_src);
 		return true;
 	}
-})
+});
 
 export default BreakpointResponseModal;
diff --git a/client/src/components/CreateSnapshotDialog.tsx b/client/src/components/CreateSnapshotDialog.tsx
@@ -11,12 +11,12 @@ const CreateSnapshotNameDialog = observer(({ open, onClose }: Props) => {
 
 	const handleClose = () => {
 		onClose(snapshotName);
-	}
+	};
 
 	return (
 		<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
-      		<DialogTitle id="simple-dialog-title">Enter Snapshot Name</DialogTitle>
-			<input className={'export__input-file-name form-control'} value={snapshotName} onChange={(value) => setSnapshotName(value.target.value)}/>
+			<DialogTitle id="simple-dialog-title">Enter Snapshot Name</DialogTitle>
+			<input className={'export__input-file-name form-control'} value={snapshotName} onChange={(value) => setSnapshotName(value.target.value)} />
 			<button className={'btn btn-success'}
 				disabled={snapshotName.length === 0}
 				onClick={() => onClose(snapshotName)}

diff --git a/client/src/components/DarkModeDialog.tsx b/client/src/components/DarkModeDialog.tsx
@@ -24,9 +24,9 @@ const DarkModeDialog = observer(({ open, onClose }: Props) => {
 	}
 
 	const handleClose = () => {
-		localStorage.setItem('allproxy-theme', theme)
+		localStorage.setItem('allproxy-theme', theme);
 		onClose(theme);
-	}
+	};
 
 	function handleDark() {
 		if (theme === 'light' || themeStore.getTheme() === 'light') {

diff --git a/client/src/components/ExcludeTags.tsx b/client/src/components/ExcludeTags.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import TagsInput from 'react-tagsinput'
+import TagsInput from 'react-tagsinput';
 import 'react-tagsinput/react-tagsinput.css';
 import { filterStore } from '../store/FilterStore';
 
@@ -15,6 +15,6 @@ export default function ExcludeTags() {
 		<TagsInput
 			value={tags}
 			onChange={handleChange}
-		 />
+		/>
 	);
 }
diff --git a/client/src/components/ExportDialog.tsx b/client/src/components/ExportDialog.tsx
@@ -13,7 +13,7 @@ const ExportDialog = observer(({ open, heading: title, name, onClose }: Props) =
 
 	const handleClose = () => {
 		onClose(fileName);
-	}
+	};
 
 	return (
 		<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open} maxWidth={'lg'}>

diff --git a/client/src/components/FilterBar.tsx b/client/src/components/FilterBar.tsx
@@ -22,15 +22,15 @@ const FilterBar = observer(({ }: Props): JSX.Element => {
 	}
 
 	function handleDeleteQuery(query: string) {
-		const i = queries.indexOf(query)
+		const i = queries.indexOf(query);
 		if (i !== -1) queries.splice(i, 1);
 		setQueries(queries.slice());
 		queryStore.deleteEntry(query);
 	}
 
 	async function applyFilter(query: string) {
 		setShowQueries(false);
-		setFilter(query)
+		setFilter(query);
 		filterStore.setFilterNoDebounce(query);
 		if (query.length > 0) {
 			const i = queries.indexOf(query);
@@ -156,7 +156,7 @@ const FilterBar = observer(({ }: Props): JSX.Element => {
 				</div>
 			</ClickAwayListener >
 		</div >
-	)
+	);
 });
 
 export default FilterBar;
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -33,7 +33,7 @@ const Footer = observer(({ filterStore, breakpointStore }: Props): JSX.Element =
 					title="Match case" onClick={() => filterStore.toggleExcludeMatchCase()}>Aa</div>
 			</div>
 		</div>
-	)
+	);
 });
 
 export default Footer;
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -194,7 +194,7 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
 					}}>
 						<div className="header__export fa fa-copy" title="Copy to clipboard"
 							onClick={() => {
-								navigator.clipboard.writeText(snapshotStore.copySelectedSnapshot())
+								navigator.clipboard.writeText(snapshotStore.copySelectedSnapshot());
 								setMoreMenuIcon(null);
 							}}
 						>
@@ -204,7 +204,7 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
 					<MenuItem>
 						<div className="header__import fa fa-image" title="Layout"
 							onClick={() => {
-								snapshotStore.getLayout(snapshotStore.getSelectedSnapshotName())?.toggleVertical()
+								snapshotStore.getLayout(snapshotStore.getSelectedSnapshotName())?.toggleVertical();
 								setMoreMenuIcon(null);
 							}}
 						>
@@ -381,7 +381,7 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
 					setTimeout(() => {
 						updateJSONRequestLabels();
 						snapshotStore.setUpdating(false);
-					})
+					});
 				}}
 				store={jsonLogStore}
 				jsonFields={jsonFields}
@@ -393,7 +393,7 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
 				}}
 			/>
 		</div >
-	)
+	);
 });
 
 export default Header;
diff --git a/client/src/components/HelpDialog.tsx b/client/src/components/HelpDialog.tsx
@@ -21,7 +21,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
 
 	const handleClose = () => {
 		onClose();
-	}
+	};
 
 	const isMac = navigator.appVersion.indexOf('Mac') !== -1;
 	const key = isMac ? 'cmd' : 'ctl';
@@ -59,7 +59,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
 									{proto.name}
 								</button>
 							</span>
-						))
+						));
 					})
 				}
 			</div>

diff --git a/client/src/components/JSONFieldButtons.tsx b/client/src/components/JSONFieldButtons.tsx
@@ -18,7 +18,7 @@ const JSONFieldButtons2 = observer(({ messageQueueStore }: Props): JSX.Element |
 
 	useEffect(() => {
 		messageQueueStore.updateJSONFields(snapshotStore.getSelectedSnapshotName(), messageQueueStore.getMessages());
-	}, [messageQueueStore])
+	}, [messageQueueStore]);
 
 	if (snapshotStore.getJsonFields(snapshotStore.getSelectedSnapshotName()).length === 0 || messageQueueStore.getMessages().length === 0) return null;
 
@@ -46,7 +46,7 @@ const JSONFieldButtons2 = observer(({ messageQueueStore }: Props): JSX.Element |
 								setTimeout(() => {
 									updateJSONRequestLabels();
 									snapshotStore.setUpdating(false);
-								})
+								});
 							}}
 						>
 							{field.name}
@@ -55,11 +55,11 @@ const JSONFieldButtons2 = observer(({ messageQueueStore }: Props): JSX.Element |
 				))
 			}
 		</div >
-	)
+	);
 });
 
 function JSONFieldButtons(messageQueueStore: MessageQueueStore) {
-	return <JSONFieldButtons2 messageQueueStore={messageQueueStore}></JSONFieldButtons2>
+	return <JSONFieldButtons2 messageQueueStore={messageQueueStore}></JSONFieldButtons2>;
 }
 
 export default JSONFieldButtons;
diff --git a/client/src/components/JSONFieldValues.tsx b/client/src/components/JSONFieldValues.tsx
@@ -24,7 +24,7 @@ const JSONFieldValues = observer(({ jsonFields }: Props): JSX.Element | null =>
 							onClick={() => {
 								field.selected = !field.selected;
 								const selectedFields = jsonFields.map(f => f.selected ? f.name : '').filter(f => f !== '');
-								setJsonFieldValues(getJsonFieldValues(selectedFields))
+								setJsonFieldValues(getJsonFieldValues(selectedFields));
 							}}
 						>
 							{field.name}
@@ -43,7 +43,7 @@ const JSONFieldValues = observer(({ jsonFields }: Props): JSX.Element | null =>
 				{jsonFieldValues.map(value => <div style={{ fontFamily: "'Courier New', Courier, monospace" }}>{value}</div>)}
 			</pre>
 		</>
-	)
+	);
 });
 
 export default JSONFieldValues;
-Original file line number
+Diff line change
@@ Expand Up @@
     					title="Match case" onClick={() => filterStore.toggleExcludeMatchCase()}>Aa</div>
     			</div>
     		</div>
-    	)
+    	);
     });
     export default Footer;