CB-3733 Close data editor tabs with the middle mouse button

[sergeyteleshev]

No description provided.

[sergeyteleshev]

At first, I used onAuxClick event. It helps avoid miss-clicks and closes the correct tab. But since it is not compatible with Safari, I decided to go with this one (onMouseUp) to support all browsers since users can learn after view clicks how the feature closes tabs

we can also go with our custom hook like this, but this solution looks a bit satanic to me:

export function useAuxClick<T extends HTMLElement>(ref: RefObject<T>, handler: AuxClickHandler): void {
  const handlerRef = useRef<AuxClickHandler>(handler);
  let isAuxButton = false;
  let preventDefault = false;

  const handleMouseDown = (event: MouseEvent) => {
    isAuxButton = true;
    preventDefault = event.defaultPrevented;
    event.preventDefault();
  };

  const handleMouseUp = (event: MouseEvent) => {
    if (isAuxButton) {
      isAuxButton = false;
      if (!preventDefault) {
        handlerRef.current(event);
      }
    }
  };

  useEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  useEffect(() => {
    const targetElement = ref.current;
    if (!targetElement) {
      return;
    }

    targetElement.addEventListener('mousedown', handleMouseDown);
    targetElement.addEventListener('mouseup', handleMouseUp);

    return () => {
      targetElement.removeEventListener('mousedown', handleMouseDown);
      targetElement.removeEventListener('mouseup', handleMouseUp);
    };
  }, [ref]);
}

[sergeyteleshev]

I also added not only for data viewer but for:

• left and right sidebar (scripts, dataset, explorer)
• bottom sidebar (query manager, log viewer, cloud explorer)

P.S. Explorer works fine and does not close