fix(workflowengine): require a VueConstructor object as operation plugin #50783

blizzz · 2025-02-12T20:40:05Z

Contributes to fixing [Bug]: Flow "write to a conversation" broken. #49909
Background: vue__WEBPACK_IMPORTED_MODULE_0__.getCurrentInstance() is null since 8.20 nextcloud-libraries/nextcloud-vue#6360
Talk counterpart in fix(Flow): adapt to registration fixes at workflowengine spreed#14367

Summary

solves an incompatibility issue when the providing app registers their code from an incompatible nextcloud-vue version.

Also changes and clarifies WorkflowEngine API. This is necessary to stay compatible with the original way, but also promotes usage of the originally declared but never used "component" attribute on registration.

TODO

...

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)

blizzz · 2025-02-12T20:42:49Z

/backport to stable31

blizzz · 2025-02-12T20:42:53Z

/backport to stable30

blizzz · 2025-02-12T20:50:16Z

Might need to do the same stuff for registering Checks, need to verify.

solves an incompatibility issue when the providing app registers their code from an incompatible nextcloud-vue version. Also changes and clarifies WorkflowEngine API. This is necessary to stay compatible with the original way, but also promotes usage of the originally declared but never used "component" attribute on registration. Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

ShGKme · 2025-02-12T21:17:35Z

apps/workflowengine/src/components/Rule.vue

+			const View = this.operation.component
+			this.component = new View()
+			this.component.$mount(this.$refs.operationComponent)
+			this.component.$on('input', this.updateOperation)
+			this.component.$props.value = this.rule.operation


Just a note, such an approach only works in Vue 2 (which is EOL since 31 Dec 2023).
In the current Vue:

Component cannot be used as a constructor with new component(). Only app can, created with createApp(component). And this createApp must be from the same Vue, as component = same issue as in the past

$on was deprecated and has been removed

Let me think about a simple alternative...

Option 1: WebComponents

// In an app defining operation import Vue from 'vue' import wrap from '@vue/web-component-wrapper' // Wrap Vue component into custom HTML Element const CustomOperationElement = wrap(Vue, OperationComponent) // Register with some UNIQ name window.customElements.define('custom-operation', CustomElement) // In Vue 2, wrap doesn's support disabling shadow :( // Disable with a hack Object.defineProperty(CustomElement.prototype, 'attachShadow', { value() { return this } }) Object.defineProperty(CustomElement.prototype, 'shadowRoot', { get() { return this } }) // --- // In workflowengine // <component :is="'custom-operation'" />

Option 2: provide a register method so CustomOperation developers can manually mount the app.

We do it in Viewer.

I prefer the webcomponent approach, but we should be consistent and either also do so on viewer or use option 2

@juliusknorr I mean for the next version nextcloud/viewer#2395

I'm fine with both - but I agree the Webcomponent looks more elegant.
What would the event listener in the workflow engine look like? Could we do something like:

<component :is="'custom-operation'" @input="handleInput" />

or even use v-model as we currently do?

@vue/web-component-wrapper docs say:

Custom events emitted on the inner Vue component are dispatched on the custom element as a CustomEvent. Additional arguments passed to $emit will be exposed as an Array as event.detail.

Sounds like event handing should work.

only works in Vue 2 (which is EOL since 31 Dec 2023).

Just to clarify. Even if the server isn't about to be migrated to Vue 3 very soon, this limitation won't allow other apps to use Vue 3 and have integration with the workflow engine

I'm fine with both - but I agree the Webcomponent looks more elegant. What would the event listener in the workflow engine look like? Could we do something like:

<component :is="'custom-operation'" @input="handleInput" />

or even use v-model as we currently do?

Sounds like event handing should work.

Yeah, it's a little bit more complicated. Events are emitted as native custom events. So:

You don't have the input value as the event object, but a CustomEvent object. The value is $event.detail[0]

You cannot use v-model (for the reason above)

You cannot use input as the custom event name, until you stop bubbling native input event

So I'd suggest to use modelValue + update:modelValue event to not conflict with natives.

<component :is="operationElementName" :model-value="inputValue" @update:model-value="inputValue = $event.detail[0]" />

https://stackblitz.com/edit/vitejs-vite-yyhbtzus

…ion plugin

blizzz · 2025-02-19T22:28:39Z

Thank you all for the input here!

I pushed the suggested changes hereto as well as to Talk's flow.

I could not get the :model-value thing to work, I always ended up with Property or method "inputValue" is not defined on the instance but referenced during render. .

