chore: Help user to find the input fields in the dataset editor (#17824)

* Updated fields in Metrics and Calculated Columns tabs inside dataset editor, deleted label in expanded Metrics tab

* Fix tests

* Vertically aligned rows in columns tab

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -118,6 +118,16 @@ const StyledLabelWrapper = styled.div`
   }
 `;
 
+const StyledColumnsTabWrapper = styled.div`
+  .table > tbody > tr > td {
+    vertical-align: middle;
+  }
+
+  .ant-tag {
+    margin-top: ${({ theme }) => theme.gridUnit}px;
+  }
+`;
+
 const checkboxGenerator = (d, onChange) => (
   <CheckboxControl value={d} onChange={onChange} />
 );
@@ -314,7 +324,7 @@ function ColumnCollectionTable({
                   details={record.certification_details}
                 />
               )}
-              <EditableTitle canEdit title={v} onSaveTitle={onItemChange} />
+              <TextControl value={v} onChange={onItemChange} />
             </StyledLabelWrapper>
           ) : (
             <StyledLabelWrapper>
@@ -1078,11 +1088,6 @@ class DatasourceEditor extends React.PureComponent {
         expandFieldset={
           <FormContainer>
             <Fieldset compact>
-              <Field
-                fieldKey="verbose_name"
-                label={t('Label')}
-                control={<TextControl controlId="verbose_name" />}
-              />
               <Field
                 fieldKey="description"
                 label={t('Description')}
@@ -1165,15 +1170,17 @@ class DatasourceEditor extends React.PureComponent {
             </FlexRowContainer>
           ),
           verbose_name: (v, onChange) => (
-            <EditableTitle canEdit title={v} onSaveTitle={onChange} />
+            <TextControl canEdit value={v} onChange={onChange} />
           ),
           expression: (v, onChange) => (
-            <EditableTitle
+            <TextAreaControl
               canEdit
-              title={v}
-              onSaveTitle={onChange}
+              initialValue={v}
+              onChange={onChange}
               extraClasses={['datasource-sql-expression']}
-              multiLine
+              language="sql"
+              offerEditInModal={false}
+              minLines={5}
             />
           ),
           description: (v, onChange, label) => (
@@ -1247,7 +1254,7 @@ class DatasourceEditor extends React.PureComponent {
             }
             key={2}
           >
-            <div>
+            <StyledColumnsTabWrapper>
               <ColumnButtonWrapper>
                 <span className="m-t-10 m-r-10">
                   <Button
@@ -1264,6 +1271,7 @@ class DatasourceEditor extends React.PureComponent {
               </ColumnButtonWrapper>
               <ColumnCollectionTable
                 className="columns-table"
+                editableColumnName
                 columns={this.state.databaseColumns}
                 datasource={datasource}
                 onColumnsChange={databaseColumns =>
@@ -1272,7 +1280,7 @@ class DatasourceEditor extends React.PureComponent {
                 onDatasourceChange={this.onDatasourceChange}
               />
               {this.state.metadataLoading && <Loading />}
-            </div>
+            </StyledColumnsTabWrapper>
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={

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(5);
+    expect(getTextboxes.length).toEqual(12);
 
     const inputLabel = screen.getByPlaceholderText('Label');
     const inputDescription = screen.getByPlaceholderText('Description');
@@ -122,10 +122,9 @@ describe('DatasourceEditor', () => {
     });
     expect(addBtn).toBeInTheDocument();
     userEvent.click(addBtn);
-    const newColumn = screen.getByRole('button', {
-      name: /<new column>/i,
-    });
-    expect(newColumn).toBeInTheDocument();
+    // newColumn (Column name) is the first textbox in the tab
+    const newColumn = screen.getAllByRole('textbox', { name: '' })[0];
+    expect(newColumn).toHaveValue('<new column>');
   });
 
   it('renders isSqla fields', () => {