Merge remote-tracking branch 'origin/newstyle' into newstyle-notifica…

…tions * origin/newstyle: MenuPanel tweaks (#933) Home redesign (#934) SignerPanel: consolidate external transaction props into intent object (#931) useLocalIdentity: handle remove case (#930) Add AppInternal to manage the layout logic of internal apps (#932) MenuPanel: adjust for new styles (#923) SignerPanel: display warning for external transactions (#850) Remove Badge and update occurrences for Tag (#901) SignerPanel: adjust for new styles (#920) Organization Settings: replace old Settings app (#896) Permissions: new style (#899) Sidepanel: redesign feedback indicator (#907) eslint: make sure curly braces are used everywhere (#924) Org switcher: new style + add FavoritesMenu (#925)
aragon · Aug 28, 2019 · 433ea60 · 433ea60
2 parents 1b0fbf6 + 640c3b4
commit 433ea60
Show file tree

Hide file tree

Showing 108 changed files with 3,028 additions and 3,525 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -28,6 +28,7 @@
     "promise/no-nesting": ["off"],
     "valid-jsdoc": "error",
     "linebreak-style": ["error", "unix"],
+    "curly": "error",
   },
   "settings": {
     "react": {

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   "dependencies": {
     "@aragon/templates-tokens": "^1.2.1",
     "@aragon/ui": "^1.0.0-alpha.17",
-    "@aragon/wrapper": "^5.0.0-rc.14",
+    "@aragon/wrapper": "^5.0.0-rc.15",
     "@babel/polyfill": "^7.0.0",
     "@sentry/browser": "^5.5.0",
     "@ungap/event-target": "^0.1.0",
@@ -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",

diff --git a/src/App.js b/src/App.js
@@ -229,13 +229,6 @@ class App extends React.Component {
     initWrapper(dao, contractAddresses.ensRegistry, {
       provider: web3Providers.default,
       walletProvider: web3Providers.wallet,
-      onError: err => {
-        log(`Wrapper init, recoverable error: ${err.name}. ${err.message}.`)
-        this.setState({
-          appsStatus: APPS_STATUS_ERROR,
-          daoStatus: DAO_STATUS_ERROR,
-        })
-      },
       onDaoAddress: ({ address, domain }) => {
         log('dao address', address)
         log('dao domain', domain)
@@ -294,7 +287,7 @@ class App extends React.Component {
             identityIntent.address
           )
           name = identity.name
-        } catch (e) {}
+        } catch (_) {}
         this.setState({
           identityIntent: {
             label: name,
@@ -310,18 +303,14 @@ class App extends React.Component {
       })
       .catch(err => {
         log(`Wrapper init, fatal error: ${err.name}. ${err.message}.`)
-        this.setState({ fatalError: err })
+        this.setState({
+          appsStatus: APPS_STATUS_ERROR,
+          daoStatus: DAO_STATUS_ERROR,
+          fatalError: err,
+        })
       })
   }
 
-  handleRequestAppsReload = () => {
-    this.setState({ appsStatus: APPS_STATUS_LOADING, apps: [] })
-    clearTimeout(this._requestAppsTimer)
-    this._requestAppsTimer = setTimeout(() => {
-      this.updateDao(this.state.locator.dao)
-    }, 1000)
-  }
-
   handleIdentityCancel = () => {
     const { identityIntent } = this.state
     identityIntent.reject(new Error('Identity modification cancelled'))

diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -2,9 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import memoize from 'lodash.memoize'
-import { AppCenter, Home, Permissions, Settings } from './apps'
+import { AppCenter, Home, Organization, Permissions } from './apps'
 import App404 from './components/App404/App404'
 import AppIFrame from './components/App/AppIFrame'
+import AppInternal from './components/App/AppInternal'
 import AppLoader from './components/App/AppLoader'
 import OrgView from './components/OrgView/OrgView'
 import GlobalPreferences from './components/GlobalPreferences/GlobalPreferences'
@@ -21,7 +22,7 @@ import {
   EthereumAddressType,
   RepoType,
 } from './prop-types'
-import { getAppPath, GLOBAL_PREFERENCES_QUERY_PARAM } from './routing'
+import { getAppPath, getPreferencesSearch } from './routing'
 import { APPS_STATUS_LOADING, DAO_STATUS_LOADING } from './symbols'
 import { addressesEqual } from './web3-utils'
 
@@ -38,7 +39,6 @@ class Wrapper extends React.PureComponent {
     historyPush: PropTypes.func.isRequired,
     identityEvents$: PropTypes.object.isRequired,
     locator: PropTypes.object.isRequired,
-    onRequestAppsReload: PropTypes.func.isRequired,
     onRequestEnable: PropTypes.func.isRequired,
     permissionsLoading: PropTypes.bool.isRequired,
     repos: PropTypes.arrayOf(RepoType).isRequired,
@@ -104,13 +104,21 @@ class Wrapper extends React.PureComponent {
     }
   }
 
-  openApp = (instanceId, params) => {
-    if (this.props.autoClosingPanel) {
-      // this.handleMenuPanelClose()
-    }
+  openApp = (instanceId, { params, localPath } = {}) => {
+    const { historyPush, locator } = this.props
+    historyPush(getAppPath({ dao: locator.dao, instanceId, params, localPath }))
+  }
 
+  closePreferences = () => {
     const { historyPush, locator } = this.props
-    historyPush(getAppPath({ dao: locator.dao, instanceId, params }))
+    historyPush(getAppPath(locator))
+  }
+
+  openPreferences = (screen, data) => {
+    const { historyPush, locator } = this.props
+    historyPush(
+      getAppPath({ ...locator, search: getPreferencesSearch(screen, data) })
+    )
   }
 
   handleAppIFrameRef = appIFrame => {
@@ -155,16 +163,14 @@ class Wrapper extends React.PureComponent {
     this.setState({ appLoading: false })
   }
 
-  handleClosePreferences = () => {
-    window.location.hash = getAppPath(this.props.locator)
-  }
-  handleOpenPreferences = path => {
-    const appPath = getAppPath(this.props.locator)
-    window.location.hash = `${appPath}${GLOBAL_PREFERENCES_QUERY_PARAM}${path}`
-  }
   // 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 =>
@@ -223,7 +229,6 @@ class Wrapper extends React.PureComponent {
       daoAddress,
       daoStatus,
       locator,
-      onRequestAppsReload,
       onRequestEnable,
       repos,
       transactionBag,
@@ -270,8 +275,7 @@ class Wrapper extends React.PureComponent {
           daoAddress={daoAddress}
           daoStatus={daoStatus}
           onOpenApp={this.openApp}
-          onOpenPreferences={this.handleOpenPreferences}
-          onRequestAppsReload={onRequestAppsReload}
+          onOpenPreferences={this.openPreferences}
           onRequestEnable={onRequestEnable}
         >
           <AppLoader
@@ -281,7 +285,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
@@ -312,53 +319,51 @@ class Wrapper extends React.PureComponent {
           locator={locator}
           wrapper={wrapper}
           apps={apps}
-          onClose={this.handleClosePreferences}
+          onScreenChange={this.openPreferences}
+          onClose={this.closePreferences}
         />
       </div>
     )
   }
-  renderApp(instanceId, params) {
+  renderApp(instanceId, { params, localPath }) {
     const {
       account,
       apps,
       appsStatus,
-      connected,
+      canUpgradeOrg,
       daoAddress,
-      locator,
       permissionsLoading,
       repos,
       walletNetwork,
+      walletProviderId,
       walletWeb3,
       wrapper,
-      canUpgradeOrg,
     } = this.props
 
     const appsLoading = appsStatus === APPS_STATUS_LOADING
     const reposLoading = appsLoading || Boolean(apps.length && !repos.length)
 
     if (instanceId === 'home') {
       return (
-        <Home
-          apps={apps}
-          connected={connected}
-          dao={locator.dao}
-          onMessage={this.handleAppMessage}
-          onOpenApp={this.openApp}
-        />
+        <AppInternal>
+          <Home apps={apps} onOpenApp={this.openApp} />
+        </AppInternal>
       )
     }
 
     if (instanceId === 'permissions') {
       return (
-        <Permissions
-          apps={apps}
-          appsLoading={appsLoading}
-          permissionsLoading={permissionsLoading}
-          params={params}
-          onMessage={this.handleAppMessage}
-          onParamsRequest={this.handleParamsRequest}
-          wrapper={wrapper}
-        />
+        <AppInternal>
+          <Permissions
+            apps={apps}
+            appsLoading={appsLoading}
+            permissionsLoading={permissionsLoading}
+            localPath={localPath}
+            onMessage={this.handleAppMessage}
+            onPathRequest={this.handlePathRequest}
+            wrapper={wrapper}
+          />
+        </AppInternal>
       )
     }
 
@@ -379,19 +384,21 @@ class Wrapper extends React.PureComponent {
       )
     }
 
-    if (instanceId === 'settings') {
+    if (instanceId === 'organization') {
       return (
-        <Settings
-          account={account}
-          apps={apps}
-          appsLoading={appsLoading}
-          daoAddress={daoAddress}
-          onMessage={this.handleAppMessage}
-          onOpenApp={this.openApp}
-          walletNetwork={walletNetwork}
-          walletWeb3={walletWeb3}
-          wrapper={wrapper}
-        />
+        <AppInternal>
+          <Organization
+            account={account}
+            apps={apps}
+            appsLoading={appsLoading}
+            daoAddress={daoAddress}
+            onMessage={this.handleAppMessage}
+            onOpenApp={this.openApp}
+            walletNetwork={walletNetwork}
+            walletWeb3={walletWeb3}
+            walletProviderId={walletProviderId}
+          />
+        </AppInternal>
       )
     }
 

diff --git a/src/apps/AppCenter/DiscoverApps/DiscoverApps.js b/src/apps/AppCenter/DiscoverApps/DiscoverApps.js
@@ -2,24 +2,16 @@ import React from 'react'
 import styled from 'styled-components'
 import {
   Card,
-  Badge,
+  Tag,
   Text,
   SafeLink,
   theme,
-  colors,
   unselectable,
   breakpoint,
 } from '@aragon/ui'
 import { appsInDevelopment } from './discover-apps-data'
 import AppIcon from '../../../components/AppIcon/AppIcon'
 
-const statuses = {
-  'pre-alpha': colors.Gold.Brandy,
-  alpha: colors.Blue.Danube,
-  experimental: colors.Blue.Danube,
-  ready: colors.Green['Spring Green'],
-}
-
 const DiscoverApps = React.memo(() => (
   <div>
     <p>
@@ -50,7 +42,7 @@ const DiscoverApps = React.memo(() => (
           </Icon>
           <Name>{app.name}</Name>
           <TagWrapper>
-            <Tag background={statuses[app.status]}>{app.status}</Tag>
+            <Tag mode="new">{app.status}</Tag>
           </TagWrapper>
           <Description color={theme.textSecondary}>
             {app.description}
@@ -111,13 +103,6 @@ const TagWrapper = styled.div`
   margin-bottom: 10px;
 `
 
-const Tag = styled(Badge)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  color: white;
-`
-
 const Description = styled(Text)`
   padding: 0 1rem;
   margin-bottom: 30px;

diff --git a/src/apps/AppCenter/InstalledApps/AppCardContent.js b/src/apps/AppCenter/InstalledApps/AppCardContent.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import color from 'onecolor'
-import { Badge, Button, font, theme } from '@aragon/ui'
+import { Button, Tag, GU, font } from '@aragon/ui'
 import AppIcon from '../../../components/AppIcon/AppIcon'
 import { RepoType } from '../../../prop-types'
 
@@ -43,17 +42,10 @@ const AppCardContent = ({ repo, onOpen }) => {
             css={`
               display: flex;
               justify-content: center;
-              margin-bottom: 12px;
+              margin-bottom: ${1 * GU}px;
             `}
           >
-            <Badge
-              background={color(theme.positive)
-                .alpha(0.15)
-                .cssa()}
-              foreground={theme.positive}
-            >
-              New version available
-            </Badge>
+            <Tag mode="new">New version available</Tag>
           </div>
         )}
         <p

diff --git a/src/apps/AppCenter/InstalledApps/RepoVersions.js b/src/apps/AppCenter/InstalledApps/RepoVersions.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Trail, animated } from 'react-spring'
-import { Badge, GU, theme, springs, Info } from '@aragon/ui'
+import { Info, Tag, GU, theme, springs } from '@aragon/ui'
 import { format } from 'date-fns'
 import { TextLabel } from '../../../components/TextStyles'
 import { RepoType } from '../../../prop-types'
@@ -62,11 +62,13 @@ const RepoVersions = ({ animate, repo: { currentVersion, versions } }) => (
               <Td>
                 {version}{' '}
                 {version === currentVersion.version && (
-                  <Badge.Identity
-                    style={{ marginLeft: `${GU}px`, fontVariant: 'small-caps' }}
+                  <Tag
+                    css={`
+                      margin-left: ${1 * GU}px;
+                    `}
                   >
                     current
-                  </Badge.Identity>
+                  </Tag>
                 )}
               </Td>
               <Td>{timestamp ? format(timestamp, 'dd/MM/yy') : ''}</Td>