Resolve "Add multi-tag collection field" (!2249) · Merge requests · Baserow / baserow

Add a new multi tag collection field that allows the user to display a set of tags/badges from a list result from a data source.

Here is it in action:

Notes

On the UI in order to display a horizontal form input with a button at the end I've updated FormulaInputGroup and ColorInputGroup to support a after-input slot, similar to what we already have for FormInput component.
A new utility function, ensureArray, was added, that works similarly to ensureString but for arrays (:p)
When rendering the tags I distinguished between colors resulting from formulas, from colors resulting from the picker. Why? Because the latter returns a hexadecimal or AB theme value, while the first returned color names used by core. Therefore I needed a way to distinguish them in the frontend, and that is why the tags array passed to TagsField can contain either a color property or a (css) class property.

Create a new Multiple select database column and add a set of color/value tags;
In the application builder connect a data source to that table in order to return the list of all rows;
Add a new table element
Click in Add field and select Tags from the list
In the values formula input select the Multiple select column previously defined.
Try the following combinations:
- Play with the Colors picker and assert that the colors of the tags are changed in real time;
- Play with the Colors picker and assert that you can select theme colors;
- Click on the ∑ and a formula input should appear.
  - Select the colors property from the previously defined Multiple select column. The colors should now be the same as the ones in the database;
  - Manually type color names separated with a comma, e.g blue, green. It should color the tags correctly, cycling through this colors in case there are more tags than colors defined.

changelog.md has been updated if required.
New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
The latest Chrome and Firefox have been used to test any new frontend features
Documentation has been updated
Quality Standards are met
Performance: tables are still fast with 100k+ rows, 100+ field tables
The redoc API pages have been updated for any REST API changes
Our custom API docs are updated for changes to endpoints accessed via api tokens
The UI/UX has been updated following UI Style Guide

Closes #2480

Edited Apr 11, 2024 by Afonso Silva

Resolve "Add multi-tag collection field"