From 2f9d80be1b75ff5f681a9cf799acb0a9b8d4cbd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Guti=C3=A9rrez?= Date: Tue, 21 Jun 2022 10:48:40 -0600 Subject: [PATCH] MSTR-228: Allow app custom routing (#1005) * Use RegExp to handle optional rest and query segments Use RegExp instead of pattern for app route, because Crossroads.js extracts the query string as part of the rest segment. This is because it does not support having both segments as optional. See: https://github.com/millermedeiros/crossroads.js/issues/130 * Expose utility function parseQueryString * Parse route query string into an object * Reload app only if there is no rest segment * Restrict app name capturing group to expected pattern * Use variables to check custom routing condition --- docs/mkdocs/mkdocs.yml | 1 + docs/monster-util/parseQueryString().md | 40 +++++++ src/js/lib/monster.routing.js | 13 ++- src/js/lib/monster.util.js | 137 ++++++++++++------------ 4 files changed, 122 insertions(+), 69 deletions(-) create mode 100644 docs/monster-util/parseQueryString().md diff --git a/docs/mkdocs/mkdocs.yml b/docs/mkdocs/mkdocs.yml index cecc9d8f9..2d377935f 100644 --- a/docs/mkdocs/mkdocs.yml +++ b/docs/mkdocs/mkdocs.yml @@ -90,6 +90,7 @@ nav: - 'docs/monster-util/isReseller().md' - 'docs/monster-util/isSuperDuper().md' - 'docs/monster-util/isWhitelabeling().md' + - 'docs/monster-util/parseQueryString().md' - 'docs/monster-util/protectSensitivePhoneNumbers().md' - 'docs/monster-util/randomString().md' - 'docs/monster-util/toFriendlyDate().md' diff --git a/docs/monster-util/parseQueryString().md b/docs/monster-util/parseQueryString().md new file mode 100644 index 000000000..d9b5ef4f0 --- /dev/null +++ b/docs/monster-util/parseQueryString().md @@ -0,0 +1,40 @@ +title: parseQueryString() + +# monster.util.parseQueryString() + +## Syntax +```javascript +monster.util.parseQueryString(queryString); +``` + +### Parameters +Key | Description | Type | Default | Required +:-: | --- | :-: | :-: | :-: +`queryString` | Query string to be parsed as an object. | `String` | | `true` + +### Return value +An `Object` representation of the query string parameters. + +## Description +This method parses a query string into an object representation of its parameters. + +All of the parameter values are converted to strings. + +If the parameter key ends with a pair of square brackets, it is interpreted as an array. If an index is specified between the brackets, then the value is added in the specified position. If no index is specified, then the value is added at the end of the array. + +Also, if a parameter key has no square braces, but it is repeated more than once in the query string, it is also interpreted as an array, whose values will be added in the same order as they appear in the string. + +These are valid query string representations of the same array: + +* `'colors=red&colors=blue&colors=yellow'` +* `'colors[]=red&colors[]=blue&colors[]=yellow'` +* `'colors[0]=red&colors[1]=blue&colors[2]=yellow'` + +## Example +```javascript +monster.util.parseQueryString('param1=22¶m2=false¶m3=hello') +// output: { param1: "22", param2: "false", param3: "hello" } + +monster.util.parseQueryString('palette=basic&colors[]=red&colors[]=blue&colors[]=yellow') +// output: { palette: "basic", colors: [ "red", "blue", "yellow" ] } +``` diff --git a/src/js/lib/monster.routing.js b/src/js/lib/monster.routing.js index 609301273..b2d4cac31 100644 --- a/src/js/lib/monster.routing.js +++ b/src/js/lib/monster.routing.js @@ -104,12 +104,21 @@ define(function(require) { }, addDefaultRoutes: function() { - this.add('apps/{appName}:?query:', function(appName, query) { + this.add(/^apps\/([a-z]+(?:-[a-z]+)?)(\/[^?]*)?\??(.*)?$/, function(appName, restSegment, queryString) { // not logged in, do nothing to preserve potentially valid route to load after successful login if (!monster.util.isLoggedIn()) { return; } - var availableApps = monster.util.listAppStoreMetadata('user'); + + var isActiveApp = monster.apps.getActiveApp() === appName, + hasCustomRouting = !_.isEmpty(restSegment); + + if (isActiveApp && hasCustomRouting) { + return; + } + + var availableApps = monster.util.listAppStoreMetadata('user'), + query = monster.util.parseQueryString(queryString); // try loading the requested app if (isAppLoadable(appName, availableApps)) { diff --git a/src/js/lib/monster.util.js b/src/js/lib/monster.util.js index 9af23a9ee..862427869 100644 --- a/src/js/lib/monster.util.js +++ b/src/js/lib/monster.util.js @@ -64,6 +64,7 @@ define(function(require) { listAppsMetadata: listAppsMetadata, listAppStoreMetadata: listAppStoreMetadata, listAppLinks: listAppLinks, + parseQueryString: parseQueryString, protectSensitivePhoneNumbers: protectSensitivePhoneNumbers, randomString: randomString, reload: reload, @@ -1211,73 +1212,6 @@ define(function(require) { return search; }; - /** - * @param {String} queryString - * @return {Object} - */ - var parseQueryString = function(queryString) { - var pair; - var paramKey; - var paramValue; - - // if query string is empty exit early - if (!queryString) { - return {}; - } - - return _ - .chain(queryString) - // anything after # is not part of the query string, so get rid of it - .split('#', 1) - .toString() - // split our query string into its component parts - .split('&') - // prase query string key/value pairs - .transform(function(acc, component) { - // separate each component in key/value pair - pair = component.split('='); - - // set parameter name and value (use 'true' if empty) - paramKey = pair[0]; - paramValue = _.isUndefined(pair[1]) ? true : pair[1]; - - // if the paramKey ends with square brackets, e.g. colors[] or colors[2] - if (paramKey.match(/\[(\d+)?\]$/)) { - // create key if it doesn't exist - var key = paramKey.replace(/\[(\d+)?\]/, ''); - if (!acc[key]) { - acc[key] = []; - } - - // if it's an indexed array e.g. colors[2] - if (paramKey.match(/\[\d+\]$/)) { - // get the index value and add the entry at the appropriate position - var index = /\[(\d+)\]/.exec(paramKey)[1]; - acc[key][index] = paramValue; - } else { - // otherwise add the value to the end of the array - acc[key].push(paramValue); - } - } else { - // we're dealing with a string - if (!acc[paramKey]) { - // if it doesn't exist, create property - acc[paramKey] = paramValue; - } else if ( - acc[paramKey] - && _.isString(acc[paramKey]) - ) { - // if property does exist and it's a string, convert it to an array - acc[paramKey] = [acc[paramKey]]; - acc[paramKey].push(paramValue); - } else { - // otherwise add the property - acc[paramKey].push(paramValue); - } - } - }, {}) - .value(); - }; /** * @param {Object} params * @return {Object|Array|String|undefined} @@ -1632,6 +1566,75 @@ define(function(require) { .value(); } + /** + * Parses a query string into an object + * @param {String} queryString Query string to be parsed + * @return {Object} Object representation of the query string parameters + */ + function parseQueryString(queryString) { + var pair; + var paramKey; + var paramValue; + + // if query string is empty exit early + if (!queryString) { + return {}; + } + + return _ + .chain(queryString) + // anything after # is not part of the query string, so get rid of it + .split('#', 1) + .toString() + // split our query string into its component parts + .split('&') + // prase query string key/value pairs + .transform(function(acc, component) { + // separate each component in key/value pair + pair = component.split('='); + + // set parameter name and value (use 'true' if empty) + paramKey = pair[0]; + paramValue = _.isUndefined(pair[1]) ? true : pair[1]; + + // if the paramKey ends with square brackets, e.g. colors[] or colors[2] + if (paramKey.match(/\[(\d+)?\]$/)) { + // create key if it doesn't exist + var key = paramKey.replace(/\[(\d+)?\]/, ''); + if (!acc[key]) { + acc[key] = []; + } + + // if it's an indexed array e.g. colors[2] + if (paramKey.match(/\[\d+\]$/)) { + // get the index value and add the entry at the appropriate position + var index = /\[(\d+)\]/.exec(paramKey)[1]; + acc[key][index] = paramValue; + } else { + // otherwise add the value to the end of the array + acc[key].push(paramValue); + } + } else { + // we're dealing with a string + if (!acc[paramKey]) { + // if it doesn't exist, create property + acc[paramKey] = paramValue; + } else if ( + acc[paramKey] + && _.isString(acc[paramKey]) + ) { + // if property does exist and it's a string, convert it to an array + acc[paramKey] = [acc[paramKey]]; + acc[paramKey].push(paramValue); + } else { + // otherwise add the property + acc[paramKey].push(paramValue); + } + } + }, {}) + .value(); + }; + /** * Function used to replace displayed phone numbers by "fake" numbers. * Can be useful to generate marketing documents or screenshots with lots of data without