Simplify DimensionList component (#25041)

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

@@ -31,27 +31,29 @@ export default class DimensionList extends Component {
   };
 
   UNSAFE_componentWillMount() {
-    this._updateSections(this.props.sections);
+    this.updateSections(this.props.sections);
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.sections !== nextProps.sections) {
-      this._updateSections(nextProps.sections);
+      this.updateSections(nextProps.sections);
     }
   }
-  _updateSections(sections) {
+
+  updateSections(sections = []) {
     this.setState({
-      sections: (sections || []).map(section => ({
+      sections: sections.map(section => ({
         ...section,
         items: section.items.map(item => ({
           ...item,
-          name: item.name || (item.dimension && item.dimension.displayName()),
-          icon: item.icon || (item.dimension && item.dimension.icon()),
+          name: item.name || item.dimension?.displayName(),
+          icon: item.icon || item.dimension?.icon(),
         })),
       })),
     });
   }
 
-  _getDimensions() {
+  getDimensions() {
     return (
       this.props.dimensions ||
       (this.props.dimension ? [this.props.dimension] : [])
@@ -59,20 +61,19 @@ export default class DimensionList extends Component {
   }
 
   itemIsSelected = item => {
-    const dimensions = this._getDimensions();
-    const { dimension } = item;
+    const dimensions = this.getDimensions();
     return (
       item.dimension &&
-      _.any(dimensions, d => {
-        // sometimes `dimension` has a join-alias and `d` doesn't -- with/without is equivalent in this scenario
-        return d.isSameBaseDimension(dimension.withoutJoinAlias());
+      _.any(dimensions, dimension => {
+        // sometimes `item.dimension` has a join-alias and `dimension` doesn't
+        // with/without is equivalent in this scenario
+        return dimension.isSameBaseDimension(item.dimension.withoutJoinAlias());
       })
     );
   };
 
   renderItemExtra = (item, itemIndex, isSelected) => {
     const {
-      dimension,
       enableSubDimensions,
       preventNumberSubDimensions,
       onAddDimension,
@@ -84,28 +85,26 @@ export default class DimensionList extends Component {
 
     const subDimensions =
       enableSubDimensions &&
-      item.dimension &&
       // Do not display sub dimension if this is an FK (metabase#16787)
-      !item.dimension.field().isFK() &&
+      !item.dimension?.field().isFK() &&
       !surpressSubDimensions &&
       item.dimension.dimensions();
 
     const multiSelect = !!(onAddDimension || onRemoveDimension);
 
-    const sectionDimension = dimension
-      ? dimension
+    const sectionDimension = this.props.dimension
+      ? this.props.dimension
       : _.find(
-          this._getDimensions(),
-          d => d.field() === item.dimension.field(),
+          this.getDimensions(),
+          dimension => dimension.field() === item.dimension.field(),
         );
 
     return (
       <div className="Field-extra flex align-center">
-        {/* {item.segment && this.renderSegmentTooltip(item.segment)} */}
-        {item.dimension && item.dimension.tag && (
+        {item.dimension?.tag && (
           <span className="h5 text-light px1">{item.dimension.tag}</span>
         )}
-        {subDimensions && subDimensions.length > 0 ? (
+        {subDimensions?.length > 0 ? (
           <PopoverWithTrigger
             className={this.props.className}
             hasArrow={false}
@@ -160,11 +159,12 @@ export default class DimensionList extends Component {
   };
 
   renderSubDimensionTrigger(otherDimension, multiSelect) {
-    const dimensions = this._getDimensions();
+    const dimensions = this.getDimensions();
     const subDimension =
-      _.find(dimensions, d => d.isSameBaseDimension(otherDimension)) ||
-      otherDimension.defaultDimension();
-    const name = subDimension ? subDimension.subTriggerDisplayName() : null;
+      _.find(dimensions, dimension =>
+        dimension.isSameBaseDimension(otherDimension),
+      ) || otherDimension.defaultDimension();
+    const name = subDimension?.subTriggerDisplayName() ?? null;
 
     return (
       <FieldListGroupingTrigger
@@ -177,7 +177,7 @@ export default class DimensionList extends Component {
     );
   }
 
-  _getDimensionFromItem(item) {
+  getDimensionFromItem(item) {
     const {
       enableSubDimensions,
       useOriginalDimension,
@@ -211,23 +211,23 @@ export default class DimensionList extends Component {
       // ensure if we select the same item we don't reset the subdimension
       onChangeDimension(dimension, item);
     } else if (item.dimension) {
-      onChangeDimension(this._getDimensionFromItem(item), item);
+      onChangeDimension(this.getDimensionFromItem(item), item);
     } else if (onChangeOther) {
       onChangeOther(item);
     }
   };
 
   handleAdd = item => {
-    const d = this._getDimensionFromItem(item);
-    if (d && this.props.onAddDimension) {
-      this.props.onAddDimension(d, item);
+    const dimension = this.getDimensionFromItem(item);
+    if (dimension && this.props.onAddDimension) {
+      this.props.onAddDimension(dimension, item);
     }
   };
 
   handleRemove = item => {
-    const d = this._getDimensionFromItem(item);
-    if (d && this.props.onRemoveDimension) {
-      this.props.onRemoveDimension(d, item);
+    const dimension = this.getDimensionFromItem(item);
+    if (dimension && this.props.onRemoveDimension) {
+      this.props.onRemoveDimension(dimension, item);
     }
   };