Merge apache 963dce6

README.md

@@ -203,6 +203,7 @@ the world know they are using Superset. Join our growing community!
  1. [Twitter](https://twitter.com/)
  1. [Udemy](https://www.udemy.com/)
  1. [VIPKID](https://www.vipkid.com.cn/)
+ 1. [WeSure](https://www.wesure.cn/)
  1. [Windsor.ai](https://www.windsor.ai/)
  1. [Yahoo!](https://yahoo.com/)
  1. [Zaihang](http://www.zaih.com/)

superset/assets/spec/javascripts/components/TableSelector_spec.jsx

@@ -23,7 +23,7 @@ import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
 import thunk from 'redux-thunk';
 
-import { table, defaultQueryEditor, initialState, tables } from '../sqllab/fixtures';
+import { initialState, tables } from '../sqllab/fixtures';
 import TableSelector from '../../../src/components/TableSelector';
 
 describe('TableSelector', () => {
@@ -89,31 +89,42 @@ describe('TableSelector', () => {
         }));
 
     it('should handle table name', () => {
-      const queryEditor = {
-        ...defaultQueryEditor,
-        dbId: 1,
-        schema: 'main',
-      };
-
-      const mockTableOptions = { options: [table] };
-      wrapper.setProps({ queryEditor });
-      fetchMock.get(GET_TABLE_NAMES_GLOB, mockTableOptions, { overwriteRoutes: true });
+      fetchMock.get(GET_TABLE_NAMES_GLOB, tables, { overwriteRoutes: true });
 
-      wrapper
+      return wrapper
         .instance()
         .getTableNamesBySubStr('my table')
         .then((data) => {
           expect(fetchMock.calls(GET_TABLE_NAMES_GLOB)).toHaveLength(1);
-          expect(data).toEqual(mockTableOptions);
+          expect(data).toEqual({
+            options: [
+            {
+              value: 'birth_names',
+              schema: 'main',
+              label: 'birth_names',
+              title: 'birth_names',
+            },
+            {
+              value: 'energy_usage',
+              schema: 'main',
+              label: 'energy_usage',
+              title: 'energy_usage',
+            },
+            {
+              value: 'wb_health_population',
+              schema: 'main',
+              label: 'wb_health_population',
+              title: 'wb_health_population',
+            }],
+          });
           return Promise.resolve();
         });
     });
 
     it('should escape schema and table names', () => {
       const GET_TABLE_GLOB = 'glob:*/superset/tables/1/*/*';
-      const mockTableOptions = { options: [table] };
       wrapper.setProps({ schema: 'slashed/schema' });
-      fetchMock.get(GET_TABLE_GLOB, mockTableOptions, { overwriteRoutes: true });
+      fetchMock.get(GET_TABLE_GLOB, tables, { overwriteRoutes: true });
 
       return wrapper
         .instance()
@@ -139,15 +150,36 @@ describe('TableSelector', () => {
 
     it('should fetch table options', () => {
       fetchMock.get(FETCH_TABLES_GLOB, tables, { overwriteRoutes: true });
-      inst
+      return inst
         .fetchTables(true, 'birth_names')
         .then(() => {
           expect(wrapper.state().tableOptions).toHaveLength(3);
+          expect(wrapper.state().tableOptions).toEqual([
+            {
+              value: 'birth_names',
+              schema: 'main',
+              label: 'birth_names',
+              title: 'birth_names',
+            },
+            {
+              value: 'energy_usage',
+              schema: 'main',
+              label: 'energy_usage',
+              title: 'energy_usage',
+            },
+            {
+              value: 'wb_health_population',
+              schema: 'main',
+              label: 'wb_health_population',
+              title: 'wb_health_population',
+            },
+          ]);
           return Promise.resolve();
         });
     });
 
-    it('should dispatch a danger toast on error', () => {
+    // Test needs to be fixed: Github issue #7768
+    xit('should dispatch a danger toast on error', () => {
       fetchMock.get(FETCH_TABLES_GLOB, { throws: 'error' }, { overwriteRoutes: true });
 
       wrapper
@@ -173,7 +205,7 @@ describe('TableSelector', () => {
       };
       fetchMock.get(FETCH_SCHEMAS_GLOB, schemaOptions, { overwriteRoutes: true });
 
-      wrapper
+      return wrapper
         .instance()
         .fetchSchemas(1)
         .then(() => {
@@ -182,11 +214,16 @@ describe('TableSelector', () => {
         });
     });
 
-    it('should dispatch a danger toast on error', () => {
+    // Test needs to be fixed: Github issue #7768
+    xit('should dispatch a danger toast on error', () => {
       const handleErrors = sinon.stub();
       expect(handleErrors.callCount).toBe(0);
       wrapper.setProps({ handleErrors });
-      fetchMock.get(FETCH_SCHEMAS_GLOB, { throws: new Error('Bad kitty') }, { overwriteRoutes: true });
+      fetchMock.get(
+        FETCH_SCHEMAS_GLOB,
+        { throws: new Error('Bad kitty') },
+        { overwriteRoutes: true },
+      );
       wrapper
         .instance()
         .fetchSchemas(123)
@@ -208,17 +245,21 @@ describe('TableSelector', () => {
 
     it('test 1', () => {
       wrapper.instance().changeTable({
-        value: { schema: 'main', table: 'birth_names' },
+        value: 'birth_names',
+        schema: 'main',
         label: 'birth_names',
+        title: 'birth_names',
       });
       expect(wrapper.state().tableName).toBe('birth_names');
     });
 
     it('should call onTableChange with schema from table object', () => {
       wrapper.setProps({ schema: null });
       wrapper.instance().changeTable({
-        value: { schema: 'other_schema', table: 'my_table' },
+        value: 'my_table',
+        schema: 'other_schema',
         label: 'other_schema.my_table',
+        title: 'other_schema.my_table',
       });
       expect(mockedProps.onTableChange.getCall(0).args[0]).toBe('my_table');
       expect(mockedProps.onTableChange.getCall(0).args[1]).toBe('other_schema');

superset/assets/spec/javascripts/sqllab/fixtures.js

@@ -343,16 +343,22 @@ export const databases = {
 export const tables = {
   options: [
     {
-      value: { schema: 'main', table: 'birth_names' },
+      value: 'birth_names',
+      schema: 'main',
       label: 'birth_names',
+      title: 'birth_names',
     },
     {
-      value: { schema: 'main', table: 'energy_usage' },
+      value: 'energy_usage',
+      schema: 'main',
       label: 'energy_usage',
+      title: 'energy_usage',
     },
     {
-      value: { schema: 'main', table: 'wb_health_population' },
+      value: 'wb_health_population',
+      schema: 'main',
       label: 'wb_health_population',
+      title: 'wb_health_population',
     },
   ],
 };

superset/assets/src/addSlice/AddSliceContainer.jsx

@@ -31,7 +31,7 @@ const propTypes = {
   })).isRequired,
 };
 
-const styleSelectWidth = { width: 300 };
+const styleSelectWidth = { width: 600 };
 
 export default class AddSliceContainer extends React.PureComponent {
   constructor(props) {
@@ -83,18 +83,19 @@ export default class AddSliceContainer extends React.PureComponent {
             <div style={styleSelectWidth}>
               <Select
                 clearable={false}
-                style={styleSelectWidth}
+                ignoreAccents={false}
                 name="select-datasource"
                 onChange={this.changeDatasource}
                 options={this.props.datasources}
                 placeholder={t('Choose a datasource')}
+                style={styleSelectWidth}
                 value={this.state.datasourceValue}
-                width={200}
+                width={600}
               />
             </div>
             <p className="text-muted">
               {t(
-                'If the datasource your are looking for is not ' +
+                'If the datasource you are looking for is not ' +
                 'available in the list, ' +
                 'follow the instructions on the how to add it on the ')}
               <a href="https://superset.apache.org/tutorial.html">{t('Superset tutorial')}</a>

superset/assets/src/components/FilterableTable/FilterableTable.jsx

@@ -115,6 +115,7 @@ export default class FilterableTable extends PureComponent {
     super(props);
     this.list = List(this.formatTableData(props.data));
     this.addJsonModal = this.addJsonModal.bind(this);
+    this.getCellContent = this.getCellContent.bind(this);
     this.renderGridCell = this.renderGridCell.bind(this);
     this.renderGridCellHeader = this.renderGridCellHeader.bind(this);
     this.renderGrid = this.renderGrid.bind(this);
@@ -124,6 +125,13 @@ export default class FilterableTable extends PureComponent {
     this.rowClassName = this.rowClassName.bind(this);
     this.sort = this.sort.bind(this);
 
+    // columns that have complex type and were expanded into sub columns
+    this.complexColumns = props.orderedColumnKeys
+      .reduce((obj, key) => ({
+        ...obj,
+        [key]: props.expandedColumns.some(name => name.startsWith(key + '.')),
+      }), {});
+
     this.widthsForColumnsByKey = this.getWidthsForColumns();
     this.totalTableWidth = props.orderedColumnKeys
       .map(key => this.widthsForColumnsByKey[key])
@@ -152,21 +160,30 @@ export default class FilterableTable extends PureComponent {
     const widthsByColumnKey = {};
     this.props.orderedColumnKeys.forEach((key) => {
       const colWidths = this.list
-        .map(d => getTextWidth(d[key]) + PADDING) // get width for each value for a key
-        .push(getTextWidth(key) + PADDING); // add width of column key to end of list
+        // get width for each value for a key
+        .map(d => getTextWidth(
+          this.getCellContent({ cellData: d[key], columnKey: key })) + PADDING,
+        )
+        // add width of column key to end of list
+        .push(getTextWidth(key) + PADDING);
       // set max width as value for key
       widthsByColumnKey[key] = Math.max(...colWidths);
     });
     return widthsByColumnKey;
   }
 
-  fitTableToWidthIfNeeded() {
-    const containerWidth = this.container.clientWidth;
-    if (this.totalTableWidth < containerWidth) {
-      // fit table width if content doesn't fill the width of the container
-      this.totalTableWidth = containerWidth;
+  getCellContent({ cellData, columnKey }) {
+    const content = String(cellData);
+    const firstCharacter = content.substring(0, 1);
+    let truncated;
+    if (firstCharacter === '[') {
+      truncated = '[…]';
+    } else if (firstCharacter === '{') {
+      truncated = '{…}';
+    } else {
+      truncated = '';
     }
-    this.setState({ fitted: true });
+    return this.complexColumns[columnKey] ? truncated : content;
   }
 
   formatTableData(data) {
@@ -213,6 +230,15 @@ export default class FilterableTable extends PureComponent {
     this.setState({ sortBy, sortDirection });
   }
 
+  fitTableToWidthIfNeeded() {
+    const containerWidth = this.container.clientWidth;
+    if (this.totalTableWidth < containerWidth) {
+      // fit table width if content doesn't fill the width of the container
+      this.totalTableWidth = containerWidth;
+    }
+    this.setState({ fitted: true });
+  }
+
   addJsonModal(node, jsonObject, jsonString) {
     return (
       <ModalTrigger
@@ -260,13 +286,14 @@ export default class FilterableTable extends PureComponent {
   renderGridCell({ columnIndex, key, rowIndex, style }) {
     const columnKey = this.props.orderedColumnKeys[columnIndex];
     const cellData = this.list.get(rowIndex)[columnKey];
+    const content = this.getCellContent({ cellData, columnKey });
     const cellNode = (
       <div
         key={key}
         style={{ ...style, top: style.top - GRID_POSITION_ADJUSTMENT }}
         className={`grid-cell ${this.rowClassName({ index: rowIndex })}`}
       >
-        {cellData}
+        {content}
       </div>
     );
 
@@ -332,8 +359,8 @@ export default class FilterableTable extends PureComponent {
     );
   }
 
-  renderTableCell({ cellData }) {
-    const cellNode = String(cellData);
+  renderTableCell({ cellData, columnKey }) {
+    const cellNode = this.getCellContent({ cellData, columnKey });
     const jsonObject = safeJsonObjectParse(cellData);
     if (jsonObject) {
       return this.addJsonModal(cellNode, jsonObject, cellData);
@@ -396,7 +423,7 @@ export default class FilterableTable extends PureComponent {
           >
             {orderedColumnKeys.map(columnKey => (
               <Column
-                cellRenderer={this.renderTableCell}
+                cellRenderer={({ cellData }) => this.renderTableCell({ cellData, columnKey })}
                 dataKey={columnKey}
                 disableSort={false}
                 headerRenderer={this.renderTableHeader}