fix: Add Item Overflow on Dataset Editor (#10983)

* move add item button to the top

* fix cypress

* fix cypress

superset-frontend/cypress-base/cypress/integration/explore/control.test.ts

@@ -24,18 +24,16 @@ import { FORM_DATA_DEFAULTS, NUM_METRIC } from './visualizations/shared.helper';
 describe('Datasource control', () => {
   const newMetricName = `abc${Date.now()}`;
 
-  before(() => {
-    cy.server();
-    cy.login();
-    cy.route('GET', '/superset/explore_json/**').as('getJson');
-    cy.route('POST', '/superset/explore_json/**').as('postJson');
-  });
-
   it('should allow edit datasource', () => {
     let numScripts = 0;
 
+    cy.login();
+    cy.server();
+    cy.route('GET', '/superset/explore_json/**').as('getJson');
+    cy.route('POST', '/superset/explore_json/**').as('postJson');
     cy.visitChartByName('Num Births Trend');
     cy.verifySliceSuccess({ waitAlias: '@postJson' });
+
     cy.get('#datasource_menu').click();
 
     cy.get('script').then(nodes => {
@@ -50,7 +48,7 @@ describe('Datasource control', () => {
     });
 
     // create new metric
-    cy.get('table button').contains('Add Item', { timeout: 10000 }).click();
+    cy.get('button').contains('Add Item', { timeout: 10000 }).click();
     cy.get('input[value="<new metric>"]').click();
     cy.get('input[value="<new metric>"]')
       .focus()

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -160,12 +160,7 @@ export default class CRUDCollection extends React.PureComponent<
 
   renderHeaderRow() {
     const cols = this.effectiveTableColumns();
-    const {
-      allowAddItem,
-      allowDeletes,
-      expandFieldset,
-      extraButtons,
-    } = this.props;
+    const { allowDeletes, expandFieldset, extraButtons } = this.props;
     return (
       <thead>
         <tr>
@@ -174,16 +169,9 @@ export default class CRUDCollection extends React.PureComponent<
             <th key={col}>{this.getLabel(col)}</th>
           ))}
           {extraButtons}
-          {allowDeletes && !allowAddItem && (
+          {allowDeletes && (
             <th key="delete-item" aria-label="Delete" className="tiny-cell" />
           )}
-          {allowAddItem && (
-            <th key="add-item">
-              <Button buttonStyle="primary" onClick={this.onAddItem}>
-                <i className="fa fa-plus" /> {t('Add Item')}
-              </Button>
-            </th>
-          )}
         </tr>
       </thead>
     );
@@ -293,6 +281,17 @@ export default class CRUDCollection extends React.PureComponent<
   render() {
     return (
       <div className="CRUD">
+        <span className="float-right m-t-10 m-r-10">
+          {this.props.allowAddItem && (
+            <Button
+              buttonSize="sm"
+              buttonStyle="primary"
+              onClick={this.onAddItem}
+            >
+              <i className="fa fa-plus" /> {t('Add Item')}
+            </Button>
+          )}
+        </span>
         <table className="table">
           {this.renderHeaderRow()}
           {this.renderTableBody()}

superset-frontend/stylesheets/superset.less

@@ -20,7 +20,7 @@
 @import './less/variables.less';
 @import './less/index.less';
 
-@datasource-sql-expression-width: 450px;
+@datasource-sql-expression-width: 315px;
 
 .alert.alert-danger > .debugger {
   color: @danger;
@@ -229,6 +229,7 @@ table.table-no-hover tr:hover {
   font-family: @font-family-monospace;
   display: inline-block;
   min-width: @datasource-sql-expression-width;
+  width: 100%;
 }
 
 .editable-title.datasource-sql-expression input {