Flag tags shown in different colours in the Flagr UI

[SaxJ]

Description

Tag value is hashed, and the tag UI elements use that hash value for the colour. The hash value is the Hue in a css HSLA colour, which is applied to the tag UI elements. A HSLA colour is used, as it is easier to ensure the colour is readable.

Motivation and Context

https://github.com/checkr/flagr/issues/438 A small quality of life improvement. Different tags colours allow a user to more easily see what flags have what tags when scanning through the tag list.

How Has This Been Tested?

Flagr docker image was run, and UI served using npm run serve pointing at the local Flagr docker instance.

1. Homepage UI visually inspected
2. Created Flag, UI with no tags present is the same
3. Created tags of varying random strings. Checked visually for legibility. Adding and removing tags still works.
4. Homepage UI shows tags correctly with the same colours.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [x] UI only change.

Checklist:

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have added tests to cover my changes.
• [x] All new and existing tests passed.

[codecov-commenter]

Codecov Report

Merging #439 (d2a51a7) into master (d7418a6) will increase coverage by 1.06%. The diff coverage is n/a.

:exclamation: Current head d2a51a7 differs from pull request most recent head 5fee801. Consider uploading reports for the commit 5fee801 to get more accurate results

@@            Coverage Diff             @@
##           master     #439      +/-   ##
==========================================
+ Coverage   81.75%   82.81%   +1.06%     
==========================================
  Files          27       27              
  Lines        1611     1786     +175     
==========================================
+ Hits         1317     1479     +162     
- Misses        214      220       +6     
- Partials       80       87       +7     

Impacted Files	Coverage Δ
pkg/handler/data_recorder_kinesis.go	78.04% <0.00%> (-0.90%)	:arrow_down:
pkg/config/middleware.go	68.09% <0.00%> (-0.48%)	:arrow_down:
pkg/handler/export.go	69.64% <0.00%> (-0.17%)	:arrow_down:
pkg/handler/handler.go	83.63% <0.00%> (-0.04%)	:arrow_down:
pkg/util/util.go	100.00% <0.00%> (ø)
pkg/handler/error.go	100.00% <0.00%> (ø)
pkg/entity/fixture.go	100.00% <0.00%> (ø)
pkg/entity/segment.go	100.00% <0.00%> (ø)
pkg/handler/fixture.go	100.00% <0.00%> (ø)
pkg/handler/subject.go	100.00% <0.00%> (ø)
... and 17 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 33d2ae2...5fee801. Read the comment docs.

[github-actions[bot]]

Stale pull request message