4e7555c419
* dbeaver/pro#5232 feat: add Dialog component to UI-kit * dbeaver/pro#5232 feat: add slide variant for Dialog component * dbeaver/pro#5232 refactor: dialog backdrop component * dbeaver/pro#5232 feat: use dialog component for side panel to prevent focus escaping * dbeaver/pro#5232 feat: add DialogHeader, DialogBody, and DialogFooter components for improved dialog layout * dbeaver/pro#5232 feat: add Storysource addon to Storybook configuration * dbeaver/pro#5232 refactor: use ui-kit dialog for CommonDialog implementation * dbeaver/pro#5232 feat: add animated prop to Dialog component to control animations * dbeaver/pro#5232 refactor: remove dialog animation for side panel * dbeaver/pro#5232 refactor: remove unused backdrop and focus management logic from DialogsPortal now handled by ariakit dialog component * dbeaver/pro#5232 style: adjust dialog padding and size for large variant * dbeaver/pro#5232 feat: add dialog to admin part implementation * dbeaver/pro#5232 fix: remove autofocus prop from CommonDialogWrapper in AuthDialog and DriverSelectorDialog * dbeaver/pro#5232 style: correct apostrophe in label text for NestedDialogs component * dbeaver/pro#5232 fix: update dialog component styles for improved accessibility and layout * dbeaver/pro#5232 refactor: add DialogElement component to get rid of code duplication * dbeaver/pro#5232 fix: correct min-width for large fixedWidth dialog size * dbeaver/pro#5232 refactor: update DialogElement properties for improved focus management * dbeaver/pro#5232 fix: use l10n for DialogElement close buttons * dbeaver/pro#5232 refactor: update DialogElement to be a modal to trap focus * dbeaver/pro#5232 refactor: remove unmountOnHide prop from CommonDialogWrapper * dbeaver/pro#5232 feat: return ESC hotkey handling in SlideBox * dbeaver/pro#5232 feat: make background panel inert to make focus never reach hidden panel * dbeaver/pro#5232 feat: add SlidePanel component to replace DialogElement by removing Dialog * dbeaver/pro#5232 feat: add inert prop to SlideElement for focus trapping in visible part * dbeaver/pro#5232 feat: pass onClose handler to SlideBox to activate hotkey * dbeaver/pro#5232 style: return to initial state to avoid redundant diffs * dbeaver/pro#5232 style: update copyright year in SlideElement.module.css * dbeaver/pro#5232 chore: remove ui-kit dependency from package.json and tsconfig.json * dbeaver/pro#5232 build: update @storybook/addon-storysource dependency version * dbeaver/pro#5232 build: update @storybook/addon-storysource dependency version * dbeaver/pro#5232 style: remove border styles from dialog header and footer * dbeaver/pro#5232 fix: update hover background color for icon button * dbeaver/pro#5232 feat: move focus from driver dialog to panel when applicable * dbeaver/pro#6326 fix: large window size * dbeaver/pro#5232 fix: update focus on hide logic * dbeaver/pro#5232 fix: update hover and focus styles for icon button in SlidePanel * dbeaver/pro#5232 feat: return back the common backdrop, replace common fallback to spinner * dbeaver/pro#5232 fix: replace useFocus by dialog's initial focus in Rename dialog * dbeaver/pro#5232 build: update deps after merge * dbeaver/pro#5232 refactor: use constant for button id * dbeaver/pro#5232 feat: add Loader component to DialogsPortal * dbeaver/pro#5232 refactor: update Dialog component to use semantic HTML elements for header and footer * dbeaver/pro#5232 fix: gap in footer of dialogs * dbeaver/pro#5232 feat: focus input initially in New Folder dialog * dbeaver/pro#5232 feat: add autoFocusOnShow prop to CommonDialogWrapper for improved focus management * dbeaver/pro#5232 fix: padding for CommonDialogFooter --------- 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> Co-authored-by: Evgenia <139753579+EvgeniaBzzz@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/.