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

Author: yuyi-sl

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/package-lock.json

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

examples/src/App.jsx

@@ -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/App.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;

examples/src/Components/Footer.module.scss

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

package-lock.json

@@ -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 (

package.json

@@ -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/Actions/ResetButton.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;