Add layerOrder in LegendWidget

[flipasg]

Description

Shortcut: https://app.shortcut.com/cartoteam/story/222396/implement-layerorder-in-legendwidget

Background
Currently, the legends are rendered using the Object.values fn with the layers object where we store the layers config (store) in redux.

Problem
Object.values fn doesn't guarantee the order (Source), so we might have weird behaviour considering that the addLayer action is executed in the same order that the layer are executed in the layers/index.js file.

Solution
Add layerOrder: string[] prop in LegendWidget. layerOrder is an array of layer ids, when the Object.values is executed, the resulting array must be ordered following the layerOrder prop.

Add sortArrayByPropValues utils. Is a function to sort a list of objects based on a property values.

Type of change

• Feature
• Tests

Acceptance

Please describe how to validate the feature or fix

In your App

1. Go to your LegendWidget usage and add layerOrder property:

The specified layerOrder, from left to the right, should be the order we want from bottom to top in the legend display.

<LegendWidget
  layerOrder={['storesLayer2', 'storesLayer2', 'storesLayer0']}
  className={classes.legend}
/>

2. Check the legend of your application map in the browser:

The elements should be sorted by id property, from bottom to top.

• If exists any value not included in the array should be positioned at the top of the legend.
• If exists any value not existing in the layers should be ignored.
• If exist any duplicated value should act as one. Using the first occurrence of this value.

In carto-react

1. Check the tests by yarn run test command
   The added test are related with the util sortArrayByPropValues .

[shortcut-integration]

This pull request has been linked to Shortcut Story #222396: Implement layerOrder in LegendWidget.

[coveralls]

Pull Request Test Coverage Report for Build 2514980517

• 4 of 7 (57.14%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.1%) to 72.259%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/react-widgets/src/widgets/utils/sortLayers.js	4	5	80.0%
packages/react-core/src/utils/assert.js	0	2	0.0%

Totals
Change from base Build 2514084004:	-0.1%
Covered Lines:	1602
Relevant Lines:	2077

---

💛 - Coveralls

[Clebal]

I think the code is quite complex considering that we're covering a very simple use case.

[zbigg]

LGTM, but please consider comment about _assert