Replace visualization designer's type selector component
Problem to solve
The following discussions from !133190 (merged) should be addressed:
-
!133190 (comment 1590381586)
suggestion: I noticed that clicking on the label does not shift focus to the dropdown (or open it), which is what I'd expect based on how other native form controls work. As it is, this ID is not in the DOM anywhere once vue has rendered the component.
-
!133190 (comment 1589473154)
Note: Ideally our type selector,
GlDropdown
, would support validation but it does not so the styles don't match the input. To solve this our options are to either useGlFormSelect
(which lacks styling) or useGlCollapsibleListbox
(which currently lacks validation Listbox: Support for validation (gitlab-ui#1939)). Either way I think this MR solves the original issue as is and we can improve validation state in a follow-up. More context in this slack thread (internal link).
In short the issues related to the fact that GlDropdown
is not the right component to use in forms and we should consider alternatives.
Proposed solution
Replace the GlDropdown
with one of the following components (each has it's pros and cons):
-
GlFormSelect
which supports form validation, but has no styling options so we lose icons. -
GlCollapsibleListbox
which is recommended by Pajamas but does not yet support form validation.
I think if this becomes a serious issues for our users then we should go with option 1
. Alternatively we could look at supporting option 2
by contributing to the feature on GitLab-UI. Finally another alternative is to roll out our own custom validation using GlDropdown
, but I'd advise against any bespoke one off solutions for the maintenance costs.
Based on the decision in #427414 (comment 1915003738) let's go with 1
.
Implementation plan
frontend
- Replace
GlDropdown
withGlFormSelect
inanalytics_visualization_type_selector.vue
- We can drop the icons.
- Ensure that the field is selected when a label is clicked.
- Ensure that the field has a red border when validation fails (empty on submit).
- Update specs.