Files
cloudbeaver/webapp
7a8c4a141f [CB] Ability to pin column in the Data Editor (#3794)
* dbeaver/pro#6859 adds pin/unpin methods for data grid

* resets state when pins + makes pin icon stay when pinned

* adds TableHeaderCellIcon component with new Menu

* make actions alive

* cleanup

* moves pin logic into data-viewer

* cleanup

* restructures pin logic via contexts

* cleanup

* synchronizes column ids with view ids so pining works fine

* fixes actions visibility

* fix: correct layout on editing frozen cell

* fixes layout so frozen cell box-shadow can divide pinned and unpinned columns

* fixes border and box shadow interactions for frozen and editing cell

* makes pinned columns non transparent

* makes frozen border 3px and reverts previous style changes

* styles cleanup

* adds column true and visual indexes and reuses it across the data grid features

* cleanup

* reverts removed code

* reverts hacks with ids

* dbeaver/pro#7748 updates yarn.locks

* fixes incorrect types

* updates helper libs

* updates vitest + fixes test cases incorrect mocks

* runs tests sequentially with document and windows objects to prevent mock collisions

* Revert "runs tests sequentially with document and windows objects to prevent mock collisions"

This reverts commit f871837df3.

* skips download test

* removes export from resetDeprecatedSettings

* updates react-data-grid to beta-59 and react to 19.2

* updates storybook

* pr fixes

* updates yarn lock

* removes skip for download test

* cleanups download ts with empty body html

* updates vitest for core-connections

* updates yarn.lock

* linter fix + mocks once

* fixes hotkeys

* reverts version of react-hotkeys-hook library

* pr fixes

* code style fix

* dbeaver/pro#6859 adds selectCellByKey for opening editor

* reverts styles

* adds pin/unpin icons

* Revert "reverts styles"

This reverts commit 7857ef672d.

* on add actions sets correct focus

* removes incorrect positioning when editing pinned column

* tunes dark theme colors

* adds DnD to pin/unpin feature

* pr fixes

* fixes multiple selections for pinned & unpinned columns

* refactors multiple selections for pinned & unpinned columns so it uses data-grid api of getting sorted columns

* moves pin logic to usePinnedColumns hook

* moves color styles into data grid

* fixes letter

* adds styles for pinned border only for data editor

* adds unpin all columns action

* moves pinned logic to grid view action to save pinned state between tabs

---------

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: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com>
2025-12-24 13:44:02 +01:00
..
2025-12-18 12:49:11 +01: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/.