FOUR-29250 End Event – External URL with Mustache Support

src/components/inspectors/ConditionalRedirect/TaskDestination.vue

@@ -50,9 +50,9 @@
       v-if="taskDestination?.value === 'externalURL'"
       :label="$t('URL')"
       v-model="externalURL"
-      :error="getValidationErrorForCustomURL(externalURL)"
+      :error="getValidationErrorForURL(externalURL)"
       :placeholder="urlPlaceholder"
-      :helper="$t('Determine the URL where the request will end')"
+      :helper="externalUrlHelperText"
       data-test="conditional-task-external-url"
     />
 
@@ -79,6 +79,7 @@
 </template>
 
 <script>
+import { isValidElementDestinationURL } from '@/utils/elementDestinationUrl';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
@@ -119,6 +120,9 @@ export default {
     node() {
       return this.$root.$children[0].$refs.modeler.highlightedNode.definition;
     },
+    externalUrlHelperText() {
+      return this.$t('URL where the request will redirect. Supports Mustache:') + ' {{APP_URL}}, {{_request.id}}, {{_user.id}}, ' + this.$t('process variables.');
+    },
   },
   watch: {
     condition: {
@@ -193,18 +197,21 @@ export default {
     onRemoveCondition() {
       this.$emit('remove', this.conditionId);
     },
-    getValidationErrorForCustomURL(url) {
-      if (!url) return this.$t('URL is required');
-      if (!this.isValidCustomURL(url)) return this.$t('Must be a valid URL');
+    getValidationErrorForURL(url) {
+      const isEmpty = typeof url !== 'string' || !url || !url.trim();
+      if (isEmpty) {
+        if (this.taskDestination?.value === 'externalURL') {
+          return this.$t('URL is required when External URL is selected.');
+        }
+        return '';
+      }
+      if (!this.isValidURL(url)) {
+        return this.$t('Must be a valid URL or Mustache expressions') + ' ({{APP_URL}}, {{_request.id}}, {{_user.id}}, ' + this.$t('process variables') + ').';
+      }
       return '';
     },
-    isValidCustomURL(url) {
-      try {
-        const parsed = new URL(url);
-        return ['http:', 'https:'].includes(parsed.protocol);
-      } catch {
-        return false;
-      }
+    isValidURL(string) {
+      return isValidElementDestinationURL(string);
     },
     getCustomDashboards(filter) {
       this.loading = true;

src/components/inspectors/ElementDestination.vue

@@ -50,7 +50,7 @@
       :error="getValidationErrorForURL(externalURL)"
       data-cy="events-add-id"
       :placeholder="urlPlaceholder"
-      :helper="$t('Determine the URL where the request will end')"
+      :helper="externalUrlHelperText"
       data-test="external-url"
     />
     <process-form-select
@@ -63,8 +63,10 @@
 
 <script>
 import ProcessFormSelect from '@/components/inspectors/ProcessFormSelect';
+import { isValidElementDestinationURL } from '@/utils/elementDestinationUrl';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
+
 export default {
   components: { ProcessFormSelect },
   props: {
@@ -159,6 +161,9 @@ export default {
 
       return this.$t('Select where to send users after this task. Any Non-default destination will disable the "Display Next Assigned Task" function.');
     },
+    externalUrlHelperText() {
+      return this.$t('URL where the request will redirect. Supports Mustache:') + ' {{APP_URL}}, {{_request.id}}, {{_user.id}}, ' + this.$t('process variables.');
+    },
   },
   created() {
     this.loadDashboardsDebounced = debounce((filter) => {
@@ -174,18 +179,20 @@ export default {
   },
   methods: {
     getValidationErrorForURL(url) {
+      const isEmpty = typeof url !== 'string' || !url || !url.trim();
+      if (isEmpty) {
+        if (this.destinationType === 'externalURL') {
+          return this.$t('URL is required when External URL is selected.');
+        }
+        return '';
+      }
       if (!this.isValidURL(url)) {
-        return this.$t('Must be a valid URL');
+        return this.$t('Must be a valid URL or Mustache expressions') + ' ({{APP_URL}}, {{_request.id}}, {{_user.id}}, ' + this.$t('process variables') + ').';
       }
       return '';
     },
     isValidURL(string) {
-      try {
-        new URL(string);
-        return true;
-      } catch (_) {
-        return false;
-      }
+      return isValidElementDestinationURL(string);
     },
     loadData() {
       this.optionsCopy = this.options.map(option => ({

src/utils/elementDestinationUrl.js

@@ -0,0 +1,55 @@
+/**
+ * Valid Mustache placeholder: {{ variable }}.
+ * Variable: one or more non-whitespace characters (no spaces inside the name). Rejects {{}}, {{ }}, {{var2 var2}}.
+ */
+const MUSTACHE_PLACEHOLDER = /{{\s*\S+\s*}}/;
+
+/**
+ * Returns true if the string has only valid Mustache definitions (one or more) and no stray {{ or }}.
+ * Valid: {{var}}, {{ APP_URL }}, https://host/{{path}}, {{a}}{{b}}. Invalid: {{}}, {{ }}, {{unclosed, }}solo.
+ * @param {string} str - Non-empty trimmed string.
+ * @returns {boolean}
+ */
+function hasValidMustacheOnly(str) {
+  if (!str.includes('{{')) {
+    return false;
+  }
+  const globalRegex = new RegExp(MUSTACHE_PLACEHOLDER.source, 'g');
+  const withoutPlaceholders = str.replace(globalRegex, '');
+  const hasStrayBraces = withoutPlaceholders.includes('{{') || withoutPlaceholders.includes('}}');
+  if (hasStrayBraces) {
+    return false;
+  }
+  // No stray braces and string contained {{ → at least one valid placeholder was matched.
+  return true;
+}
+
+/**
+ * Validates Element Destination / Conditional Redirect URL field.
+ * 1. Must be a non-empty string.
+ * 2. If it contains {{: must be valid Mustache (one or more placeholders like {{var}}, no stray braces). Invalid Mustache → false (same as invalid URL).
+ * 3. If it does not contain {{: must be a valid URL.
+ *
+ * @param {string} value - Value to validate (URL or Mustache template).
+ * @returns {boolean}
+ */
+export function isValidElementDestinationURL(value) {
+  if (typeof value !== 'string') {
+    return false;
+  }
+  const trimmed = value.trim();
+  if (trimmed.length === 0) {
+    return false;
+  }
+
+  if (trimmed.includes('{{')) {
+    return hasValidMustacheOnly(trimmed);
+  }
+
+  try {
+    new URL(trimmed);
+    return true;
+  } catch {
+    return false;
+  }
+}