feat: add RPA editor to Camunda Modeler #4807

marstamm · 2025-01-23T17:08:10Z

Proposed Changes

The source code for the RPA worker can be found here: https://github.com/camunda/rpa-frontend

This PR integrates the RPA Editor UI into the Camunda Modeler.

Core concepts:

Connection to the RPA worker is managed by the Editor instance
@camunda/rpa-integration provides React components for the testing UI, they use the editor instance (required prop) to communicate.

Happy to give sync walkthrough

screencap-2025-01-23-18-04-17.webm

What will change (UI/Interactions):

Links to docs
Library Suggestions
(potentially) deployment to local instance only

RPA worker setup

To test against a local worker:

Download the RPA worker from github

Add a rpa-worker.properties in the same directory as the rpa worker with the content:

camunda.rpa.python.extra-requirements=extra-requirements.txt
camunda.client.zeebe.enabled=false

Add a extra-requirements.txt in the same directory as the rpa worker with the content:

camunda-utils @ https://github.com/camunda/rpa-python-libraries/releases/download/camunda-utils-v0.1.0a0/camunda_utils-0.1.0a0-py3-none-any.whl
camunda-rpa @ https://github.com/camunda/rpa-python-libraries/releases/download/camunda-rpa-v0.1.0a0/camunda_rpa-0.1.0a0-py3-none-any.whl

This step will not be required in the 1.0 release

Start the RPA worker by running the executable

Checklist

To ensure you provided everything we need to look at your PR:

Brief textual description of the changes present
Visual demo attached
Steps to try out present, ==> see comment
Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

nikku · 2025-01-24T07:31:12Z

@marstamm Could you share run instructions for non-developers?

marstamm · 2025-01-24T08:16:05Z

However, you can download a build-on-demand build:

Note: this is still a WIP, but the integration work is nearly complete. I'll reach out in you Slack channel to get a review for it later.
WE just don't want to merge it yet, as

Documentation links
Library Suggestions

Are not final. These changes will be solved by bumping the RPA library and won't require changes to the integration code

barmac

I am not able to give a full review right now, but let's sync on this later on.

barmac · 2025-02-04T15:13:35Z

app/lib/zeebe-api/zeebe-api.js

