fix(workflowengine): minimally adapt check operator FileMimeType to use web component

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

4 files changed, 64 insertions, 27 deletions

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index ce64d859139..612a177c8c2 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -136,8 +136,8 @@ export default {
 		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 
 		if (this.currentElement) {
-			console.error(this.$refs)
-			this.$refs.checkComponent.value = this.currentOption
+			// If we do not set it, the check`s value would remain empty. Unsure why Vue behaves this way.
+			this.$refs.checkComponent.modelValue = undefined
 		} else if (this.currentOption?.component) {
 			// keeping this in an else for apps that try to be backwards compatible and may ship both
 			// to be removed in 03/2028
diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index 8a723ffb5b0..3027367fbb0 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -4,7 +4,8 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect
+		    :model-value="newValue"
 			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
 			:options="options"
@@ -30,8 +31,8 @@
 			</template>
 		</NcSelect>
 		<input v-if="!isPredefined"
+		    :model-value="newValue"
 			type="text"
-			:value="currentValue.id"
 			:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
 			@input="updateCustom">
 	</div>
@@ -50,8 +51,10 @@ export default {
 		NcSelect,
 	},
 	mixins: [
-		valueMixin,
 	],
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			predefinedTypes: [
@@ -76,8 +79,18 @@ export default {
 					id: 'application/pdf',
 				},
 			],
+			newValue: [],
 		}
 	},
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+	},
+	beforeMount() {
+		this.updateInternalValue()
+	},
 	computed: {
 		options() {
 			return [...this.predefinedTypes, this.customValue]
@@ -108,6 +121,12 @@ export default {
 			}
 		},
 	},
+	watch: {
+		modelValue() {
+			console.error("DEBUG: watch modelValue fileSystemTag")
+			this.updateInternalValue()
+		},
+	},
 	methods: {
 		validateRegex(string) {
 			const regexRegex = /^\/(.*)\/([gui]{0,3})$/
@@ -117,12 +136,16 @@ export default {
 		setValue(value) {
 			if (value !== null) {
 				this.newValue = value.id
-				this.$emit('input', this.newValue)
+				this.$emit('update:model-value', this.newValue)
 			}
 		},
 		updateCustom(event) {
-			this.newValue = event.target.value
-			this.$emit('input', this.newValue)
+			this.newValue = event.target.value || event.detail[0]
+			this.$emit('update:model-value', this.newValue)
+		},
+		updateInternalValue() {
+			console.error("DEBUG: updateInternalValue filemimetype " + this.modelValue)
+			this.newValue = this.modelValue
 		},
 	},
 }
diff --git a/apps/workflowengine/src/components/Checks/file.js b/apps/workflowengine/src/components/Checks/file.js
index 5a5b5d22b41..568efc81cd3 100644
--- a/apps/workflowengine/src/components/Checks/file.js
+++ b/apps/workflowengine/src/components/Checks/file.js
@@ -4,6 +4,7 @@
  */
 
 import { stringValidator, validateIPv4, validateIPv6 } from '../../helpers/validators.js'
+import { registerCustomElement } from '../../helpers/window.js'
 import FileMimeType from './FileMimeType.vue'
 import FileSystemTag from './FileSystemTag.vue'
 
@@ -34,7 +35,7 @@ const FileChecks = [
 		class: 'OCA\\WorkflowEngine\\Check\\FileMimeType',
 		name: t('workflowengine', 'File MIME type'),
 		operators: stringOrRegexOperators,
-		component: FileMimeType,
+		element: registerCustomElement(FileMimeType, 'oca-workflowengine-checks-file_mime_type'),
 	},
 
 	{
@@ -80,25 +81,8 @@ const FileChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is tagged with') },
 			{ operator: '!is', name: t('workflowengine', 'is not tagged with') },
 		],
-		webComponent: registerWebComponent(FileSystemTag, 'oca-workflowengine-file_system_tag'),
+		element: registerCustomElement(FileSystemTag, 'oca-workflowengine-file_system_tag'),
 	},
 ]
 
-/**
- *
- * @param VueComponent
- * @param webComponentId
- */
-function registerWebComponent(VueComponent, webComponentId) {
-	const WrappedComponent = wrap(Vue, VueComponent)
-	window.customElements.define(webComponentId, WrappedComponent)
-
-	// In Vue 2, wrap doesn't support disabling shadow :(
-	// Disable with a hack
-	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', { value() { return this } })
-	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', { get() { return this } })
-
-	return webComponentId
-}
-
 export default FileChecks
diff --git a/apps/workflowengine/src/helpers/window.js b/apps/workflowengine/src/helpers/window.js
new file mode 100644
index 00000000000..9538c4706d0
--- /dev/null
+++ b/apps/workflowengine/src/helpers/window.js
@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
+/**
+ *
+ * @param VueComponent {Object} The Vue component to turn into a Web Components custom element.
+ * @param customElementId {string} The element name, it must be unique. Recommended pattern oca-$appid-(checks|operations)-$use_case, example: oca-my_app-checks-request_user_agent
+ */
+function registerCustomElement(VueComponent, customElementId) {
+	const WrappedComponent = wrap(Vue, VueComponent)
+	if (window.customElements.get(customElementId)) {
+		console.error('Custom element with ID ' + customElementId + ' is already defined!')
+		throw new Error('Custom element with ID ' + customElementId + ' is already defined!')
+	}
+	window.customElements.define(customElementId, WrappedComponent)
+
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', { value() { return this } })
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', { get() { return this } })
+
+	return customElementId
+}
+
+export { registerCustomElement }