fix: Autocomplete now works with multiple bindings (#16314)

Fixes #16288 Fixes #16158 Fixes #16188 Fixes #15859
appsmithorg · Sep 19, 2022 · 9a1fa98 · 9a1fa98
1 parent ee45ad1
commit 9a1fa98
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 78 deletions.
diff --git a/...ient/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts b/...ient/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts
@@ -5,14 +5,15 @@ const {
   AggregateHelper: agHelper,
   ApiPage,
   CommonLocators,
+  DataSources,
   EntityExplorer,
   JSEditor: jsEditor,
 } = ObjectsRegistry;
 
 const jsObjectBody = `export default {
 	myVar1: [],
 	myVar2: {},
-	myFun1(){
+	myFun1(){   
 
 	},
 	myFun2: async () => {
@@ -39,24 +40,49 @@ describe("Autocomplete tests", () => {
 
     // 1. Button group widget autocomplete verification
     agHelper.TypeText(CommonLocators._codeMirrorTextArea, "ButtonGroup1.");
-    agHelper.GetNAssertElementText(CommonLocators._hints, "groupButtons");
+    agHelper.GetNAssertElementText(CommonLocators._hints, "isVisible");
+    agHelper.GetNClickByContains(CommonLocators._hints, "isVisible");
     agHelper.Sleep();
-    agHelper.GetNClickByContains(CommonLocators._hints, "groupButtons");
-    agHelper.TypeText(CommonLocators._codeMirrorTextArea, ".");
-    agHelper.GetNAssertElementText(CommonLocators._hints, "groupButton1");
-    agHelper.Sleep();
-    agHelper.GetNClickByContains(CommonLocators._hints, "groupButton1");
 
     // 2. Document view widget autocomplete verification
-
     agHelper.SelectNRemoveLineText(CommonLocators._codeMirrorTextArea);
+
+    agHelper.GetNClick(jsEditor._lineinJsEditor(5));
+
     agHelper.TypeText(CommonLocators._codeMirrorTextArea, "DocumentViewer1.");
     agHelper.GetNAssertElementText(CommonLocators._hints, "docUrl");
     agHelper.Sleep();
     agHelper.GetNClickByContains(CommonLocators._hints, "docUrl");
   });
 
-  it("2. Bug #15568 Verify browser JavaScript APIs in autocomplete ", () => {
+  it("2. Check for bindings not available in other page", () => {
+    // dependent on above case: 1st page should have DocumentViewer widget
+    EntityExplorer.AddNewPage();
+
+    // create js object
+    jsEditor.CreateJSObject(jsObjectBody, {
+      paste: true,
+      completeReplace: true,
+      toRun: false,
+      shouldCreateNewJSObj: true,
+      prettify: false,
+    });
+
+    // focus on 5th line
+    agHelper.GetNClick(jsEditor._lineinJsEditor(5));
+    agHelper.TypeText(CommonLocators._codeMirrorTextArea, "D");
+    agHelper.GetNAssertElementText(
+      CommonLocators._hints,
+      "docUrl",
+      "not.have.text",
+    );
+    agHelper.TypeText(
+      CommonLocators._codeMirrorTextArea,
+      "ocumentViewer.docUrl",
+    );
+  });
+
+  it("3. Bug #15568 Verify browser JavaScript APIs in autocomplete ", () => {
     // Using same js object
     agHelper.SelectNRemoveLineText(CommonLocators._codeMirrorTextArea);
     // focus on 5th line
@@ -106,32 +132,21 @@ describe("Autocomplete tests", () => {
         test.haveOrNotHave ? "have.text" : "not.have.text",
       );
       agHelper.SelectNRemoveLineText(CommonLocators._codeMirrorTextArea);
-
-      //const deleteCharCount = (JSAPIsToTest[index - 1]?.type || " ").length;
-      // cy.get(CommonLocators._codeMirrorTextArea)
-      //   .focus()
-      //   // remove previously typed code
-      //   .type(deleteCharCount ? "{backspace}".repeat(deleteCharCount) : " ")
-      //   .wait(20)
-      //   .type(test.type);
     });
-    //EntityExplorer.ActionContextMenuByEntityName("JSObject1", "Delete", "Are you sure?", true);
   });
 
-  it("3. JSObject this. autocomplete", () => {
+  it("4. JSObject this. autocomplete", () => {
     // Using same js object
-    //agHelper.SelectNRemoveLineText(CommonLocators._codeMirrorTextArea);
     // focus on 5th line
     agHelper.GetNClick(jsEditor._lineinJsEditor(5));
     agHelper.TypeText(CommonLocators._codeMirrorTextArea, "this.");
 
     ["myFun2()", "myVar1", "myVar2"].forEach((element, index) => {
       agHelper.AssertContains(element);
-      //cy.get(`.CodeMirror-hints > :nth-child(${index + 1})`).contains(element);
     });
   });
 
-  it("4. Api data with array of object autocompletion test", () => {
+  it("5. Api data with array of object autocompletion test", () => {
     ApiPage.CreateAndFillApi("https://mock-api.appsmith.com/users");
     agHelper.Sleep(2000);
     ApiPage.RunAPI();
@@ -149,7 +164,7 @@ describe("Autocomplete tests", () => {
     agHelper.TypeText(CommonLocators._codeMirrorTextArea, "mail");
   });
 
-  it("5. Local variables & complex data autocompletion test", () => {
+  it("6. Local variables & complex data autocompletion test", () => {
     // Using same js object
     agHelper.SelectNRemoveLineText(CommonLocators._codeMirrorTextArea);
     const users = [
@@ -200,4 +215,65 @@ describe("Autocomplete tests", () => {
       "Are you sure?",
     );
   });
+
+  it("7. Autocompletion for bindings inside array and objects", () => {
+    DataSources.CreateDataSource("Mongo", true, false);
+    cy.get("@dsName").then(($dsName) => {
+      DataSources.CreateNewQueryInDS(($dsName as unknown) as string);
+      DataSources.ValidateNSelectDropdown(
+        "Commands",
+        "Find Document(s)",
+        "Insert Document(s)",
+      );
+
+      cy.xpath(CommonLocators._inputFieldByName("Documents")).then(
+        ($field: any) => {
+          agHelper.UpdateCodeInput($field, `{\n"_id": "{{appsmith}}"\n}`);
+
+          cy.wrap($field)
+            .find(".CodeMirror")
+            .find("textarea")
+            .parents(".CodeMirror")
+            .first()
+            .then((ins: any) => {
+              const input = ins[0].CodeMirror;
+              input.focus();
+              cy.wait(200);
+              cy.get(CommonLocators._codeMirrorTextArea)
+                .eq(1)
+                .focus()
+                .type(
+                  "{downArrow}{downArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}",
+                )
+                .type(".");
+
+              agHelper.GetNAssertElementText(
+                CommonLocators._hints,
+                "geolocation",
+              );
+
+              cy.get(".t--close-editor").click();
+            });
+        },
+      );
+    });
+  });
+
+  it("8. Multiple binding in single line", () => {
+    DataSources.CreateDataSource("Postgres", true, false);
+    cy.get("@dsName").then(($dsName) => {
+      DataSources.CreateNewQueryInDS(
+        ($dsName as unknown) as string,
+        "SELECT * FROM worldCountryInfo where {{appsmith.store}} {{appsmith}}",
+      );
+
+      cy.get(CommonLocators._codeMirrorTextArea)
+        .eq(0)
+        .focus()
+        .type("{downArrow}{leftArrow}{leftArrow}");
+
+      agHelper.TypeText(CommonLocators._codeMirrorTextArea, ".");
+      agHelper.GetNAssertElementText(CommonLocators._hints, "geolocation");
+    });
+  });
 });
diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts
@@ -1,11 +1,11 @@
 export const WIDGET = {
   INPUT_V2: "inputwidgetv2",
   TEXT: "textwidget",
-  TEXTNAME : (index:string) => `Text${index}`,
+  TEXTNAME: (index: string) => `Text${index}`,
   PHONE_INPUT: "phoneinputwidget",
   CURRENCY_INPUT: "currencyinputwidget",
   BUTTON: "buttonwidget",
-  BUTTONNAME : (index:string) => `Button${index}`,
+  BUTTONNAME: (index: string) => `Button${index}`,
   MULTISELECT: "multiselectwidgetv2",
   BUTTON_GROUP: "buttongroupwidget",
   TREESELECT: "singleselecttreewidget",
@@ -36,8 +36,8 @@ export const PROPERTY_SELECTOR = {
   text: ".t--property-control-text",
   defaultValue: ".t--property-control-defaultselectedvalues",
   propertyName: ".t--property-control-propertyname",
-  onClickFieldName : "onClick",
-  TextFieldName: "Text"
+  onClickFieldName: "onClick",
+  TextFieldName: "Text",
 };
 type ValueOf<T> = T[keyof T];
 

diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts
@@ -25,9 +25,7 @@ export class AggregateHelper {
       ? "{cmd}{shift}{leftArrow}{backspace}"
       : "{shift}{home}{backspace}"
   }`;
-  private selectAll = `${
-    this.isMac ? "{cmd}{a}" : "{ctrl}{a}"
-  }`;
+  private selectAll = `${this.isMac ? "{cmd}{a}" : "{ctrl}{a}"}`;
 
   private selectChars = (noOfChars: number) =>
     `${"{leftArrow}".repeat(noOfChars) + "{shift}{cmd}{leftArrow}{backspace}"}`;
@@ -206,7 +204,7 @@ export class AggregateHelper {
   }
 
   public WaitUntilEleDisappear(selector: string) {
-    let locator = selector.includes("//")
+    const locator = selector.includes("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     locator.waitUntil(($ele) => cy.wrap($ele).should("have.length", 0), {
@@ -232,7 +230,7 @@ export class AggregateHelper {
   }
 
   public WaitUntilEleAppear(selector: string) {
-    let locator = selector.includes("//")
+    const locator = selector.includes("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     locator.waitUntil(($ele) => cy.wrap($ele).should("be.visible"), {
@@ -723,16 +721,16 @@ export class AggregateHelper {
     this.GetElement(selector)
       .find("input")
       .type(this.selectAll)
-      .type(value, {delay: 1})
-      // .type(selectAllJSObjectContentShortcut)
-      // .then((ins: any) => {
-      //   //const input = ins[0].input;
-      //   ins.clear();
-      //   this.Sleep(200);
-      //   //ins.setValue(value);
-      //   ins.val(value).trigger('change');
-      //   this.Sleep(200);
-      // });
+      .type(value, { delay: 1 });
+    // .type(selectAllJSObjectContentShortcut)
+    // .then((ins: any) => {
+    //   //const input = ins[0].input;
+    //   ins.clear();
+    //   this.Sleep(200);
+    //   //ins.setValue(value);
+    //   ins.val(value).trigger('change');
+    //   this.Sleep(200);
+    // });
   }
 
   public BlurCodeInput(selector: string) {

diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts
@@ -1,7 +1,7 @@
 import datasourceFormData from "../../fixtures/datasources.json";
 import { ObjectsRegistry } from "../Objects/Registry";
 
-var DataSourceKVP = {
+const DataSourceKVP = {
   Postgres: "PostgreSQL",
   Mongo: "MongoDB",
   MySql: "MySQL",
@@ -371,7 +371,7 @@ export class DataSources {
   }
 
   public NavigateFromActiveDS(datasourceName: string, createQuery: boolean) {
-    let btnLocator =
+    const btnLocator =
       createQuery == true
         ? this._createQuery
         : this._datasourceCardGeneratePageBtn;
@@ -523,31 +523,40 @@ export class DataSources {
   public CreateDataSource(
     dsType: "Postgres" | "Mongo" | "MySql",
     navigateToCreateNewDs = true,
+    verifyBeforeSave = true,
   ) {
     let guid: any;
+    let dataSourceName = "";
     this.agHelper.GenerateUUID();
     cy.get("@guid").then((uid) => {
       navigateToCreateNewDs && this.NavigateToDSCreateNew();
       this.CreatePlugIn(DataSourceKVP[dsType]);
       guid = uid;
-      this.agHelper.RenameWithInPane(dsType + " " + guid, false);
+      dataSourceName = dsType + " " + guid;
+      this.agHelper.RenameWithInPane(dataSourceName, false);
       if (DataSourceKVP[dsType] == "PostgreSQL") this.FillPostgresDSForm();
       else if (DataSourceKVP[dsType] == "MySQL") this.FillMySqlDSForm();
       else if (DataSourceKVP[dsType] == "MongoDB") this.FillMongoDSForm();
-      this.TestSaveDatasource();
-      cy.wrap(dsType + " " + guid).as("dsName");
+
+      if (verifyBeforeSave) {
+        this.TestSaveDatasource();
+      } else {
+        this.SaveDatasource();
+      }
+
+      cy.wrap(dataSourceName).as("dsName");
     });
   }
 
-  public CreateNewQueryInDS(
-    dsName: string,
-    query: string,
-    queryName: string = "",
-  ) {
+  public CreateNewQueryInDS(dsName: string, query = "", queryName = "") {
     this.ee.CreateNewDsQuery(dsName);
+
     if (queryName) this.agHelper.RenameWithInPane(queryName);
-    this.agHelper.GetNClick(this._templateMenu);
-    this.EnterQuery(query);
+
+    if (query) {
+      this.agHelper.GetNClick(this._templateMenu);
+      this.EnterQuery(query);
+    }
   }
 
   public CreateGraphqlDatasource(datasourceName: string) {

diff --git a/app/client/src/reducers/entityReducers/appReducer.ts b/app/client/src/reducers/entityReducers/appReducer.ts
@@ -35,7 +35,7 @@ export type AppDataState = {
   store: AppStoreState;
   geolocation: {
     canBeRequested: boolean;
-    currentPosition?: GeolocationPosition;
+    currentPosition?: Partial<GeolocationPosition>;
   };
 };
 
@@ -61,6 +61,7 @@ const initialState: AppDataState = {
   },
   geolocation: {
     canBeRequested: "geolocation" in navigator,
+    currentPosition: {},
   },
 };
 

diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts
@@ -10,7 +10,6 @@ import _ from "lodash";
 import { EVALUATION_PATH } from "utils/DynamicBindingUtils";
 import { JSCollectionData } from "reducers/entityReducers/jsActionsReducer";
 import { Def } from "tern";
-import { ButtonGroupWidgetProps } from "widgets/ButtonGroupWidget/widget";
 
 const isVisible = {
   "!type": "bool",
@@ -275,13 +274,11 @@ export const entityDefinitions = {
     isDisabled: "bool",
     recaptchaToken: "string",
   },
-  BUTTON_GROUP_WIDGET: (widget: ButtonGroupWidgetProps) => {
-    return {
-      "!doc":
-        "The Button group widget represents a set of buttons in a group. Group can have simple buttons or menu buttons with drop-down items.",
-      "!url": "https://docs.appsmith.com/widget-reference/button-group",
-      groupButtons: generateTypeDef(widget.groupButtons),
-    };
+  BUTTON_GROUP_WIDGET: {
+    "!doc":
+      "The Button group widget represents a set of buttons in a group. Group can have simple buttons or menu buttons with drop-down items.",
+    "!url": "https://docs.appsmith.com/widget-reference/button-group",
+    isVisible: isVisible,
   },
   DATE_PICKER_WIDGET: {
     "!doc":