From 26e793a86ae0b4c3f54030975be25720be49f3d3 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Thu, 19 Nov 2020 17:11:06 +0530
Subject: [PATCH] Show api datasource list on focus (#1668)

---
 .../editorComponents/CodeEditor/EditorConfig.ts    |  1 +
 .../editorComponents/CodeEditor/index.tsx          | 14 ++++++++++++++
 .../CodeEditor/styledComponents.ts                 | 11 ++++++++++-
 .../form/fields/EmbeddedDatasourcePathField.tsx    |  7 +++++--
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
index e51e08c86b..f2d3f93b6f 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
+++ b/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;
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index e3ccc86ecc..29e17b9fdb 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/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();
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index 00b657e25e..81a5f109e6 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/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
diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 7e6ea8db7f..b51b50a46e 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/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;
+        },
       };
     };
   };