7023-cb-find-and-replace-new #4085

SychevAndrey · 2026-01-26T08:34:08Z

Screen.Recording.2026-01-28.at.15.37.39.mov

…o UI-kit add chevron Icon to UI-kit (used in Search Panel)

…ggle functionality

…arn.lock

…archPanel components

…orybook

…ve match index and triggering search on find actions

…n undo/redo

That functionality comes in handy when we want to use Undo and Replace All functions together: Before that commit we used to perform N operations where N is a number of replaced cells. And history would record them as atomic operations, so pressing Undo would revert only the last replace. setMany enables batch editing and batch reverting, so now we can Replace All and then revert it by using one Undo operation

…in useGridSearch

sergeyteleshev

All in all feature looks awesome! Nice integration with undo/redo btw

Please also consider cases with readonly tables (probably block replace functionality with disabled state) - Session Manager, readonly tables, tables where we cannot edit cells, but can add/delete rows

Also, keep in mind that if we replace 1 item. We want to scroll and focus this item because it may be outside the visible view, and we need to show the user that this value has changed. For "replace all" the view should remain the same (no selection, no scroll to cell)

Some of the issues can be resolved in the next tickets. We need to decide what we can do now and what later

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchEngine.ts

sergeyteleshev · 2026-01-29T23:28:55Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchEngine.ts

+    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+      for (let colIdx = 0; colIdx < columnCount; colIdx++) {
+        const cellText = getCellText(rowIdx, colIdx);
+        if (searchPattern.test(cellText)) {
+          matches.push({ rowIdx, colIdx });
+          if (searchPattern.global) {
+            searchPattern.lastIndex = 0;
+          }
+        }
+      }
+    }


well for big tables this would just crash the app due to performance issues in the worst case scenario. for most cases it would be like a freeze

we need something tricky here. maybe batch search in new thread (service worker)

I suppose not a bad idea to sync with the team how should we handle that so we do not dig into this real hard

also we have react-minisearch lib for searching. maybe it can offer something for us. we need to check the API for ideas

this simple solution still shows decent results even on huge tables. I would take it to separate ticket for further exploration.
I tried to use Web Worker for that calculations, but the bottleneck here is the getCellText which can't be called somewhere else. Batching, serializing/deserializing, orchestration adds too much overhead and didn't show any significant improvements. Actually, for me it even for worse

We’ll need to come up with a solution anyway. Users with large datasets will definitely run into issues, but we can address performance problems on large datasets in a separate ticket. The main thing for now is that the new functionality should not affect users who don’t use the search and replace feature

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchPanel.tsx

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx

sergeyteleshev · 2026-01-30T10:42:05Z

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx

@@ -189,13 +199,20 @@ export const DataGridTable = observer<IDataPresentationProps>(function DataGridT
        return;
      }

+      if (dataGridRef.current?.isReplacing()) {
+        return;
+      }


I think we should revert that new behavior

As user I want to see all changes focused. For example we have huge table and our change is out of the screen right now. Currently if I replace 1 value I wont see what was replaced cause it was not scrolled or selected this cell. so we can miss something important

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Document/DocumentEditAction.ts

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridEditAction.ts

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataCacheAction.ts

…onditional read-only state

…archPanel

…elated usages

…hange type

devnaumov · 2026-01-30T17:13:55Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchEngine.ts

+    for (let rowIdx = 0; rowIdx < rowCount; rowIdx++) {
+      for (let colIdx = 0; colIdx < columnCount; colIdx++) {
+        const cellText = getCellText(rowIdx, colIdx);
+        if (searchPattern.test(cellText)) {
+          matches.push({ rowIdx, colIdx });
+          if (searchPattern.global) {
+            searchPattern.lastIndex = 0;
+          }
+        }
+      }
+    }


We’ll need to come up with a solution anyway. Users with large datasets will definitely run into issues, but we can address performance problems on large datasets in a separate ticket. The main thing for now is that the new functionality should not affect users who don’t use the search and replace feature

devnaumov · 2026-01-30T17:20:39Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchEngine.ts

