Fix auto complete in codemirror due to eslint update (#320)

* Fix autocomplete bug due to eslint update * Rename string to originalText
pinterest · Nov 17, 2020 · 2813828 · 2813828
1 parent 6463f86
commit 2813828
Showing 1 changed file with 21 additions and 55 deletions.
diff --git a/datahub/webapp/lib/sql-helper/sql-autocompleter.ts b/datahub/webapp/lib/sql-helper/sql-autocompleter.ts
@@ -11,10 +11,18 @@ interface ILineAnalysis {
     alias: Record<string, TableToken>;
 }
 
+/**
+ * CompletionRow used by Codemirror.
+ *
+ * originalText: the text we are replacing
+ * text: the text we autocomplete to
+ * label: the text we show in autocomplete
+ */
 interface ICompletionRow {
-    searchText: string;
-    displayText: string;
+    originalText: string;
+    text: string;
     label: string;
+
     tooltip: string;
     render: (element: HTMLElement, self: any, data: ICompletionRow) => void;
     isGoldenItem?: boolean;
@@ -94,19 +102,6 @@ function findLast(arr: Array<[number, any]>, num: number) {
     return arr[index];
 }
 
-function calculateCommonPrefixLength(str1: string, str2: string) {
-    let count = 0;
-    while (count < str1.length && count < str2.length) {
-        if (str1.charAt(count) !== str2.charAt(count)) {
-            break;
-        }
-
-        count++;
-    }
-
-    return count;
-}
-
 interface IAutoCompleteResult {
     list: ICompletionRow[];
     from: CodeMirror.Position;
@@ -338,42 +333,18 @@ export class SqlAutoCompleter {
                           // this case is for schemaName.tableName case
                           index === 1
                               ? word.replace(
-                                    data.searchText,
-                                    `<b style='font-weight: bold'>${data.searchText}</b>`
+                                    data.originalText,
+                                    `<b style='font-weight: bold'>${data.originalText}</b>`
                                 )
                               : word
                       )
                       .join('.')
                 : data.label.replace(
-                      data.searchText,
-                      `<b style='font-weight: bold'>${data.searchText}</b>`
+                      data.originalText,
+                      `<b style='font-weight: bold'>${data.originalText}</b>`
                   );
 
         const isGoldenItem = data.isGoldenItem;
-
-        // const hasTrustworthiness = data.tooltip !== 'keyword';
-        // const trustworthiness = data.trustworthiness;
-        // const trustworthinessLevel = hasTrustworthiness ? (
-        //     trustworthiness < 50 ? 'low-trustworthiness' :
-        //     trustworthiness < 80 ? 'medium-trustworthiness' : 'high-trustworthiness'
-        // ) : '';
-
-        // const redHue = 353;
-        // const greenHue = 120;
-        // const hueDelta = (360 - redHue) + greenHue;
-        // const hue = 120 - (((100 - trustworthiness)/100) * hueDelta);
-
-        // const trustworthinessSpanStyle = hasTrustworthiness ? (
-        //     `color: hsl(${hue}, 100%, 25%)`
-        // ) : '';
-
-        // const trustworthinessDOM = hasTrustworthiness ? (
-        //     `<span class="trustworthiness-value">${trustworthiness}</span><i class="fa fa-shield trustworthiness-icon"></i>`
-        // ) : '';
-        // <span class="code-editor-autocomplete-span code-editor-trustworthiness-span" data-tooltip="Trustworthiness Score" style="${trustworthinessSpanStyle}">
-        //     ${trustworthinessDOM}
-        // </span>
-
         const goldenItemIconDOM =
             'isGoldenItem' in data
                 ? `<i class="fa fa-check-circle golden-item-icon ${
@@ -403,19 +374,13 @@ export class SqlAutoCompleter {
     }
 
     private getAutoSuggestionFormatters(type: string, text: string): Formatter {
-        /*
-         *  string: the text we are replacing
-         *  text: the text we autocomplete string to
-         *  label: the text we show in autocomplete
-         */
-
         const keywordFormatter: Formatter = (word) => {
             const upperCasedWord = word.toUpperCase();
             const upperCasedString = text.toUpperCase();
             const score = -upperCasedWord.length;
             return {
-                searchText: upperCasedString,
-                displayText: upperCasedWord,
+                originalText: upperCasedString,
+                text: upperCasedWord,
                 label: upperCasedWord,
                 tooltip: 'keyword',
                 render: this.autoSuggestionRenderer,
@@ -429,20 +394,21 @@ export class SqlAutoCompleter {
             // we should give it a better rank
             const isGoldenItem = false;
             return {
-                searchText: text,
-                displayText: word,
+                originalText: text,
+                text: word,
                 label: word,
                 tooltip: context,
                 render: this.autoSuggestionRenderer,
+                isGoldenItem,
                 score: 0,
             };
         };
 
         const hierarchicalFormatter: Formatter = (context, word, label) => {
             const isGoldenItem = false;
             return {
-                searchText: text,
-                displayText: word,
+                originalText: text,
+                text: word,
                 label,
                 tooltip: context,
                 render: this.autoSuggestionRenderer,