Show api datasource list on focus (#1668)

app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts

@@ -42,6 +42,7 @@ export type HintHelper = (editor: CodeMirror.Editor, data: DataTree) => Hinter;
 export type Hinter = {
   showHint: (editor: CodeMirror.Editor) => void;
   update?: (data: DataTree) => void;
+  trigger?: (editor: CodeMirror.Editor) => void;
 };
 
 export type MarkHelper = (editor: CodeMirror.Editor) => void;

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -137,8 +137,10 @@ class CodeEditor extends Component<Props, State> {
 
       this.editor.on("change", _.debounce(this.handleChange, 300));
       this.editor.on("change", this.handleAutocompleteVisibility);
+      this.editor.on("change", this.onChangeTigger);
       this.editor.on("keyup", this.handleAutocompleteHide);
       this.editor.on("focus", this.handleEditorFocus);
+      this.editor.on("focus", this.onFocusTrigger);
       this.editor.on("blur", this.handleEditorBlur);
       if (this.props.height) {
         this.editor.setSize(0, this.props.height);
@@ -202,6 +204,18 @@ class CodeEditor extends Component<Props, State> {
     });
   }
 
+  onFocusTrigger = (cm: CodeMirror.Editor) => {
+    if (!cm.state.completionActive) {
+      this.hinters.forEach(hinter => hinter.trigger && hinter.trigger(cm));
+    }
+  };
+
+  onChangeTigger = (cm: CodeMirror.Editor) => {
+    if (this.state.isFocused) {
+      this.hinters.forEach(hinter => hinter.trigger && hinter.trigger(cm));
+    }
+  };
+
   handleEditorFocus = () => {
     this.setState({ isFocused: true });
     this.editor.refresh();

app/client/src/components/editorComponents/CodeEditor/styledComponents.ts

@@ -17,7 +17,6 @@ export const HintStyles = createGlobalStyle<{ editorTheme: EditorTheme }>`
     font-size: 90%;
     font-family: monospace;
     max-height: 20em;
-    width: 250px;
     overflow-y: auto;
     background: ${props =>
       props.editorTheme === EditorTheme.DARK ? "#090A0F" : "#ffffff"};
@@ -34,10 +33,20 @@ export const HintStyles = createGlobalStyle<{ editorTheme: EditorTheme }>`
       props.editorTheme === EditorTheme.DARK ? "#F4F4F4" : "#1E242B"};
     cursor: pointer;
     display: flex;
+    width: 250px;
     align-items: center;
     font-size: 13px;
   }
 
+  .datasource-hint {
+    padding: 5px;
+    display: block;
+    width: 500px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; 
+  }
+
   li.CodeMirror-hint-active {
     background: ${props =>
       props.editorTheme === EditorTheme.DARK

app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx

@@ -143,12 +143,11 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
     const { datasourceList } = this.props;
     return () => {
       return {
-        showHint: (editor: CodeMirror.Editor) => {
+        trigger: (editor: CodeMirror.Editor) => {
           const value = editor.getValue();
           const parsed = this.parseInputValue(value);
           if (
             parsed.path === "" &&
-            !!value &&
             this.props.datasource &&
             !("id" in this.props.datasource)
           ) {
@@ -164,6 +163,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
                   .map(datasource => ({
                     text: datasource.datasourceConfiguration.url,
                     data: datasource,
+                    className: "datasource-hint",
                   }));
                 const hints = {
                   list,
@@ -182,6 +182,9 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
             });
           }
         },
+        showHint: () => {
+          return;
+        },
       };
     };
   };