Code Insights [Forms]: Implement a better solution for dynamic array fields management

Created by: vovakulikov

Background

At the moment we don't have a good solution for building forms with a dynamically generated list of fields or groups of fields. For example, on the search-based insight creation UI page, we have a data series picker where we're supposed to generate a list of series (three fields, title, query, colour).

At the moment we use just the useField hook but it requires additional logic around this hook to achieve all features around the fields array (create a new field, delete, update). Also we don't have a good control over validation around these generated fields and because of this we have to specify validators on low-levels components, which might be a problem if we want to reuse a series picker with a different setup (different query validation, different labels, different description)

Proposal

I think for this problem we should have a special hook for management array-like fields

const { fields, add, delete } = useArrayFields({ 
   name,
   formApi, 
   fields: { 
     name: { validators, label, ... },
     query: { validators, label, ...}, 
     ...
   }
})