feature: manage product tags in bulk

[willopez]

Resolves #5453
Impact: Major
Type: feature

Summary

This PR adds functionality to manage product tags in bulk. A user will be able to add or remove a set of tags to/from a set of products.

This feature includes using the new Select component from the Catalyst UI, this required updating react-select to v3.0.4

Testing

1. Select 1 or more products on the products page
2. Click the actions menu and select Add/Remove tags
3. Select 1 or more tags
4. Select on the action from the action button, either Add tags to product(s) or Remove tags from product(s)
5. Click the button to execute the action

[rymorgan]

• Shadow, elevation on the quick add card is wrong. I think this is fixed already but maybe you don’t have the changes pulled into your branch? Just double-checking.

• Missing translation on card.
  

• There should be space between the two inline alerts alerts. @cassytaylor how much space?
  

[cassytaylor]

• +1 for the shadows being incorrect - it looks like both the product table card and quick action card use shadows that are too big. I'm really sorry I still don't have great documentation for elevation yet, but our cards use "Shadow02" documented here - zpl.io/bJWYAP9

• The "Create product" button should hide when any Quick Action card is open. Currently it's still shown when the "Filter products by file" card is open.

• Agreed on messaging needing rewriting... I'm not a great UX copywriter 😬

• Agreed on the disabled state is confusing.

[mikemurray]

Some comments on syntax and style.

[mikemurray]

Use literal numbers, and omit units from letter spacing and margin.

[mikemurray]

@willopez If I dismiss the alert, I can't get it to reappear again even though I still have no selected tags.

[rymorgan]

These updates related to - #5525

Copy updates for inline alerts.

Updated copy -
16 products found from the imported file.

Updated copy -
Aviator added to 3 products.

In the case where you have two tags it should look like this -
Aviator added to 3 products.
Socks added to 3 products.

Updated copy -
13 products were already tagged with the provided tags. No change made.

In the case where you have mixed results, it can look like this -
Aviator added to 3 products.
7 products were already tagged with the provided tags. No change made.

Updated copy -
Please select one or more tags.

[rymorgan]

Spacing and alignment of the quick edit card are off.

The right alignment of 'X' end of the select, and split button should all right align.
The bottom marge of the card should have more space looks like space(1) when it should be space(3).

For reference -
https://zpl.io/aRGzZNz

[willopez]

@rymorgan I have implemented the copy changes. Ready for your review.

[rymorgan]

Should read -
var tag added to 3 products.

• tag should be bolded not in quotes.
• Product should be the plural, products

• Instead of "No update performed" it should say "No change made."

[willopez]

@rymorgan I have implemented you changes. Except for making tag bold, as it's no currently possible due to the fact that the messages are translated strings.

[willopez]

@manueldelreal Can you please test this PR with our sample data set and SDI's data set. Thanks!

[rymorgan]

@willopez I've reviewed and it's good to go from my perspective.