Fix layout and stylings (#152)

* spinner blue, resizing fix

* improve fetching file

* update test snapshot and jest config for ResizeObserver

* lower case Fetching

* set peerDeps

* update snapshots

* table header width

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;
+  }
+};

examples/src/App.jsx

@@ -28,6 +28,7 @@ const App = () => {
       <div className={networkContainerClassName}>
         <NetworkViewer
           onDataLoaded={() => setIsDataLoaded(true)}
+          onReset={() => setIsDataLoaded(false)}
           {...fileOptions}
         />
       </div>

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%;

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;

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

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 (

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 (
-    <div className={Styles['input-har-container']}>
-      <h4 className={Styles['input-har-text']}>
-        OR add HAR file URL in the below input box
-      </h4>
-      <URLInput onSubmit={handleURLSubmit} />
-      <p>
-        <span>
-          For Example use this har file
-        </span>
-        <a
-          className={Styles['example-url']}
-          href={SAMPLE_HAR_URL}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          {SAMPLE_HAR_URL}
-        </a>
-      </p>
-    </div>
-  );
-};
+const InputHAR = () => (
+  <div className={Styles['input-har-container']}>
+    <h4 className={Styles['input-har-text']}>
+      OR add HAR file URL in the below input box
+    </h4>
+    <URLInput />
+    <p>
+      <span>
+        For Example use this har file
+      </span>
+      <a
+        className={Styles['example-url']}
+        href={SAMPLE_HAR_URL}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {SAMPLE_HAR_URL}
+      </a>
+    </p>
+  </div>
+);
 
 export default InputHAR;

src/Components/Import/URLInput.jsx

@@ -1,19 +1,20 @@
 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 }) => {
     setURL(target.value);
   };
 
   const handleSubmit = () => {
-    onSubmit({
+    actions.fetchFile({
       file: url,
       isCORSEnabled,
     });
@@ -43,8 +44,4 @@ const URLInput = ({ onSubmit }) => {
   );
 };
 
-URLInput.propTypes = {
-  onSubmit: PropTypes.func.isRequired,
-};
-
 export default URLInput;

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 }) => {
             <linearGradient id={uniqueId}>
               <stop
                 offset="0%"
-                stopColor={spinnerColor}
+                stopColor={colorBrandBlue}
               />
               <stop
                 offset="75%"
-                stopColor={spinnerColor}
+                stopColor={colorBrandBlue}
                 stopOpacity="0"
               />
               <stop
                 offset="100%"
-                stopColor={spinnerColor}
+                stopColor={colorBrandBlue}
                 stopOpacity="0"
               />
             </linearGradient>

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 (
       <div
-        ref={ref}
+        ref={listRef}
         className={Styles['no-data']}
       >
         <IconNetworkRequest className={Styles['network-icon']} />
@@ -98,7 +100,7 @@ const NetworkTableBody = ({ height }) => {
   return (
     <>
       <FixedSizeList
-        ref={ref}
+        ref={listRef}
         className={Styles['network-table-body']}
         height={height}
         itemCount={data.size}

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 (

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: {

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?._outerRef || 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 };
 };

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,

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]);
 

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 }) => {