feat: forward and back button for organize column search (#1641)

Closes #1529

Author: ethanalvizo

packages/components/src/SearchInput.scss

@@ -42,17 +42,30 @@
     }
   }
 
-  .search-match {
-    pointer-events: none;
+  .search-change-selection {
     position: absolute;
-    right: $spacer-5;
+    right: $spacer-1;
     top: 15%;
     bottom: 15%;
     height: 70%;
-    display: flex;
-    align-items: center;
-    padding: 0 $spacer-2;
-    border-radius: 1rem;
-    background-color: rgba($white, 0.25);
+  }
+
+  .search-change-button {
+    background: none;
+    border: none;
+    padding: 1px 2px; 
+  }
+
+  .search-change-text {
+    background-color: rgba($white, 0.2);
+    border-radius: 10px;
+    padding: 1px 5px;
+  }
+
+  .search-match {
+    background-color: rgba($white, 0.2);
+    border-radius: 10px;
+    padding: 1px 5px;
+    margin: 0 5px;
   }
 }

packages/components/src/SearchInput.tsx

@@ -1,8 +1,11 @@
 import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsSearch } from '@deephaven/icons';
+import { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';
 import classNames from 'classnames';
+import Button from './Button';
 import './SearchInput.scss';
+import { GLOBAL_SHORTCUTS } from './shortcuts';
+import { ContextActions } from './context-actions';
 
 interface SearchInputProps {
   value: string;
@@ -15,6 +18,10 @@ interface SearchInputProps {
   matchCount: number;
   id: string;
   'data-testid'?: string;
+  cursor?: {
+    index: number | undefined;
+    next: (direction: 'forward' | 'back') => void;
+  };
 }
 
 class SearchInput extends PureComponent<SearchInputProps> {
@@ -27,19 +34,40 @@ class SearchInput extends PureComponent<SearchInputProps> {
     },
     id: '',
     'data-testid': undefined,
+    cursor: undefined,
   };
 
   constructor(props: SearchInputProps) {
     super(props);
     this.inputField = React.createRef();
+    this.searchChangeSelection = React.createRef();
   }
 
-  inputField: React.RefObject<HTMLInputElement>;
+  componentDidMount(): void {
+    this.setInputPaddingRight();
+  }
+
+  componentDidUpdate(): void {
+    this.setInputPaddingRight();
+  }
 
   focus(): void {
     this.inputField.current?.focus();
   }
 
+  inputField: React.RefObject<HTMLInputElement>;
+
+  searchChangeSelection: React.RefObject<HTMLDivElement>;
+
+  setInputPaddingRight(): void {
+    const inputField = this.inputField.current;
+    const searchChangeSelection = this.searchChangeSelection.current;
+    if (inputField && searchChangeSelection) {
+      const paddingRight = searchChangeSelection.getBoundingClientRect().width;
+      inputField.style.paddingRight = `${paddingRight}px`;
+    }
+  }
+
   render(): JSX.Element {
     const {
       value,
@@ -52,7 +80,56 @@ class SearchInput extends PureComponent<SearchInputProps> {
       id,
       onKeyDown,
       'data-testid': dataTestId,
+      cursor,
     } = this.props;
+
+    let matchCountSection;
+    const contextActions = [
+      {
+        action: () => cursor?.next('forward'),
+        shortcut: GLOBAL_SHORTCUTS.NEXT,
+      },
+      {
+        action: () => cursor?.next('back'),
+        shortcut: GLOBAL_SHORTCUTS.PREVIOUS,
+      },
+    ];
+
+    if (cursor && matchCount > 1) {
+      matchCountSection = (
+        <>
+          <Button
+            kind="ghost"
+            className="search-change-button"
+            type="button"
+            onClick={() => {
+              cursor.next('back');
+            }}
+            icon={vsArrowLeft}
+            tooltip={`Previous match (${GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText()})`}
+          />
+          <span className="search-change-text">
+            {cursor.index !== undefined && `${cursor.index + 1} of `}
+            {matchCount}
+          </span>
+          <Button
+            kind="ghost"
+            className="search-change-button"
+            type="button"
+            onClick={() => {
+              cursor.next('forward');
+            }}
+            icon={vsArrowRight}
+            tooltip={`Next match (${GLOBAL_SHORTCUTS.NEXT.getDisplayText()})`}
+          />
+        </>
+      );
+    } else {
+      matchCountSection = matchCount > 0 && (
+        <span className="search-match">{matchCount}</span>
+      );
+    }
+
     return (
       <div className={classNames('search-group', className)}>
         <input
@@ -68,12 +145,22 @@ class SearchInput extends PureComponent<SearchInputProps> {
           id={id}
           data-testid={dataTestId}
         />
-        {matchCount != null && (
-          <span className="search-match">{matchCount}</span>
+
+        {matchCount != null ? (
+          <>
+            <div
+              className="search-change-selection"
+              ref={this.searchChangeSelection}
+            >
+              {matchCountSection}
+            </div>
+            <ContextActions actions={contextActions} />
+          </>
+        ) : (
+          <span className="search-icon">
+            <FontAwesomeIcon icon={vsSearch} />
+          </span>
         )}
-        <span className="search-icon">
-          <FontAwesomeIcon icon={vsSearch} />
-        </span>
       </div>
     );
   }

packages/components/src/shortcuts/GlobalShortcuts.ts

@@ -43,6 +43,20 @@ const GLOBAL_SHORTCUTS = {
     macShortcut: [KEY.ESCAPE],
     isEditable: false,
   }),
+  NEXT: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.NEXT',
+    name: 'Next',
+    shortcut: [KEY.ENTER],
+    macShortcut: [KEY.ENTER],
+    isEditable: false,
+  }),
+  PREVIOUS: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.PREVIOUS',
+    name: 'Previous',
+    shortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    isEditable: false,
+  }),
 };
 
 export default GLOBAL_SHORTCUTS;

packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.test.tsx

@@ -1184,3 +1184,31 @@ test('On drag start/end', () => {
   expect(mockGroupHandler).toBeCalledWith([]);
   expect(mockMoveHandler).toBeCalledWith([{ from: 0, to: 1 }]);
 });
+
+test('changeSelectedColumn moves queried column index and loops', () => {
+  const builder = React.createRef<VisibilityOrderingBuilder>();
+  render(<Builder builderRef={builder} />);
+
+  builder.current?.searchColumns('TestColumn');
+  expect(builder.current?.state.selectedColumns.size).toEqual(10);
+
+  builder.current?.changeSelectedColumn('back');
+  expect(builder.current?.state.queriedColumnIndex).toEqual(9);
+
+  builder.current?.changeSelectedColumn('forward');
+  expect(builder.current?.state.queriedColumnIndex).toEqual(0);
+});
+
+test('adjustQueriedIndex sets queriedColumnRange to prevIndex = 9 and nextIndex = 0', () => {
+  const builder = React.createRef<VisibilityOrderingBuilder>();
+  render(<Builder builderRef={builder} />);
+
+  builder.current?.searchColumns('TestColumn');
+
+  builder.current?.adjustQueriedIndex('Test');
+
+  expect(builder.current?.state.queriedColumnRange).toEqual({
+    prevIndex: 9,
+    nextIndex: 0,
+  });
+});