[Lens] Fix table sorting bug

[wylieconlon]

The table configuration should always be matched in the table expression, which is not happening for in several cases.

Steps to reproduce:

1. Use the chart switcher and go to an empty datatable
2. Drag the Records field and you should get a suggestion with 2 columns
3. Drag a new string field into the empty dimension labeled "Drop a field here"
4. The order shown in the table will not match the order shown on the right side

The fix for this issue should be to use the same logic in both getConfiguration and toExpression, which is to sort the table columns by the datasource order using this snippet from getConfiguration.

    const datasource = frame.datasourceLayers[layer.layerId];
    const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
    // When we add a column it could be empty, and therefore have no order
    const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));

This small change should fix the bug and guarantee consistent order.

GIF of the fix in action:

Fixes #74900

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 02fd473

Build metrics

page load bundle size

id	value	diff	baseline
lens	858.1KB	+187.0B	858.0KB

History

• 💔 Build #67793 failed ac0495d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[flash1293]

Tested in chrome, works as expected. LGTM