Implementation: add/remove tags to objects

[RomijnHumanoids]

As a user I want to be able to add or remove tags from objects. Also a scalable way to view tags in the object list is required in the scope of this ticket.

[RomijnHumanoids]

For review: https://www.figma.com/design/MWqv9Xo4FuFMgm7pHDBNXJ/%E2%9C%8D%F0%9F%8F%BC-KAT-%7C-For-Review-%7C-Objects?node-id=2369-6&t=H6UU6PassZ7IJ8mE-1

[RomijnHumanoids]

Design has been reviewed & approved for implementation. This ticket will be an implementation ticket from now on.

Implementation file: https://www.figma.com/design/Ysi72muYNJP7HmME4mjsYX/%E2%9C%85-KAT-%7C-Approved-%7C-Objects?node-id=2312-15782&t=PwGP7W4YncaDCNKn-1

[RomijnHumanoids]

About this feature

Detailed description

This design allows users to tag objects with custom user-tags. User tags are defined by users and can be recognised by the leading user-icon. The reason to use tags on objects is to create groups of objects to perform further actions on. Next to tagging objects, the scope of this ticket is also to be able to delete them from objects, and manage previously used tags on organisation level (e.g. I don't ever want to use this tag anymore).

Feature benefit/User story

As a user I want to be able to add or remove tags from objects. Also a scalable way to view tags in the object list is required in the scope of this ticket.

Specifications

Please add some specifications for the implementation. What needs to be implemented to match the design?

The implementation should include…

• [ ] 1. Tags with user-icon.
• [ ] 2. The tags user-icon displayed in the object detail page in section 'object details'.
• [ ] 3. The flow to edit these object details & the tags designated to this object. For this flow design we make use of the components:
  • [ ] 3.1 Add button to get more (dismissible) form input fields to add tags.
  • [ ] 3.2 Dismissible form fields (relatively new with trash bin icon) + submit button.
  • [ ] 3.3 Similar text input recognition as in query design to first look for existing tags and if no such tags exist create a new one.
  • [ ] 3.4 Tags with a trailing icon 'x' to delete them from objects.
• [ ] Implement a similar flow for managing tags in 'settings' page that manages all tags that are used within organisations.

Additional information

Figma file should speak for itself. If there are any questions please be in touch.

Design

Figma link

https://www.figma.com/design/Ysi72muYNJP7HmME4mjsYX/%E2%9C%85-KAT-%7C-Approved-%7C-Objects?node-id=2312-15782&t=PwGP7W4YncaDCNKn-1

Implementation

This part should only be filled in by the developers.

Possible solution

Outline your proposed solution for implementing the feature. You can include any specific ideas, designs, or functionalities here.

Alternatives considered

Describe any alternative approaches or solutions you've considered, and why you believe the proposed solution is superior.