fix(sqllab): Handle long table names in SQL Lab (#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>
This commit is contained in:
David Aaron Suddjian
2020-08-11 09:50:46 -07:00
committed by GitHub
parent a37b635674
commit 83af9d12f8
3 changed files with 9 additions and 5 deletions

View File

@@ -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');

View File

@@ -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 {

View File

@@ -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