From bf588ad20f76ce18e39e552aae2a154629dfdbb8 Mon Sep 17 00:00:00 2001
From: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:49:46 +0100
Subject: [PATCH] fix: Improve evaluated url experience (#24301)

This PR improves the evaluated value experience to be able to
accommodate more edge cases and also process different url input types
that a user can provide especially in the case of query parameters.
---
 .../fields/EmbeddedDatasourcePathField.tsx    | 20 +++----------
 .../ActionConstants.tsx                       |  8 +-----
 app/client/src/utils/ApiPaneUtils.tsx         | 28 +++++++++++++------
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 8a3049473f..9b3d7807d7 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
@@ -26,10 +26,7 @@ import { bindingMarker } from "components/editorComponents/CodeEditor/MarkHelper
 import { entityMarker } from "components/editorComponents/CodeEditor/MarkHelpers/entityMarker";
 import { bindingHint } from "components/editorComponents/CodeEditor/hintHelpers";
 import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
-import {
-  DATASOURCE_PATH_EXACT_MATCH_REGEX,
-  DATASOURCE_PATH_PARTIAL_MATCH_REGEX,
-} from "constants/AppsmithActionConstants/ActionConstants";
+import { DATASOURCE_URL_EXACT_MATCH_REGEX } from "constants/AppsmithActionConstants/ActionConstants";
 import styled from "styled-components";
 import { getDatasourceInfo } from "pages/Editor/APIEditor/ApiRightPane";
 import * as FontFamilies from "constants/Fonts";
@@ -258,18 +255,9 @@ class EmbeddedDatasourcePathComponent extends React.Component<
 
     let datasourceUrl = "";
     let path = "";
-    const isCorrectFullPath = DATASOURCE_PATH_EXACT_MATCH_REGEX.test(value);
-    const isSlightlyIncorrectFullPath =
-      DATASOURCE_PATH_PARTIAL_MATCH_REGEX.test(value);
-
-    if (isCorrectFullPath) {
-      const matches = value.match(DATASOURCE_PATH_EXACT_MATCH_REGEX);
-      if (matches && matches.length) {
-        datasourceUrl = matches[1];
-        path = `${matches[2] || ""}${matches[3] || ""}`;
-      }
-    } else if (isSlightlyIncorrectFullPath && !isCorrectFullPath) {
-      const matches = value.match(DATASOURCE_PATH_PARTIAL_MATCH_REGEX);
+    const isCorrectFullURL = DATASOURCE_URL_EXACT_MATCH_REGEX.test(value);
+    if (isCorrectFullURL) {
+      const matches = value.match(DATASOURCE_URL_EXACT_MATCH_REGEX);
       if (matches && matches.length) {
         datasourceUrl = matches[1];
         path = `${matches[2] || ""}${matches[3] || ""}`;
diff --git a/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx b/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx
index e3d1f31d5e..8cc45bc419 100644
--- a/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx
+++ b/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx
@@ -148,15 +148,9 @@ export interface LayoutOnLoadActionErrors {
 // Group 1 = datasource (https://www.domain.com)
 // Group 2 = path (/nested/path)
 // Group 3 = params (?param=123&param2=12)
-export const DATASOURCE_PATH_EXACT_MATCH_REGEX =
+export const DATASOURCE_URL_EXACT_MATCH_REGEX =
   /^(https?:\/{2}\S+?)(\/[\s\S]*?)?(\?(?![^{]*})[\s\S]*)?$/;
 
-// this regex is for matching patterns that does not conform with our standards.
-// Group 1 = datasource (https:/www.domain.com) or (https:/www.domain.com) or (htt/www.domain.com)
-// Group 2 = path (/nested/path)
-// Group 3 = params (?param=123&param2=12)
-export const DATASOURCE_PATH_PARTIAL_MATCH_REGEX = /^(.*?)\/(.*?)$/;
-
 export const EXECUTION_PARAM_KEY = "executionParams";
 export const EXECUTION_PARAM_REFERENCE_REGEX = /this.params|this\?.params/g;
 export const THIS_DOT_PARAMS_KEY = "$params";
diff --git a/app/client/src/utils/ApiPaneUtils.tsx b/app/client/src/utils/ApiPaneUtils.tsx
index bbf4c64598..9210f3e15c 100644
--- a/app/client/src/utils/ApiPaneUtils.tsx
+++ b/app/client/src/utils/ApiPaneUtils.tsx
@@ -60,20 +60,32 @@ export function parseUrlForQueryParams(url: string) {
     });
 
     params = paramsWithDynamicValues.map((queryParam) => {
-      if (queryParam.value.includes("~")) {
-        const newVal = queryParam?.value?.replace(
-          /~/,
-          dynamicValuesDetected[0],
-        );
+      // this time around we check for both key and values.
+      if (queryParam.value.includes("~") || queryParam.key.includes("~")) {
+        let newVal = queryParam.value;
+        let newKey = queryParam.key;
 
-        // remove the first index from detected dynamic values.
-        dynamicValuesDetected.shift();
-        return { key: queryParam.key, value: newVal };
+        if (queryParam.key.includes("~")) {
+          newKey = queryParam?.key?.replace(/~/, dynamicValuesDetected[0]);
+          // remove the first index from detected dynamic values.
+          dynamicValuesDetected.shift();
+        }
+
+        if (queryParam.value.includes("~")) {
+          newVal = queryParam?.value?.replace(/~/, dynamicValuesDetected[0]);
+
+          // remove the first index from detected dynamic values.
+          dynamicValuesDetected.shift();
+        }
+
+        // dynamicValuesDetected.shift();
+        return { key: newKey, value: newVal };
       }
 
       return queryParam;
     });
   }
+
   return params;
 }