Fix #28973: Disable drag for single fields (#30408)

* disable drag for single fields

* refactor isDragDisabled expression

* prevent sub-dimension draggability for sub-dimensions with only 1 item

* refactor drag and drop conditionals

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx

@@ -30,9 +30,11 @@ const ChartSettingFieldsPicker = ({
     );
   };
 
+  const isDragDisabled = fields?.length <= 1;
+
   return (
     <div>
-      {Array.isArray(fields) ? (
+      {fields?.length >= 0 ? (
         <DragDropContext onDragEnd={handleDragEnd}>
           <Droppable droppableId="droppable">
             {provided => (
@@ -43,6 +45,7 @@ const ChartSettingFieldsPicker = ({
                       key={`draggable-${field}`}
                       draggableId={`draggable-${field}`}
                       index={fieldIndex}
+                      isDragDisabled={isDragDisabled}
                     >
                       {provided => (
                         <div

frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedItems.tsx

@@ -25,6 +25,7 @@ interface SortableColumnFunctions<T> {
 
 interface SortableColumnProps<T> extends SortableColumnFunctions<T> {
   item: T;
+  isDragDisabled: boolean;
 }
 
 const SortableColumn = SortableElement(function SortableColumn<
@@ -38,6 +39,7 @@ const SortableColumn = SortableElement(function SortableColumn<
   onAdd,
   onEnable,
   onColorChange,
+  isDragDisabled = false,
 }: SortableColumnProps<T>) {
   return (
     <ColumnItem
@@ -55,7 +57,7 @@ const SortableColumn = SortableElement(function SortableColumn<
         onColorChange ? (color: string) => onColorChange(item, color) : null
       }
       color={item.color}
-      draggable
+      draggable={!isDragDisabled}
     />
   );
 }) as unknown as <T extends SortableItem>(
@@ -78,6 +80,8 @@ const SortableColumnList = SortableContainer(function SortableColumnList<
   onAdd,
   onColorChange,
 }: SortableColumnListProps<T>) {
+  const isDragDisabled = items.length === 1;
+
   return (
     <div>
       {items.map((item, index: number) => (
@@ -91,6 +95,8 @@ const SortableColumnList = SortableContainer(function SortableColumnList<
           onEnable={onEnable}
           onAdd={onAdd}
           onColorChange={onColorChange}
+          disabled={isDragDisabled}
+          isDragDisabled={isDragDisabled}
         />
       ))}
     </div>