MSTR-228: Allow app custom routing (#1006)

* 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: millermedeiros/crossroads.js#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

@@ -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'

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&param2=false&param3=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" ] }
+```

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)) {

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