From 215c0fca4570a5a7014ef7c87cd0ad8670cea247 Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 4 Sep 2024 14:16:39 +0200 Subject: [PATCH 1/7] spinner blue, resizing fix --- src/Components/LoaderContainer.jsx | 8 ++++---- src/Containers/NetworkTableContainer.jsx | 4 +++- src/hooks/useResizeObserver.js | 20 ++++++++++++-------- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/Components/LoaderContainer.jsx b/src/Components/LoaderContainer.jsx index bdc8f11..3797cca 100644 --- a/src/Components/LoaderContainer.jsx +++ b/src/Components/LoaderContainer.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import Styles from './LoaderContainer.styles.scss'; const LoaderContainer = ({ children, show, text }) => { - const spinnerColor = Styles.brandBlue; + const colorBrandBlue = '#0E75DD'; const uniqueId = `Gradient-${Math.round(Math.random() * 10000000)}`; return !show ? children : ( @@ -18,16 +18,16 @@ const LoaderContainer = ({ children, show, text }) => { diff --git a/src/Containers/NetworkTableContainer.jsx b/src/Containers/NetworkTableContainer.jsx index 76ff8ce..493caf3 100644 --- a/src/Containers/NetworkTableContainer.jsx +++ b/src/Containers/NetworkTableContainer.jsx @@ -11,6 +11,7 @@ import InputHAR from '../Components/Import/InputHAR'; import NetworkTableBody from '../Components/NetworkTable/NetworkTableBody'; import { TABLE_HEADER_HEIGHT } from '../constants'; import { useIsVisible } from '../hooks/useIsVisible'; +import { useResizeObserver } from '../hooks/useResizeObserver'; const context = classNames.bind(Styles); @@ -24,12 +25,13 @@ const NetworkTableContainer = () => { const [tableBodyHeight, setTableBodyHeight] = useState(0); const ref = useRef(null); const isVisible = useIsVisible(ref); + const { elementDims } = useResizeObserver(ref); useEffect(() => { if (ref?.current && isVisible) { setTableBodyHeight(ref.current.clientHeight - TABLE_HEADER_HEIGHT); } - }, [ref, actualData, isVisible]); + }, [ref, actualData, isVisible, elementDims]); if (error) { return ( diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js index 3d6b978..ef09c66 100644 --- a/src/hooks/useResizeObserver.js +++ b/src/hooks/useResizeObserver.js @@ -3,31 +3,35 @@ import { useEffect, useState } from 'react'; /* eslint no-underscore-dangle: 0 */ export const useResizeObserver = (elementRef) => { + let ref = null; const [elementDims, setElementDims] = useState({ width: 0, height: 0, }); + useEffect(() => { + ref = elementRef.current; const onResize = () => { - if (elementRef) { + if (ref) { setElementDims({ - width: elementRef.clientWidth, - height: elementRef.clientHeight, + width: ref.clientWidth, + height: ref.clientHeight, }); } }; + const resizeObserver = new ResizeObserver(onResize); - if (elementRef) { - resizeObserver.observe(elementRef); + if (ref) { + resizeObserver.observe(ref); } return () => { - if (elementRef) { - resizeObserver.unobserve(elementRef); + if (ref) { + resizeObserver.unobserve(ref); } }; - }, [elementRef]); + }, [ref]); return { elementDims }; }; From b5b834a794df1cf1847278009aad11a7c47b3a2b Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 4 Sep 2024 15:15:40 +0200 Subject: [PATCH 2/7] improve fetching file --- examples/src/App.jsx | 1 + examples/src/App.module.scss | 4 +- examples/src/Components/Footer.module.scss | 4 -- src/Components/Actions/ResetButton.jsx | 11 +++-- src/Components/Import/InputHAR.jsx | 50 +++++++++------------- src/Components/Import/URLInput.jsx | 11 ++--- src/hooks/useResizeObserver.js | 2 +- src/state/network/Context.jsx | 1 + src/state/network/NetworkProvider.jsx | 2 +- src/state/network/actions.js | 3 +- 10 files changed, 41 insertions(+), 48 deletions(-) diff --git a/examples/src/App.jsx b/examples/src/App.jsx index a417bf0..cf51a7f 100644 --- a/examples/src/App.jsx +++ b/examples/src/App.jsx @@ -28,6 +28,7 @@ const App = () => {
setIsDataLoaded(true)} + onReset={() => setIsDataLoaded(false)} {...fileOptions} />
diff --git a/examples/src/App.module.scss b/examples/src/App.module.scss index d9b2783..917ee87 100644 --- a/examples/src/App.module.scss +++ b/examples/src/App.module.scss @@ -1,10 +1,12 @@ @import './../../src/styles/variables'; .app-container { + display: flex; + flex-direction: column; height: 100%; .network-container { - height: auto; + flex: 1 1 auto; &.network-container-data-loaded { height: 100%; diff --git a/examples/src/Components/Footer.module.scss b/examples/src/Components/Footer.module.scss index f0b47a6..28b4aea 100644 --- a/examples/src/Components/Footer.module.scss +++ b/examples/src/Components/Footer.module.scss @@ -1,10 +1,6 @@ @import './../../../src/styles/variables'; .footer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; padding: 1rem; background-color: $white-97; border-top: 1px solid $white-80; diff --git a/src/Components/Actions/ResetButton.jsx b/src/Components/Actions/ResetButton.jsx index 5644a04..0d5e735 100644 --- a/src/Components/Actions/ResetButton.jsx +++ b/src/Components/Actions/ResetButton.jsx @@ -5,16 +5,19 @@ import IconReset from '../../icons/IconReset'; import Styles from './IconButton.styles.scss'; import { useNetwork } from '../../state/network/Context'; import Tooltip from '../Common/Tooltip/Tooltip'; +import { useTheme } from '../../state/theme/Context'; const ResetButton = () => { - const { - actions, - callbacks, - } = useNetwork(); + const { actions, callbacks } = useNetwork(); + const { showImportHar } = useTheme(); const handleReset = () => { actions.resetState(); callbacks.onReset(); + + if (showImportHar) { + window.history.pushState({}, document.title, '/'); + } }; return ( diff --git a/src/Components/Import/InputHAR.jsx b/src/Components/Import/InputHAR.jsx index 320c3a9..8054fce 100644 --- a/src/Components/Import/InputHAR.jsx +++ b/src/Components/Import/InputHAR.jsx @@ -6,34 +6,26 @@ import URLInput from './URLInput'; const SAMPLE_HAR_URL = 'https://raw.githubusercontent.com/saucelabs/network-viewer/main/examples/src/data/network.har'; -const InputHAR = () => { - const handleURLSubmit = (fetchInfo) => { - const { origin, pathname } = document.location; - const newURL = `${origin}${pathname}?${stringify(fetchInfo)}`; - document.location.href = newURL; - }; - - return ( -
-

- OR add HAR file URL in the below input box -

- -

- - For Example use this har file - - - {SAMPLE_HAR_URL} - -

-
- ); -}; +const InputHAR = () => ( +
+

+ OR add HAR file URL in the below input box +

+ +

+ + For Example use this har file + + + {SAMPLE_HAR_URL} + +

+
+); export default InputHAR; diff --git a/src/Components/Import/URLInput.jsx b/src/Components/Import/URLInput.jsx index 345df38..e64a5f9 100644 --- a/src/Components/Import/URLInput.jsx +++ b/src/Components/Import/URLInput.jsx @@ -1,11 +1,12 @@ import React, { useState } from 'react'; -import PropTypes from 'prop-types'; import Styles from './URLInput.styles.scss'; import Button from './../../../src/Components/Common/Button'; import CORSCheckbox from './CORSCheckbox'; +import { useNetwork } from '../../state/network/Context'; -const URLInput = ({ onSubmit }) => { +const URLInput = () => { + const { actions } = useNetwork(); const [url, setURL] = useState(''); const [isCORSEnabled, setCORS] = useState(false); const handleInputChange = ({ target }) => { @@ -13,7 +14,7 @@ const URLInput = ({ onSubmit }) => { }; const handleSubmit = () => { - onSubmit({ + actions.fetchFile({ file: url, isCORSEnabled, }); @@ -43,8 +44,4 @@ const URLInput = ({ onSubmit }) => { ); }; -URLInput.propTypes = { - onSubmit: PropTypes.func.isRequired, -}; - export default URLInput; diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js index ef09c66..477eec9 100644 --- a/src/hooks/useResizeObserver.js +++ b/src/hooks/useResizeObserver.js @@ -10,7 +10,7 @@ export const useResizeObserver = (elementRef) => { }); useEffect(() => { - ref = elementRef.current; + ref = elementRef?.current; const onResize = () => { if (ref) { setElementDims({ diff --git a/src/state/network/Context.jsx b/src/state/network/Context.jsx index 731d709..a97801f 100644 --- a/src/state/network/Context.jsx +++ b/src/state/network/Context.jsx @@ -13,6 +13,7 @@ export const useNetwork = () => { const [state, dispatch, callbacks] = context; const wrappedActions = actionsWrapper({ + fetchFile: actions.fetchFile, updateData: actions.updateData, updateSearch: actions.updateSearch, updateSort: actions.updateSort, diff --git a/src/state/network/NetworkProvider.jsx b/src/state/network/NetworkProvider.jsx index bb0528f..2c79a23 100644 --- a/src/state/network/NetworkProvider.jsx +++ b/src/state/network/NetworkProvider.jsx @@ -46,7 +46,7 @@ const NetworkProvider = (props) => { // Fetch HAR file onChange of file prop useEffect(() => { if (file) { - fetchFile(dispatch)(file, fetchOptions); + fetchFile(dispatch)({ file, fetchOptions }); } }, [file]); diff --git a/src/state/network/actions.js b/src/state/network/actions.js index 89fdacc..8d8e5bf 100644 --- a/src/state/network/actions.js +++ b/src/state/network/actions.js @@ -67,7 +67,8 @@ export const resetState = (dispatch) => (payload) => dispatch({ payload, }); -export const fetchFile = (dispatch) => (file, options = { withCredentials: true }) => { +export const fetchFile = (dispatch) => (payload = { options: { withCredentials: true } }) => { + const { file, options } = payload; fetchFileRequest(dispatch)(); axios.get(file, options) .then(({ data }) => { From 0b2ed2127dbe6a170d628f9c6ef60385fcb795cf Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 4 Sep 2024 15:21:15 +0200 Subject: [PATCH 3/7] update test snapshot and jest config for ResizeObserver --- config/jest/jest.setup.js | 14 ++++++++++++++ .../__snapshots__/MainContainer.spec.jsx.snap | 4 +--- .../NetworkTableContainer.spec.jsx.snap | 4 +--- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/config/jest/jest.setup.js b/config/jest/jest.setup.js index 8c4a26b..3c989a4 100644 --- a/config/jest/jest.setup.js +++ b/config/jest/jest.setup.js @@ -15,3 +15,17 @@ global.IntersectionObserver = class IntersectionObserver { return null; } }; + +global.ResizeObserver = class ResizeObserver { + disconnect() { + return null; + } + + observe() { + return null; + } + + unobserve() { + return null; + } +}; diff --git a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap index 900667c..ad346c2 100644 --- a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap +++ b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap @@ -564,9 +564,7 @@ exports[`MainContainer renders without crashing 1`] = `

OR add HAR file URL in the below input box

- +
OR add HAR file URL in the below input box - +
Date: Wed, 4 Sep 2024 15:26:20 +0200 Subject: [PATCH 4/7] lower case Fetching --- src/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants.js b/src/constants.js index 1d28c5e..96c3e0f 100644 --- a/src/constants.js +++ b/src/constants.js @@ -181,7 +181,7 @@ export const STATUS_FILTERS = [ }, ]; -export const FETCH_FILE_LOAD_TEXT = 'Please wait, Fetching file is in progress.'; +export const FETCH_FILE_LOAD_TEXT = 'Please wait, fetching file is in progress.'; export const TIMINGS = { queueing: { From b3d29addd4be7766037789d06d017c88326b63e7 Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 11 Sep 2024 14:06:34 +0200 Subject: [PATCH 5/7] set peerDeps --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index c01f701..eb700a6 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,7 @@ "recharts": ">=1.8.5" }, "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^16.13.1" }, "devDependencies": { "@babel/core": "^7.24.8", From f31df74c8e0586fcc0e8c193428229e3f6dd3ad6 Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 11 Sep 2024 14:08:13 +0200 Subject: [PATCH 6/7] update snapshots --- package-lock.json | 3 +-- .../Containers/__snapshots__/MainContainer.spec.jsx.snap | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f5cfda1..c47b02e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -73,8 +73,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^16.13.1" } }, "node_modules/@alloc/quick-lru": { diff --git a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap index ad346c2..8a85159 100644 --- a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap +++ b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap @@ -65,7 +65,7 @@ exports[`MainContainer renders without crashing 1`] = `
From 23eabf9d850f62fbbc68b4a0a3383f8dd64f1624 Mon Sep 17 00:00:00 2001 From: Yu Yi Yang Date: Wed, 11 Sep 2024 14:53:22 +0200 Subject: [PATCH 7/7] table header width --- examples/package-lock.json | 5 ++--- .../NetworkTable/NetworkTableBody.jsx | 20 ++++++++++--------- src/hooks/useResizeObserver.js | 2 +- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/examples/package-lock.json b/examples/package-lock.json index ab89107..d1d5def 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -17,7 +17,7 @@ } }, "..": { - "version": "2.1.0", + "version": "2.4.2", "license": "MIT", "dependencies": { "@react-aria/overlays": "3.14.0", @@ -84,8 +84,7 @@ "typescript": "^4.9.5" }, "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^16.13.1" } }, "../node_modules/classnames": {}, diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx index d827d4c..3bf6e13 100644 --- a/src/Components/NetworkTable/NetworkTableBody.jsx +++ b/src/Components/NetworkTable/NetworkTableBody.jsx @@ -50,22 +50,24 @@ const NetworkTableBody = ({ height }) => { const totalNetworkTime = state.get('totalNetworkTime'); const selectedReqIndex = state.get('selectedReqIndex'); - const ref = useRef(null); - const { elementDims } = useResizeObserver(ref?.current?._outerRef || ref?.current); + const listRef = useRef(null); + const { elementDims } = useResizeObserver(listRef); - useEffect(() => actions.setTableHeaderWidth(elementDims.width), [elementDims]); + useEffect(() => { + actions.setTableHeaderWidth(elementDims.width); + }, [elementDims]); useEffect(() => { - if (enableAutoScroll && ref?.current?._outerRef) { - const outerRef = ref?.current?._outerRef; + if (enableAutoScroll && listRef?.current?._outerRef) { + const outerRef = listRef?.current?._outerRef; const needToScroll = outerRef.scrollTop + outerRef.offsetHeight + (numberOfNewEntries * TABLE_ENTRY_HEIGHT) >= outerRef.scrollHeight; if (needToScroll) { - ref.current._outerRef.scrollTop = outerRef.scrollHeight; + listRef.current._outerRef.scrollTop = outerRef.scrollHeight; } } - }, [data, ref]); + }, [data, listRef]); const handleReqSelect = (payload) => { if (selectedReqIndex === payload.index) { @@ -80,7 +82,7 @@ const NetworkTableBody = ({ height }) => { if (actualData.size === 0) { return (
@@ -98,7 +100,7 @@ const NetworkTableBody = ({ height }) => { return ( <> { }); useEffect(() => { - ref = elementRef?.current; + ref = elementRef?.current?._outerRef || elementRef?.current; const onResize = () => { if (ref) { setElementDims({