fix(sqllab): Handle long table names in SQL Lab (apache#10518)

* widen the autocomplete menu for table names * display the full table name in a tooltip * license * Update superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * src importing * move autocomplete width css to main.less * use html title attribute instead of tooltip Co-authored-by: Evan Rusackas <evan@preset.io>
ofekisr · Oct 5, 2020 · dae2749 · dae2749
1 parent e4075af
commit dae2749
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper.tsx
@@ -22,14 +22,14 @@ import 'brace/mode/sql';
 import 'brace/theme/github';
 import 'brace/ext/language_tools';
 import ace from 'brace';
-import { areArraysShallowEqual } from '../../reduxUtils';
-import sqlKeywords from '../utils/sqlKeywords';
+import { areArraysShallowEqual } from 'src/reduxUtils';
+import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import {
   SCHEMA_AUTOCOMPLETE_SCORE,
   TABLE_AUTOCOMPLETE_SCORE,
   COLUMN_AUTOCOMPLETE_SCORE,
   SQL_FUNCTIONS_AUTOCOMPLETE_SCORE,
-} from '../constants';
+} from 'src/SqlLab/constants';
 
 const langTools = ace.acequire('ace/ext/language_tools');
 

diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
@@ -421,6 +421,10 @@ div.tablePopover {
   border: 1px solid @gray-light;
   font-feature-settings: @font-feature-settings;
   font-family: @font-family-monospace;
+
+  &.ace_autocomplete {
+    width: 520px;
+  }
 }
 
 .Select__menu-outer {

diff --git a/superset-frontend/src/components/TableSelector.jsx b/superset-frontend/src/components/TableSelector.jsx
@@ -246,7 +246,7 @@ export default class TableSelector extends React.PureComponent {
 
   renderDatabaseOption(db) {
     return (
-      <span>
+      <span title={db.database_name}>
         <Label bsStyle="default" className="m-r-5">
           {db.backend}
         </Label>
@@ -257,7 +257,7 @@ export default class TableSelector extends React.PureComponent {
 
   renderTableOption(option) {
     return (
-      <span className="TableLabel">
+      <span className="TableLabel" title={option.label}>
         <span className="m-r-5">
           <small className="text-muted">
             <i