feat: add middle click dashboard tab deletion (#1992)

Resolves #1990
- Add functionality to close dashboard tab with middle mouse click by
specifying onAuxClick event
- Create NavBar component test cases that test changes

packages/components/src/navigation/NavTab.test.tsx

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  DragDropContext,
+  DropResult,
+  Droppable,
+  ResponderProvided,
+} from 'react-beautiful-dnd';
+import NavTab from './NavTab';
+
+const mockOnClose = jest.fn();
+
+const defaultProps = {
+  tab: { key: 'TEST', title: 'TEST', isCloseable: true },
+  key: 'testKey',
+  index: 0,
+  isActive: true,
+  onSelect: (key: string) => null,
+  isDraggable: true,
+};
+
+function MakeNavTab() {
+  const mockActiveTabRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const handleDragEnd = (e: DropResult, provided: ResponderProvided) => {};
+  const props = {
+    ...defaultProps,
+    activeRef: mockActiveTabRef,
+    onClose: mockOnClose,
+  };
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <Droppable droppableId="test-droppable-id">
+        {provided => (
+          <div ref={provided.innerRef}>
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            <NavTab {...props}>ButtonText</NavTab>
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}
+
+it('should not delete by calling onClose on left click', async () => {
+  const user = userEvent.setup();
+  render(<MakeNavTab />);
+  const navTabComponent = screen.getByTestId('btn-nav-tab-TEST');
+  await user.pointer({ keys: '[MouseLeft]', target: navTabComponent });
+  expect(mockOnClose).not.toHaveBeenCalled();
+});
+
+it('should delete by calling onClose on middle click', async () => {
+  const user = userEvent.setup();
+  render(<MakeNavTab />);
+  const navTabComponent = screen.getByTestId('btn-nav-tab-TEST');
+  await user.pointer({ keys: '[MouseMiddle]', target: navTabComponent });
+  expect(mockOnClose).toHaveBeenCalled();
+});

packages/components/src/navigation/NavTab.tsx

@@ -67,12 +67,26 @@ const NavTab = memo(
               data-testid={`btn-nav-tab-${title}`}
               role="tab"
               tabIndex={0}
+              onAuxClick={e => {
+                // Middle mouse button was clicked, and no buttons remain pressed
+                if (isClosable && e.button === 1 && e.buttons === 0) {
+                  onClose?.(key);
+                }
+              }}
               onClick={e => {
-                (e.target as HTMLDivElement).focus();
-                // focus is normally set on mousedown, but dnd calls preventDefault for drag purposes
-                // so we can call focus on the firing of the actual click event manually
+                // have to have seperate check onClick for Safari not supporting AuxClick
+                if (isClosable && e.button === 1 && e.buttons === 0) {
+                  onClose?.(key);
+                  return;
+                }
+                // Left mouse button was clicked, and no buttons remain pressed
+                if (e.button === 0 && e.buttons === 0) {
+                  // focus is normally set on mousedown, but dnd calls preventDefault for drag purposes
+                  // so we can call focus on the firing of the actual click event manually
+                  (e.target as HTMLDivElement).focus();
 
-                onSelect(key);
+                  onSelect(key);
+                }
               }}
               onKeyPress={event => {
                 if (event.key === 'Enter') onSelect(key);