Using optgroup's (or possibility to disable fields) on "select" widgets in form.yml for apps

[Micket]

Perhaps already possible but I see no obvious way to specify this in the yml files, but i would like to have something that could generate an optgroup, or alternatively, letting my disable a field.

<select>
    <optgroup>
        <option>/apps/ood/jupyter/PyTorch-1.10.sh</option>
        <option>/apps/ood/jupyter/PyTorch-1.11.sh</option>
        <option>/apps/ood/jupyter/PyTorch-1.12.sh</option>
    </optgroup>
    <optgroup label="User specified runtime, create ~/ood/jupyter/*.sh ">
        <option>~/ood/jupyter/my_custom_env.sh</option>
        <option>~/ood/jupyter/my_second_env.sh</option>
    </optgroup>
</select>

Right now, we add hack this in via an extra option, which generates a drop down kind of like

<select>
    <option>/apps/ood/jupyter/PyTorch-1.10.sh</option>
    <option>/apps/ood/jupyter/PyTorch-1.11.sh</option>
    <option>/apps/ood/jupyter/PyTorch-1.12.sh</option>
    <option>User specified runtime, create ~/ood/jupyter/*.sh</option>
    <option>~/ood/jupyter/my_custom_env.sh</option>
    <option>~/ood/jupyter/my_second_env.sh</option>
</select>

which is OK, but of course unfortunately lets people select this non existent separator "User specified runtime ..." which just kind of breaks things for us.
Just having the option to specify

<select>
    <option>/apps/ood/jupyter/PyTorch-1.10.sh</option>
    <option>/apps/ood/jupyter/PyTorch-1.11.sh</option>
    <option>/apps/ood/jupyter/PyTorch-1.12.sh</option>
    <option disabled>User specified runtime, create ~/ood/jupyter/*.sh</option>
    <option>~/ood/jupyter/my_custom_env.sh</option>
    <option>~/ood/jupyter/my_second_env.sh</option>
</select>

would at least remedy this, though not as nice as having the groups

┆Issue is synchronized with this Asana task by Unito

[johrstrom]

Hi, thanks for the ticket. Yea this seems interesting. I'll look into how to disable certain fields.

[Micket]

I thought a bit about how one could possible express the optgroups in yaml (which look like this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup )

Maybe some form of extra tag

  version:
    widget: "select"
    label: "Runtime"
    options:
      - ['foo', 'foo']
      - ['baz', 'baz', group: 'User supplied']
      - ['bar', 'bar', group: 'User supplied']

or as a nested/dict type yaml

  version:
    widget: "select"
    label: "Runtime"
    options:
      - ['foo', 'foo']
      - User supplied:
        - ['baz', 'baz']
        - ['bar', 'bar']

yaml feels a bit precarious here though, i'm not sure what's actually valid syntax (but i think this would both be OK technically)

[akesandgren]

Any progress on this?

[johrstrom]

No, not yet unfortunately.

[Micket]

After playing around with the "data-option-for-xxx" stuff I realized this might just already work.

options:
  - [ "this is a separator", "x", disabled: true ]

produces the HTML

<option disabled="disabled" value="x">this is a separator</option>

and I think all browsers just ignore the ="disabled" part, so maybe not ideal but this actually works already!

I did find a strange thing though; if I leave the value field empty

options:
  - [ "this is a separator", "", disabled: true ]

then an extra field is added

<option disabled="disabled" selected="selected" value="">this is a separator</option>

which forcibly selects this disabled field by default when you reload the browser due to the selected="selected", so one has to add a dummy value to avoid this.

(though this isn't as nice as the optgroup)

[johrstrom]

While working on something different - I accidentally discovered how to make this work.

We're always passing in Arrays to the options. Pass a map instead (key value pairs) and they keys to that map will be the optgroup.

attributes:
  opt_group_test:
    widget: select
    options:
      'first_group':
        - 'first_group_option' 
      'second_group':
        - 'second_group_option' 

[Micket]

I can confirm that this works already! Great, you can even use spaces in the group name. I've put it to use in our deployment now

attributes:
  ...
  version:
    options:
      System provided:
<% glob_prettify_lookup(["/apps/portal/rstudio/*.sh"]).each do |pretty_path, path| %>
        - [ "<%= pretty_path %>", "<%= path %>" ]
<% end %>
      User provided:
        - [ "~/portal/rstudio/*.sh",  "x", disabled: true ]
<% glob_prettify_lookup(["#{Dir.home}/portal/rstudio/*.sh"]).each do |pretty_path, path| %>
        - [ "<%= pretty_path %>", "<%= path %>" ]
<% end %>