(superset) 01/03: fix(AgGridTable): Menu items

[msyavuz]

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

msyavuz pushed a commit to branch msyavuz/fix/console-errors
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 286c024023df57e99c99444ed338bfa3dc28a3e1
Author: Mehmet Salih Yavuz <salih.ya...@proton.me>
AuthorDate: Tue Jul 15 23:09:14 2025 +0300

    fix(AgGridTable): Menu items
---
 .../components/TimeComparisonVisibility.tsx        | 63 ++++++++++++----------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git 
a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/TimeComparisonVisibility.tsx
 
b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/TimeComparisonVisibility.tsx
index 8e3d0fbe8e..502aa315c0 100644
--- 
a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/TimeComparisonVisibility.tsx
+++ 
b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/components/TimeComparisonVisibility.tsx
@@ -18,9 +18,9 @@
  */
 /* eslint-disable import/no-extraneous-dependencies */
 import { useState } from 'react';
-import { Dropdown, Menu } from 'antd';
+import { Dropdown } from 'antd';
 import { TableOutlined, DownOutlined, CheckOutlined } from '@ant-design/icons';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import { InfoText, ColumnLabel, CheckIconWrapper } from '../../styles';
 
 interface ComparisonColumn {
@@ -40,6 +40,7 @@ const TimeComparisonVisibility: 
React.FC<TimeComparisonVisibilityProps> = ({
   onSelectionChange,
 }) => {
   const [showComparisonDropdown, setShowComparisonDropdown] = useState(false);
+  const theme = useTheme();
 
   const allKey = comparisonColumns[0].key;
 
@@ -69,34 +70,42 @@ const TimeComparisonVisibility: 
React.FC<TimeComparisonVisibilityProps> = ({
   return (
     <Dropdown
       placement="bottomRight"
-      visible={showComparisonDropdown}
-      onVisibleChange={(flag: boolean) => {
+      open={showComparisonDropdown}
+      onOpenChange={(flag: boolean) => {
         setShowComparisonDropdown(flag);
       }}
-      overlay={
-        <Menu
-          multiple
-          onClick={handleOnClick}
-          onBlur={handleOnBlur}
-          selectedKeys={selectedComparisonColumns}
-        >
-          <InfoText>
-            {t(
-              'Select columns that will be displayed in the table. You can 
multiselect columns.',
-            )}
-          </InfoText>
-          {comparisonColumns.map((column: ComparisonColumn) => (
-            <Menu.Item key={column.key}>
-              <ColumnLabel>{column.label}</ColumnLabel>
-              <CheckIconWrapper>
-                {selectedComparisonColumns.includes(column.key) && (
-                  <CheckOutlined />
+      menu={{
+        multiple: true,
+        onClick: handleOnClick,
+        onBlur: handleOnBlur,
+        selectedKeys: selectedComparisonColumns,
+        items: [
+          {
+            key: 'group1',
+            label: (
+              <InfoText>
+                {t(
+                  'Select columns that will be displayed in the table. You can 
multiselect columns.',
                 )}
-              </CheckIconWrapper>
-            </Menu.Item>
-          ))}
-        </Menu>
-      }
+              </InfoText>
+            ),
+            type: 'group',
+            children: comparisonColumns.map((column: ComparisonColumn) => ({
+              key: column.key,
+              label: (
+                <>
+                  <ColumnLabel>{column.label}</ColumnLabel>
+                  <CheckIconWrapper>
+                    {selectedComparisonColumns.includes(column.key) && (
+                      <CheckOutlined />
+                    )}
+                  </CheckIconWrapper>
+                </>
+              ),
+            })),
+          },
+        ],
+      }}
       trigger={['click']}
     >
       <span>