From 06da6ce520f51299115aebefebcc914593873db8 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 20 Aug 2024 18:44:07 -0700 Subject: [PATCH] [Vis-Builder] Fix Droppable Areas not highlighting while dragging a Field (#7527) (#7780) * [Vis-Builder] Highlight Droppable Areas while dragging a Field * Changeset file for PR #7527 created/updated --------- (cherry picked from commit 901ac51171498c3cc8daec1a9305856fa34ed680) Signed-off-by: Suchit Sahoo Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/7527.yml | 2 + .../components/data_tab/config_panel.tsx | 5 +- .../components/data_tab/constants.ts | 1 + .../components/data_tab/dropbox.tsx | 119 ++++++++++-------- .../application/components/data_tab/index.tsx | 52 +++++++- .../components/data_tab/schema_to_dropbox.tsx | 4 +- .../components/data_tab/use/use_dropbox.tsx | 3 + 7 files changed, 130 insertions(+), 56 deletions(-) create mode 100644 changelogs/fragments/7527.yml diff --git a/changelogs/fragments/7527.yml b/changelogs/fragments/7527.yml new file mode 100644 index 000000000000..b3bebe022ac2 --- /dev/null +++ b/changelogs/fragments/7527.yml @@ -0,0 +1,2 @@ +fix: +- Not highlighting Droppable Areas while dragging a field ([#7527](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7527)) \ No newline at end of file diff --git a/src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx b/src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx index ae9067cd676e..295a4a78f4c9 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/config_panel.tsx +++ b/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>; + isDragging: boolean; } export function ConfigPanel({ @@ -39,6 +40,7 @@ export function ConfigPanel({ aggProps, activeSchemaFields, setActiveSchemaFields, + isDragging, }: ConfigPanelProps) { if (!schemas) return null; @@ -46,7 +48,8 @@ export function ConfigPanel({ schemas, aggProps, activeSchemaFields, - setActiveSchemaFields + setActiveSchemaFields, + isDragging ); return ( diff --git a/src/plugins/vis_builder/public/application/components/data_tab/constants.ts b/src/plugins/vis_builder/public/application/components/data_tab/constants.ts index 9369bd78e143..aae4849074ea 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/constants.ts +++ b/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_'; diff --git a/src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx b/src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx index 260b6e1261b8..6387e64e7349 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/dropbox.tsx @@ -53,6 +53,7 @@ const DropboxComponent = ({ isValidDropTarget, canDrop, dropProps, + isDragging, }: DropboxProps) => { const prefersReducedMotion = usePrefersReducedMotion(); const [closing, setClosing] = useState(false); @@ -79,58 +80,74 @@ const DropboxComponent = ({ droppableId={dropboxId} isCombineEnabled={true} > - {fields.map(({ id, label }, index) => ( - - - onEditField(id)}> - - {label} - - - animateDelete(id)} - data-test-subj="dropBoxRemoveBtn" - /> - - - ))} + {(provided, snapshot) => ( +
+ {fields.map(({ id, label }, index) => ( + + + onEditField(id)} + > + + {label} + + + animateDelete(id)} + data-test-subj="dropBoxRemoveBtn" + /> + + + ))} +
+ )} + + + {(provided, snapshot) => ( +
+ {fields.length < limit && ( + + + {i18n.translate('visBuilder.dropbox.addField.title', { + defaultMessage: 'Click or drop to add', + })} + + onAddField()} + data-test-subj="dropBoxAddBtn" + /> + + )} +
+ )} - {fields.length < limit && ( - - - {i18n.translate('visBuilder.dropbox.addField.title', { - defaultMessage: 'Click or drop to add', - })} - - onAddField()} - data-test-subj="dropBoxAddBtn" - /> - - )} ); diff --git a/src/plugins/vis_builder/public/application/components/data_tab/index.tsx b/src/plugins/vis_builder/public/application/components/data_tab/index.tsx index 8c79f680cb02..51a69950c719 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/index.tsx +++ b/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 { useTypedDispatch, useTypedSelector } from '../../utils/state_management 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 @@ export const DataTab = () => { return acc; }, {}); }); + const [isDragging, setIsDragging] = useState(false); const dispatch = useTypedDispatch(); useEffect(() => { @@ -64,6 +65,7 @@ export const DataTab = () => { 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 @@ export const DataTab = () => { 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 @@ export const DataTab = () => { }; return ( - + setIsDragging(true)}>
{ aggProps={aggProps} activeSchemaFields={activeSchemaFields} setActiveSchemaFields={setActiveSchemaFields} + isDragging={isDragging} />
diff --git a/src/plugins/vis_builder/public/application/components/data_tab/schema_to_dropbox.tsx b/src/plugins/vis_builder/public/application/components/data_tab/schema_to_dropbox.tsx index 390e7fb47638..9e4a26b3adde 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/schema_to_dropbox.tsx +++ b/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> + setActiveSchemaFields: React.Dispatch>, + isDragging: boolean ) => { const panelComponents = schemas.all.map((schema) => { return ( @@ -25,6 +26,7 @@ export const mapSchemaToAggPanel = ( aggProps={aggProps} activeSchemaFields={activeSchemaFields} setActiveSchemaFields={setActiveSchemaFields} + isDragging={isDragging} /> ); }); diff --git a/src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx b/src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx index d2d1be215785..25ea7c81f2f7 100644 --- a/src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx +++ b/src/plugins/vis_builder/public/application/components/data_tab/use/use_dropbox.tsx @@ -26,6 +26,7 @@ export interface UseDropboxProps extends Pick { aggProps: AggProps; activeSchemaFields: SchemaDisplayStates; setActiveSchemaFields: React.Dispatch>; + 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([]); const { aggConfigs, indexPattern, aggs, timeRange } = aggProps; @@ -209,5 +211,6 @@ export const useDropbox = (props: UseDropboxProps): DropboxProps => { dragData, isValidDropTarget: canDrop, dropProps, + isDragging, }; };