Add a single bucket picker component for MLv2 (#31614)

* Add `BucketPickerPopover`

* Fix types

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BinningStrategyPickerPopover.tsx

 import { useCallback, useMemo } from "react";
 import { t } from "ttag";
 import * as Lib from "metabase-lib";
-import type { BucketPickerPopoverProps } from "./types";
+import type { CommonBucketPickerProps } from "./types";
 import type { BucketListItem } from "./BaseBucketPickerPopover";
 import {
   BaseBucketPickerPopover,
@@ -16,7 +16,7 @@ export function BinningStrategyPickerPopover({
   isEditing,
   onSelect,
   ...props
-}: BucketPickerPopoverProps) {
+}: CommonBucketPickerProps) {
   const selectedBucket = useMemo(() => Lib.binning(column), [column]);
 
   const items = useMemo(

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BucketPickerPopover.tsx

+import * as Lib from "metabase-lib";
+import { BinningStrategyPickerPopover } from "./BinningStrategyPickerPopover";
+import { TemporalBucketPickerPopover } from "./TemporalBucketPickerPopover";
+import { CommonBucketPickerProps } from "./types";
+
+interface BucketPickerPopoverProps
+  extends Omit<CommonBucketPickerProps, "buckets"> {
+  hasBinning?: boolean;
+  hasTemporalBucketing?: boolean;
+}
+
+export function BucketPickerPopover({
+  query,
+  stageIndex,
+  column,
+  hasBinning = false,
+  hasTemporalBucketing = false,
+  ...props
+}: BucketPickerPopoverProps) {
+  if (hasBinning) {
+    const buckets = Lib.availableBinningStrategies(query, stageIndex, column);
+
+    if (buckets.length > 0) {
+      return (
+        <BinningStrategyPickerPopover
+          {...props}
+          query={query}
+          stageIndex={stageIndex}
+          column={column}
+          buckets={buckets}
+        />
+      );
+    }
+  }
+
+  if (hasTemporalBucketing) {
+    const buckets = Lib.availableTemporalBuckets(query, stageIndex, column);
+
+    if (buckets.length > 0) {
+      return (
+        <TemporalBucketPickerPopover
+          {...props}
+          query={query}
+          stageIndex={stageIndex}
+          column={column}
+          buckets={buckets}
+        />
+      );
+    }
+  }
+
+  return null;
+}

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/TemporalBucketPickerPopover.tsx

 import { useCallback, useMemo } from "react";
 import { t } from "ttag";
 import * as Lib from "metabase-lib";
-import type { BucketPickerPopoverProps } from "./types";
+import type { CommonBucketPickerProps } from "./types";
 import type { BucketListItem } from "./BaseBucketPickerPopover";
 import {
   BaseBucketPickerPopover,
@@ -19,7 +19,7 @@ export function TemporalBucketPickerPopover({
   buckets,
   onSelect,
   ...props
-}: BucketPickerPopoverProps) {
+}: CommonBucketPickerProps) {
   const selectedBucket = useMemo(() => Lib.temporalBucket(column), [column]);
 
   const items = useMemo(

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/index.ts

-export * from "./BinningStrategyPickerPopover";
-export * from "./TemporalBucketPickerPopover";
+export * from "./BucketPickerPopover";

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/types.ts

@@ -6,7 +6,7 @@ type CommonProps = Pick<
   "query" | "stageIndex" | "isEditing"
 >;
 
-export interface BucketPickerPopoverProps extends CommonProps {
+export interface CommonBucketPickerProps extends CommonProps {
   column: Lib.ColumnMetadata;
   buckets: Lib.Bucket[];
   onSelect: (column: Lib.ColumnMetadata) => void;

frontend/src/metabase/common/components/QueryColumnPicker/QueryColumnPicker.tsx

@@ -7,10 +7,7 @@ import { singularize } from "metabase/lib/formatting";
 
 import * as Lib from "metabase-lib";
 
-import {
-  BinningStrategyPickerPopover,
-  TemporalBucketPickerPopover,
-} from "./BucketPickerPopover";
+import { BucketPickerPopover } from "./BucketPickerPopover";
 
 const DEFAULT_MAX_HEIGHT = 610;
 
@@ -123,50 +120,18 @@ function QueryColumnPicker({
   );
 
   const renderItemExtra = useCallback(
-    (item: ColumnListItem) => {
-      if (hasBinning && Lib.isBinnable(query, stageIndex, item.column)) {
-        const buckets = Lib.availableBinningStrategies(
-          query,
-          stageIndex,
-          item.column,
-        );
-        const isEditing = checkIsColumnSelected(item);
-        return (
-          <BinningStrategyPickerPopover
-            query={query}
-            stageIndex={stageIndex}
-            column={item.column}
-            buckets={buckets}
-            isEditing={isEditing}
-            onSelect={handleSelect}
-          />
-        );
-      }
-
-      if (
-        hasTemporalBucketing &&
-        Lib.isTemporalBucketable(query, stageIndex, item.column)
-      ) {
-        const buckets = Lib.availableTemporalBuckets(
-          query,
-          stageIndex,
-          item.column,
-        );
-        const isEditing = checkIsColumnSelected(item);
-        return (
-          <TemporalBucketPickerPopover
-            query={query}
-            stageIndex={stageIndex}
-            column={item.column}
-            buckets={buckets}
-            isEditing={isEditing}
-            onSelect={handleSelect}
-          />
-        );
-      }
-
-      return null;
-    },
+    (item: ColumnListItem) =>
+      hasBinning || hasTemporalBucketing ? (
+        <BucketPickerPopover
+          query={query}
+          stageIndex={stageIndex}
+          column={item.column}
+          isEditing={checkIsColumnSelected(item)}
+          hasBinning={hasBinning}
+          hasTemporalBucketing={hasTemporalBucketing}
+          onSelect={handleSelect}
+        />
+      ) : null,
     [
       query,
       stageIndex,