fix(automations): hydrate delay controls from the edited rule on first open

The edit dialog's delay radios/value were synced once in open() from the automation
model, whose prop only settles a tick later — so the first edit click showed the
previous rule's delay (or immediate). Thread the clicked rule's execution_delay
directly into open() so the delay controls hydrate correctly on the first click.

app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue

@@ -239,9 +239,9 @@ const executionDelayInvalid = computed(
       delayInMinutes.value > MAX_DELAY_MINUTES)
 );
 
-// Hydrate the delay controls from the automation, using the largest clean unit.
-const syncDelayFromAutomation = () => {
-  const delay = automation.value?.execution_delay;
+// Hydrate the delay controls from a delay (minutes), using the largest clean unit. Passed in
+// by open() rather than read from `automation`, whose model prop only settles a tick later.
+const syncDelayFromDelay = delay => {
   executeMode.value = delay ? 'delayed' : 'immediate';
   if (!delay) {
     delayValue.value = 4;
@@ -300,9 +300,9 @@ const syncCustomAttributeTypes = () => {
   });
 };
 
-const open = () => {
+const open = (executionDelay = null) => {
   resetValidation();
-  syncDelayFromAutomation();
+  syncDelayFromDelay(executionDelay);
   dialogRef.value?.open();
 };
 

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -34,29 +34,33 @@ const {
 
 const { formatAutomation } = useEditableAutomation();
 
-const open = () => formRef.value?.open();
+const syncAutomationFromSelected = (source = props.selectedResponse) => {
+  if (!source?.conditions) return;
+
+  manifestCustomAttributes();
+  automation.value = formatAutomation(
+    source,
+    allCustomAttributes.value,
+    automationTypes,
+    AUTOMATION_ACTION_TYPES
+  );
+};
+
+// Format from the rule passed to open(): the prop updates a tick later, so at open() time
+// automation still holds the previously selected rule (its execution_delay hydrates the form).
+const open = rule => {
+  syncAutomationFromSelected(rule);
+  formRef.value?.open(rule?.execution_delay);
+};
 const close = () => formRef.value?.close();
 
 const onSave = (payload, mode) => {
   emit('saveAutomation', payload, mode);
 };
 
-watch(
-  () => props.selectedResponse,
-  value => {
-    if (!value?.conditions) return;
-
-    manifestCustomAttributes();
-
-    automation.value = formatAutomation(
-      value,
-      allCustomAttributes.value,
-      automationTypes,
-      AUTOMATION_ACTION_TYPES
-    );
-  },
-  { immediate: true }
-);
+watch(() => props.selectedResponse, syncAutomationFromSelected, {
+  immediate: true,
+});
 
 defineExpose({ open, close });
 </script>

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -82,7 +82,7 @@ const hideAddPopup = () => {
 
 const openEditPopup = response => {
   selectedAutomation.value = { ...response };
-  editDialogRef.value?.open();
+  editDialogRef.value?.open(response);
 };
 const hideEditPopup = () => {
   editDialogRef.value?.close();