pass onclick directly to network cell (#142)

saucelabs · Aug 12, 2024 · 10232b3 · 10232b3
1 parent 7c3e9df
commit 10232b3
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 33 deletions.
diff --git a/src/Components/Common/Tooltip/Tooltip.jsx b/src/Components/Common/Tooltip/Tooltip.jsx
@@ -83,7 +83,6 @@ const Tooltip = forwardRef(({
           // Merge the child's original props, with the new props provided by the trigger.
           ...mergeProps(child.props, eventedProps),
         })}
-      {/* <TooltipTransition isOpen={state.isOpen}> */}
       <TooltipTransition isOpen={state.isOpen}>
         <TooltipLabel
           ref={tooltipRef}

diff --git a/src/Components/NetworkTable/NetworkCellValue.jsx b/src/Components/NetworkTable/NetworkCellValue.jsx
@@ -11,8 +11,9 @@ const context = classNames.bind(Styles);
 
 const NetworkCellValue = ({
   datakey,
-  unit,
+  onClick,
   payload,
+  unit,
 }) => {
   const formattedValue = formatValue(datakey, payload[datakey], unit, payload);
   const shouldDisplayTooltip = (
@@ -44,7 +45,11 @@ const NetworkCellValue = ({
       delay={500}
       title={getTitle()}
     >
-      <div className={context('value-text', datakey)}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className={context('value-text', datakey)}
+        onClick={onClick}
+      >
         {formattedValue}
       </div>
     </Tooltip>
@@ -53,11 +58,13 @@ const NetworkCellValue = ({
 
 NetworkCellValue.propTypes = {
   datakey: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
   payload: PropTypes.object,
   unit: PropTypes.string,
 };
 
 NetworkCellValue.defaultProps = {
+  onClick: () => {},
   payload: {},
   unit: null,
 };

diff --git a/src/Components/NetworkTable/NetworkTableBody.jsx b/src/Components/NetworkTable/NetworkTableBody.jsx
@@ -58,6 +58,10 @@ const NetworkTableBody = ({ height }) => {
   }, [data, ref]);
 
   const handleReqSelect = (payload) => {
+    if (selectedReqIndex === payload.index) {
+      return;
+    }
+
     actions.updateScrollToIndex(payload.index);
     actions.selectRequest(payload);
     callbacks.onRequestSelect(payload);

diff --git a/src/Components/NetworkTable/NetworkTableRow.jsx b/src/Components/NetworkTable/NetworkTableRow.jsx
@@ -22,9 +22,7 @@ const NetworkTableRow = ({
   const { state } = useNetwork();
   const showReqDetail = state.get('showReqDetail');
   const { showWaterfall } = useTheme();
-
   const columns = getViewerFields(showReqDetail, showWaterfall);
-  const handleSelectRequest = () => onSelect(entry);
 
   const rowProps = {
     className: context(
@@ -33,39 +31,36 @@ const NetworkTableRow = ({
       { highlight: scrollHighlight },
     ),
     id: ROW_ID_PREFIX + entry.index,
-    onClick: handleSelectRequest,
+    onClick: () => onSelect(entry),
   };
 
   return (
     <div style={{ ...style }}>
       <div {...rowProps}>
-        {Object.entries(columns)
-          .map(([datakey, {
-            key,
-            unit,
-          }]) => (
-            <div
-              key={key}
-              className={context(
-                'table-column', datakey,
-                { 'limited-cols': showReqDetail },
-                { 'show-waterfall': showWaterfall },
-              )}
-            >
-              {(key === 'waterfall' && entry.time ? (
-                <TimeChart
-                  maxTime={maxTime}
-                  timings={entry.timings}
-                />
-              ) : (
-                <NetworkCellValue
-                  datakey={key}
-                  payload={entry}
-                  unit={unit}
-                />
-              ))}
-            </div>
-          ))}
+        {Object.entries(columns).map(([datakey, { key, unit }]) => (
+          <div
+            key={key}
+            className={context(
+              'table-column', datakey,
+              { 'limited-cols': showReqDetail },
+              { 'show-waterfall': showWaterfall },
+            )}
+          >
+            {(key === 'waterfall' && entry.time ? (
+              <TimeChart
+                maxTime={maxTime}
+                timings={entry.timings}
+              />
+            ) : (
+              <NetworkCellValue
+                datakey={key}
+                onClick={rowProps.onClick}
+                payload={entry}
+                unit={unit}
+              />
+            ))}
+          </div>
+        ))}
       </div>
     </div>
   );

diff --git a/tests/__tests__/Components/NetworkTable/__snapshots__/NetworkTableRow.spec.jsx.snap b/tests/__tests__/Components/NetworkTable/__snapshots__/NetworkTableRow.spec.jsx.snap
@@ -105,6 +105,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="filename"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -161,6 +162,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="domain"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -200,6 +202,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="status"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -239,6 +242,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="method"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -278,6 +282,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="type"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -317,6 +322,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="size"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -356,6 +362,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="time"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",
@@ -393,6 +400,7 @@ exports[`NetworkTableRow renders without crashing 1`] = `
         >
           <NetworkCellValue
             datakey="waterfall"
+            onClick={[Function]}
             payload={
               Object {
                 "domain": "developer.mozilla.org",