feat: extract dnd

Author: mbondyra

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/filters/filters.tsx

@@ -8,23 +8,14 @@ import './filters.scss';
 import React, { MouseEventHandler, useState } from 'react';
 import { omit } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiDragDropContext,
-  EuiDraggable,
-  EuiDroppable,
-  euiDragDropReorder,
-  EuiButtonEmpty,
-  EuiFormRow,
-  EuiLink,
-  htmlIdGenerator,
-} from '@elastic/eui';
+import { EuiFormRow, EuiLink, htmlIdGenerator } from '@elastic/eui';
 import { updateColumnParam } from '../../../state_helpers';
 import { OperationDefinition } from '../index';
 import { FieldBasedIndexPatternColumn } from '../column_types';
 import { FilterPopover } from './filter_popover';
 import { IndexPattern } from '../../../types';
 import { Query, esKuery, esQuery } from '../../../../../../../../src/plugins/data/public';
-import { CustomBucketContainer } from '../shared_components';
+import { NewBucketButton, DragDropBuckets, DraggableBucketContainer } from '../shared_components';
 
 const generateId = htmlIdGenerator();
 
@@ -33,10 +24,11 @@ export interface Filter {
   input: Query;
   label: string;
 }
+
 export interface FilterValue {
+  id: string;
   input: Query;
   label: string;
-  id: string;
 }
 
 const customQueryLabel = i18n.translate('xpack.lens.indexPattern.customQuery', {
@@ -69,11 +61,6 @@ export const isQueryValid = (input: Query, indexPattern: IndexPattern) => {
   }
 };
 
-interface DraggableLocation {
-  droppableId: string;
-  index: number;
-}
-
 export interface FiltersIndexPatternColumn extends FieldBasedIndexPatternColumn {
   operationType: 'filters';
   params: {
@@ -215,92 +202,67 @@ export const FilterList = ({
       )
     );
 
-  const onDragEnd = ({
-    source,
-    destination,
-  }: {
-    source?: DraggableLocation;
-    destination?: DraggableLocation;
-  }) => {
-    if (source && destination) {
-      const items = euiDragDropReorder(localFilters, source.index, destination.index);
-      updateFilters(items);
-    }
-  };
-
   return (
     <>
-      <EuiDragDropContext onDragEnd={onDragEnd} onDragStart={() => setIsOpenByCreation(false)}>
-        <EuiDroppable droppableId="FILTERS_DROPPABLE_AREA" spacing="s">
-          {localFilters?.map((filter: FilterValue, idx: number) => {
-            const { input, label, id } = filter;
-            const isInvalid = !isQueryValid(input, indexPattern);
+      <DragDropBuckets
+        onDragEnd={updateFilters}
+        onDragStart={() => setIsOpenByCreation(false)}
+        droppableId="FILTERS_DROPPABLE_AREA"
+        items={localFilters}
+      >
+        {localFilters?.map((filter: FilterValue, idx: number) => {
+          const isInvalid = !isQueryValid(filter.input, indexPattern);
 
-            return (
-              <EuiDraggable
-                spacing="m"
-                key={id}
-                index={idx}
-                draggableId={id}
-                disableInteractiveElementBlocking
-              >
-                {(provided) => (
-                  <CustomBucketContainer
-                    isInvalid={isInvalid}
-                    invalidMessage={i18n.translate('xpack.lens.indexPattern.filters.isInvalid', {
-                      defaultMessage: 'This query is invalid',
+          return (
+            <DraggableBucketContainer
+              id={filter.id}
+              key={filter.id}
+              idx={idx}
+              isInvalid={isInvalid}
+              invalidMessage={i18n.translate('xpack.lens.indexPattern.filters.isInvalid', {
+                defaultMessage: 'This query is invalid',
+              })}
+              onRemoveClick={() => onRemoveFilter(filter.id)}
+              removeTitle={i18n.translate('xpack.lens.indexPattern.filters.removeCustomQuery', {
+                defaultMessage: 'Remove custom query',
+              })}
+            >
+              <FilterPopover
+                data-test-subj="indexPattern-filters-existingFilterContainer"
+                isOpenByCreation={idx === localFilters.length - 1 && isOpenByCreation}
+                setIsOpenByCreation={setIsOpenByCreation}
+                indexPattern={indexPattern}
+                filter={filter}
+                setFilter={(f: FilterValue) => {
+                  onChangeValue(f.id, f.input, f.label);
+                }}
+                Button={({ onClick }: { onClick: MouseEventHandler }) => (
+                  <EuiLink
+                    className="lnsFiltersOperation__popoverButton"
+                    data-test-subj="indexPattern-filters-existingFilterTrigger"
+                    onClick={onClick}
+                    color={isInvalid ? 'danger' : 'text'}
+                    title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
+                      defaultMessage: 'Click to edit',
                     })}
-                    onRemoveClick={() => onRemoveFilter(filter.id)}
-                    removeTitle={i18n.translate(
-                      'xpack.lens.indexPattern.filters.removeCustomQuery',
-                      {
-                        defaultMessage: 'Remove custom query',
-                      }
-                    )}
                   >
-                    <FilterPopover
-                      data-test-subj="indexPattern-filters-existingFilterContainer"
-                      isOpenByCreation={idx === localFilters.length - 1 && isOpenByCreation}
-                      setIsOpenByCreation={setIsOpenByCreation}
-                      indexPattern={indexPattern}
-                      filter={filter}
-                      setFilter={(f: FilterValue) => {
-                        onChangeValue(f.id, f.input, f.label);
-                      }}
-                      Button={({ onClick }: { onClick: MouseEventHandler }) => (
-                        <EuiLink
-                          className="lnsFiltersOperation__popoverButton"
-                          data-test-subj="indexPattern-filters-existingFilterTrigger"
-                          onClick={onClick}
-                          color={isInvalid ? 'danger' : 'text'}
-                          title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
-                            defaultMessage: 'Click to edit',
-                          })}
-                        >
-                          {label || input.query || defaultLabel}
-                        </EuiLink>
-                      )}
-                    />
-                  </CustomBucketContainer>
+                    {filter.label || filter.input.query || defaultLabel}
+                  </EuiLink>
                 )}
-              </EuiDraggable>
-            );
-          })}
-        </EuiDroppable>
-      </EuiDragDropContext>
-
-      <EuiButtonEmpty
-        size="xs"
-        iconType="plusInCircle"
+              />
+            </DraggableBucketContainer>
+          );
+        })}
+      </DragDropBuckets>
+      <NewBucketButton
         onClick={() => {
           onAddFilter();
           setIsOpenByCreation(true);
         }}
-      >
-        {i18n.translate('xpack.lens.indexPattern.filters.addCustomQuery', {
+        label={i18n.translate('xpack.lens.indexPattern.filters.addCustomQuery', {
           defaultMessage: 'Add a custom query',
         })}
-      </EuiButtonEmpty>
+      />
     </>
   );
 };

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/bucket_container.tsx

@@ -0,0 +1,134 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiButtonIcon,
+  EuiIcon,
+  EuiDragDropContext,
+  euiDragDropReorder,
+  EuiDraggable,
+  EuiDroppable,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+export interface BucketContainerProps {
+  isInvalid?: boolean;
+  invalidMessage: string;
+  onRemoveClick: () => void;
+  removeTitle: string;
+  children: React.ReactNode;
+  dataTestSubj?: string;
+}
+
+export const BucketContainer = ({
+  isInvalid,
+  invalidMessage,
+  onRemoveClick,
+  removeTitle,
+  children,
+  dataTestSubj,
+}: BucketContainerProps) => {
+  return (
+    <EuiPanel paddingSize="none" data-test-subj={dataTestSubj}>
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+        <EuiFlexItem grow={false}>{/* Empty for spacing */}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIcon
+            size="s"
+            color={isInvalid ? 'danger' : 'subdued'}
+            type={isInvalid ? 'alert' : 'grab'}
+            title={
+              isInvalid
+                ? invalidMessage
+                : i18n.translate('xpack.lens.customBucketContainer.dragToReorder', {
+                    defaultMessage: 'Drag to reorder',
+                  })
+            }
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>{children}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconSize="s"
+            iconType="cross"
+            color="danger"
+            data-test-subj="lns-customBucketContainer-remove"
+            onClick={onRemoveClick}
+            aria-label={removeTitle}
+            title={removeTitle}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};
+
+export const DraggableBucketContainer = ({
+  id,
+  idx,
+  children,
+  ...bucketContainerProps
+}: {
+  id: string;
+  idx: number;
+  children: React.ReactNode;
+} & BucketContainerProps) => {
+  return (
+    <EuiDraggable spacing="m" index={idx} draggableId={id} disableInteractiveElementBlocking>
+      {(provided) => <BucketContainer {...bucketContainerProps}>{children}</BucketContainer>}
+    </EuiDraggable>
+  );
+};
+
+interface DraggableLocation {
+  droppableId: string;
+  index: number;
+}
+
+export const DragDropBuckets = ({
+  items,
+  onDragStart,
+  onDragEnd,
+  droppableId,
+  children,
+}: {
+  items: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  onDragStart: () => void;
+  onDragEnd: (items: any) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
+  droppableId: string;
+  children: React.ReactElement[];
+}) => {
+  const handleDragEnd = ({
+    source,
+    destination,
+  }: {
+    source?: DraggableLocation;
+    destination?: DraggableLocation;
+  }) => {
+    if (source && destination) {
+      const newItems = euiDragDropReorder(items, source.index, destination.index);
+      onDragEnd(newItems);
+    }
+  };
+  return (
+    <EuiDragDropContext onDragEnd={handleDragEnd} onDragStart={onDragStart}>
+      <EuiDroppable droppableId={droppableId} spacing="s">
+        {children}
+      </EuiDroppable>
+    </EuiDragDropContext>
+  );
+};
+
+export const NewBucketButton = ({ label, onClick }: { label: string; onClick: () => void }) => (
+  <EuiButtonEmpty size="xs" iconType="plusInCircle" onClick={onClick}>
+    {label}
+  </EuiButtonEmpty>
+);

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/custom_bucket_container.tsx

@@ -5,4 +5,4 @@
  */
 
 export * from './label_input';
-export * from './custom_bucket_container';
+export * from './bucket_container';