Update select component to allow finding options in arbitrary json

When json response contains other data than just array of option
data, allow to access given array by specifying its path in "src"
attribute.

Author: chaimann

admin/app/javascript/solidus_admin/web_components/solidus_select.js

@@ -105,9 +105,18 @@ class SolidusSelect extends HTMLSelectElement {
     this.tomselect.settings.load = null;
   }
 
+  // Fetch options from remote source. If options data is nested in json response, specify path to it within "data-src"
+  //  attribute after "::" separator.
+  // E.g. https://whatcms.org/API/List data is deep nested in json response: `{ result: { list: [...] } }`, so
+  //  in order to access it, specify "data-src" as follows:
+  //  "data-src"="https://whatcms.org/API/List::result.list"
   async fetchOptions() {
-    const response = await fetch(this.getAttribute("data-src"));
-    return await response.json();
+    const [url, dataPath] = this.getAttribute("data-src").split("::");
+    const response = await fetch(url);
+    const json = await response.json();
+    if (!dataPath) return json;
+
+    return dataPath.split('.').reduce((acc, key) => acc && acc[key], json);
   }
 }
 

admin/spec/components/previews/solidus_admin/ui/forms/select/component_preview.rb

@@ -8,6 +8,21 @@ def overview
     render_with_template
   end
 
+  # @param multiple toggle
+  # @param latency toggle "Simulate request latency (2000ms)"
+  def remote(multiple: false, latency: false)
+    args = { label: "Label", name: "select", multiple: }
+    delay_url = "app.requestly.io/delay/2000/" if latency
+    src = "https://#{delay_url}whatcms.org/API/List::result.list"
+    args.merge!(
+      src:,
+      "data-option-value-field": "id",
+      "data-option-label-field": "label",
+    )
+
+    render component("ui/forms/select").new(**args)
+  end
+
   # @param size select { choices: [s, m, l] }
   # @param options number
   # @param multiple toggle