From 141d556334ab7b7ddf961d453de30352e36d7fd8 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Wed, 29 Apr 2020 05:35:02 +0000
Subject: [PATCH] NavigateTo dynamic binding support

---
 .../actioncreator/ActionCreator.tsx           | 16 +++++++---
 app/client/src/utils/Validators.ts            | 32 ++++++++++++-------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
index c8796c6893..8bb1ff3ce3 100644
--- a/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
+++ b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
@@ -17,6 +17,7 @@ import { createModalAction } from "actions/widgetActions";
 import { createActionRequest } from "actions/actionActions";
 import { DEFAULT_API_ACTION } from "constants/ApiEditorConstants";
 import { createNewApiName } from "utils/AppsmithUtils";
+import { isDynamicValue } from "utils/DynamicBindingUtils";
 
 const ALERT_STYLE_OPTIONS = [
   { label: "Info", value: "'info'", id: "info" },
@@ -26,12 +27,15 @@ const ALERT_STYLE_OPTIONS = [
 ];
 const ACTION_TRIGGER_REGEX = /^{{([\s\S]*?)\(([\s\S]*?)\)}}$/g;
 const ACTION_ANONYMOUS_FUNC_REGEX = /\(\) => ([\s\S]*?)(\([\s\S]*?\))/g;
-
+const IS_URL_OR_MODAL = /^'.*'$/;
 const modalSetter = (changeValue: any, currentValue: string) => {
   const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
   const args = matches[0][2].split(",");
-  args[0] = `'${changeValue}'`;
-
+  if (isDynamicValue(changeValue)) {
+    args[0] = `${changeValue.substring(2, changeValue.length - 2)}`;
+  } else {
+    args[0] = `'${changeValue}'`;
+  }
   return currentValue.replace(
     ACTION_TRIGGER_REGEX,
     `{{$1(${args.join(",")})}}`,
@@ -43,7 +47,11 @@ export const modalGetter = (value: string) => {
   let name = "none";
   if (matches.length) {
     const modalName = matches[0][2].split(",")[0];
-    name = modalName.substring(1, modalName.length - 1);
+    if (IS_URL_OR_MODAL.test(modalName) || modalName === "") {
+      name = modalName.substring(1, modalName.length - 1);
+    } else {
+      name = `{{${modalName}}}`;
+    }
   }
   return name;
 };
diff --git a/app/client/src/utils/Validators.ts b/app/client/src/utils/Validators.ts
index 1a5e65024c..165fe5b6a0 100644
--- a/app/client/src/utils/Validators.ts
+++ b/app/client/src/utils/Validators.ts
@@ -14,6 +14,7 @@ import { modalGetter } from "components/editorComponents/actioncreator/ActionCre
 import { WidgetProps } from "widgets/BaseWidget";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
 import { PageListPayload } from "constants/ReduxActionConstants";
+import { isDynamicValue } from "./DynamicBindingUtils";
 const URL_REGEX = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/;
 
 export const VALIDATORS: Record<ValidationType, Validator> = {
@@ -348,18 +349,25 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     if (_.isString(value)) {
       if (value.indexOf("navigateTo") !== -1) {
         const pageNameOrUrl = modalGetter(value);
-        const isPage =
-          dataTree &&
-          (dataTree.pageList as PageListPayload).findIndex(
-            page => page.pageName === pageNameOrUrl,
-          ) !== -1;
-        const isValidUrl = URL_REGEX.test(pageNameOrUrl);
-        if (!(isValidUrl || isPage)) {
-          return {
-            isValid: false,
-            parsed: value,
-            message: `${NAVIGATE_TO_VALIDATION_ERROR}`,
-          };
+        if (dataTree) {
+          if (isDynamicValue(pageNameOrUrl)) {
+            return {
+              isValid: true,
+              parsed: value,
+            };
+          }
+          const isPage =
+            (dataTree.pageList as PageListPayload).findIndex(
+              page => page.pageName === pageNameOrUrl,
+            ) !== -1;
+          const isValidUrl = URL_REGEX.test(pageNameOrUrl);
+          if (!(isValidUrl || isPage)) {
+            return {
+              isValid: false,
+              parsed: value,
+              message: `${NAVIGATE_TO_VALIDATION_ERROR}`,
+            };
+          }
         }
       }
     }