[stable30] fix(workflowengine): require a web component as operation plugin

apps/workflowengine/src/components/Check.vue

@@ -19,8 +19,18 @@
 			:clearable="false"
 			:placeholder="t('workflowengine', 'Select a comparator')"
 			@input="updateCheck" />
+		<component :is="currentElement"
+			v-if="currentElement"
+			ref="checkComponent"
+			:disabled="!currentOption"
+			:operator="check.operator"
+			:model-value="check.value"
+			class="option"
+			@update:model-value="updateCheck"
+			@valid="(valid=true) && validate()"
+			@invalid="!(valid=false) && validate()" />
 		<component :is="currentOption.component"
-			v-if="currentOperator && currentComponent"
+			v-else-if="currentOperator && currentComponent"
 			v-model="check.value"
 			:disabled="!currentOption"
 			:check="check"
@@ -52,7 +62,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 import CloseIcon from 'vue-material-design-icons/Close.vue'
-
 import ClickOutside from 'vue-click-outside'
 
 export default {
@@ -99,6 +108,12 @@ export default {
 			}
 			return operators
 		},
+		currentElement() {
+			if (!this.check.class) {
+				return false
+			}
+			return this.checks[this.check.class].element
+		},
 		currentComponent() {
 			if (!this.currentOption) { return [] }
 			return this.checks[this.currentOption.class].component
@@ -120,6 +135,15 @@ export default {
 		this.currentOption = this.checks[this.check.class]
 		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 
+		if (this.currentElement) {
+			// 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
+			console.warn('Developer warning: `CheckPlugin.options` is deprecated. Use `CheckPlugin.element` instead.')
+		}
+
 		if (this.check.class === null) {
 			this.$nextTick(() => this.$refs.checkSelector.$el.focus())
 		}
@@ -141,11 +165,15 @@ export default {
 			this.check.invalid = !this.valid
 			this.$emit('validate', this.valid)
 		},
-		updateCheck() {
-			const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
+		updateCheck(event) {
+			const selectedOperator = event?.operator || this.currentOperator?.operator || this.check.operator
+			const matchingOperator = this.operators.findIndex((operator) => selectedOperator === operator.operator)
 			if (this.check.class !== this.currentOption.class || matchingOperator === -1) {
 				this.currentOperator = this.operators[0]
 			}
+			if (event?.detail) {
+				this.check.value = event.detail[0]
+			}
 			// eslint-disable-next-line vue/no-mutating-props
 			this.check.class = this.currentOption.class
 			// eslint-disable-next-line vue/no-mutating-props

apps/workflowengine/src/components/Checks/FileMimeType.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect :model-value="currentValue"
 			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
 			:options="options"
@@ -30,8 +30,8 @@
 			</template>
 		</NcSelect>
 		<input v-if="!isPredefined"
-			type="text"
 			:value="currentValue.id"
+			type="text"
 			:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
 			@input="updateCustom">
 	</div>
@@ -40,7 +40,6 @@
 <script>
 import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
-import valueMixin from './../../mixins/valueMixin.js'
 import { imagePath } from '@nextcloud/router'
 
 export default {
@@ -49,9 +48,15 @@ export default {
 		NcEllipsisedOption,
 		NcSelect,
 	},
-	mixins: [
-		valueMixin,
-	],
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			predefinedTypes: [
@@ -76,6 +81,7 @@ export default {
 					id: 'application/pdf',
 				},
 			],
+			newValue: '',
 		}
 	},
 	computed: {
@@ -108,21 +114,30 @@ export default {
 			}
 		},
 	},
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
+		},
+	},
+
 	methods: {
 		validateRegex(string) {
 			const regexRegex = /^\/(.*)\/([gui]{0,3})$/
 			const result = regexRegex.exec(string)
 			return result !== null
 		},
+		updateInternalValue() {
+			this.newValue = this.modelValue
+		},
 		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)
 		},
 	},
 }

apps/workflowengine/src/components/Checks/FileSystemTag.vue

@@ -17,18 +17,21 @@ export default {
 		NcSelectTags,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			newValue: [],
 		}
 	},
 	watch: {
-		value() {
+		modelValue() {
 			this.updateValue()
 		},
 	},
@@ -37,14 +40,14 @@ export default {
 	},
 	methods: {
 		updateValue() {
-			if (this.value !== '') {
-				this.newValue = parseInt(this.value)
+			if (this.modelValue !== '') {
+				this.newValue = parseInt(this.modelValue)
 			} else {
 				this.newValue = null
 			}
 		},
 		update() {
-			this.$emit('input', this.newValue || '')
+			this.$emit('update:model-value', this.newValue || '')
 		},
 	},
 }

apps/workflowengine/src/components/Checks/RequestTime.vue

@@ -27,23 +27,20 @@
 <script>
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import moment from 'moment-timezone'
-import valueMixin from '../../mixins/valueMixin.js'
 
 const zones = moment.tz.names()
 export default {
 	name: 'RequestTime',
 	components: {
 		NcSelect,
 	},
-	mixins: [
-		valueMixin,
-	],
 	props: {
-		value: {
+		modelValue: {
 			type: String,
-			default: '',
+			default: '[]',
 		},
 	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			timezones: zones,
@@ -53,21 +50,31 @@ export default {
 				endTime: null,
 				timezone: moment.tz.guess(),
 			},
+			stringifiedValue: '[]',
 		}
 	},
-	mounted() {
-		this.validate()
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
+		},
+	},
+	beforeMount() {
+		// this is necessary to keep so the value is re-applied when a different
+		// check is being removed.
+		this.updateInternalValue()
 	},
 	methods: {
-		updateInternalValue(value) {
+		updateInternalValue() {
 			try {
-				const data = JSON.parse(value)
+				const data = JSON.parse(this.modelValue)
 				if (data.length === 2) {
 					this.newValue = {
 						startTime: data[0].split(' ', 2)[0],
 						endTime: data[1].split(' ', 2)[0],
 						timezone: data[0].split(' ', 2)[1],
 					}
+					this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
+					this.validate()
 				}
 			} catch (e) {
 				// ignore invalid values
@@ -89,8 +96,8 @@ export default {
 				this.newValue.timezone = moment.tz.guess()
 			}
 			if (this.validate()) {
-				const output = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
-				this.$emit('input', output)
+				this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
+				this.$emit('update:model-value', this.stringifiedValue)
 			}
 		},
 	},

apps/workflowengine/src/components/Checks/RequestURL.vue

@@ -4,7 +4,8 @@
 -->
 <template>
 	<div>
-		<NcSelect :value="currentValue"
+		<NcSelect v-model="newValue"
+			:value="currentValue"
 			:placeholder="t('workflowengine', 'Select a request URL')"
 			label="label"
 			:clearable="false"
@@ -45,6 +46,19 @@ export default {
 	mixins: [
 		valueMixin,
 	],
+	props: {
+		modelValue: {
+			type: String,
+			default: '',
+		},
+		operator: {
+			type: String,
+			default: '',
+		},
+	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			newValue: '',
@@ -62,7 +76,7 @@ export default {
 			return [...this.predefinedTypes, this.customValue]
 		},
 		placeholder() {
-			if (this.check.operator === 'matches' || this.check.operator === '!matches') {
+			if (this.operator === 'matches' || this.operator === '!matches') {
 				return '/^https\\:\\/\\/localhost\\/index\\.php$/i'
 			}
 			return 'https://localhost/index.php'
@@ -102,12 +116,12 @@ export default {
 			// TODO: check if value requires a regex and set the check operator according to that
 			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.$emit('update:model-value', this.newValue)
 		},
 	},
 }