feat: Add label and tooltip for the color schemes control

[geido]

SUMMARY

This PR adds the label name in the color schemes control to make it easier for the users to find their color schemes.
It also adds a tooltip when the color scheme label or the color list gets truncated.

BEFORE

AFTER

TESTING INSTRUCTIONS

1. Open Explore
2. Scroll the available color schemes
3. If the label and/or the colors are truncated a tooltip should appear
4. If the label and the colors are fully visible, the tooltip should not appear

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #21040 (d8cb161) into master (1517956) will increase coverage by 0.00%.
The diff coverage is 63.63%.

❗ Current head d8cb161 differs from pull request most recent head 652b87a. Consider uploading reports for the commit 652b87a to get more accurate results

@@           Coverage Diff           @@
##           master   #21040   +/-   ##
=======================================
  Coverage   66.30%   66.30%           
=======================================
  Files        1772     1773    +1     
  Lines       67609    67629   +20     
  Branches     7204     7206    +2     
=======================================
+ Hits        44829    44843   +14     
- Misses      20938    20943    +5     
- Partials     1842     1843    +1     

Flag	Coverage Δ
javascript	52.09% <63.63%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...e/components/controls/ColorSchemeControl/index.jsx	66.66% <ø> (+3.03%)	⬆️
...s/controls/ColorSchemeControl/ColorSchemeLabel.tsx	63.63% <63.63%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[stephenLYZ]

/testenv up

[github-actions]

@stephenLYZ Ephemeral environment spinning up at http://35.91.151.185:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[rusackas]

@kasiazjc it looks like the names AND the palette colors are being truncated. Should that happen to both, or should one of them "win"?

[geido]

/testenv up

[geido]

@kasiazjc it looks like the names AND the palette colors are being truncated. Should that happen to both, or should one of them "win"?

The proposed design truncates both. I believe it makes sense since you can have a very large amount of colors or a very lenghty name for the palette.

[github-actions]

@geido Ephemeral environment spinning up at http://52.33.179.163:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[codyml]

Code looks good and it works! Left two comments that are not blocking. The double truncation does strike me as kind of strange: the row of swatches starts at a different place for each item so the menu looks a little chaotic, and as a user I think my first impression of seeing two ellipses in one menu item would be that there's a layout bug. I can't think of a perfect alternative, but what about if we made it so we had a max of like 10 swatches and they were right-justified without an ellipsis, and then the title is left-justified, truncated with an ellipsis always at the same point? We wouldn't see the max amount of information possible but it would look a lot cleaner and the tooltips would show the full content.

But, also non-blocking if we want to stick with this design.

[jinghua-qa]

LGTM

[kasiazjc]

Code looks good and it works! Left two comments that are not blocking. The double truncation does strike me as kind of strange: the row of swatches starts at a different place for each item so the menu looks a little chaotic, and as a user I think my first impression of seeing two ellipses in one menu item would be that there's a layout bug. I can't think of a perfect alternative, but what about if we made it so we had a max of like 10 swatches and they were right-justified without an ellipsis, and then the title is left-justified, truncated with an ellipsis always at the same point? We wouldn't see the max amount of information possible but it would look a lot cleaner and the tooltips would show the full content.

But, also non-blocking if we want to stick with this design.

Thanks for the feedback Cody! I think actually that is a good idea. We still need an indicator that not all of the colors are shown and I'm thinking - maybe let's add a counter? So, as in the categorical color palette, max number of colors is 12, let's use it's a max shown. It will be the fixed with for the color swatches section. Then between text and colors there is 8px fixed spacing and the rest is title. Does it make sense? All of the things would cut off in the same space and it would declutter the whole thing a little bit. What do you think @geido

[geido]

Thanks for the feedback Cody! I think actually that is a good idea. We still need an indicator that not all of the colors are shown and I'm thinking - maybe let's add a counter? So, as in the categorical color palette, max number of colors is 12, let's use it's a max shown. It will be the fixed with for the color swatches section. Then between text and colors there is 8px fixed spacing and the rest is title. Does it make sense? All of the things would cut off in the same space and it would declutter the whole thing a little bit. What do you think @geido

@kasiazjc the two elements cannot be located at the opposite ends as the container can be dragged and expanded. This would create a potential huge space between the label and the colors.

In order to keep this flexible we also should not set a maximum number of 12 colors as the dropdown should behave based on the available horizontal space.

As for changing from ellipsis to a number of hidden colors, that would require a bigger refactor and if we think it is critical we should discuss that option and I can open another PR.

In the meantime, I made some enhancements so that the options do not look disordered and all consume the same space now, which should satisfy what @codyml was asking above. Also, These latest changes truncates both the labels and colors less often, which should improve the feelings about double truncation.

[kasiazjc]

Thanks for the feedback Cody! I think actually that is a good idea. We still need an indicator that not all of the colors are shown and I'm thinking - maybe let's add a counter? So, as in the categorical color palette, max number of colors is 12, let's use it's a max shown. It will be the fixed with for the color swatches section. Then between text and colors there is 8px fixed spacing and the rest is title. Does it make sense? All of the things would cut off in the same space and it would declutter the whole thing a little bit. What do you think @geido

@kasiazjc the two elements cannot be located at the opposite ends as the container can be dragged and expanded. This would create a potential huge space between the label and the colors.

In order to keep this flexible we also should not set a maximum number of 12 colors as the dropdown should behave based on the available horizontal space.

As for changing from ellipsis to a number of hidden colors, that would require a bigger refactor and if we think it is critical we should discuss that option and I can open another PR.

In the meantime, I made some enhancements so that the options do not look disordered and all consume the same space now, which should satisfy what @codyml was asking above. Also, These latest changes truncates both the labels and colors less often, which should improve the feelings about double truncation.

Oh, I understand. I actually think it looks good! I am totally fine with merging this version. Thank you Diego for working on it 🙏

[geido]

/testenv up

[github-actions]

@geido Ephemeral environment spinning up at http://34.220.222.129:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.