Simple question summary sidebar: highlight the selected binning (#16665)

This mimics the situation in the notebook (custom question). A minor
difference, hence the omission of the previous implementation, is that
notebook breakout selection only allows one table at a time (the other
tables are "folded" in the accordion list component). In the case of a
simple question, every breakout selection happens in a sidebar, a long
list of all tables and all dimensions. Thus, it needs to support
multiple selection at once, which this commit finally implements.

frontend/src/metabase/query_builder/components/DimensionList.jsx

@@ -112,6 +112,13 @@ export default class DimensionList extends Component {
 
     const multiSelect = !!(onAddDimension || onRemoveDimension);
 
+    const sectionDimension = dimension
+      ? dimension
+      : _.find(
+          this._getDimensions(),
+          d => d.field() === item.dimension.field(),
+        );
+
     return (
       <div className="Field-extra flex align-center">
         {/* {item.segment && this.renderSegmentTooltip(item.segment)} */}
@@ -132,7 +139,7 @@ export default class DimensionList extends Component {
             {({ onClose }) => (
               <DimensionPicker
                 className="scroll-y"
-                dimension={dimension}
+                dimension={sectionDimension}
                 dimensions={subDimensions}
                 onChangeDimension={dimension => {
                   this.props.onChangeDimension(dimension);

frontend/test/metabase/scenarios/binning/binning-options.cy.spec.js

@@ -51,7 +51,7 @@ describe("scenarios > binning > binning options", () => {
   });
 
   // Tests are currently failing because the selected option is not highlighted in the popover
-  context.skip("via simple question", () => {
+  context("via simple question", () => {
     it("should render number binning options correctly", () => {
       chooseInitialBinningOption({ table: ORDERS_ID, column: "Total" });
       getTitle("Count by Total: Auto binned");