Custom app paths

.babelrc

@@ -12,5 +12,18 @@
   "plugins": [
     ["styled-components", { "displayName": true }],
     "@babel/plugin-proposal-class-properties"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs",
+            "targets": { "node": "current" }
+          }
+        ]
+      ]
+    }
+  }
 }

.eslintrc

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jest/globals": true
   },
   "extends": [
     "plugin:import/recommended",
@@ -19,20 +20,23 @@
     },
     "sourceType": "module"
   },
-  "plugins": ["prettier", "react", "react-hooks", "import", "promise"],
+  "plugins": ["prettier", "react", "react-hooks", "import", "promise", "jest"],
   "rules": {
-    "react/prop-types": 'warn',
+    "react/prop-types": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "import/no-unresolved": ["error", { ignore: ["^react(-dom)?$", "^styled-components$"] }],
+    "import/no-unresolved": [
+      "error",
+      { "ignore": ["^react(-dom)?$", "^styled-components$"] }
+    ],
     "promise/no-nesting": ["off"],
     "valid-jsdoc": "error",
-    "linebreak-style": ["error", "unix"],
+    "linebreak-style": ["error", "unix"]
   },
   "settings": {
     "react": {
       "pragma": "React",
       "version": "16.6"
-    },
+    }
   }
 }

package.json

@@ -61,20 +61,23 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.8.0",
     "babel-plugin-styled-components": "^1.7.1",
     "cross-env": "^5.2.0",
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-config-standard-react": "^7.0.2",
     "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jest": "^22.7.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.5.1",
     "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-standard": "^4.0.0",
     "husky": "^1.0.1",
+    "jest": "^24.8.0",
     "lint-staged": "^8.1.1",
     "parcel-bundler": "^1.10.1",
     "parcel-plugin-bundle-visualiser": "^1.2.0",
@@ -95,7 +98,8 @@
     "build:rinkeby": "cross-env ARAGON_DEMO_DAO=0xB578FbBFB8f3268FB1445bf3C0dF42343Da90748 npm run build",
     "build:staging": "cross-env REACT_APP_ENS_REGISTRY_ADDRESS=0xfe03625ea880a8cba336f9b5ad6e15b0a3b5a939 npm run build",
     "lint": "eslint ./src",
-    "test": "npm run lint",
+    "jest": "jest",
+    "test": "npm run lint && npm run jest",
     "publish:major": "aragon apm publish major --only-content --files build/",
     "publish:minor": "aragon apm publish minor --only-content --files build/",
     "publish:patch": "aragon apm publish patch --only-content --files build/",
@@ -124,5 +128,10 @@
       "eslint --fix",
       "git add"
     ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(svg|png)$": "<rootDir>/src/empty-string.js"
+    }
   }
 }

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { createHashHistory as createHistory } from 'history'
 import { contractAddresses, web3Providers } from './environment'
