Redesign main table (#139)

* use new variable for 8px size

* wip - grid

* tooltip timechart

* layout on selected request

* styling clean up

* remove scroll to selected request

* collapse all besides General

* update test snapshots

* remove unused deps

* adjust layout

* option to hide waterfall

* remove react-window dep

* decrease padding and font-size

* adjust styling for request details

* clean up

* virtualize network table body

src/Components/Common/Dropdown.styles.scss

@@ -6,7 +6,7 @@
   .dropdown-toggle {
     display: flex;
     justify-content: space-between;
-    width: 7.5rem;
+    width: 8.5rem;
 
     font-weight: 500;
     font-size: $font-size-h5;

src/Components/Common/Tooltip/Tooltip.jsx

@@ -22,10 +22,7 @@ const Tooltip = forwardRef(({
   const targetRef = useObjectRef(forwardedRef);
   const tooltipRef = useRef(null);
 
-  const state = useTooltipTriggerState({
-    // isOpen: true,
-    delay,
-  });
+  const state = useTooltipTriggerState({ delay });
 
   const {
     overlayProps,

src/Components/Common/Tooltip/Tooltip.styles.scss

@@ -11,6 +11,7 @@
     display: inline-block;
     background-color: $brand-primary-dark-gray;
     color: $white-100;
+    font-size: $font-size-small;
     padding: $size-xs $size-xs-s;
     border: $border;
     border-radius: $border-radius-base;

src/Components/Import/ImportHAR.jsx

@@ -4,19 +4,14 @@ import { useDropzone } from 'react-dropzone';
 
 import { useNetwork } from './../../state/network/Context';
 import Styles from './ImportHAR.styles.scss';
-import Button from './../Common/Button';
-import IconUpload from '../../icons/IconImport';
 import ImportHarButton from '../Actions/ImportHarButton';
 
 const DROP_FILE_CONFIG = {
   accept: '.har',
   multiple: false,
 };
 
-const ImportHar = ({
-  showButton,
-  className,
-}) => {
+const ImportHar = ({ showButton }) => {
   const { actions } = useNetwork();
   const { updateErrorMessage } = actions;
 
@@ -48,25 +43,21 @@ const ImportHar = ({
   return (
     <div {...getRootProps()}>
       <input {...getInputProps()} />
-      {showButton ?
-        (<ImportHarButton />) :
-        (
-          <p className={Styles['drag-drop']}>
-            Drag and drop HAR file here, or click to select
-            file
-          </p>
-        )}
+      {showButton ? <ImportHarButton /> : (
+        <p className={Styles['drag-drop']}>
+          Drag and drop HAR file here, or click to select
+          file
+        </p>
+      )}
     </div>
   );
 };
 
 ImportHar.propTypes = {
-  className: PropTypes.string,
   showButton: PropTypes.bool,
 };
 
 ImportHar.defaultProps = {
-  className: null,
   showButton: true,
 };
 

src/Components/NetworkTable/NetworkCellValue.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 
 import { formatValue } from '../../utils';
-import Styles from './NetworkTableHeader.styles.scss';
+import Styles from './NetworkTable.styles.scss';
 import { VIEWER_FIELDS } from '../../constants';
 import Tooltip from '../Common/Tooltip/Tooltip';
 
@@ -33,25 +33,21 @@ const NetworkCellValue = ({
 
   if (!shouldDisplayTooltip) {
     return (
-      <td className={context('value-cell', datakey)}>
-        <div className={Styles['value-text']}>
-          {formattedValue}
-        </div>
-      </td>
+      <div className={context('value-text', datakey)}>
+        {formattedValue}
+      </div>
     );
   }
 
   return (
-    <td className={context('value-cell', datakey)}>
-      <Tooltip
-        delay={500}
-        title={getTitle()}
-      >
-        <span className={Styles['value-text']}>
-          {formattedValue}
-        </span>
-      </Tooltip>
-    </td>
+    <Tooltip
+      delay={500}
+      title={getTitle()}
+    >
+      <div className={context('value-text', datakey)}>
+        {formattedValue}
+      </div>
+    </Tooltip>
   );
 };
 

src/Components/NetworkTable/NetworkTable.styles.scss

@@ -0,0 +1,104 @@
+@import "./../../styles/variables.scss";
+
+.network-table-header {
+  display: flex;
+  width: 100%;
+
+  padding: $size-xs-s;
+  font-size: $font-size-small;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-bottom: $border;
+  color: $brand-primary-gray;
+  align-content: center;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.table-column {
+  display:flex;
+  width: 12%;
+  align-self: center;
+  padding-right: $size-xs-s;
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &.show-waterfall {
+    width: 9%;
+  }
+
+  &.file {
+    width: 25%;
+
+    &.limited-cols {
+      width: 100%;
+    }
+  }
+
+  &.domain,
+  &.waterfall{
+    width: 15%;
+  }
+}
+
+.network-table-row {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+
+  cursor: pointer;
+  padding: $size-xs $size-xs-s;
+  border-bottom: $border;
+  color: $brand-primary-dark-gray;
+  font-size: $font-size-small;
+
+  &.pending {
+    color: $white-66;
+  }
+
+  &.error {
+    color: $brand-danger;
+  }
+
+  &:hover {
+    background: $white-90;
+  }
+
+  &.highlight {
+    background: $dark-gray;
+    color: $white-100;
+  }
+}
+.value-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+.network-table-footer {
+  border-top: $border;
+  width: 100%;
+  background: $bg-gray-90;
+  padding: $size-xs $size-s;
+  display: inline-flex;
+  vertical-align: middle;
+
+  span {
+    flex: 1 1 auto;
+    justify-content: center;
+    display: inline-flex;
+    align-items: center;
+    border-right: 1px solid $white-80;
+    padding: 0 $size-xs;
+    overflow: hidden;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}

src/Components/NetworkTable/NetworkTableBody.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react';
+import { FixedSizeList } from 'react-window';
+import PropTypes from 'prop-types';
+
+import { useNetwork } from '../../state/network/Context';
+import NetworkTableRow from './NetworkTableRow';
+import { TABLE_ENTRY_HEIGHT } from '../../constants';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+
+const virtualizedTableRow = ({
+  data,
+  index,
+  style,
+}) => {
+  const {
+    listData,
+    totalNetworkTime,
+    handleReqSelect,
+    selectedReqIndex,
+  } = data;
+  const item = listData.get(index);
+
+  return (
+    <NetworkTableRow
+      key={index}
+      entry={item}
+      maxTime={totalNetworkTime}
+      onSelect={handleReqSelect}
+      scrollHighlight={selectedReqIndex === index}
+      style={style}
+    />
+  );
+};
+
+const NetworkTableBody = ({ height }) => {
+  const {
+    state,
+    actions,
+    callbacks,
+  } = useNetwork();
+  const data = state.get('data');
+  const totalNetworkTime = state.get('totalNetworkTime');
+  const selectedReqIndex = state.get('selectedReqIndex');
+
+  const ref = useRef(null);
+  const { elementDims } = useResizeObserver(ref);
+  useEffect(() => actions.setTableHeaderWidth(elementDims.width), [elementDims]);
+
+  const handleReqSelect = (payload) => {
+    actions.updateScrollToIndex(payload.index);
+    actions.selectRequest(payload);
+    callbacks.onRequestSelect(payload);
+  };
+
+  return (
+    <FixedSizeList
+      ref={ref}
+      height={height}
+      itemCount={data.size}
+      itemData={{
+        listData: data,
+        totalNetworkTime,
+        handleReqSelect,
+        selectedReqIndex,
+      }}
+      itemSize={TABLE_ENTRY_HEIGHT}
+    >
+      {virtualizedTableRow}
+    </FixedSizeList>
+  );
+};
+
+NetworkTableBody.propTypes = {
+  height: PropTypes.number.isRequired,
+};
+
+export default NetworkTableBody;

src/Components/NetworkTable/NetworkTableFooter.jsx

@@ -2,13 +2,16 @@ import React from 'react';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
-import Styles from './NetworkTableFooter.styles.scss';
+import Styles from './NetworkTable.styles.scss';
 import { formatSize, formatTime } from './../../utils';
 
 const context = classNames.bind(Styles);
 
-const NetworkTableFooter = ({ dataSummary, showAllInfo }) => (
-  <div className={context('footer')}>
+const NetworkTableFooter = ({
+  dataSummary,
+  showAllInfo,
+}) => (
+  <div className={context('network-table-footer')}>
     {showAllInfo ? (
       <>
         <span>{`${dataSummary.get('totalRequests')} requests`}</span>