7023-cb-find-and-replace-new by SychevAndrey · Pull Request #4085 · dbeaver/cloudbeaver

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

…e functions

…ting the DataGrid component with the search-related logic

…or cell value updates

…lity in DataGrid

…and setMany methods

…e batch edit references

…udbeaver into 7023-cb-find-and-replace-new

… Cannot access refs during render)

Wroud · 2026-02-11T11:15:28Z

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

-  if (rowsCountRef.current !== rowsCount) {
-    const previousRowCount = rowsCountRef.current;
-    rowsCountRef.current = rowsCount;
+  if (prevRowsCount !== rowsCount) {
+    setPrevRowsCount(rowsCount);

-    if (previousRowCount === 0) {
+    if (prevRowsCount === 0) {
      setColumnWidths(new Map<string, ColumnWidth>());
    }
  }


why do we need this changes? it seems not related to the initial issue

99861f8

Cannot access refs during render

https://react.dev/reference/react/useRef
see pitfall

Wroud · 2026-02-11T11:24:08Z

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

  abstract getElementState(key: TKey): DatabaseEditChangeType | null;
  abstract get(key: TKey): TValue | undefined;
  abstract set(key: TKey, value: TValue): void;
+  abstract setMany(updates: Array<{ key: TKey; value: TValue }>): void;


maybe it's better to use Array<[TKey, TValue]>?

I'm not sure that tuple is better here.
Even if we look at the usage, compare:

updates.push({ key: { row, column }, value }); updates.push([{ row, column }, value ]);

For me the first option is more readable.

And if we look at edit actions payloads they are also shaped like objects:

this.historyManager.recordCellEdit({ updates: [{ key, value, prevValue }], });

Wroud · 2026-02-11T11:24:29Z

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

  getElementState: (key: TKey) => DatabaseEditChangeType | null;
  get: (key: TKey) => TValue | undefined;
  set: (key: TKey, value: TValue) => void;
+  setMany: (updates: Array<{ key: TKey; value: TValue }>) => void;


Wroud · 2026-02-11T11:29:06Z

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

+      if (dataGridRef.current?.isReplacing()) {
+        return;
+      }
+
      handlers.selectCell({ colIdx, rowIdx });
    }

    tableData.editor?.action.addHandler(syncEditor);

    function syncFocus(data: DatabaseDataSelectActionsData<Partial<IGridDataKey>>) {
      if (data.type === 'focus') {
+        if (dataGridRef.current?.isReplacing()) {
+          return;
+        }
        // TODO: we need this delay to update focus after render rows update
        setTimeout(() => {


i belive this should be handled on the grid component side, if you don't want to change focus or any, you can:

Block focus change event in the Grid component

Block focus change method in the Grid component

Wroud · 2026-02-11T12:43:07Z

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

-    this.compressLastEditedCellHistory(data.key);
+    const singleUpdateKey = data.updates.length === 1 ? data.updates[0]!.key : undefined;
+    this.compressLastEditedCellHistory(singleUpdateKey);


can we use if here and restrict passing undefined to the compressLastEditedCellHistory because it make no sense

Wroud · 2026-02-11T12:55:28Z

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

-  if (rowsCountRef.current !== rowsCount) {
-    const previousRowCount = rowsCountRef.current;
-    rowsCountRef.current = rowsCount;
+  if (prevRowsCount !== rowsCount) {
+    setPrevRowsCount(rowsCount);

-    if (previousRowCount === 0) {
+    if (prevRowsCount === 0) {
      setColumnWidths(new Map<string, ColumnWidth>());
    }
  }


https://react.dev/reference/react/useRef
see pitfall

…andle Replaced onCellClassNameChange prop + useEffect with useImperativeHandle as suggested in code review. Using useState setter directly as callback ref either caused infinite re-renders (without deps) or lost context synchronization entirely (with stable deps). Settled on useCallback ref that sets both useRef (for method access) and useState (for context propagation).

…eady open

…id component Previously DataGridTable checked isReplacing() before syncing focus/selection, leaking grid internals Now the grid's selectCell blocks during replacing internally and supports deferred mode (setTimeout + rAF) for post-render focus sync.

…cer and improve state management

moved ref synchronization out of render, unified search+scroll into one shared path, added a SET_MATCHES no-op guard to reduce unnecessary updates, removed duplicate open=false persistence from useDataGridSearch (single owner now in useGridSearch).

…or improved clarity

…al in grid search

…tureView hotkeys

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 and others added 11 commits February 9, 2026 14:48

dbeaver/pro#7023 feat: refactor search functionality to use standalon…

02c0835

…e functions

dbeaver/pro#7023 feat: implement useDataGridSearch hook to avoid bloa…

95d088d

…ting the DataGrid component with the search-related logic

dbeaver/pro#7023 feat: update search functionality to use onReplace f…

8a7601a

…or cell value updates

dbeaver/pro#7023 feat: use Activity component for search panel visibi…

feb28b9

…lity in DataGrid

dbeaver/pro#7023 refactor: use common value transformation fn in set …

89ee284

…and setMany methods

dbeaver/pro#7023 refactor: rename methods for "unnkeyed" cache

06e5e87

dbeaver/pro#7023 refactor: unify cell edit history handling and remov…

899cea2

…e batch edit references

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

d1b1618

Merge branch '7023-cb-find-and-replace-new' of github.com:dbeaver/clo…

a4dee05

…udbeaver into 7023-cb-find-and-replace-new

dbeaver/pro#7023 fix: update searchReadOnly logic

327372f

dbeaver/pro#7023 refactor: replace rowsCountRef with useState (Error:…

99861f8

… Cannot access refs during render)

SychevAndrey requested review from Wroud and devnaumov February 10, 2026 10:56

Wroud reviewed Feb 11, 2026

View reviewed changes

SychevAndrey and others added 14 commits February 24, 2026 10:49

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

fd91717

dbeaver/pro#7023 fix: Cmd+F not re-focusing the search panel when alr…

3e417f0

…eady open

dbeaver/pro#7023 refactor: cell edit history compression

b12730f

dbeaver/pro#7023 fix: refresh search state on revert

5a602a6

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

49cbdd7

dbeaver/pro#7023 refactor: restructure grid search logic with useRedu…

6cb8579

…cer and improve state management

dbeaver/pro#7023 refactor: update search state types

8ae5050

dbeaver/pro#7023 refactor: restructure grid search state interfaces f…

2c07e05

…or improved clarity

dbeaver/pro#7023 refactor: optimize match retrieval logic after remov…

a287917

…al in grid search

dbeaver/pro#7023 refactor: sync refs and computed props in one effect

cb077fb

dbeaver/pro#7023 fix: Esc double handling between SearchPanel and Cap…

fc22ded

…tureView hotkeys

SychevAndrey requested a review from Wroud February 25, 2026 16:04

Comments

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SychevAndrey commented Jan 26, 2026 •

edited

Loading