revert: feat: forward and back buttons for organize column search (#1640

)

This reverts commit 75cf184.

Auto-merge was to eager, I only approved for functionality not code
reviewed.

packages/components/src/SearchInput.scss

@@ -55,31 +55,4 @@
     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;
-  }
-
-  .match_count {
-    background-color: rgba($white, 0.2);
-    border-radius: 10px;
-    padding: 1px 5px;
-    margin: 0 5px;
-  }
 }

packages/components/src/SearchInput.tsx

@@ -1,14 +1,9 @@
 import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';
+import { 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;
@@ -20,7 +15,6 @@ interface SearchInputProps {
   matchCount: number;
   id: string;
   'data-testid'?: string;
-  queryParams?: QueryParams;
 }
 
 class SearchInput extends PureComponent<SearchInputProps> {
@@ -33,40 +27,19 @@ class SearchInput extends PureComponent<SearchInputProps> {
     },
     id: '',
     'data-testid': undefined,
-    queryParams: undefined,
   };
 
   constructor(props: SearchInputProps) {
     super(props);
     this.inputField = React.createRef();
-    this.searchChangeSelection = React.createRef();
-  }
-
-  componentDidMount(): void {
-    this.setInputPaddingRight();
   }
 
-  componentDidUpdate(): void {
-    this.setInputPaddingRight();
-  }
+  inputField: React.RefObject<HTMLInputElement>;
 
   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,
@@ -79,47 +52,7 @@ class SearchInput extends PureComponent<SearchInputProps> {
       id,
       onKeyDown,
       'data-testid': dataTestId,
-      queryParams,
     } = this.props;
-
-    let matchCountSection;
-
-    if (queryParams && matchCount > 1) {
-      matchCountSection = (
-        <>
-          <Button
-            kind="ghost"
-            className="search-change-button"
-            type="button"
-            onClick={() => {
-              queryParams.changeQueriedColumnIndex('back');
-            }}
-            icon={vsArrowLeft}
-            tooltip="Next match"
-          />
-          <span className="search-change-text">
-            {queryParams.queriedColumnIndex !== undefined &&
-              `${queryParams.queriedColumnIndex + 1} of `}
-            {matchCount}
-          </span>
-          <Button
-            kind="ghost"
-            className="search-change-button"
-            type="button"
-            onClick={() => {
-              queryParams.changeQueriedColumnIndex('forward');
-            }}
-            icon={vsArrowRight}
-            tooltip="Next match"
-          />
-        </>
-      );
-    } else {
-      matchCountSection = matchCount > 0 && (
-        <span className="match_count">{matchCount}</span>
-      );
-    }
-
     return (
       <div className={classNames('search-group', className)}>
         <input
@@ -135,19 +68,12 @@ class SearchInput extends PureComponent<SearchInputProps> {
           id={id}
           data-testid={dataTestId}
         />
-
-        {matchCount != null ? (
-          <div
-            className="search-change-selection"
-            ref={this.searchChangeSelection}
-          >
-            {matchCountSection}
-          </div>
-        ) : (
-          <span className="search-icon">
-            <FontAwesomeIcon icon={vsSearch} />
-          </span>
+        {matchCount != null && (
+          <span className="search-match">{matchCount}</span>
         )}
+        <span className="search-icon">
+          <FontAwesomeIcon icon={vsSearch} />
+        </span>
       </div>
     );
   }

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

@@ -1184,31 +1184,3 @@ 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('forward');
-  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,
-  });
-});