feat: add contains ignore case in go to row

Author: Ethan Alvizo

packages/filters/src/Type.ts

@@ -36,6 +36,8 @@ export class Type {
 
   static readonly notContains = 'notContains';
 
+  static readonly containsIgnoreCase = 'containsIgnoreCase';
+
   static readonly startsWith = 'startsWith';
 
   static readonly endsWith = 'endsWith';

packages/iris-grid/src/GotoRow.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Type as FilterType,
+  TypeValue as FilterTypeValue,
+} from '@deephaven/filters';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import { IrisGridTestUtils } from '@deephaven/iris-grid';
+import GotoRow from './GotoRow';
+
+function makeGotoRow({
+  gotoRow = '',
+  gotoRowError = '',
+  gotoValueError = '',
+  onGotoRowSubmit = jest.fn(),
+  model = IrisGridTestUtils.makeModel(),
+  onGotoRowNumberChanged = jest.fn(),
+  onClose = jest.fn(),
+  isShown = true,
+  onEntering = jest.fn(),
+  onEntered = jest.fn(),
+  onExiting = jest.fn(),
+  onExited = jest.fn(),
+  gotoValueSelectedColumnName = '',
+  gotoValue = '',
+  gotoValueFilter = FilterType.eq,
+  onGotoValueSelectedColumnNameChanged = jest.fn(),
+  onGotoValueSelectedFilterChanged = jest.fn(),
+  onGotoValueChanged = jest.fn(),
+  onGotoValueSubmit = jest.fn(),
+} = {}) {
+  return render(
+    <GotoRow
+      gotoRow={gotoRow}
+      gotoRowError={gotoRowError}
+      gotoValueError={gotoValueError}
+      onGotoRowSubmit={onGotoRowSubmit}
+      model={model}
+      onGotoRowNumberChanged={onGotoRowNumberChanged}
+      onClose={onClose}
+      isShown={isShown}
+      onEntering={onEntering}
+      onEntered={onEntered}
+      onExiting={onExiting}
+      onExited={onExited}
+      gotoValueSelectedColumnName={gotoValueSelectedColumnName}
+      gotoValue={gotoValue}
+      gotoValueFilter={gotoValueFilter as FilterTypeValue}
+      onGotoValueSelectedColumnNameChanged={
+        onGotoValueSelectedColumnNameChanged
+      }
+      onGotoValueSelectedFilterChanged={onGotoValueSelectedFilterChanged}
+      onGotoValueChanged={onGotoValueChanged}
+      onGotoValueSubmit={onGotoValueSubmit}
+    />
+  );
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+it('mounts and unmounts properly', () => {
+  makeGotoRow();
+});
+
+describe('Go to row', () => {
+  it('calls onGotoRowSubmit on Enter key press', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoRowSubmitMock = jest.fn();
+    const component = makeGotoRow({ onGotoRowSubmit: onGotoRowSubmitMock });
+
+    const inputElement = screen.getByRole('spinbutton');
+    await user.type(inputElement, '{Enter}');
+
+    expect(onGotoRowSubmitMock).toHaveBeenCalledTimes(1);
+
+    component.unmount();
+  });
+
+  it('does not call onGotoRowSubmit on non-Enter key press', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoRowSubmitMock = jest.fn();
+    const component = makeGotoRow({ onGotoRowSubmit: onGotoRowSubmitMock });
+
+    const inputElement = screen.getByRole('spinbutton');
+    await user.type(inputElement, 'a1`');
+
+    expect(onGotoRowSubmitMock).not.toHaveBeenCalled();
+
+    component.unmount();
+  });
+
+  it('calls onGotoRowNumberChanged on number key press', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoRowNumberChangedMock = jest.fn();
+    const component = makeGotoRow({
+      onGotoRowNumberChanged: onGotoRowNumberChangedMock,
+    });
+
+    const inputElement = screen.getByRole('spinbutton');
+    await user.type(inputElement, '1');
+
+    expect(onGotoRowNumberChangedMock).toHaveBeenCalledTimes(1);
+
+    component.unmount();
+  });
+});
+
+describe('Go to value', () => {
+  it('calls onGotoValueInputChanged when input value changes', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoValueInputChangedMock = jest.fn();
+    const component = makeGotoRow({
+      onGotoValueChanged: onGotoValueInputChangedMock,
+    });
+
+    const inputElement = screen.getByPlaceholderText('value');
+    await user.type(inputElement, 'a');
+
+    expect(onGotoValueInputChangedMock).toHaveBeenCalledTimes(1);
+
+    component.unmount();
+  });
+
+  it('calls onGotoValueSelectedFilterChanged when select value changes', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoValueSelectedFilterChangedMock = jest.fn();
+
+    jest
+      .spyOn(TableUtils, 'getNormalizedType')
+      .mockImplementation(() => TableUtils.dataType.STRING);
+
+    const component = makeGotoRow({
+      onGotoValueSelectedFilterChanged: onGotoValueSelectedFilterChangedMock,
+    });
+
+    const inputElement = screen.getByTestId('filter-type-select');
+    await user.selectOptions(inputElement, [FilterType.contains]);
+
+    expect(onGotoValueSelectedFilterChangedMock).toHaveBeenCalledTimes(1);
+
+    component.unmount();
+  });
+
+  it('calls onGotoValueSelectedColumnNameChanged when select value changes', async () => {
+    const user = userEvent.setup({ delay: null });
+    const onGotoValueSelectedColumnNameChangedMock = jest.fn();
+    const component = makeGotoRow({
+      onGotoValueSelectedColumnNameChanged: onGotoValueSelectedColumnNameChangedMock,
+    });
+
+    const inputElement = screen.getByTestId('column-name-select');
+    await user.selectOptions(inputElement, ['1']);
+
+    expect(onGotoValueSelectedColumnNameChangedMock).toHaveBeenCalledTimes(1);
+
+    component.unmount();
+  });
+});

