Sychev Andreyandmr-anton-t
c3be008ba2
* dbeaver/pro#6283 feat: add simple Combobox implementation It has fuzzy search inside to filter items. * dbeaver/pro#6283 feat: implement Combobox component with search functionality and update related files * dbeaver/pro#6283 refactor: remove unused onChange prop * dbeaver/pro#6283 style: update imports in Combobox component * dbeaver/pro#6283 feat: update styles, add popoverClassName prop * dbeaver/pro#6283 refactor: keep Combobox composable for better control * dbeaver/pro#6283 refactor: SRP in Combobox, split provider and components * dbeaver/pro#6283 feat: implement advanced search see AdvancedSearch example in stories * dbeaver/pro#6283 refactor: use strict comparison * dbeaver/pro#6283 refactor: replace fuzzy search with standard string search * dbeaver/pro#6283 refactor: simplify Combobox component * dbeaver/pro#6283 feat: add value formatter for ComboboxInput It might be useful for cases when value is not in user friendly format. Combobox doesn't support such transformations from the box Updated examples, added valueFormatter to advanced search, added MultiSelect example * dbeaver/pro#6283 feat: sync styles with select * dbeaver/pro#6283 fix: formatter * dbeaver/pro#6283 fix: respect the user's reduce motion preference * dbeaver/pro#6283 refactor: simplify component remove search context, use some built-in features for input value manipulations and for auto selection of the first item * dbeaver/pro#6283 refactor: use tailwind for Field styles * dbeaver/pro#6283 fix: should open all options on first interaction with any value * dbeaver/pro#6283 refactor: strip Combobox component Due to difficulties with items and search value managing in Combobox using only native combobox store, it was decided to move all that logic to CloudBeaver combobox component. This commit removes all the logic from UIKit Combobox and partially restores it in Cloudbeaver Combobox * dbeaver/pro#6283 feat: show no results when no items * dbeaver/pro#6283 feat: restore input to the last valid value * dbeaver/pro#6283 refactor: simplify restore input logic * dbeaver/pro#6283 refactor: reset input value on blur * dbeaver/pro#6283 refactor: don't sent input value on item click * dbeaver/pro#6283 refactor: remove getComputed for filteredItems getComputed will not work as expected for not primitive values( for example, for arrays) * dbeaver/pro#6283 refactor: remove getComputed for filteredItems * dbeaver/pro#6283 style: update z-index for ComboboxPopover component our backdrop component has 999 z-index(weird?), we need more to show popover in modals * dbeaver/pro#6283 feat: put CB Combobox near the component, fix layers issue * dbeaver/pro#6283 fix: radio title wrap * dbeaver/pro#6283 fix: use the same letter spacing as in other inputs * dbeaver/pro#6283 fix:combobox item styles * dbeaver/pro#6283 fix: clear value on click this fix is for situation when user started to type a word, found an option and clicked on it. Previously we didn't clear value and just setSelectedValue on click. This fix clears value as it happens onBlur and we use the value from selectedItem. --------- 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-server.shFor Windows:
./run-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/.