New style permissions

package.json

@@ -35,6 +35,7 @@
     "eth-provider": "^0.2.0",
     "file-saver": "^2.0.1",
     "history": "^4.9.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",

src/Wrapper.js

@@ -106,13 +106,13 @@ class Wrapper extends React.PureComponent {
     }
   }
 
-  openApp = (instanceId, params) => {
+  openApp = (instanceId, { params, localPath } = {}) => {
     if (this.props.autoClosingPanel) {
       // this.handleMenuPanelClose()
     }
 
     const { historyPush, locator } = this.props
-    historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
+    historyPush(getAppPath({ dao: locator.dao, instanceId, params, localPath }))
   }
 
   handleAppIFrameRef = appIFrame => {
@@ -166,7 +166,12 @@ 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, { params })
+  }
+
+  // Update the local path of the current instance
+  handlePathRequest = localPath => {
+    this.openApp(this.props.locator.instanceId, { localPath })
   }
 
   getAppInstancesGroups = memoize(apps =>
@@ -285,7 +290,10 @@ class Wrapper extends React.PureComponent {
             daoLoading={daoStatus === DAO_STATUS_LOADING}
             instanceId={locator.instanceId}
           >
-            {this.renderApp(locator.instanceId, locator.params)}
+            {this.renderApp(locator.instanceId, {
+              params: locator.params,
+              localPath: locator.localPath,
+            })}
           </AppLoader>
 
           <SignerPanel
@@ -322,7 +330,7 @@ class Wrapper extends React.PureComponent {
       </div>
     )
   }
-  renderApp(instanceId, params) {
+  renderApp(instanceId, { params, localPath }) {
     const {
       account,
       apps,
@@ -359,9 +367,9 @@ class Wrapper extends React.PureComponent {
           apps={apps}
           appsLoading={appsLoading}
           permissionsLoading={permissionsLoading}
-          params={params}
+          localPath={localPath}
           onMessage={this.handleAppMessage}
-          onParamsRequest={this.handleParamsRequest}
+          onPathRequest={this.handlePathRequest}
           wrapper={wrapper}
         />
       )

src/apps/Permissions/AppPermissions.js

@@ -1,140 +1,56 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Table, TableRow, Text, Viewport } from '@aragon/ui'
-import LocalIdentityBadge from '../../components/IdentityBadge/LocalIdentityBadge'
-import { TableHeader, TableCell, FirstTableCell, LastTableCell } from './Table'
-import { PermissionsConsumer } from '../../contexts/PermissionsContext'
-import { AppType, EthereumAddressType } from '../../prop-types'
-import Section from './Section'
+import { BackButton, Bar, textStyle } from '@aragon/ui'
+import { AppType } from '../../prop-types'
+import { usePermissionsByRole } from '../../contexts/PermissionsContext'
 import EmptyBlock from './EmptyBlock'
-import AppInstanceLabel from '../../components/AppInstanceLabel'
-import EntityPermissions from './EntityPermissions'
-import AppRoles from './AppRoles'
+import PermissionsView from './PermissionsView'
 
-class AppPermissions extends React.PureComponent {
-  static propTypes = {
-    address: EthereumAddressType.isRequired,
-    app: AppType, // may not be available if still loading
-    loading: PropTypes.bool.isRequired,
-    onManageRole: PropTypes.func.isRequired,
-  }
-  render() {
-    const { app, loading, address, onManageRole } = this.props
-    return (
-      <PermissionsConsumer>
-        {({ revokePermission, getAppPermissions }) => {
-          const appPermissions = getAppPermissions(app)
-          return (
-            <React.Fragment>
-              <AppRoles
-                app={app}
-                loading={loading}
-                onManageRole={onManageRole}
-              />
-              <Section title="Permissions set on this app">
-                {loading || appPermissions.length === 0 ? (
-                  <EmptyBlock>
-                    {loading
-                      ? 'Loading app permissions…'
-                      : 'No permissions set.'}
-                  </EmptyBlock>
-                ) : (
-                  <Viewport>
-                    {({ below }) => (
-                      <Table
-                        noSideBorders={below('medium')}
-                        header={
-                          <TableRow>
-                            <TableHeader
-                              title="Action"
-                              style={{ width: '20%' }}
-                            />
-                            <TableHeader title="Allowed for" />
-                            <TableHeader />
-                          </TableRow>
-                        }
-                      >
-                        {appPermissions.map(({ role, entity }, i) => (
-                          <Row
-                            key={i}
-                            role={role}
-                            entity={entity}
-                            proxyAddress={address}
-                            onRevoke={revokePermission}
-                          />
-                        ))}
-                      </Table>
-                    )}
-                  </Viewport>
-                )}
-              </Section>
-              <EntityPermissions
-                title="Permissions granted to this app"
-                noPermissionsLabel="No permissions granted."
-                address={address}
-                loading={loading}
-                onRevoke={revokePermission}
-              />
-            </React.Fragment>
-          )
-        }}
-      </PermissionsConsumer>
-    )
-  }
-}
+function AppPermissions({ app, loading, onBack, onManageRole }) {
+  const permissions = usePermissionsByRole()
 
-class Row extends React.Component {
-  static propTypes = {
-    entity: PropTypes.object.isRequired,
-    onRevoke: PropTypes.func.isRequired,
-    proxyAddress: EthereumAddressType.isRequired,
-    role: PropTypes.object.isRequired,
+  if (loading) {
+    return <EmptyBlock>Loading permissions…</EmptyBlock>
   }
 
-  handleRevoke = () => {
-    const { onRevoke, role, entity, proxyAddress } = this.props
-    onRevoke({
-      proxyAddress,
-      roleBytes: role.bytes,
-      entityAddress: entity.address,
-    })
-  }
-  renderEntity() {
-    const { entity } = this.props
-    if (!entity) {
-      return 'Unknown'
-    }
-    if (entity.type === 'app') {
-      return <AppInstanceLabel app={entity.app} proxyAddress={entity.address} />
-    }
+  const appPermissions = permissions.filter(
+    permission =>
+      permission.app && permission.app.proxyAddress === app.proxyAddress
+  )
 
-    return (
-      <LocalIdentityBadge
-        entity={entity.type === 'any' ? 'Any account' : entity.address}
-      />
-    )
+  if (appPermissions.length === 0) {
+    return <EmptyBlock>No permissions found.</EmptyBlock>
   }
-  render() {
-    const { role } = this.props
-    return (
-      <TableRow>
-        <FirstTableCell>
-          <Text weight="bold">{role ? role.name : 'Unknown'}</Text>
-        </FirstTableCell>
-        <TableCell>{this.renderEntity()}</TableCell>
-        <LastTableCell align="right">
-          <Button
-            mode="outline"
-            emphasis="negative"
-            compact
-            onClick={this.handleRevoke}
+
+  return (
+    <React.Fragment>
+      <Bar>
+        <BackButton onClick={onBack} />
+      </Bar>
+      <PermissionsView
+        heading={
+          <span
+            css={`
+              ${textStyle('body2')}
+              font-weight: 600;
+            `}
           >
-            Revoke
-          </Button>
-        </LastTableCell>
-      </TableRow>
-    )
-  }
+            Available permissions
+          </span>
+        }
+        onManageRole={onManageRole}
+        permissions={appPermissions}
+        showApps={false}
+      />
+    </React.Fragment>
+  )
+}
+
+AppPermissions.propTypes = {
+  app: AppType, // may not be available if still loading
+  loading: PropTypes.bool.isRequired,
+  onManageRole: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
 }
 
 export default AppPermissions