Release 1 : New Layout UI

theaubmov commented 6 months ago

Summary by CodeRabbit

New Features
- Implemented a new layout for the properties panel.
- Enhanced zoom functionality after importing BPMN models.
- Introduced new tabs and buttons in the UI for improved navigation and modeler interaction.
- Added new CSS file for extended styling options.
- Updated the properties panel to automatically prioritize certain groups.
Style Updates
- Refined the appearance of the search bar, buttons, and other UI components for a more cohesive look.
- Adjusted the layout and styling of the BPMN palette for better usability.
- Overhauled CSS to improve readability and maintainability.
Bug Fixes
- Corrected titles for Data Input and Data Output in the BPMN modeler.
Documentation
- Updated charset meta tag in the HTML for better standards compliance.
Refactor
- Streamlined event listeners and tab setup in the BPMN modeler for efficiency.
- Simplified logic in extension helper functions for clarity.
Chores
- Reorganized import statements and aligned code for better project structure.

theaubmov commented 6 months ago

@burnettk , yes, i ll handle it, for a bit of context here, bpmn-js is limited in terms of extending the ui, so the one option is to override it partially. my approach was to interven as minimally as possible, putting all logic in propertiesPanelProvider.

jbirddog commented 6 months ago

@coderabbitai review

coderabbitai[bot] commented 6 months ago

Walkthrough

The updates encompass a series of enhancements to a web application's user interface, particularly focusing on the BPMN modeler. New layout configurations for the properties panel add functionality and aesthetics, while zoom operations improve the modeler's usability post-import. CSS refinements contribute to a more cohesive visual experience, and JavaScript modifications introduce improved event handling and tab management, enriching the application's interactivity and organization.

Changes

File Path	Change Summary
`app/app.js`	Added layout config for properties panel and zoom on BPMN import.
`app/css/app.css`	Updated styles for body, container, panel, buttons, and overlays.
`app/css/bpmn-js.css`	Overrode default palette styles and updated label fonts.
`app/fileOperations.js`	Added listeners for buttons, initialized tabs, and tab functions.
`app/index.html`	Updated meta charset, rearranged header, added tabs, and reorganized body layout.
`app/spiffworkflow/DataObject/propertiesPanel/DataObjectPropertiesProvider.js`	Added `isDefault: true` property to the object returned by the `createDataObjectSelector` function.
`app/spiffworkflow/DataStoreReference/propertiesPanel/DataStorePropertiesProvider.js`	Added `isDefault: true` property to the `group` object within the `createCustomDataStoreGroup` function.
`app/spiffworkflow/IoPalette.js`	Updated function parameters, added event listener, and palette entries.
`app/spiffworkflow/callActivity/propertiesPanel/CallActivityPropertiesProvider.js`	Added `isDefault: true` property to the `called_element` group in the `createCalledElementGroup` function.
`app/spiffworkflow/conditions/propertiesPanel/ConditionsPropertiesProvider.js`	Added `isDefault: true` property to mark the group as a high priority group located in the General Tab.
`app/spiffworkflow/eventSelect.js`	Added `isDefault: true` property to the object returned by the `getConfigureGroupForType` function.
`app/spiffworkflow/extensions/extensionHelpers.js`	Simplified logic in the `getExtension` function.
`app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js`	Reorganized import statements and alignment adjustments, and added `isDefault: true` property to certain property groups.
`app/spiffworkflow/index.js`	Introduced a new import statement for `PropertiesPanelProvider` and added it to the exported object. Additionally, it includes a new entry for `paletteProvider` in the exported object.
`app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js`	Introduced a new property `isDefault` with the value `true` to the object returned by the `createMessageGroup` function.
`app/spiffworkflow/properties/PropertiesPanelProvider.js`	Introduced a module that provides functionality for rendering and managing a properties panel for elements in a user interface. It includes methods for handling the display of property groups, making groups collapsible, updating tab content, and managing tab interactions.
`test/spec/BpmnInputOutputSpec.js`	Updated test expectations for input/output titles.

"In the warren of code, where the functions hop, 🐇
A new panel blooms, and the errors stop.
With a click and a zoom, the model's in view,
A rabbit's craft, making all things anew." 🌟

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with CodeRabbit's AI: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository from git and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid.` - `@coderabbitai read the files in the src/scheduler package and generate README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.

theaubmov commented 6 months ago

@burnettk , the issue of active properties panel is resolved.

sartography / bpmn-js-spiffworkflow