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

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

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

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

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

You are right, it's not needed here, was just an effect of previous version of the search.

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

We are "registering" getCellClassName in DataGrid to enable highlighting on panel mount, and cleaning it on unmount to remove highlighting.

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

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

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

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

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

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

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

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

a ref can't trigger the parent's re-render needed to propagate the value into context, so we would end up needing a callback or effect on the parent side anyway

this is not true, you can pass callback to the ref and use useState to track ref changes, moreover getCellClassName seems to be stable callback (it is not changing during re-renders) so there is no need to track it (it will be tracked correctly with ref)

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

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

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

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

…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]>?

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

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

SychevAndrey and others added 12 commits February 9, 2026 10:19

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

df8a237

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

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!

Uh oh!

Uh oh!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

SychevAndrey commented Jan 26, 2026 •

edited

Loading