feat: forward and back buttons for organize column search

packages/components/src/SearchInput.scss

@@ -55,4 +55,24 @@
     border-radius: 1rem;
     background-color: rgba($white, 0.25);
   }
+
+  .search-change-selection {
+    position: absolute;
+    right: $spacer-1;
+    top: 15%;
+    bottom: 15%;
+    height: 70%;
+  }
+
+  .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;
+  }
 }

packages/components/src/SearchInput.tsx

@@ -1,9 +1,14 @@
 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';
 
+interface QueryParams {
+  queriedColumnIndex: number | undefined;
+  changeQueriedColumnIndex: (direction: 'forward' | 'back') => void;
+}
 interface SearchInputProps {
   value: string;
   placeholder: string;
@@ -15,6 +20,7 @@ interface SearchInputProps {
   matchCount: number;
   id: string;
   'data-testid'?: string;
+  queryParams?: QueryParams;
 }
 
 class SearchInput extends PureComponent<SearchInputProps> {
@@ -27,6 +33,7 @@ class SearchInput extends PureComponent<SearchInputProps> {
     },
     id: '',
     'data-testid': undefined,
+    queryParams: undefined,
   };
 
   constructor(props: SearchInputProps) {
@@ -52,7 +59,9 @@ class SearchInput extends PureComponent<SearchInputProps> {
       id,
       onKeyDown,
       'data-testid': dataTestId,
+      queryParams,
     } = this.props;
+
     return (
       <div className={classNames('search-group', className)}>
         <input
@@ -67,13 +76,53 @@ class SearchInput extends PureComponent<SearchInputProps> {
           ref={this.inputField}
           id={id}
           data-testid={dataTestId}
+          style={
+            queryParams && {
+              paddingRight:
+                queryParams?.queriedColumnIndex !== undefined
+                  ? '6.25rem'
+                  : '4.75rem',
+            }
+          }
         />
-        {matchCount != null && (
-          <span className="search-match">{matchCount}</span>
+
+        {matchCount != null && queryParams !== undefined ? (
+          <div className="search-change-selection">
+            <Button
+              kind="ghost"
+              className="search-change-button"
+              type="button"
+              onClick={() => {
+                queryParams.changeQueriedColumnIndex('back');
+              }}
+              icon={vsArrowLeft}
+              tooltip="Next match"
+              disabled={matchCount <= 1}
+            />
+            <span className="search-change-text">
+              {queryParams.queriedColumnIndex !== undefined &&
+                matchCount > 1 &&
+                `${queryParams.queriedColumnIndex + 1} of `}
+              {matchCount}
+            </span>
+
+            <Button
+              kind="ghost"
+              className="search-change-button"
+              type="button"
+              onClick={() => {
+                queryParams.changeQueriedColumnIndex('forward');
+              }}
+              icon={vsArrowRight}
+              tooltip="Next match"
+              disabled={matchCount <= 1}
+            />
+          </div>
+        ) : (
+          <span className="search-icon">
+            <FontAwesomeIcon icon={vsSearch} />
+          </span>
         )}
-        <span className="search-icon">
-          <FontAwesomeIcon icon={vsSearch} />
-        </span>
       </div>
     );
   }

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

@@ -67,6 +67,8 @@ interface VisibilityOrderingBuilderProps {
 
 interface VisibilityOrderingBuilderState {
   selectedColumns: Set<string>;
+  queriedColumnIndex: number | undefined;
+  prevQueriedColumns: string[] | undefined;
   lastSelectedColumn: string;
   searchFilter: string;
 }
@@ -100,6 +102,8 @@ class VisibilityOrderingBuilder extends Component<
 
     this.state = {
       selectedColumns: new Set(),
+      queriedColumnIndex: undefined,
+      prevQueriedColumns: undefined,
       lastSelectedColumn: '',
       searchFilter: '',
     };
@@ -125,6 +129,8 @@ class VisibilityOrderingBuilder extends Component<
 
     this.setState({
       selectedColumns: new Set(),
+      queriedColumnIndex: undefined,
+      prevQueriedColumns: undefined,
       lastSelectedColumn: '',
       searchFilter: '',
     });
@@ -135,7 +141,12 @@ class VisibilityOrderingBuilder extends Component<
   }
 
   resetSelection(): void {
-    this.setState({ selectedColumns: new Set(), lastSelectedColumn: '' });
+    this.setState({
+      selectedColumns: new Set(),
+      queriedColumnIndex: undefined,
+      prevQueriedColumns: undefined,
+      lastSelectedColumn: '',
+    });
   }
 
   handleSearchInputChange(event: ChangeEvent<HTMLInputElement>): void {
@@ -168,6 +179,58 @@ class VisibilityOrderingBuilder extends Component<
         this.list?.querySelectorAll('.item-wrapper')[visibleIndexToFocus];
       columnItemToFocus?.scrollIntoView({ block: 'center' });
     }
+
+    this.setState({
+      prevQueriedColumns: columnsMatch,
+      queriedColumnIndex: undefined,
+    });
+  }
+
+  /**
+   * Change the selected column to either the next or previous column
+   *
+   * @param direction The direction to move the selection
+   */
+
+  changeSelectedColumn(direction: 'forward' | 'back'): void {
+    const { queriedColumnIndex, prevQueriedColumns } = this.state;
+    let newQueriedColumnIndex = queriedColumnIndex;
+
+    if (prevQueriedColumns === undefined) return;
+
+    if (direction === 'forward') {
+      if (
+        newQueriedColumnIndex === undefined ||
+        newQueriedColumnIndex >= prevQueriedColumns.length - 1
+      ) {
+        newQueriedColumnIndex = 0;
+      } else {
+        newQueriedColumnIndex += 1;
+      }
+    } else if (direction === 'back') {
+      if (newQueriedColumnIndex === undefined || newQueriedColumnIndex <= 0) {
+        newQueriedColumnIndex = prevQueriedColumns.length - 1;
+      } else {
+        newQueriedColumnIndex -= 1;
+      }
+    }
+
+    this.addColumnToSelected(
+      [prevQueriedColumns[newQueriedColumnIndex as number]],
+      false
+    );
+
+    const flattenedItems = flattenTree(this.getTreeItems());
+    const actualColumnIndex = flattenedItems.findIndex(
+      item => item.id === prevQueriedColumns[newQueriedColumnIndex as number]
+    );
+    const columnItemToFocus =
+      this.list?.querySelectorAll('.item-wrapper')[actualColumnIndex];
+    columnItemToFocus?.scrollIntoView({ block: 'center' });
+
+    this.setState({
+      queriedColumnIndex: newQueriedColumnIndex,
+    });
   }
 
   /**
@@ -1015,7 +1078,12 @@ class VisibilityOrderingBuilder extends Component<
 
   render(): ReactElement {
     const { model, hiddenColumns, onColumnVisibilityChanged } = this.props;
-    const { selectedColumns, searchFilter } = this.state;
+    const {
+      selectedColumns,
+      searchFilter,
+      prevQueriedColumns,
+      queriedColumnIndex,
+    } = this.state;
     const hasSelection = selectedColumns.size > 0;
     const treeItems = this.getTreeItems();
     const nameToIndexes = new Map(
@@ -1049,6 +1117,14 @@ class VisibilityOrderingBuilder extends Component<
       treeItems
     );
 
+    const queryParams = {
+      queriedColumnIndex,
+      changeQueriedColumnIndex: (direction: 'forward' | 'back') =>
+        this.changeSelectedColumn(direction),
+    };
+
+    const matchCount = prevQueriedColumns?.length;
+
     return (
       <div role="menu" className="visibility-ordering-builder" tabIndex={0}>
         <div className="top-menu">
@@ -1067,8 +1143,9 @@ class VisibilityOrderingBuilder extends Component<
           <SearchInput
             className="visibility-search"
             value={searchFilter}
-            matchCount={searchFilter ? selectedColumns.size : undefined}
+            matchCount={searchFilter ? matchCount : undefined}
             onChange={this.handleSearchInputChange}
+            queryParams={queryParams}
           />
         </div>
         <div className="top-menu">