296e03ec74
* dbeaver/pro#7023 feat: add SearchPanel component and related styles to UI-kit add chevron Icon to UI-kit (used in Search Panel) * dbeaver/pro#7023 feat: add SearchPanel story * dbeaver/pro#7023 feat: update SearchPanel integration in CodeMirror * dbeaver/pro#7023 feat: add onReplaceToggle prop to SearchPanel for toggle functionality * dbeaver/pro#7023 fix: replace-input styles * dbeaver/pro#7023 feat: implement search functionality in DataGrid v2 * dbeaver/pro#7023 fix: update react-data-grid workspace reference in yarn.lock * dbeaver/pro#7023 feat: don't focus cell on replace * dbeaver/pro#7023 feat: add searchReadOnly prop to DataGrid and GridSearchPanel components * dbeaver/pro#7023 fix: update styles for search panel * dbeaver/pro#7023 feat: add theme variables for improved styling in storybook * dbeaver/pro#7023 feat: update search panel styles in datagrid * dbeaver/pro#7023 feat: improve search functionality by resetting active match index and triggering search on find actions * dbeaver/pro#7023 refactor: useGridSearch * dbeaver/pro#7023 fix: search panel styles * dbeaver/pro#7023 feat: implement grid search state management * dbeaver/pro#7023 feat: add refresh functionality to search components * dbeaver/pro#7023 feat: add history action to refresh search results on undo/redo * dbeaver/pro#7023 feat: add batch cell update functionality to data grid 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 * dbeaver/pro#7023 refactor: remove unnecessary eslint disable comment in useGridSearch * dbeaver/pro#7023 feat: select affected cell on history change * dbeaver/pro#7023 feat: add searchReadOnly prop to DataGridTable for conditional read-only state * dbeaver/pro#7023 refactor: simplify isReadOnly logic in GridSearchPanel * dbeaver/pro#7023 refactor: use constants for flags * dbeaver/pro#7023 refactor: update focus and refresh methods in GridSearchPanel * dbeaver/pro#7023 refactor: consolidate grid search state update logic * dbeaver/pro#7023 refactor: update scrollToCell method signature and related usages * dbeaver/pro#7023 refactor: update handleCellChangeBatch to use ICellChange type * dbeaver/pro#7023 refactor: remove unwanted code * dbeaver/pro#7023 feat: refactor search functionality to use standalone functions * dbeaver/pro#7023 feat: implement useDataGridSearch hook to avoid bloating the DataGrid component with the search-related logic * dbeaver/pro#7023 feat: update search functionality to use onReplace for cell value updates * dbeaver/pro#7023 feat: use Activity component for search panel visibility in DataGrid * dbeaver/pro#7023 refactor: use common value transformation fn in set and setMany methods * dbeaver/pro#7023 refactor: rename methods for "unnkeyed" cache * dbeaver/pro#7023 refactor: unify cell edit history handling and remove batch edit references * dbeaver/pro#7023 fix: update searchReadOnly logic * dbeaver/pro#7023 refactor: replace rowsCountRef with useState (Error: Cannot access refs during render) * dbeaver/pro#7023 refactor: expose getCellClassName via useImperativeHandle 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). * dbeaver/pro#7023 fix: Cmd+F not re-focusing the search panel when already open * dbeaver/pro#7023 refactor: cell edit history compression * dbeaver/pro#7023 fix: refresh search state on revert * dbeaver/pro#7023 refactor: move focus blocking during replace into grid 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. * dbeaver/pro#7023 refactor: restructure grid search logic with useReducer and improve state management * dbeaver/pro#7023 refactor: improve grid search 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). * dbeaver/pro#7023 refactor: update search state types * dbeaver/pro#7023 refactor: restructure grid search state interfaces for improved clarity * dbeaver/pro#7023 refactor: optimize match retrieval logic after removal in grid search * dbeaver/pro#7023 refactor: sync refs and computed props in one effect * dbeaver/pro#7023 fix: Esc double handling between SearchPanel and CaptureView hotkeys * dbeaver/pro#7023 refactor: fix review comments in useGridSearch * dbeaver/pro#7023 refactor: unify hotkey stop propagation via shared EventContext/EventStopPropagationFlag * dbeaver/pro#7023 refactor: pass reactive cellText to useGridSearch * dbeaver/pro#7023 refactor: update grid search reducer actions and navigation logic reuse SET_ACTIVE_MATCH and computeActiveMatchIdx for consistency * dbeaver/pro#7023 refactor: improve equality check for cell matches * dbeaver/pro#7023 feat: implement cell change tracking subscriptions and cleanup logic * dbeaver/pro#7023 refactor: remove redundant clearTrackedCellSubscriptions Cleanup implemented in useTrackedGridSearchCellSubscriptions hook * dbeaver/pro#7023 fix: cancel stale deferred selectCell to prevent infinite focus loop When multiple rows are deleted, competing deferred selectCell timeouts cause focusSyncRef mismatch and endless focus-change cycle. * dbeaver/pro#7023 fix: update keyboard shortcut for search to use 'KeyF' * dbeaver/pro#7023 feat: make search disabled by default * dbeaver/pro#7023 fix: layout * dbeaver/pro#7023 fix: update scrollBox selection method in Table component --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com> Co-authored-by: Viktor Kirst <viktor.kirst@dbeaver.com> Co-authored-by: sergeyteleshev <iamsergeyteleshev@gmail.com>
Steps to Run
Welcome! Follow these steps to install and run the frontend dev server.
Prerequisites:
-
Ensure you have the correct Node.js version
We recommend using the latest LTS (Long-Term Support) version. Check the official Node.js website: https://nodejs.org/ The minimum supported version is v22.15.0
-
Ensure you have Yarn installed
If not, see the instructions on the official website: https://yarnpkg.com/getting-started/install
-
Enable Corepack
To ensure that Corepack is enabled, run the following command:
corepack enableMore about corepack you can find here: https://yarnpkg.com/corepack
Installation Steps:
-
Build the Backend Server
Navigate to the
deploydirectory and execute the build script. This script will handle cloning necessary repositories and building the backend. It also installs all frontend dependencies and builds it as well.For macOS/Linux:
cd deploy ./build.shFor Windows:
cd deploy ./build.bat -
Navigate to the Directory with Build Artifacts
Change your current directory to the
cloudbeaverfolder within thedeploydirectory.cd cloudbeaver -
Run the Backend Server
Start the backend server by running the execution script.
For macOS/Linux:
./run-cloudbeaver-server.shFor Windows:
./run-cloudbeaver-server.bat -
Navigate to the Webapp Directory
Open a new terminal window or tab, and change your directory to the web application's product folder.
cd webapp/packages/product-default -
Run the Web Application
Start the web application development server, specifying the backend server's URL. The default URL is
http://localhost:8978/.For macOS/Linux:
server=http://localhost:8978/ yarn devFor Windows Command Prompt:
set server=http://localhost:8978/ && yarn devFor Windows PowerShell:
$env:server="http://localhost:8978/"; yarn dev
You should see a message with URL of your running dev server like below
➜ Local: http://localhost:8080/
Developing in VSCode
VSCode offers dedicated tasks to streamline development with our project, making it the recommended environment for working on the CloudBeaver Frontend.
To access these tasks, press F1 (or Cmd/Ctrl + Shift + P) in VSCode, select "Tasks: Run Task" from the command palette, and then choose the desired task from the list.
To start the local development server, follow these steps:
- Execute the Build CE task. This task builds both the backend and frontend.
- Run the Run Backend CE task to start the backend server.
- Run the Run DevServer CE task.
These steps will launch the frontend in development mode and proxy API requests to your locally running backend, accessible at http://localhost:8080/.