(superset) branch move-controls updated: refactor: Split control panel to work with existing Superset tabs

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch move-controls
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/move-controls by this push:
     new 0f60a8d57b refactor: Split control panel to work with existing Superset tabs
0f60a8d57b is described below

commit 0f60a8d57b8b3f7a003ef35a7bc4bbcbc281578f
Author: Evan Rusackas <ev...@rusackas.com>
AuthorDate: Mon Aug 18 13:32:24 2025 -0700

    refactor: Split control panel to work with existing Superset tabs
    
    - Removed custom Tabs implementation - we don't create our own tabs
    - Split into two components: PieDataPanel and PieCustomizePanel
    - PieDataPanel provides content for the existing Data tab
    - PieCustomizePanel provides content for the existing Customize tab
    - Both components share the same props and state through common interface
    - Used controlPanelSections with tabOverride to place controls in correct tabs
    - Chart type selector remains above tabs (handled by Superset UI)
    - Maintains all controls and conditional rendering logic
---
 .../src/Pie/PieControlPanelSimple.tsx              | 102 ++++++++++-----------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/PieControlPanelSimple.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/PieControlPanelSimple.tsx
index 8e6a1f02cf..280e13c243 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/PieControlPanelSimple.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/PieControlPanelSimple.tsx
@@ -16,9 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { t } from '@superset-ui/core';
-import { Tabs } from 'antd';
 import {
   ColorSchemeControl,
   D3_FORMAT_OPTIONS,
@@ -47,9 +46,9 @@ interface PieControlPanelProps {
 }
 
 /**
- * A modern React component-based control panel for Pie charts.
+ * Data tab content - Query controls
  */
-export const PieControlPanel: FC<PieControlPanelProps> = ({
+export const PieDataPanel: FC<PieControlPanelProps> = ({
   onChange,
   value,
   datasource,
@@ -88,11 +87,7 @@ export const PieControlPanel: FC<PieControlPanelProps> = ({
   // Get form values
   const formValues = form_data || value || {};
 
-  // State for active tab
-  const [activeTab, setActiveTab] = useState('data');
-
-  // Data tab content
-  const dataTabContent = (
+  return (
     <div>
       {/* Group by */}
       <div style={{ marginBottom: 16 }}>
@@ -200,9 +195,40 @@ export const PieControlPanel: FC<PieControlPanelProps> = ({
       </div>
     </div>
   );
+};
 
-  // Customize tab content
-  const customizeTabContent = (
+// Mark as modern panel
+(PieDataPanel as any).isModernPanel = true;
+
+/**
+ * Customize tab content - Chart customization controls
+ */
+export const PieCustomizePanel: FC<PieControlPanelProps> = ({
+  onChange,
+  value,
+  datasource,
+  form_data,
+  actions,
+  controls,
+}) => {
+  // If no valid data yet, show loading state
+  if (!form_data) {
+    return <div>Loading customize panel...</div>;
+  }
+
+  // Helper to handle control changes
+  const handleChange = (field: string) => (val: any) => {
+    if (actions?.setControlValue) {
+      actions.setControlValue(field, val);
+    } else if (onChange) {
+      onChange(field, val);
+    }
+  };
+
+  // Get form values
+  const formValues = form_data || value || {};
+
+  return (
     <div>
       {/* Chart Options Section */}
       <div style={{ marginBottom: 24 }}>
@@ -487,54 +513,26 @@ export const PieControlPanel: FC<PieControlPanelProps> = ({
       </div>
     </div>
   );
-
-  // Tab items
-  const tabItems = [
-    {
-      key: 'data',
-      label: t('Data'),
-      children: dataTabContent,
-    },
-    {
-      key: 'customize',
-      label: t('Customize'),
-      children: customizeTabContent,
-    },
-  ];
-
-  return (
-    <div style={{ padding: '16px' }}>
-      {/* Chart/Viz Type Picker */}
-      <div style={{ marginBottom: 16, padding: '12px', borderRadius: '4px' }}>
-        <div style={{ fontSize: '16px', fontWeight: 500, marginBottom: '8px' }}>
-          {t('Pie Chart')}
-        </div>
-        <div style={{ fontSize: '12px', color: '#666' }}>
-          {t('Visualize data as a pie or donut chart')}
-        </div>
-      </div>
-
-      {/* Tabs for Data and Customize */}
-      <Tabs
-        activeKey={activeTab}
-        onChange={setActiveTab}
-        items={tabItems}
-        size="large"
-      />
-    </div>
-  );
 };
 
-// Mark this component as a modern panel
-(PieControlPanel as any).isModernPanel = true;
+// Mark as modern panel
+(PieCustomizePanel as any).isModernPanel = true;
 
-// Provide a minimal config structure to prevent errors
+// Provide the config with both panels in proper sections
 const config = {
   controlPanelSections: [
+    // Data tab content
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [[PieDataPanel as any]],
+    },
+    // Customize tab content - multiple sections will all go in Customize
     {
-      label: null,
+      label: t('Chart Options'),
       expanded: true,
-      controlSetRows: [[PieControlPanel as any]],
+      tabOverride: 'customize',
+      controlSetRows: [[PieCustomizePanel as any]],
     },
   ],
   // Provide default control overrides