refactor: preparation for time section migration (#21766)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndAdhocFilterOption.tsx

@@ -0,0 +1,69 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { DndItemType } from 'src/explore/components/DndItemType';
+import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
+import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
+import { OptionSortType } from 'src/explore/types';
+import OptionWrapper from './OptionWrapper';
+
+export interface DndAdhocFilterOptionProps {
+  adhocFilter: AdhocFilter;
+  onFilterEdit: (changedFilter: AdhocFilter) => void;
+  onClickClose: (index: number) => void;
+  onShiftOptions: (dragIndex: number, hoverIndex: number) => void;
+  options: OptionSortType[];
+  datasource: Record<string, any>;
+  partitionColumn?: string;
+  index: number;
+}
+
+export default function DndAdhocFilterOption({
+  adhocFilter,
+  options,
+  datasource,
+  onFilterEdit,
+  onShiftOptions,
+  onClickClose,
+  partitionColumn,
+  index,
+}: DndAdhocFilterOptionProps) {
+  return (
+    <AdhocFilterPopoverTrigger
+      key={index}
+      adhocFilter={adhocFilter}
+      options={options}
+      datasource={datasource}
+      onFilterEdit={onFilterEdit}
+      partitionColumn={partitionColumn}
+    >
+      <OptionWrapper
+        key={index}
+        index={index}
+        label={adhocFilter.getDefaultLabel()}
+        tooltipTitle={adhocFilter.getTooltipTitle()}
+        clickClose={onClickClose}
+        onShiftOptions={onShiftOptions}
+        type={DndItemType.FilterOption}
+        withCaret
+        isExtra={adhocFilter.isExtra}
+      />
+    </AdhocFilterPopoverTrigger>
+  );
+}

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx

@@ -35,7 +35,6 @@ import {
 import { Datasource, OptionSortType } from 'src/explore/types';
 import { OptionValueType } from 'src/explore/components/controls/DndColumnSelectControl/types';
 import AdhocFilterPopoverTrigger from 'src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger';
-import OptionWrapper from 'src/explore/components/controls/DndColumnSelectControl/OptionWrapper';
 import DndSelectLabel from 'src/explore/components/controls/DndColumnSelectControl/DndSelectLabel';
 import AdhocFilter, {
   CLAUSES,
@@ -50,6 +49,7 @@ import {
 import { DndItemType } from 'src/explore/components/DndItemType';
 import { ControlComponentProps } from 'src/explore/components/Control';
 import AdhocFilterControl from '../FilterControl/AdhocFilterControl';
+import DndAdhocFilterOption from './DndAdhocFilterOption';
 
 const EMPTY_OBJECT = {};
 const DND_ACCEPTED_TYPES = [
@@ -296,32 +296,18 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
 
   const valuesRenderer = useCallback(
     () =>
-      values.map((adhocFilter: AdhocFilter, index: number) => {
-        const label = adhocFilter.getDefaultLabel();
-        const tooltipTitle = adhocFilter.getTooltipTitle();
-        return (
-          <AdhocFilterPopoverTrigger
-            key={index}
-            adhocFilter={adhocFilter}
-            options={options}
-            datasource={datasource}
-            onFilterEdit={onFilterEdit}
-            partitionColumn={partitionColumn}
-          >
-            <OptionWrapper
-              key={index}
-              index={index}
-              label={label}
-              tooltipTitle={tooltipTitle}
-              clickClose={onClickClose}
-              onShiftOptions={onShiftOptions}
-              type={DndItemType.FilterOption}
-              withCaret
-              isExtra={adhocFilter.isExtra}
-            />
-          </AdhocFilterPopoverTrigger>
-        );
-      }),
+      values.map((adhocFilter: AdhocFilter, index: number) => (
+        <DndAdhocFilterOption
+          index={index}
+          adhocFilter={adhocFilter}
+          options={options}
+          datasource={datasource}
+          onFilterEdit={onFilterEdit}
+          partitionColumn={partitionColumn}
+          onClickClose={onClickClose}
+          onShiftOptions={onShiftOptions}
+        />
+      )),
     [
       onClickClose,
       onFilterEdit,
@@ -401,9 +387,7 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
         visible={newFilterPopoverVisible}
         togglePopover={togglePopover}
         closePopover={closePopover}
-      >
-        <div />
-      </AdhocFilterPopoverTrigger>
+      />
     </>
   );
 };