Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Improve evaluated url experience (#24301)

Browse Source 
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.
This commit is contained in:
Ayangade Adeoluwa 2023-06-13 15:49:46 +01:00 committed by GitHub
parent e6612037d0
commit bf588ad20f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
View File

@ -26,10 +26,7 @@ import { bindingMarker } from "components/editorComponents/CodeEditor/MarkHelper
import { entityMarker } from "components/editorComponents/CodeEditor/MarkHelpers/entityMarker"; import { entityMarker } from "components/editorComponents/CodeEditor/MarkHelpers/entityMarker";
import { bindingHint } from "components/editorComponents/CodeEditor/hintHelpers"; import { bindingHint } from "components/editorComponents/CodeEditor/hintHelpers";
import StoreAsDatasource from "components/editorComponents/StoreAsDatasource"; import StoreAsDatasource from "components/editorComponents/StoreAsDatasource";
import { import { DATASOURCE_URL_EXACT_MATCH_REGEX } from "constants/AppsmithActionConstants/ActionConstants";
DATASOURCE_PATH_EXACT_MATCH_REGEX,
DATASOURCE_PATH_PARTIAL_MATCH_REGEX,
} from "constants/AppsmithActionConstants/ActionConstants";
import styled from "styled-components"; import styled from "styled-components";
import { getDatasourceInfo } from "pages/Editor/APIEditor/ApiRightPane"; import { getDatasourceInfo } from "pages/Editor/APIEditor/ApiRightPane";
import * as FontFamilies from "constants/Fonts"; import * as FontFamilies from "constants/Fonts";
@ -258,18 +255,9 @@ class EmbeddedDatasourcePathComponent extends React.Component<
let datasourceUrl = ""; let datasourceUrl = "";
let path = ""; let path = "";
const isCorrectFullPath = DATASOURCE_PATH_EXACT_MATCH_REGEX.test(value); const isCorrectFullURL = DATASOURCE_URL_EXACT_MATCH_REGEX.test(value);
const isSlightlyIncorrectFullPath = if (isCorrectFullURL) {
DATASOURCE_PATH_PARTIAL_MATCH_REGEX.test(value); const matches = value.match(DATASOURCE_URL_EXACT_MATCH_REGEX);
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);
if (matches && matches.length) { if (matches && matches.length) {
datasourceUrl = matches[1]; datasourceUrl = matches[1];
path = `${matches[2] || ""}${matches[3] || ""}`; path = `${matches[2] || ""}${matches[3] || ""}`;

8
app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx
View File

@ -148,15 +148,9 @@ export interface LayoutOnLoadActionErrors {
// Group 1 = datasource (https://www.domain.com) // Group 1 = datasource (https://www.domain.com)
// Group 2 = path (/nested/path) // Group 2 = path (/nested/path)
// Group 3 = params (?param=123&param2=12) // 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]*)?$/; /^(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_KEY = "executionParams";
export const EXECUTION_PARAM_REFERENCE_REGEX = /this.params|this\?.params/g; export const EXECUTION_PARAM_REFERENCE_REGEX = /this.params|this\?.params/g;
export const THIS_DOT_PARAMS_KEY = "$params"; export const THIS_DOT_PARAMS_KEY = "$params";

28
app/client/src/utils/ApiPaneUtils.tsx
View File

@ -60,20 +60,32 @@ export function parseUrlForQueryParams(url: string) {
}); });
params = paramsWithDynamicValues.map((queryParam) => { params = paramsWithDynamicValues.map((queryParam) => {
if (queryParam.value.includes("~")) { // this time around we check for both key and values.
const newVal = queryParam?.value?.replace( if (queryParam.value.includes("~") || queryParam.key.includes("~")) {
/~/, let newVal = queryParam.value;
dynamicValuesDetected[0], let newKey = queryParam.key;
);
// remove the first index from detected dynamic values. if (queryParam.key.includes("~")) {
dynamicValuesDetected.shift(); newKey = queryParam?.key?.replace(/~/, dynamicValuesDetected[0]);
return { key: queryParam.key, value: newVal }; // 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 queryParam;
}); });
} }
return params; return params;
} }