feat: Add configurable delimiter for dropdown block options (#348)

* feat: Add configurable delimiter for dropdown block options

Users can now customize the label/value delimiter for dropdown options (previously hardcoded to ":""). This enables support for data containing colons, such as URLs or timestamps. The delimiter is configurable in the UI modal and defaults to ":".

- Add delimiter prop to Dropdown struct with default ":"
- Implement delimiter-aware option parsing in Rust backend
- Add UI field in config modal to customize delimiter
- Include comprehensive tests for custom delimiters
- Update documentation with examples

* docs: Add custom delimiter section to dropdown documentation

* fmt

* test: Add parseOption tests for delimiter boundary handling

* refactor: extract parseOption to own module for testability

Extract the parseOption function from Dropdown.tsx to a separate
parseOption.ts file so it can be tested without importing the entire
Dropdown module and its browser dependencies.

* remove accidental bindings

* sdjfs;d

Author: ellie

crates/atuin-desktop-runtime/src/blocks/dropdown.rs

@@ -41,7 +41,25 @@ pub struct DropdownOption {
 }
 
 impl DropdownOption {
+    pub fn from_str_with_delimiter(value: &str, delimiter: &str) -> Result<Self, String> {
+        if let Some(idx) = value.find(delimiter) {
+            let label = value[..idx].to_string();
+            let val = value[idx + delimiter.len()..].to_string();
+            Ok(DropdownOption::builder().label(label).value(val).build())
+        } else {
+            Ok(DropdownOption::builder()
+                .label(value.to_string())
+                .value(value.to_string())
+                .build())
+        }
+    }
+
+    #[allow(dead_code)]
     pub fn vec_from_str(value: &str) -> Result<Vec<Self>, String> {
+        Self::vec_from_str_with_delimiter(value, ":")
+    }
+
+    pub fn vec_from_str_with_delimiter(value: &str, delimiter: &str) -> Result<Vec<Self>, String> {
         if value.trim().is_empty() {
             return Ok(vec![]);
         }
@@ -50,7 +68,7 @@ impl DropdownOption {
         re.split(value)
             .map(|part| part.trim())
             .filter(|part| !part.is_empty())
-            .map(|part| part.try_into())
+            .map(|part| Self::from_str_with_delimiter(part, delimiter))
             .collect()
     }
 }
@@ -99,6 +117,7 @@ pub struct Dropdown {
     pub options: String,
     pub interpreter: String,
     pub value: String,
+    pub delimiter: String,
 }
 
 impl Dropdown {
@@ -120,9 +139,16 @@ impl Dropdown {
             }
         };
 
+        let delimiter = if self.delimiter.is_empty() {
+            ":"
+        } else {
+            &self.delimiter
+        };
+
         let options = match self.options_type {
             DropdownOptionType::Fixed => {
-                let options = DropdownOption::vec_from_str(options_source)?;
+                let options =
+                    DropdownOption::vec_from_str_with_delimiter(options_source, delimiter)?;
                 Ok(options)
             }
             DropdownOptionType::Variable => {
@@ -132,7 +158,7 @@ impl Dropdown {
                     .get_var(options_source)
                     .map(|v| v.to_string())
                     .unwrap_or_default();
-                let options = DropdownOption::vec_from_str(&value)?;
+                let options = DropdownOption::vec_from_str_with_delimiter(&value, delimiter)?;
                 Ok(options)
             }
             DropdownOptionType::Command => {
@@ -150,7 +176,7 @@ impl Dropdown {
                     .output()
                     .await?;
                 let stdout = String::from_utf8_lossy(&output.stdout).to_string();
-                let options = DropdownOption::vec_from_str(&stdout)?;
+                let options = DropdownOption::vec_from_str_with_delimiter(&stdout, delimiter)?;
                 Ok(options)
             }
         };
@@ -221,6 +247,12 @@ impl FromDocument for Dropdown {
             .ok_or("Missing interpreter")?
             .to_string();
 
+        let delimiter = props
+            .get("delimiter")
+            .and_then(|v| v.as_str())
+            .unwrap_or(":") // Default to ":" if delimiter is missing
+            .to_string();
+
         Ok(Dropdown::builder()
             .id(id)
             .name(name)
@@ -231,6 +263,7 @@ impl FromDocument for Dropdown {
             .command_options(command_options)
             .value(value)
             .interpreter(interpreter)
+            .delimiter(delimiter)
             .build())
     }
 }
@@ -430,6 +463,7 @@ mod tests {
                 .command_options(command_options.to_string())
                 .value("".to_string())
                 .interpreter("/bin/sh".to_string())
+                .delimiter(":".to_string())
                 .build()
         }
 
@@ -727,6 +761,7 @@ mod tests {
                 .command_options("".to_string())
                 .value("a".to_string())
                 .interpreter("/bin/sh".to_string())
+                .delimiter(":".to_string())
                 .build();
 
             let json = serde_json::to_string(&dropdown).unwrap();
@@ -735,4 +770,83 @@ mod tests {
             assert_eq!(dropdown, deserialized);
         }
     }
+
+    // Tests for custom delimiter parsing
+    mod custom_delimiter {
+        use super::*;
+
+        #[test]
+        fn test_from_str_with_custom_delimiter() {
+            let option = DropdownOption::from_str_with_delimiter("Label|value", "|").unwrap();
+            assert_eq!(option.label, "Label");
+            assert_eq!(option.value, "value");
+        }
+
+        #[test]
+        fn test_from_str_with_multi_char_delimiter() {
+            let option = DropdownOption::from_str_with_delimiter("Label::value", "::").unwrap();
+            assert_eq!(option.label, "Label");
+            assert_eq!(option.value, "value");
+        }
+
+        #[test]
+        fn test_from_str_with_arrow_delimiter() {
+            let option =
+                DropdownOption::from_str_with_delimiter("Display Name->actual_value", "->")
+                    .unwrap();
+            assert_eq!(option.label, "Display Name");
+            assert_eq!(option.value, "actual_value");
+        }
+
+        #[test]
+        fn test_from_str_no_delimiter_found() {
+            let option = DropdownOption::from_str_with_delimiter("just_a_value", "|").unwrap();
+            assert_eq!(option.label, "just_a_value");
+            assert_eq!(option.value, "just_a_value");
+        }
+
+        #[test]
+        fn test_value_contains_colon_with_pipe_delimiter() {
+            // User has colons in their data, using pipe as delimiter
+            let option =
+                DropdownOption::from_str_with_delimiter("My Label|http://example.com:8080", "|")
+                    .unwrap();
+            assert_eq!(option.label, "My Label");
+            assert_eq!(option.value, "http://example.com:8080");
+        }
+
+        #[test]
+        fn test_vec_from_str_with_custom_delimiter() {
+            let options =
+                DropdownOption::vec_from_str_with_delimiter("A|1, B|2, C|3", "|").unwrap();
+            assert_eq!(options.len(), 3);
+            assert_eq!(options[0].label, "A");
+            assert_eq!(options[0].value, "1");
+            assert_eq!(options[1].label, "B");
+            assert_eq!(options[1].value, "2");
+            assert_eq!(options[2].label, "C");
+            assert_eq!(options[2].value, "3");
+        }
+
+        #[test]
+        fn test_vec_from_str_with_multi_char_delimiter() {
+            let options =
+                DropdownOption::vec_from_str_with_delimiter("Label A::a\nLabel B::b", "::")
+                    .unwrap();
+            assert_eq!(options.len(), 2);
+            assert_eq!(options[0].label, "Label A");
+            assert_eq!(options[0].value, "a");
+            assert_eq!(options[1].label, "Label B");
+            assert_eq!(options[1].value, "b");
+        }
+
+        #[test]
+        fn test_default_colon_delimiter() {
+            // vec_from_str should use ":" as default
+            let options = DropdownOption::vec_from_str("Label:value").unwrap();
+            assert_eq!(options.len(), 1);
+            assert_eq!(options[0].label, "Label");
+            assert_eq!(options[0].value, "value");
+        }
+    }
 }

docs/docs/blocks/executable/dropdown.md

@@ -37,6 +37,21 @@ Execute a shell command that returns a list of options. Supports multiple interp
 kubectl get pods --no-headers | awk '{print $1}'
 ```
 
+### Custom Delimiter
+
+By default, the dropdown uses `:` to separate labels from values (e.g., `Label:value`). If your data contains colons (such as URLs or timestamps), you can customize the delimiter in the dropdown settings.
+
+Open the dropdown configuration modal and set the **Label/Value Delimiter** field to any character or string:
+
+| Delimiter | Example |
+|-----------|---------|
+| `:` (default) | `Production:prod` |
+| `\|` | `Production\|https://api.example.com:8080` |
+| `::` | `My Label::my-value` |
+| `->` | `Display Name->actual_value` |
+
+This allows you to use label:value pairs even when your values contain the default delimiter character.
+
 ### Template Usage
 
 The selected value can be accessed in other blocks using the variable name: