Files
cloudbeaver/webapp
9c6f301fa9 dbeaver/pro#7562 [CB] keep data editor filter state during session (#4261)
* dbeaver/pro#7562 feat: persist data editor filter state after reconnect

* dbeaver/pro#7562 feat: update data viewer to persist filter state

* dbeaver/pro#7562 feat: enhance constraint resolution in WebSQLDataFilter

allow using attrName without attrPosition

* dbeaver/pro#7562 refactor: don't use options

replaced private restorePendingState()  with public restoreViewState(pinnedColumnNames, columnOrderNames?) that takes data directly as arguments

* dbeaver/pro#7562 fix: stale constraints in UI

bug with skipping constraints if any without a position.
if (!prevColumn) {
        return;
      }

* dbeaver/pro#7562 refactor: add method to retrieve pinned column names in GridViewAction

* dbeaver/pro#7562 refactor: simplify state validation using schema

* dbeaver/pro#7562 refactor: simplify state management in useDataViewerPanel

* dbeaver/pro#7562 refactor: move persisted state to IDataViewerPageState

* dbeaver/pro#7562 fix: initial pageState

* dbeaver/pro#7562 refactor: simplify getPinnedColumnNames method in GridViewAction

* dbeaver/pro#7562 refactor: shadowed column renamed to c for clarity

* dbeaver/pro#7562 refactor: change type of value in IPersistedConstraint to unknown

* dbeaver/pro#7562 refactor: remove manual state operations

* dbeaver/pro#7562 refactor: introduce DatabasePersistedStateAction for centralized state persistence

* dbeaver/pro#7562 fix

* dbeaver/pro#7562 refactor: replace reaction with when

* Revert "dbeaver/pro#7562 feat: enhance constraint resolution in WebSQLDataFilter"

This reverts commit 3e0e86f4b2.

Last test showed that we don't need any additional logic on BE. It handles all constraints properly.

* dbeaver/pro#7562 fix: make pinColumns optional

* dbeaver/pro#7562 refactor: simplify pinned column handling

* dbeaver/pro#7562 refactor: initialize store in DatabasePersistedStateAction constructor as observable

* dbeaver/pro#7562 refactor: rename getColumnNameByPosition to getColumnNameAt for clarity

* dbeaver/pro#7562 refactor: move DatabasePersistedStateAction to source level, simplify persisted state sync

- Make DatabasePersistedStateAction a standalone class on DatabaseDataSource instead of per-result action
- Convert options to getter
- Auto-sync constraints to persisted state via autorun + action batching
- Restore view state (pinned columns, column order) in GridViewAction constructor

* dbeaver/pro#7562 refactor: replace DatabasePersistedStateAction with DatabasePersistedStateStore and update related references

* dbeaver/pro#7562 refactor: simplify view-state persistence

- DatabasePersistedStateStore: pure KV (observable.ref + actions)
- DatabaseDataSource: add loadPersistedState() + onPersistedStateLoaded() hook
- DatabaseDataConstraintAction: own the constraint persist
- ResultSetDataSource: thin dispatcher
- GridViewAction: columnsOrder/pinnedColumns become computed getters

* dbeaver/pro#7562 refactor: create universal ColumnReference

* dbeaver/pro#7562 refactor: simplify persistence flow, remove extra guards, simplify persisted data filter state handling

* dbeaver/pro#7562 refactor: simplify GridViewAction column-ref handling and layout resolution

* dbeaver/pro#7562 refactor: per-key reactive persisted state store, drop constraint persistence hacks

* dbeaver/pro#7562 refactor: simplify setOptions method to use superclass implementation

* dbeaver/pro#7562 add missing fields

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
Co-authored-by: naumov <iamemptyhuh@gmail.com>
Co-authored-by: alex <48489896+devnaumov@users.noreply.github.com>
2026-04-22 14:52:59 +02:00
..

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 enable
    

    More about corepack you can find here: https://yarnpkg.com/corepack

Installation Steps:

  1. Build the Backend Server

    Navigate to the deploy directory 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.sh
    

    For Windows:

    cd deploy
    ./build.bat
    
  2. Navigate to the Directory with Build Artifacts

    Change your current directory to the cloudbeaver folder within the deploy directory.

    cd cloudbeaver
    
  3. Run the Backend Server

    Start the backend server by running the execution script.

    For macOS/Linux:

    ./run-cloudbeaver-server.sh
    

    For Windows:

    ./run-cloudbeaver-server.bat
    
  4. 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
    
  5. 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 dev
    

    For Windows Command Prompt:

    set server=http://localhost:8978/ && yarn dev
    

    For 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:

  1. Execute the Build CE task. This task builds both the backend and frontend.
  2. Run the Run Backend CE task to start the backend server.
  3. 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/.