packages/iris-grid/src/GotoRow.tsx

@@ -84,8 +84,6 @@ function GotoRow({
     ({ columns } = model.table);
   }
 
-  const res = 'Row number';
-
   const { rowCount } = model;
 
   const handleGotoValueNumberKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -191,6 +189,7 @@ function GotoRow({
                   );
                 }}
                 value={gotoValueFilter}
+                data-testid="filter-type-select"
               >
                 <option key={FilterType.eq} value={FilterType.eq}>
                   Equals
@@ -202,7 +201,13 @@ function GotoRow({
                   key={FilterType.eqIgnoreCase}
                   value={FilterType.eqIgnoreCase}
                 >
-                  EqIgnoreCase
+                  Equals (ignore case)
+                </option>
+                <option
+                  key={FilterType.containsIgnoreCase}
+                  value={FilterType.containsIgnoreCase}
+                >
+                  Contains (ignore case)
                 </option>
               </select>
             </div>
@@ -281,6 +286,7 @@ function GotoRow({
             <div className="goto-row-input">
               <input
                 ref={gotoRowInputRef}
+                data-testid="goto-row-input"
                 type="number"
                 onKeyDown={e => {
                   if (e.key === 'Enter') {
@@ -292,7 +298,7 @@ function GotoRow({
                 className={classNames('form-control', {
                   'is-invalid': gotoRowError !== '',
                 })}
-                placeholder={res}
+                placeholder="Row number"
                 onChange={event => {
                   onGotoRowNumberChanged(event);
                 }}
@@ -329,6 +335,7 @@ function GotoRow({
                     onGotoValueSelectedColumnNameChanged(columnName);
                   }}
                   value={gotoValueSelectedColumnName}
+                  data-testid="column-name-select"
                 >
                   {columns.map(column => (
                     <option key={column.name} value={column.name}>

packages/iris-grid/src/IrisGrid.tsx

@@ -3315,10 +3315,12 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       searchFromRow = 0;
     }
 
-    const isContains = gotoValueSelectedFilter === FilterType.contains;
-    const isEquals =
-      gotoValueSelectedFilter === FilterType.eq ||
-      gotoValueSelectedFilter === FilterType.eqIgnoreCase;
+    const isContains =
+      gotoValueSelectedFilter === FilterType.contains ||
+      gotoValueSelectedFilter === FilterType.containsIgnoreCase;
+    const isIgnoreCase =
+      gotoValueSelectedFilter === FilterType.eqIgnoreCase ||
+      gotoValueSelectedFilter === FilterType.containsIgnoreCase;
 
     try {
       const { formatter } = model;
@@ -3334,7 +3336,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             selectedColumn,
             dh.ValueType.STRING,
             inputString,
-            isEquals,
+            isIgnoreCase,
             isContains,
             isBackwards ?? false
           );