+    resource.form = contents;
+  } else {
+
+    // Fallback for unknown resource, cf.
+    // https://github.com/camunda-community-hub/zeebe-client-node-js/blob/7969ce1808c96a87519cb1a3f279287f30637c4b/src/zb/ZBClient.ts#L873-L886
+


Given that we are migrating to the SDK, we may want to adjust this part
#4817

client/package.json

barmac · 2025-02-04T15:49:28Z

Suggestion: reorder buttons to make logical order:

Screen.Recording.2025-02-04.at.16.49.04.mov

barmac · 2025-02-04T15:49:55Z

Suggestion: Use a single field for the URL

barmac · 2025-02-04T15:52:18Z

Suggestion: scroll only to the bottom

barmac · 2025-02-04T15:52:50Z

Question: Can we use Codemirror like we do everywhere in the app?

barmac · 2025-02-04T15:54:48Z

To fix: Scrolling

Screen.Recording.2025-02-04.at.16.54.29.mov

barmac · 2025-02-04T15:57:15Z

client/src/app/tabs/rpa/__tests__/RPAEditorSpec.js

+
+  describe('#render', function() {
+
+    it('should render with NO xml', function() {


barmac · 2025-02-04T16:01:04Z

@marstamm to add a file which we can run with the docker worker.
Also we need a macos image.

barmac · 2025-02-04T16:04:38Z

@philippfromme @marstamm and I looked at the PR, and tested the solution in action. View our remarks above.
@marstamm's introduction was recorded and can be accessed at https://camunda.slack.com/archives/C032H77434N/p1738685029197899?thread_ts=1737736287.487929&cid=C032H77434N

related to #4807 (comment)

marstamm · 2025-02-04T16:12:37Z

Suggestion: reorder buttons to make logical order:
Suggestion: Use a single field for the URL

@PhilippaC22 , can you have a look and give a 👍 from design?

Suggestion: scroll only to the bottom

Done 1205293

Question: Can we use Codemirror like we do everywhere in the app?

Not in this iteration.

@marstamm to add a file which we can run with the docker worker.

The Complete .rpa file:
initial.rpa.txt

marstamm · 2025-02-04T16:15:01Z

To fix: Scrolling

This is caused by the Iframe URL being unreachable. This will display the run log with the production Worker

related to #4807 (comment)

- Connects to latest version of the RPA worker - Uses URL instead of host + port

marstamm · 2025-02-11T08:49:01Z

This is caused by the Iframe URL being unreachable. This will display the run log with the production Worker

This is now fixed. I added a new getting started guide in the main body that used the latest RPA worker, please try it out :)

nikku · 2025-02-11T09:04:47Z

I gave this a quick review. The current integration (testing, deploy button) looks a little bit like an alien to me, it does not follow the Desktop modeler UI.

Did we/do we consider sensible adjustments to make it feel more native, i.e. with theeming (#4511)? This is something that the core team could follow-up on.

CC @lmbateman @barmac, let's ensure this integrates nicely enough for the users, or decide how/when we get to a "nicely enough" integration.

nikku · 2025-02-11T09:05:49Z

@marstamm Is there a reason this is still in draft? What kind of additional feedback do you seek before moving it to ready for review, when do you want to see this merged?

marstamm · 2025-02-11T09:08:20Z

We still need to define how we want to ship this before the 8.7.0 release, e.g. release behind a feature flag for the alphas

marstamm · 2025-02-11T10:16:15Z

Did we/do we consider sensible adjustments to make it feel more native, i.e. with theeming (#4511)? This is something that the core team could follow-up on.

The Components are designed to be used by both desktop and web modeler, to avoid maintaining multiple implementations.

The Carbon styles are taken from the parent application. Currently, these are just the default carbon styles, but can be changed if desired:

camunda-modeler/client/src/app/tabs/rpa/RPAEditor.less

Line 1 in 9470f9f

@import (css) '@carbon/styles/css/styles.css';

lmbateman · 2025-02-11T21:17:47Z

@abdul99ahad This might be your first Carbon-theming project. :) Here are my initial thoughts:

Empty state
- Can we hide the graphic in the Desktop Modeler?
- The font size is 16px; in the Variables tab empty state, the font size is 14px.
- Can we restyle the button and link to Desktop Modeler standard?
Footer
- I’m not sure what the new icon is supposed to be - a test tube? There are a few "test" icons in Carbon, but I'm not sure any of them really convey the idea well (or translate to the Desktop Modeler).
- The “not connected” icon is the wrong color; I think it’s #ff0000, and should be #cc0000.
Welcome popup
- The popup is very wide. Not sure if this is a real issue, but it doesn’t fit with our other popups. Also, typographical principles state that a line should be between 40 and 80 characters long. The longest line is just over 80 characters, so we may want to reduce the width a bit for that reason.
- Additional configurations accordion
  - The accordion is a new component for the Desktop Modeler. I think it's the best component for progressive disclosure, but I wonder if we can just show the Base URL field and state that it's optional, since it's only a single field. The accordion feels a bit like overkill.
  - When it’s focused, the accordion looks like a dropdown; I’m not sure there’s anything we can do here aside from not focusing it, which seems suboptimal.
  - When it’s not focused, the accordion does look a bit alien. If we keep it, can we style it a bit in the Desktop Modeler? Darkening the borders might help; it looks like the current color is #e0e0e0, and the borders in the properties panel are #b9bcc6, so significantly darker.
  - Base URL text field: Can we style it like the Properties panel input fields? I see differences in the border color and width (on three sides); the background color (slightly); and the border radius.

I couldn’t figure out how to progress past this point.

lmbateman · 2025-02-12T13:28:21Z

Just to clarify my previous comment: My questions about changes were for the Desktop Modeler team. We can hopefully make all the changes I mentioned using a theme that won't affect the styling in Web Modeler. I don't expect the RPA team to make these changes. cc: @PhilippaC22

marstamm · 2025-02-12T14:28:39Z

I think most of the things you mentioned can be fixed with some CSS.

The accordion feels a bit like overkill.

That is something we need to fix in the RPA Component instead of the modeler. I'll see if I have time this week. We can also push UI fixes later, as long as the base functionality is not broken

bpmn-io-tasks bot added the in progress Currently worked on label Jan 23, 2025

bpmn-io-tasks bot assigned marstamm Jan 23, 2025

barmac reviewed Feb 4, 2025

View reviewed changes

marstamm force-pushed the rpa-integration branch from 962ec20 to 3eb560c Compare February 4, 2025 15:25

barmac reviewed Feb 4, 2025

View reviewed changes

marstamm added a commit that referenced this pull request Feb 4, 2025

chore: prevent scrolling beyond last line

1205293

related to #4807 (comment)

marstamm added 6 commits February 11, 2025 09:28

feat: add RPA editor to Camunda Modeler

4b04ff9

test(tabs/RPA): increase test coverage

c3f7043

feat: use Camunda namespaced libraries

42c0d21

chore: prevent scrolling beyond last line

42eac9b

related to #4807 (comment)

chore: reorder buttons

85bf9cd

deps: update to v0.0.1-alpha.12

9470f9f

- Connects to latest version of the RPA worker - Uses URL instead of host + port

marstamm force-pushed the rpa-integration branch from b2d82e2 to 9470f9f Compare February 11, 2025 08:36

nikku requested a review from lmbateman February 11, 2025 08:57

marstamm marked this pull request as ready for review February 11, 2025 09:07

bpmn-io-tasks bot added the needs review Review pending label Feb 11, 2025

bpmn-io-tasks bot removed the in progress Currently worked on label Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add RPA editor to Camunda Modeler #4807

feat: add RPA editor to Camunda Modeler #4807

marstamm commented Jan 23, 2025 •

edited

Loading

nikku commented Jan 24, 2025

marstamm commented Jan 24, 2025

barmac left a comment

barmac Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

marstamm commented Feb 4, 2025

marstamm commented Feb 4, 2025

marstamm commented Feb 11, 2025

nikku commented Feb 11, 2025

nikku commented Feb 11, 2025 •

edited

Loading

marstamm commented Feb 11, 2025

marstamm commented Feb 11, 2025

lmbateman commented Feb 11, 2025

lmbateman commented Feb 12, 2025

marstamm commented Feb 12, 2025 •

edited

Loading


		describe('#render', function() {

		it('should render with NO xml', function() {

feat: add RPA editor to Camunda Modeler #4807

Are you sure you want to change the base?

feat: add RPA editor to Camunda Modeler #4807

Conversation

marstamm commented Jan 23, 2025 • edited Loading

Proposed Changes

RPA worker setup

Checklist

nikku commented Jan 24, 2025

marstamm commented Jan 24, 2025

barmac left a comment

Choose a reason for hiding this comment

barmac Feb 4, 2025

Choose a reason for hiding this comment

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

barmac Feb 4, 2025

Choose a reason for hiding this comment

barmac commented Feb 4, 2025

barmac commented Feb 4, 2025

marstamm commented Feb 4, 2025

marstamm commented Feb 4, 2025

marstamm commented Feb 11, 2025

nikku commented Feb 11, 2025

nikku commented Feb 11, 2025 • edited Loading

marstamm commented Feb 11, 2025

marstamm commented Feb 11, 2025

lmbateman commented Feb 11, 2025

lmbateman commented Feb 12, 2025

marstamm commented Feb 12, 2025 • edited Loading

marstamm commented Jan 23, 2025 •

edited

Loading

nikku commented Feb 11, 2025 •

edited

Loading

marstamm commented Feb 12, 2025 •

edited

Loading