Also, the @update event did not trigger, got it working with @input only – which is also emitted by Talk`s flow. Less changes to existing code the better, it's bad enough that stuff is breaking and maintaining backwards compatibility is a goal as well. How much of a problem is that?

But I might have been holding it wrong, this is far from my area of confidence 😅

Didn't do yet:

satisfying linter
squash and rephrase commit
update documentation once more

ShGKme · 2025-02-19T22:48:07Z

@blizzz I'll have a look in the morning. I must work, I checked :D

As an alternative, we can also define both options:

component (componentVue2) - for easy migration for existing apps with Vue.extend
element - for CustomElement (WebComponent) with Vue 3 compatibility

Then we have a quick and simple fix for the release + a better solution for the future

blizzz · 2025-02-20T11:57:23Z

component (componentVue2) - for easy migration for existing apps with Vue.extend

if the app has to be touched anyway – it has – there is no reason to have a bridge solution there (provided WebComponents works). less is more.

max-nextcloud

I did not take a look at the entire file - just some had a brief glance. Hope the pointers are useful. Happy to have a call to follow up.

max-nextcloud · 2025-02-20T19:18:27Z

apps/workflowengine/src/components/Rule.vue

-					ref="operationComponent" />
+				<component v-if="operation.component"
+						   :is="operation.component"
+						   @input="updateOperationByEvent"


You will need the code from @ShGKme here - the event from the component will be called update:model-value, the prop is model-value:

:model-value="inputValue" @update:model-value="updateOperationByEvent"

As said, this results in Property or method "inputValue" is not defined on the instance but referenced during render.

Yes... you need to add it to the data section with a default. Insert line 107, somewhat like this:

inputValue: '',

this fixes the error message at least (i knew it was pebcak)

The @update event however does not fire

I take your offer for a call 😎

max-nextcloud · 2025-02-20T19:22:54Z

apps/workflowengine/src/components/Rule.vue

+		},
+		async updateOperationByEvent(event) {
+			this.$set(this.rule, 'operation', event.detail[0])
+			this.$refs.operationComponent.value = this.rule.operation


I don't think changing the value directly like this is a good idea - not sure if it would work.

Instead I see two options:

Use a data value that sets the prop:

this.inputValue = $event.detail[0]

This matches the code I proposed above.

use rule.operation to set the prop in the template above (instead of inputValue). The line above already sets rule.operation in a reactive way. So if you use that in the prop you should be done.

I don't think changing the value directly like this is a good idea - not sure if it would work.

It's similar to what we did in the first commit. Only, there we interacted with a native Vue component, not a WebComponent. If I recall correctly, $props is not available here. But i might have holding it wrong, happy to try out again. But the issue above is the first blocker.

Just saw that this.rule is a prop in this component. We really should not alter it but instead emit an event if we want the parent component to change it's value.

max-nextcloud · 2025-02-20T19:25:26Z

apps/workflowengine/src/components/Rule.vue

@@ -186,6 +190,7 @@ export default {
 			if (this.rule.id < 0) {
 				this.$store.dispatch('removeRule', this.rule)
 			} else {
+				this.$refs.operationComponent.value = this.originalRule.operation


The same as in updateOperationByEvent applies here. So:

this.inputValue = this.originalRule.operation

this.$set(this.rule, 'operation', this.originalRule.operation)

blizzz added bug 3. to review Waiting for reviews feature: workflows regression labels Feb 12, 2025

blizzz added this to the Nextcloud 32 milestone Feb 12, 2025

blizzz requested review from juliusknorr, ShGKme, Antreesy and max-nextcloud February 12, 2025 20:40

blizzz mentioned this pull request Feb 12, 2025

fix(Flow): adapt to registration fixes at workflowengine nextcloud/spreed#14367

Open

3 tasks

backportbot bot added the backport-request label Feb 12, 2025

blizzz force-pushed the fix/49909/workflow-vue-compat branch from 46bdf15 to 275ddb9 Compare February 12, 2025 20:59

blizzz force-pushed the fix/49909/workflow-vue-compat branch from 275ddb9 to 9ac3a96 Compare February 12, 2025 21:13

ShGKme reviewed Feb 12, 2025

View reviewed changes

fixup! fix(workflowengine): require a VueConstructor object as operat…

1a8490a

…ion plugin

max-nextcloud reviewed Feb 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(workflowengine): require a VueConstructor object as operation plugin #50783

fix(workflowengine): require a VueConstructor object as operation plugin #50783

blizzz commented Feb 12, 2025 •

edited

Loading

blizzz commented Feb 12, 2025

blizzz commented Feb 12, 2025

blizzz commented Feb 12, 2025

ShGKme Feb 12, 2025

ShGKme Feb 12, 2025

ShGKme Feb 12, 2025

ShGKme Feb 12, 2025

susnux Feb 12, 2025

susnux Feb 12, 2025

max-nextcloud Feb 13, 2025

max-nextcloud Feb 13, 2025

ShGKme Feb 13, 2025

ShGKme Feb 13, 2025

blizzz commented Feb 19, 2025

ShGKme commented Feb 19, 2025

blizzz commented Feb 20, 2025

max-nextcloud left a comment

max-nextcloud Feb 20, 2025

blizzz Feb 20, 2025

max-nextcloud Feb 20, 2025

blizzz Feb 20, 2025

blizzz Feb 20, 2025

blizzz Feb 20, 2025

max-nextcloud Feb 20, 2025

blizzz Feb 20, 2025

max-nextcloud Feb 20, 2025

max-nextcloud Feb 20, 2025

fix(workflowengine): require a VueConstructor object as operation plugin #50783

Are you sure you want to change the base?

fix(workflowengine): require a VueConstructor object as operation plugin #50783

Conversation

blizzz commented Feb 12, 2025 • edited Loading

Summary

TODO

Checklist

blizzz commented Feb 12, 2025

blizzz commented Feb 12, 2025

blizzz commented Feb 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blizzz commented Feb 19, 2025

ShGKme commented Feb 19, 2025

blizzz commented Feb 20, 2025

max-nextcloud left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blizzz commented Feb 12, 2025 •

edited

Loading