From 304e6ed0b86d6961322766e37ac59d677f4dedbe Mon Sep 17 00:00:00 2001
From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Date: Tue, 25 Jan 2022 14:34:56 -0600
Subject: [PATCH] Columns tab name field no longer editable, calculated columns
 rows now vertically aligned (#18164)

---
 .../Datasource/DatasourceEditor.jsx           | 41 ++++++++++---------
 .../Datasource/DatasourceEditor.test.jsx      |  2 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index bfb55e20f31df..e821ddb276e51 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -1271,7 +1271,6 @@ class DatasourceEditor extends React.PureComponent {
               </ColumnButtonWrapper>
               <ColumnCollectionTable
                 className="columns-table"
-                editableColumnName
                 columns={this.state.databaseColumns}
                 datasource={datasource}
                 onColumnsChange={databaseColumns =>
@@ -1291,25 +1290,27 @@ class DatasourceEditor extends React.PureComponent {
             }
             key={3}
           >
-            <ColumnCollectionTable
-              columns={this.state.calculatedColumns}
-              onColumnsChange={calculatedColumns =>
-                this.setColumns({ calculatedColumns })
-              }
-              onDatasourceChange={this.onDatasourceChange}
-              datasource={datasource}
-              editableColumnName
-              showExpression
-              allowAddItem
-              allowEditDataType
-              itemGenerator={() => ({
-                column_name: '<new column>',
-                filterable: true,
-                groupby: true,
-                expression: '<enter SQL expression here>',
-                __expanded: true,
-              })}
-            />
+            <StyledColumnsTabWrapper>
+              <ColumnCollectionTable
+                columns={this.state.calculatedColumns}
+                onColumnsChange={calculatedColumns =>
+                  this.setColumns({ calculatedColumns })
+                }
+                onDatasourceChange={this.onDatasourceChange}
+                datasource={datasource}
+                editableColumnName
+                showExpression
+                allowAddItem
+                allowEditDataType
+                itemGenerator={() => ({
+                  column_name: '<new column>',
+                  filterable: true,
+                  groupby: true,
+                  expression: '<enter SQL expression here>',
+                  __expanded: true,
+                })}
+              />
+            </StyledColumnsTabWrapper>
           </Tabs.TabPane>
           <Tabs.TabPane key={4} tab={t('Settings')}>
             <Row gutter={16}>
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index c3904d743737c..dec75afdc33c9 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
@@ -78,7 +78,7 @@ describe('DatasourceEditor', () => {
     });
     userEvent.click(getToggles[0]);
     const getTextboxes = screen.getAllByRole('textbox');
-    expect(getTextboxes.length).toEqual(12);
+    expect(getTextboxes.length).toEqual(5);
 
     const inputLabel = screen.getByPlaceholderText('Label');
     const inputDescription = screen.getByPlaceholderText('Description');