[Vis-Builder] Fix Droppable Areas not highlighting while dragging a Field

src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx

@@ -31,6 +31,7 @@ export interface ConfigPanelProps {
   aggProps: AggProps;
   activeSchemaFields: SchemaDisplayStates;
   setActiveSchemaFields: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>;
+  isDragging: boolean;
 }
 
 export function ConfigPanel({
@@ -39,14 +40,16 @@ export function ConfigPanel({
   aggProps,
   activeSchemaFields,
   setActiveSchemaFields,
+  isDragging,
 }: ConfigPanelProps) {
   if (!schemas) return null;
 
   const mainPanel = mapSchemaToAggPanel(
     schemas,
     aggProps,
     activeSchemaFields,
-    setActiveSchemaFields
+    setActiveSchemaFields,
+    isDragging
   );
 
   return (

src/plugins/vis_builder/public/application/components/data_tab/constants.ts

@@ -9,3 +9,4 @@ export enum FIELD_SELECTOR_ID {
   NUMERICAL = 'numericalFields',
   META = 'metaFields',
 }
+export const ADD_PANEL_PREFIX = 'AddPanel_';

src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx

@@ -53,6 +53,7 @@
   isValidDropTarget,
   canDrop,
   dropProps,
+  isDragging,
 }: DropboxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const [closing, setClosing] = useState<boolean | string>(false);
@@ -79,58 +80,74 @@
           droppableId={dropboxId}
           isCombineEnabled={true}
         >
-          {fields.map(({ id, label }, index) => (
-            <EuiDraggable
-              className={`dropBox__draggable ${id === closing && 'closing'}`}
-              key={id}
-              draggableId={id}
-              index={index}
-            >
-              <EuiPanel
-                key={index}
-                paddingSize="s"
-                className="dropBox__field"
-                data-test-subj={`dropBoxField-${dropboxId}-${index}`}
-              >
-                <EuiText size="s" className="dropBox__field_text" onClick={() => onEditField(id)}>
-                  <a role="button" tabIndex={0}>
-                    {label}
-                  </a>
-                </EuiText>
-                <EuiSmallButtonIcon
-                  color="subdued"
-                  iconType="cross"
-                  aria-label="clear-field"
-                  iconSize="s"
-                  onClick={() => animateDelete(id)}
-                  data-test-subj="dropBoxRemoveBtn"
-                />
-              </EuiPanel>
-            </EuiDraggable>
-          ))}
+          {(provided, snapshot) => (
+            <div ref={provided.innerRef} {...provided.droppableProps}>
+              {fields.map(({ id, label }, index) => (
+                <EuiDraggable
+                  className={`dropBox__draggable ${id === closing && 'closing'}`}
+                  key={id}
+                  draggableId={id}
+                  index={index}
+                >
+                  <EuiPanel
+                    key={index}
+                    paddingSize="s"
+                    className={`dropBox__field dropBox__dropTarget ${
+                      isDragging ? 'validField' : ''
+                    } ${snapshot.isDraggingOver ? 'canDrop' : ''}`}
+                    data-test-subj={`dropBoxField-${dropboxId}-${index}`}
+                  >
+                    <EuiText
+                      size="s"
+                      className="dropBox__field_text"
+                      onClick={() => onEditField(id)}
+                    >
+                      <a role="button" tabIndex={0}>
+                        {label}
+                      </a>
+                    </EuiText>
+                    <EuiSmallButtonIcon
+                      color="subdued"
+                      iconType="cross"
+                      aria-label="clear-field"
+                      iconSize="s"
+                      onClick={() => animateDelete(id)}
+                      data-test-subj="dropBoxRemoveBtn"
+                    />
+                  </EuiPanel>
+                </EuiDraggable>
+              ))}
+            </div>
+          )}
+        </EuiDroppable>
+        <EuiDroppable droppableId={`AddPanel_${dropboxId}`}>
+          {(provided, snapshot) => (
+            <div ref={provided.innerRef} {...provided.droppableProps}>
+              {fields.length < limit && (
+                <EuiPanel
+                  data-test-subj={`dropBoxAddField-${dropboxId}`}
+                  className={`dropBox__field dropBox__dropTarget ${
+                    isDragging ? 'validField' : ''
+                  } ${snapshot.isDraggingOver ? 'canDrop' : ''}`}
+                  {...(isValidDropTarget && dropProps)}
+                >
+                  <EuiText size="s">
+                    {i18n.translate('visBuilder.dropbox.addField.title', {
+                      defaultMessage: 'Click or drop to add',
+                    })}
+                  </EuiText>
+                  <EuiSmallButtonIcon
+                    iconType="plusInCircle"
+                    aria-label="clear-field"
+                    iconSize="s"
+                    onClick={() => onAddField()}
+                    data-test-subj="dropBoxAddBtn"
+                  />
+                </EuiPanel>
+              )}
+            </div>
+          )}
         </EuiDroppable>
-        {fields.length < limit && (
-          <EuiPanel
-            data-test-subj={`dropBoxAddField-${dropboxId}`}
-            className={`dropBox__field dropBox__dropTarget ${
-              isValidDropTarget ? 'validField' : ''
-            } ${canDrop ? 'canDrop' : ''}`}
-            {...(isValidDropTarget && dropProps)}
-          >
-            <EuiText size="s">
-              {i18n.translate('visBuilder.dropbox.addField.title', {
-                defaultMessage: 'Click or drop to add',
-              })}
-            </EuiText>
-            <EuiSmallButtonIcon
-              iconType="plusInCircle"
-              aria-label="clear-field"
-              iconSize="s"
-              onClick={() => onAddField()}
-              data-test-subj="dropBoxAddBtn"
-            />
-          </EuiPanel>
-        )}
       </div>
     </EuiCompressedFormRow>
   );

src/plugins/vis_builder/public/application/components/data_tab/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { DropResult, EuiDragDropContext } from '@elastic/eui';
+import { DraggableLocation, DropResult, EuiDragDropContext } from '@elastic/eui';
 import { FieldSelector } from './field_selector';
 
 import './index.scss';
@@ -15,7 +15,7 @@
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { VisBuilderServices } from '../../../types';
 import { DropboxDisplay } from './dropbox';
-import { FIELD_SELECTOR_ID } from './constants';
+import { ADD_PANEL_PREFIX, FIELD_SELECTOR_ID } from './constants';
 import { addFieldToConfiguration } from './drag_drop/add_field_to_configuration';
 import { replaceFieldInConfiguration } from './drag_drop/replace_field_in_configuration';
 import { reorderFieldsWithinSchema } from './drag_drop/reorder_fields_within_schema';
@@ -49,6 +49,7 @@
       return acc;
     }, {});
   });
