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

sergeyteleshev · 2026-01-29T23:10:51Z

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

+        escapedSearch = `\\b${escapedSearch}\\b`;
+      }
+
+      const flags = options.caseSensitive ? 'g' : 'gi';


duplicated twice. can be moved to the top of function
plus lets move g and gi to consts with name so no more magic numbers/letters

sergeyteleshev · 2026-01-29T23:23:24Z

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

+    } catch {
+      return null;
+    }


this is a silent quit. which from the code perspective basically equals to nothing have been found

what if user enables regexp, then tries something that causes an error. as result it sees - nothing have found. but in fact there is an error. maybe we can show the error to the user just to know the search query is screwed and need to try something else. it would improve ux for the users for sure

This is how the search works in Value Panel right now. If we want to show something, we need to groom it first.

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

sergeyteleshev · 2026-01-29T23:39:50Z

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

+    focus: () => panelRef.current?.focus(),
+    refresh: () => actions.refresh(),


better to add it to function declaration in order to improve debug experience

sergeyteleshev · 2026-01-29T23:41:26Z

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

+        search: snapshot.query,
+        replace: snapshot.replace,
+        caseSensitive: snapshot.caseSensitive,
+        wholeWord: snapshot.wholeWord,
+        regexp: snapshot.regexp,


maybe it is the same interface? suspiciously similar

with what interface?

sergeyteleshev · 2026-01-30T10:12:40Z

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

    tableData.editor?.set({ row, column }, value);
  }

+  function handleCellChangeBatch(changes: Array<{ rowIdx: number; colIdx: number; value: string }>) {


strict types pls

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

sergeyteleshev · 2026-01-30T10:57:02Z

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

+  setMany(updates: Array<{ key: TKey; value: TValue }>): void {
+    for (const { key, value } of updates) {
+      this.set(key, value);
+    }
+  }


this will cause a lot of actions dispatched and reactions subscribed to this action. so UI maybe can went bananas
maybe we should create a editBatch where we provide multiple edited cells, edit it in batch and execute 1 action

It was not needed actually

sergeyteleshev · 2026-01-30T10:57:38Z

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

+  setMany(updates: Array<{ key: TKey; value: TCell }>): void {
+    if (updates.length === 0) {
+      return;
+    }
+
+    const historyUpdates: Array<{ key: TKey; prevValue: TCell; value: TCell }> = [];
+    const actionValues: Array<{ key: TKey; prevValue: TCell; value: TCell }> = [];
+
+    for (const { key, value } of updates) {
+      const [update] = this.getOrCreateUpdate(key.row, DatabaseEditChangeType.update);
+      const prevValue = update.update[key.column.index] as TCell;
+
+      historyUpdates.push({ key, prevValue, value });
+      actionValues.push({ key, prevValue, value });
+
+      update.update[key.column.index] = value;
+      this.removeEmptyUpdate(update);
+    }
+
+    this.historyManager.recordBatchCellEdit({ updates: historyUpdates });
+
+    this.action.execute({
+      resultId: this.result.id,
+      type: DatabaseEditChangeType.update,
+      revert: false,
+      value: actionValues,
+    });
+  }


like this yes

sergeyteleshev · 2026-01-30T11:53:22Z

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

+  hasGlobal(scope: symbol): boolean;
+  getGlobal<T>(scope: symbol): T | undefined;
+  setGlobal<T>(scope: symbol, value: T): void;
+  deleteGlobal(scope: symbol): void;


maybe better to move it to separate cache action: IDatabaseGlobalCacheAction where we can store global values for the data editor
now it is mixed with cells values so we need to separate abstractions

I'm not sure. We might get confused later by two cache actions :) Let's discuss

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

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

		focus: () => panelRef.current?.focus(),
		refresh: () => actions.refresh(),

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!

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

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!

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!

3 participants

SychevAndrey commented Jan 26, 2026 •

edited

Loading

sergeyteleshev Jan 29, 2026 •

edited

Loading