-import { parsePath } from './routing'
+import { ARAGONID_ENS_DOMAIN, parsePath } from './routing'
 import initWrapper, {
   initDaoBuilder,
   pollMainAccount,
@@ -111,7 +111,7 @@ class App extends React.Component {
   // Handle URL changes
   handleHistoryChange = ({ pathname, search, state = {} }) => {
     if (!state.alreadyParsed) {
-      this.updateLocator(parsePath(this.history, pathname, search))
+      this.updateLocator(parsePath(pathname, search))
     }
   }
 
@@ -149,6 +149,15 @@ class App extends React.Component {
       this.updateDao(null)
     }
 
+    // Replace URL with non-aragonid.eth version
+    if (locator.dao && locator.dao.endsWith(ARAGONID_ENS_DOMAIN)) {
+      this.history.replace({
+        pathname: locator.pathname.replace(`.${ARAGONID_ENS_DOMAIN}`, ''),
+        search: locator.search,
+        state: { alreadyParsed: true },
+      })
+    }
+
     this.setState({ locator, prevLocator })
   }
 

src/Wrapper.js

@@ -85,6 +85,18 @@ class Wrapper extends React.PureComponent {
   componentDidUpdate(prevProps) {
     this.updateAutoClosingPanel(prevProps)
     this.updateIdentityEvents(prevProps)
+    this.updateInstancePath(prevProps)
+  }
+
+  updateInstancePath(prevProps) {
+    const { locator } = this.props
+    if (locator.instancePath !== prevProps.locator.instancePath) {
+      this.appIFrame.sendMessage({
+        from: 'wrapper',
+        name: 'path',
+        value: locator.instancePath,
+      })
+    }
   }
 
   updateAutoClosingPanel(prevProps) {
@@ -129,13 +141,13 @@ class Wrapper extends React.PureComponent {
     }
   }
 
-  openApp = (instanceId, params) => {
+  openApp = (instanceId, instancePath) => {
     if (this.props.autoClosingPanel) {
       this.handleMenuPanelClose()
     }
 
     const { historyPush, locator } = this.props
-    historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
+    historyPush(getAppPath({ dao: locator.dao, instanceId, instancePath }))
   }
 
   handleAppIFrameRef = appIFrame => {
@@ -180,7 +192,6 @@ class Wrapper extends React.PureComponent {
   handleAppIFrameLoadingError = event => {
     this.setState({ appLoading: false })
   }
-
   handleAppMessage = ({ data: { name, value } }) => {
     if (
       // “menuPanel: Boolean” is deprecated but still supported for a while if
@@ -191,6 +202,23 @@ class Wrapper extends React.PureComponent {
     ) {
       this.setState({ menuPanelOpened: value === true })
     }
+
+    if (name === 'requestPath') {
+      this.openApp(value[1] || this.props.locator.instanceId, value[0])
+    }
+
+    if (name === 'ready') {
+      this.appIFrame.sendMessage({
+        from: 'wrapper',
+        name: 'apps',
+        value: this.props.apps,
+      })
+      this.appIFrame.sendMessage({
+        from: 'wrapper',
+        name: 'path',
+        value: this.props.locator.instancePath,
+      })
+    }
   }
   handleMenuPanelOpen = () => {
     this.setState({ menuPanelOpened: true })
@@ -209,7 +237,7 @@ class Wrapper extends React.PureComponent {
   }
   // params need to be a string
   handleParamsRequest = params => {
-    this.openApp(this.props.locator.instanceId, params)
+    this.openApp(this.props.locator.instanceId)
   }
 
   getAppInstancesGroups = memoize(apps =>
@@ -335,7 +363,11 @@ class Wrapper extends React.PureComponent {
               daoLoading={daoStatus === DAO_STATUS_LOADING}
               instanceId={locator.instanceId}
             >
-              {this.renderApp(locator.instanceId, locator.params)}
+              {this.renderApp(
+                locator.instanceId,
+                locator.params,
+                locator.instancePath
+              )}
             </AppLoader>
           </AppScreen>
         </CombinedPanel>
@@ -364,7 +396,7 @@ class Wrapper extends React.PureComponent {
       </Main>
     )
   }
-  renderApp(instanceId, params) {
+  renderApp(instanceId, params, instancePath) {
     const {
       account,
       apps,
@@ -453,6 +485,7 @@ class Wrapper extends React.PureComponent {
       <AppIFrame
         ref={this.handleAppIFrameRef}
         app={app}
+        instancePath={instancePath}
         onLoadingCancel={this.handleAppIFrameLoadingCancel}
         onLoadingError={this.handleAppIFrameLoadingError}
         onLoadingStart={this.handleAppIFrameLoadingStart}

src/components/App/AppIFrame.js

@@ -43,6 +43,7 @@ class AppIFrame extends React.Component {
   static propTypes = {
     app: AppType.isRequired,
     iframeRef: PropTypes.func,
+    instancePath: PropTypes.string,
     onLoadingCancel: PropTypes.func,
     onLoadingError: PropTypes.func,
     onLoadingSuccess: PropTypes.func,
@@ -52,6 +53,7 @@ class AppIFrame extends React.Component {
   }
   static defaultProps = {
     iframeRef: noop,
+    instancePath: '/',
     onLoadingCancel: noop,
     onLoadingError: noop,
     onLoadingSuccess: noop,
@@ -65,6 +67,7 @@ class AppIFrame extends React.Component {
   componentDidMount() {
     window.addEventListener('message', this.handleReceiveMessage, false)
     this.navigateIFrame(this.props.app.src)
+    this.setState({ instancePath: this.props.instancePath })
   }
   componentWillReceiveProps(nextProps) {
     const { app: nextApp } = nextProps

src/empty-string.js

@@ -0,0 +1,2 @@
+// used by Jest to replace image imports
+export default ''

src/routing.js

@@ -3,7 +3,7 @@ import { APP_MODE_START, APP_MODE_ORG, APP_MODE_SETUP } from './symbols'
 
 import { isAddress, isValidEnsName } from './web3-utils'
 
-const ARAGONID_ENS_DOMAIN = 'aragonid.eth'
+export const ARAGONID_ENS_DOMAIN = 'aragonid.eth'
 
 /*
  * Parse a path and a search query and return a “locator” object.
@@ -35,19 +35,20 @@ const ARAGONID_ENS_DOMAIN = 'aragonid.eth'
  *   - org: when the path starts with a DAO address.
  *   - invalid: the DAO given is not valid
  */
-export const parsePath = (history, pathname, search = '') => {
+export const parsePath = (pathname, search = '') => {
   const path = pathname + search
   const [, ...parts] = pathname.split('/')
+  const base = { path, pathname, search }
 
   // Start
   if (!parts[0]) {
-    return { path, mode: APP_MODE_START }
+    return { ...base, mode: APP_MODE_START }
   }
 
   // Setup
   if (parts[0] === 'setup') {
     const [, step = null, ...setupParts] = parts
-    return { path, mode: APP_MODE_SETUP, step, parts: setupParts }
+    return { ...base, mode: APP_MODE_SETUP, step, parts: setupParts }
   }
 
   let [dao] = parts
@@ -57,15 +58,6 @@ export const parsePath = (history, pathname, search = '') => {
   // Assume .aragonid.eth if not given a valid address or a valid ENS domain
   if (!validAddress && !validDomain) {
     dao += `.${ARAGONID_ENS_DOMAIN}`
-  } else if (validDomain && dao.endsWith(ARAGONID_ENS_DOMAIN)) {
-    // Replace URL with non-aragonid.eth version
-    history.replace({
-      pathname: pathname.replace(`.${ARAGONID_ENS_DOMAIN}`, ''),
-      search: search,
-      state: {
-        alreadyParsed: true,
-      },
-    })
   }
 
   // Organization
@@ -79,25 +71,52 @@ export const parsePath = (history, pathname, search = '') => {
     }
   }
 
-  const [, instanceId, ...appParts] = parts
+  const [, instanceId, ...instancePathParts] = parts
+
+  // The local path of an app (internal or external)
+  const instancePath = `/${
+    instancePathParts ? instancePathParts.join('/') : ''
+  }`
 
   const completeLocator = {
-    path,
+    ...base,
     mode: APP_MODE_ORG,
     dao,
     instanceId: instanceId || 'home',
     params,
-    parts: appParts,
+    instancePath,
   }
 
   return completeLocator
 }
 
+function encodePath(path) {
+  return path
+    .split('/')
+    .map(v => encodeURIComponent(v))
+    .join('/')
+}
+
 // Return a path string for an app instance
-export const getAppPath = ({ dao, instanceId = 'home', params } = {}) => {
-  const paramsPart = params ? `?p=${encodeURIComponent(params)}` : ``
+export const getAppPath = ({
+  dao,
+  instanceId = 'home',
+  instancePath = '/',
+} = {}) => {
+  // Always start with /
+  if (!instancePath.startsWith('/')) {
+    instancePath = `/${instancePath}`
+  }
+
+  if (dao.endsWith(ARAGONID_ENS_DOMAIN)) {
+    dao = dao.replace(/\.aragonid\.eth$/, '')
+  }
+
   if (staticApps.has(instanceId)) {
-    return `/${dao}${staticApps.get(instanceId).route}${paramsPart}`
+    return `/${dao}${staticApps.get(instanceId).route}${encodePath(
+      instancePath
+    )}`
   }
-  return `/${dao}/${instanceId}${paramsPart}`
+
+  return `/${dao}/${instanceId}${encodePath(instancePath)}`
 }