24b7b6021d
* dbeaver/pro#4583 feat: add tab reordering functionality in NavigationTabsService * dbeaver/pro#4583 feat: update tab filtering to support tabs order * dbeaver/pro#4583 feat: add tab drag-and-drop functionality and associated tests * dbeaver/pro#4583 feat: implement tab drag-and-drop functionality * dbeaver/pro#4583 fix: adjust tab reordering logic to handle dragged tab position correctly since our reordering logic is duplicating in two components and, moreover, I found a bug in one of the implementations, I decided to put all the common logic to a dedicated helper with test coverage to be sure we use the right logic everywhere. * dbeaver/pro#4583 test: remove redundant tests for onReorder in useTabDragAndDrop * dbeaver/pro#4583 refactor: update reorderTab method to remove return value * dbeaver/pro#4583 feat: add tab reordering functionality to SqlResultTabs component * dbeaver/pro#4583 feat: add tabs order persistence via useUserData hook * dbeaver/pro#4583 feat: integrate react-dnd for tab drag-and-drop functionality * dbeaver/pro#4583 chore: update deps * dbeaver/pro#4583 feat: integrate @dbeaver/js-helpers for array reordering in useHeaderDnD * dbeaver/pro#4583 refactor: simplify reorderArray implementation by extracting some logic to helpers * dbeaver/pro#4583 refactor: extracted tab reordering to a separate hook - moved the tab order persistence logic into a new useTabOrderPersistence hook to make the flow is more obvious (we use this default persistence only with tabs container) - introduced new reorderStateKey tab state to have an identifier for a tab panel, use it in canDrop check to prevent cross-panel DnD -replaced reorderable prop with reorderStateKey, because without a key you can't use reordering * dbeaver/pro#4583 refactor: add dropAllowed state to useTabDragAndDrop for improved drag-and-drop UI * dbeaver/pro#4583 chore: add a comment about reorderStateKey * dbeaver/pro#4583 refactor: add safe guard in SqlResultTabs.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * dbeaver/pro#4583 refactor: wrap onReorder function into useCallback for improved performance * dbeaver/pro#4583 refactor: remove applyOrder method from ITabsContainer and update useTabOrderPersistence to not have dependencies on container * dbeaver/pro#4583 refactor: use refactored hook in SideBarPanel and ToolsPanel Since we are not mutating a container state anymore, we have to update sorting separately in TabList level because it reads directly from the container. * dbeaver/pro#4583 refactor: remove fallback for stateKey * dbeaver/pro#4583 refactor: replace hardcoded values with constants in useTabDragAndDrop * dbeaver/pro#4583 refactor: add DragPosition type * dbeaver/pro#4583 refactor: remove dependencies in TabsState effect * dbeaver/pro#4583 refactor: remove stateKey from useTab hook * dbeaver/pro#4583 feat: add panelId prop to SideBarPanel and use as persistence key * dbeaver/pro#4583 refactor: persistence key in useTabOrderPersistence * dbeaver/pro#4583 feat: add reorderArrayWithOrder helper and update SqlResultTabs to use it --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com> Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.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/.