Add tag on scene

[callemand]

Pull Request check-list

To ensure your Pull Request can be accepted as fast as possible, make sure to review and check all of these items:

• If your changes affects code, did your write the tests?
• Are tests passing? (npm test on both front/server)
• Is the linter passing? (npm run eslint on both front/server)
• Did you run prettier? (npm run prettier on both front/server)
• If you are adding a new features/services, did you run integration comparator? (npm run compare-translations on front)
• Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (french forum/english forum) for testing before merging.

NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.

Description of change

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (30ce850) 98.17% compared to head (bb6be08) 98.17%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1900   +/-   ##
=======================================
  Coverage   98.17%   98.17%           
=======================================
  Files         773      776    +3     
  Lines       12133    12167   +34     
=======================================
+ Hits        11911    11945   +34     
  Misses        222      222           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[relativeci]

Job #2043: Bundle Size — 9.01MiB (+0.24%).

bb6be08(current) vs 30ce850 master#2032(baseline)

Warning

Bundle contains 3 duplicate packages – View duplicate packages

Bundle metrics   5 changes 3 regressions

	Current Job #2043	Baseline Job #2032
Initial JS	4.86MiB(+0.29%)	4.85MiB
Initial CSS	302.38KiB(+0.18%)	301.85KiB
Cache Invalidation	57.2%	53.75%
Chunks	51	51
Assets	157	157
Modules	1400(+0.29%)	1396
Duplicate Modules	20	20
Duplicate Code	0.83%(+1.22%)	0.82%
Packages	124	124
Duplicate Packages	3	3

Bundle size by type   2 changes 2 regressions

	Current Job #2043	Baseline Job #2032
JS	6.52MiB (+0.32%)	6.5MiB
IMG	2.06MiB	2.06MiB
CSS	318.76KiB (+0.21%)	318.08KiB
Fonts	93.55KiB	93.55KiB
Other	16.06KiB	16.06KiB
HTML	13.58KiB	13.58KiB

---

View job #2043 report View callemand:AddTagOnScene branch activity

[Pierre-Gilles]

Thanks for the PR ! It works great 👏

I have a few feedbacks, the major one is on the DB side.

I really think we should stay relational in Gladys and store this as a relation table :

t_tag_scene:
- scene_id uuid
- name text

It'll let you find existing tags pretty easily so you can display the existing tags in scene (otherwise, right now, the user can easily create duplicate tags)

On the UX, we should have a way to filter easily on the list of scene by tags (here again, you'll need a query to get all tags -> only possible in an efficient way with a relation table)

The general new UX of scene is really great and IMO users will love it !

Thanks for looking into this 😄

[callemand]

Thanks for the PR ! It works great 👏

I have a few feedbacks, the major one is on the DB side.

I really think we should stay relational in Gladys and store this as a relation table :

t_tag_scene:
- scene_id uuid
- name text

It'll let you find existing tags pretty easily so you can display the existing tags in scene (otherwise, right now, the user can easily create duplicate tags)

On the UX, we should have a way to filter easily on the list of scene by tags (here again, you'll need a query to get all tags -> only possible in an efficient way with a relation table)

The general new UX of scene is really great and IMO users will love it !

Thanks for looking into this 😄

I've try to implements the 't_tag_scene'. it's working but. Do I need to create a new api controller to get the tags ?
I need to get all the tags to display into the "react-select".

[Pierre-Gilles]

Do I need to create a new api controller to get the tags ?

@callemand You can do it in the "scene" controller :)

[Pierre-Gilles]

Thanks for this PR ! The UI is really great like that 👏

A few feedbacks on the UI side:

• When I click outside of the tag select dropdown, it could be great to close the dropdown
• The current behavior when I select multiple tags is to do a "AND", and when comparing with other software, I have the feeling that usually it's more a "OR" done on that. What do you think of switching to OR ?

Kapture.2023-11-06.at.10.05.22.mp4

I was able to create a super long tag and then it break the UI :D

Could we limit the tag length ?

I have a few comments on the backend side (see comments in code)

Thanks for this PR 🙌

[Pierre-Gilles]

Thanks for the changes, it's way better! 👏

A few feedbacks:

When I click on a tag, it's a bit weird I can only click on the "title" but on the full width so when titles are a bit longer it's weird to have to change where to click:

Kapture.2023-11-10.at.14.13.28.mp4

It seems were are looking "scene density" on the scene list.

Before:

After:

What about going back to 4 per width?

[Pierre-Gilles]

Thanks for the fixes!

For the click on the tags, it seems it's the same as before?

Kapture.2023-11-13.at.10.58.08.mp4

For the responsive, maybe on mobile we should hide the "Nouveau" text and just keep the "+" (like we do on some pages) ?

And I'm wondering if we don't need a button "unselect all" at the top ?

[Pierre-Gilles]

All good for me! I just have one question on the cypress tests :)

And Eslint is not passing but it's just one line

After that I'm good to merge!

Edit: Little regression on the "new scene" view:

Before:

After:

[Pierre-Gilles]

Good for me now! 👏