+  const [isDragging, setIsDragging] = useState<boolean>(false);
   const dispatch = useTypedDispatch();
 
   useEffect(() => {
@@ -64,6 +65,7 @@
 
   const handleDragEnd = (dropResult: DropResult) => {
     try {
+      setIsDragging(false); // Reseting the Dragging flag
       const { source, destination, combine } = dropResult;
 
       const destinationSchemaName = destination?.droppableId || combine?.droppableId;
@@ -76,6 +78,49 @@
 
       const panelGroups = Array.from(schemas.all.map((schema) => schema.name));
 
+      if (destinationSchemaName.startsWith(ADD_PANEL_PREFIX)) {
+        const updatedDestinationSchemaName = destinationSchemaName.split(ADD_PANEL_PREFIX)[1];
+
+        if (Object.values(FIELD_SELECTOR_ID).includes(sourceSchemaName as FIELD_SELECTOR_ID)) {
+          if (panelGroups.includes(updatedDestinationSchemaName)) {
+            const newDropResult = {
+              ...dropResult,
+              destination: {
+                droppableId: updatedDestinationSchemaName,
+                index: 0,
+              } as DraggableLocation,
+            };
+            addFieldToConfiguration({
+              dropResult: newDropResult,
+              aggProps,
+              aggService,
+              activeSchemaFields,
+              dispatch,
+              schemas,
+            });
+          }
+        } else if (panelGroups.includes(sourceSchemaName)) {
+          if (panelGroups.includes(updatedDestinationSchemaName)) {
+            const newDropResult = {
+              ...dropResult,
+              destination: {
+                droppableId: updatedDestinationSchemaName,
+                index: 0,
+              } as DraggableLocation,
+            };
+            moveFieldBetweenSchemas({
+              dropResult: newDropResult,
+              aggProps,
+              aggService,
+              activeSchemaFields,
+              dispatch,
+              schemas,
+            });
+          }
+        }
+        return;
+      }
+
       if (Object.values(FIELD_SELECTOR_ID).includes(sourceSchemaName as FIELD_SELECTOR_ID)) {
         if (panelGroups.includes(destinationSchemaName) && !combine) {
           addFieldToConfiguration({
@@ -134,7 +179,7 @@
   };
 
   return (
-    <EuiDragDropContext onDragEnd={handleDragEnd}>
+    <EuiDragDropContext onDragEnd={handleDragEnd} onDragStart={() => setIsDragging(true)}>
       <div className="vbDataTab">
         <FieldSelector />
         <ConfigPanel
@@ -143,6 +188,7 @@
           aggProps={aggProps}
           activeSchemaFields={activeSchemaFields}
           setActiveSchemaFields={setActiveSchemaFields}
+          isDragging={isDragging}
         />
       </div>
     </EuiDragDropContext>

src/plugins/vis_builder/public/application/components/data_tab/schema_to_dropbox.tsx

@@ -13,7 +13,8 @@ export const mapSchemaToAggPanel = (
   schemas: Schemas,
   aggProps: AggProps,
   activeSchemaFields: SchemaDisplayStates,
-  setActiveSchemaFields: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>
+  setActiveSchemaFields: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>,
+  isDragging: boolean
 ) => {
   const panelComponents = schemas.all.map((schema) => {
     return (
@@ -25,6 +26,7 @@ export const mapSchemaToAggPanel = (
         aggProps={aggProps}
         activeSchemaFields={activeSchemaFields}
         setActiveSchemaFields={setActiveSchemaFields}
+        isDragging={isDragging}
       />
     );
   });

src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx

@@ -26,6 +26,7 @@ export interface UseDropboxProps extends Pick<DropboxProps, 'id' | 'label'> {
   aggProps: AggProps;
   activeSchemaFields: SchemaDisplayStates;
   setActiveSchemaFields: React.Dispatch<React.SetStateAction<SchemaDisplayStates>>;
+  isDragging: boolean;
 }
 
 export const useDropbox = (props: UseDropboxProps): DropboxProps => {
@@ -36,6 +37,7 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => {
     aggProps,
     activeSchemaFields,
     setActiveSchemaFields,
+    isDragging,
   } = props;
   const [validAggTypes, setValidAggTypes] = useState<string[]>([]);
   const { aggConfigs, indexPattern, aggs, timeRange } = aggProps;
@@ -209,5 +211,6 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => {
     dragData,
     isValidDropTarget: canDrop,
     dropProps,
+    isDragging,
   };
 };