+  }
+
+  /** Replace pattern in cell text. Returns new text and whether pattern still matches. */
+  static replaceInCell(cellText: string, pattern: RegExp, replaceValue: string): { newText: string; stillMatches: boolean } {


Why do we choose to use static methods and class approach in general here? Seems like it could be 3 functions instead

devnaumov · 2026-01-30T17:25:24Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchPanel.tsx

+  });
+
+  useEffect(() => {
+    onCellClassNameChange(getCellClassName);


This part is confusing for me. We are reacting to the fn reference change here? Could you describe what its used for please

devnaumov · 2026-01-30T17:41:03Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+                onCellKeyDown={handleCellKeyDown}
+                onColumnWidthsChange={setColumnWidths}
+              />
+              {searchOpen && (


We can use <Activity /> here to preserve state and improve perfomance

devnaumov · 2026-01-30T17:42:33Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+    return () => el.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  function handleSearchOpen() {


Can we move all search related logic to a separate hook? so we dont implement it all in the entry file?

Wroud · 2026-01-29T10:47:56Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchEngine.ts

+    if (pattern.global) {
+      pattern.lastIndex = 0;
+    }


is it safe to mutate object from the argument?

Wroud · 2026-01-29T10:53:05Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+    const cached = searchStorage?.get();
+    if (cached) {
+      searchStorage?.set({ ...cached, open: false });
+    }


let's move to the internal hook

Wroud · 2026-01-29T10:56:40Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        e.preventDefault();
+        setSearchOpen(true);
+        setTimeout(() => searchPanelRef.current?.focus(), 0);


setTimeout(() => searchPanelRef.current?.focus(), 0);
isn't it better to handle this logic inside search panel component in render layout hook?

Wroud · 2026-01-29T10:57:09Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+
+  function handleSearchOpen() {
+    setSearchOpen(true);
+    setTimeout(() => searchPanelRef.current?.focus(), 0);


Wroud · 2026-01-29T10:58:13Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

+    setSearchOpen(false);
+    const cached = searchStorage?.get();
+    if (cached) {
+      searchStorage?.set({ ...cached, open: false });


maybe we can make update method that will accept partial state for update?

Wroud · 2026-01-29T12:02:49Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchPanel.tsx

+  replaceCellValue: (rowIdx: number, colIdx: number, value: string) => void;
+  replaceCellValues?: (updates: ICellValueUpdate[]) => void;


onReplace
let's keep only one and rename it

Wroud · 2026-01-29T12:04:56Z

webapp/common-react/@dbeaver/react-data-grid/src/search/GridSearchPanel.tsx

+  useEffect(() => {
+    onCellClassNameChange(getCellClassName);
+    return () => onCellClassNameChange(undefined);
+  }, [getCellClassName, onCellClassNameChange]);


you better to expose getCellClassName via useImperativeHandle

Wroud · 2026-02-02T09:10:52Z

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

  onEditorOpen?: (position: ICellPosition) => void;
  onCellKeyDown?: (position: ICellPosition, event: DataGridCellKeyboardEvent) => void;
  className?: string;
+  searchReadOnly?: boolean;


do we need searchReadOnly? we have getCellEditable

Wroud · 2026-02-02T09:15:57Z

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridEditHistoryManager.ts

+  recordBatchCellEdit(data: IGridHistoryBatchCellUpdateData<TKey, TCell>): void {
+    this.compressLastEditedCellHistory();
+
+    this.history.add({
+      source: GRID_HISTORY_SOURCE.BATCH_EDIT_CELLS,
+      data,
+    });
+  }
+


let's rework GRID_HISTORY_SOURCE.EDIT_CELL to accept array of changes, there is no need in the multiple event types for every type of change

moreover, batch is not an a special event, any event can be batched, so it usually solved on the event structure side or event emmiter

Wroud · 2026-02-02T09:22:36Z

...p/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSet/ResultSetEditAction.ts

+    const transformedUpdates = updates.map(({ key, value }) => {
+      const [update] = this.getOrCreateUpdate(key.row, DatabaseEditChangeType.update);
+      const prevValue = update.source?.[key.column.index] as any;
+
+      if (isResultSetContentValue(prevValue) && !isResultSetComplexValue(value)) {
+        if ('text' in prevValue && !isNull(value)) {
+          value = createResultSetContentValue({
+            text: String(value),
+            contentLength: String(value).length,
+            contentType: prevValue.contentType ?? 'text/plain',
+          });
+        }
+      }
+
+      return { key, value };
+    });


please avoid logic duplication, this is very important to have same code for set and setMany, make a private method to transform data

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataCacheAction.ts

SychevAndrey added 6 commits January 23, 2026 15:58

dbeaver/pro#7023 feat: add SearchPanel component and related styles t…

8670b0d

…o UI-kit add chevron Icon to UI-kit (used in Search Panel)

dbeaver/pro#7023 feat: add SearchPanel story

03772db

dbeaver/pro#7023 feat: update SearchPanel integration in CodeMirror

8eeae4c

dbeaver/pro#7023 feat: add onReplaceToggle prop to SearchPanel for to…

8fd4517

…ggle functionality

dbeaver/pro#7023 fix: replace-input styles

0675b5e

dbeaver/pro#7023 feat: implement search functionality in DataGrid v2

f5d05a3

SychevAndrey requested review from Wroud, devnaumov and sergeyteleshev January 26, 2026 11:34

SychevAndrey and others added 4 commits January 26, 2026 12:34

Merge branch 'devel' into 7023-cb-find-and-replace-new

b37360c

dbeaver/pro#7023 fix: update react-data-grid workspace reference in y…

999f802

…arn.lock

dbeaver/pro#7023 feat: don't focus cell on replace

22d67b9

dbeaver/pro#7023 feat: add searchReadOnly prop to DataGrid and GridSe…

70bd9c6

…archPanel components

SychevAndrey self-assigned this Jan 27, 2026

SychevAndrey added 7 commits January 27, 2026 10:52

dbeaver/pro#7023 fix: update styles for search panel

444cf9b

dbeaver/pro#7023 feat: add theme variables for improved styling in st…

64325ed

…orybook

dbeaver/pro#7023 feat: update search panel styles in datagrid

9b4b545

dbeaver/pro#7023 feat: improve search functionality by resetting acti…

2933551

…ve match index and triggering search on find actions

dbeaver/pro#7023 refactor: useGridSearch

330ad4a

dbeaver/pro#7023 fix: search panel styles

e4cc09f

dbeaver/pro#7023 feat: implement grid search state management

d43a80b

SychevAndrey marked this pull request as ready for review January 28, 2026 11:45

SychevAndrey and others added 6 commits January 28, 2026 12:48

Merge branch 'devel' into 7023-cb-find-and-replace-new

046a3fe

dbeaver/pro#7023 feat: add refresh functionality to search components

620e093

dbeaver/pro#7023 feat: add history action to refresh search results o…

4205508

…n undo/redo

dbeaver/pro#7023 refactor: remove unnecessary eslint disable comment …

22904f1

…in useGridSearch

dbeaver/pro#7023 feat: select affected cell on history change

eb97036

sergeyteleshev requested changes Jan 30, 2026

View reviewed changes

dbeaver/pro#7023 feat: add searchReadOnly prop to DataGridTable for c…

14852eb

…onditional read-only state

SychevAndrey added 7 commits January 30, 2026 14:51

dbeaver/pro#7023 refactor: simplify isReadOnly logic in GridSearchPanel

4bea384

dbeaver/pro#7023 refactor: use constants for flags

f852e04

dbeaver/pro#7023 refactor: update focus and refresh methods in GridSe…

9b20f4b

…archPanel

dbeaver/pro#7023 refactor: consolidate grid search state update logic

4df9976

dbeaver/pro#7023 refactor: update scrollToCell method signature and r…

553aa62

…elated usages

dbeaver/pro#7023 refactor: update handleCellChangeBatch to use ICellC…

3ecb4b3

…hange type

dbeaver/pro#7023 refactor: remove unwanted code

4b1dd54

SychevAndrey requested a review from sergeyteleshev January 30, 2026 14:43

devnaumov reviewed Jan 30, 2026

View reviewed changes

Wroud reviewed Feb 2, 2026

View reviewed changes

		replaceCellValue: (rowIdx: number, colIdx: number, value: string) => void;
		replaceCellValues?: (updates: ICellValueUpdate[]) => void;

7023-cb-find-and-replace-new #4085

Are you sure you want to change the base?

7023-cb-find-and-replace-new #4085

Uh oh!

Conversation

SychevAndrey commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sergeyteleshev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SychevAndrey commented Jan 26, 2026 •

edited

Loading