[superset] branch master updated: fix(explore): Adhoc columns don't display correctly (#20802)

[kgabryje]

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

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new af1bddffad fix(explore): Adhoc columns don't display correctly (#20802)
af1bddffad is described below

commit af1bddffad930efc0583b638716980db6747bfbc
Author: Kamil Gabryjelski <kamil.gabryjel...@gmail.com>
AuthorDate: Thu Jul 21 21:11:49 2022 +0200

    fix(explore): Adhoc columns don't display correctly (#20802)
    
    * fix(explore): Adhoc columns have empty labels
    
    * Add unit test
    
    * Address comments
---
 .../src/components/labelUtils.tsx                    |  6 ++++--
 .../superset-ui-core/src/query/types/Column.ts       |  2 +-
 .../DndColumnSelectControl/ColumnSelectPopover.tsx   |  2 +-
 .../DndColumnSelectControl/DndColumnSelect.test.tsx  | 20 +++++++++++++++++++-
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
index c132b0918d..ca7ddff4ce 100644
--- 
a/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
+++ 
b/superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx
@@ -68,7 +68,7 @@ export const getColumnTooltipNode = (
   labelRef?: React.RefObject<any>,
 ): ReactNode => {
   if (
-    !column.verbose_name &&
+    (!column.column_name || !column.verbose_name) &&
     !column.description &&
     !isLabelTruncated(labelRef)
   ) {
@@ -77,7 +77,9 @@ export const getColumnTooltipNode = (
 
   return (
     <>
-      <TooltipSection label={t('Column name')} text={column.column_name} />
+      {column.column_name && (
+        <TooltipSection label={t('Column name')} text={column.column_name} />
+      )}
       {column.verbose_name && (
         <TooltipSection label={t('Label')} text={column.verbose_name} />
       )}
diff --git 
a/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts 
b/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts
index c2b35f46c4..7afe031bcf 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts
@@ -61,7 +61,7 @@ export function isAdhocColumn(column?: any): column is 
AdhocColumn {
     typeof column !== 'string' &&
     column?.sqlExpression !== undefined &&
     column?.label !== undefined &&
-    column?.expressionType === 'SQL'
+    (column?.expressionType === undefined || column?.expressionType === 'SQL')
   );
 }
 
diff --git 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
index 2e8a8ede6b..f979f231e2 100644
--- 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
+++ 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
@@ -121,7 +121,7 @@ const ColumnSelectPopover = ({
 
   const onSqlExpressionChange = useCallback(
     sqlExpression => {
-      setAdhocColumn({ label, sqlExpression } as AdhocColumn);
+      setAdhocColumn({ label, sqlExpression, expressionType: 'SQL' });
       setSelectedSimpleColumn(undefined);
       setSelectedCalculatedColumn(undefined);
     },
diff --git 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx
 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx
index 37240d57ca..b02905191f 100644
--- 
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx
+++ 
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.test.tsx
@@ -27,7 +27,9 @@ const defaultProps: DndColumnSelectProps = {
   type: 'DndColumnSelect',
   name: 'Filter',
   onChange: jest.fn(),
-  options: { string: { column_name: 'Column A' } },
+  options: {
+    string: { column_name: 'Column A' },
+  },
   actions: { setControlValue: jest.fn() },
 };
 
@@ -42,3 +44,19 @@ test('renders with value', () => {
   });
   expect(screen.getByText('Column A')).toBeInTheDocument();
 });
+
+test('renders adhoc column', () => {
+  render(
+    <DndColumnSelect
+      {...defaultProps}
+      value={{
+        sqlExpression: 'Count *',
+        label: 'adhoc column',
+        expressionType: 'SQL',
+      }}
+    />,
+    { useDnd: true },
+  );
+  expect(screen.getByText('adhoc column')).toBeVisible();
+  expect(screen.getByLabelText('calculator')).toBeVisible();
+});