From cfb97c61c1538d189d1d4a7465f06aaa23560c29 Mon Sep 17 00:00:00 2001
From: Julien Wajsberg <felash@gmail.com>
Date: Wed, 30 Mar 2022 14:55:29 +0200
Subject: [PATCH] Use the whole list item as the click target

Fixes #3962
---
 src/components/shared/FilterNavigatorBar.js   | 93 +++++++++++--------
 .../FilterNavigatorBar.test.js.snap           |  6 +-
 .../ProfileCallTreeView.test.js.snap          |  2 +-
 3 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/components/shared/FilterNavigatorBar.js b/src/components/shared/FilterNavigatorBar.js
index 0fe2bb0257..d9f1682fd3 100644
--- a/src/components/shared/FilterNavigatorBar.js
+++ b/src/components/shared/FilterNavigatorBar.js
@@ -9,27 +9,53 @@ import classNames from 'classnames';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import './FilterNavigatorBar.css';
 
-type FilterNavigatorBarButtonProps = {|
-  onClick: (number) => mixed,
-  index: number,
-  children: React.Node,
+type FilterNavigatorBarListItemProps = {|
+  +onClick?: null | ((number) => mixed),
+  +index: number,
+  +isFirstItem: boolean,
+  +isLastItem: boolean,
+  +isSelectedItem: boolean,
+  +title?: string,
+  +additionalClassName?: string,
+  +children: React.Node,
 |};
 
-class FilterNavigatorBarButton extends React.PureComponent<FilterNavigatorBarButtonProps> {
+class FilterNavigatorBarListItem extends React.PureComponent<FilterNavigatorBarListItemProps> {
   _onClick = () => {
     const { index, onClick } = this.props;
-    onClick(index);
+    if (onClick) {
+      onClick(index);
+    }
   };
 
   render() {
+    const {
+      isFirstItem,
+      isLastItem,
+      isSelectedItem,
+      children,
+      additionalClassName,
+      onClick,
+      title,
+    } = this.props;
     return (
-      <button
-        type="button"
-        className="filterNavigatorBarItemContent"
-        onClick={this._onClick}
+      <li
+        className={classNames('filterNavigatorBarItem', additionalClassName, {
+          filterNavigatorBarRootItem: isFirstItem,
+          filterNavigatorBarSelectedItem: isSelectedItem,
+          filterNavigatorBarLeafItem: isLastItem,
+        })}
+        title={title}
+        onClick={onClick ? this._onClick : null}
       >
-        {this.props.children}
-      </button>
+        {onClick ? (
+          <button type="button" className="filterNavigatorBarItemContent">
+            {children}
+          </button>
+        ) : (
+          <span className="filterNavigatorBarItemContent">{children}</span>
+        )}
+      </li>
     );
   }
 }
@@ -57,22 +83,17 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
             classNames="filterNavigatorBarTransition"
             timeout={250}
           >
-            <li
-              className={classNames('filterNavigatorBarItem', {
-                filterNavigatorBarRootItem: i === 0,
-                filterNavigatorBarBeforeSelectedItem: i === selectedItem - 1,
-                filterNavigatorBarSelectedItem: i === selectedItem,
-                filterNavigatorBarLeafItem: i === items.length - 1,
-              })}
+            <FilterNavigatorBarListItem
+              index={i}
+              onClick={
+                i === items.length - 1 && !uncommittedItem ? null : onPop
+              }
+              isFirstItem={i === 0}
+              isLastItem={i === items.length - 1}
+              isSelectedItem={i === selectedItem}
             >
-              {i === items.length - 1 && !uncommittedItem ? (
-                <span className="filterNavigatorBarItemContent">{item}</span>
-              ) : (
-                <FilterNavigatorBarButton index={i} onClick={onPop}>
-                  {item}
-                </FilterNavigatorBarButton>
-              )}
-            </li>
+              {item}
+            </FilterNavigatorBarListItem>
           </CSSTransition>
         ))}
         {uncommittedItem ? (
@@ -81,18 +102,16 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
             classNames="filterNavigatorBarUncommittedTransition"
             timeout={0}
           >
-            <li
-              className={classNames(
-                'filterNavigatorBarItem',
-                'filterNavigatorBarLeafItem',
-                'filterNavigatorBarUncommittedItem'
-              )}
+            <FilterNavigatorBarListItem
+              index={items.length}
+              isFirstItem={false}
+              isLastItem={true}
+              isSelectedItem={false}
+              additionalClassName="filterNavigatorBarUncommittedItem"
               title={uncommittedItem}
             >
-              <span className="filterNavigatorBarItemContent">
-                {uncommittedItem}
-              </span>
-            </li>
+              {uncommittedItem}
+            </FilterNavigatorBarListItem>
           </CSSTransition>
         ) : null}
       </TransitionGroup>
diff --git a/src/test/components/__snapshots__/FilterNavigatorBar.test.js.snap b/src/test/components/__snapshots__/FilterNavigatorBar.test.js.snap
index 13cc7bbd05..1812b085a7 100644
--- a/src/test/components/__snapshots__/FilterNavigatorBar.test.js.snap
+++ b/src/test/components/__snapshots__/FilterNavigatorBar.test.js.snap
@@ -21,7 +21,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 2`]
   class="filterNavigatorBar profileFilterNavigator"
 >
   <li
-    class="filterNavigatorBarItem filterNavigatorBarRootItem filterNavigatorBarBeforeSelectedItem"
+    class="filterNavigatorBarItem filterNavigatorBarRootItem"
   >
     <button
       class="filterNavigatorBarItemContent"
@@ -47,7 +47,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
   class="filterNavigatorBar profileFilterNavigator"
 >
   <li
-    class="filterNavigatorBarItem filterNavigatorBarRootItem filterNavigatorBarBeforeSelectedItem"
+    class="filterNavigatorBarItem filterNavigatorBarRootItem"
   >
     <button
       class="filterNavigatorBarItemContent"
@@ -67,7 +67,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarLeafItem filterNavigatorBarUncommittedItem filterNavigatorBarUncommittedTransition-enter filterNavigatorBarUncommittedTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarUncommittedItem filterNavigatorBarLeafItem filterNavigatorBarUncommittedTransition-enter filterNavigatorBarUncommittedTransition-enter-active"
     title="100μs"
   >
     <span
diff --git a/src/test/components/__snapshots__/ProfileCallTreeView.test.js.snap b/src/test/components/__snapshots__/ProfileCallTreeView.test.js.snap
index ea7abd7553..4e3a62cae3 100644
--- a/src/test/components/__snapshots__/ProfileCallTreeView.test.js.snap
+++ b/src/test/components/__snapshots__/ProfileCallTreeView.test.js.snap
@@ -3617,7 +3617,7 @@ exports[`calltree/ProfileCallTreeView TransformNavigator renders with multiple t
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarBeforeSelectedItem"
+    class="filterNavigatorBarItem"
   >
     <button
       class="filterNavigatorBarItemContent"