Available Dapp selection alignment with Permissions (Portal) (#4374)

js/src/modals/AddDapps/addDapps.css

@@ -15,15 +15,24 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+.modal {
+  flex-direction: column;
+}
+
+.container {
+  margin-top: 1.5em;
+  overflow-y: auto;
+}
+
 .description {
   margin-top: .5em !important;
 }
 
 .list {
+  margin-bottom: 1.5em;
+
   .background {
-    background: rgba(255, 255, 255, 0.2);
-    margin: 0 -1.5em;
-    padding: 0.5em 1.5em;
+    padding: 0.5em 0;
   }
 
   .header {
@@ -37,3 +46,26 @@
     opacity: 0.75;
   }
 }
+
+.selectIcon {
+  position: absolute;
+  right: 0.5em;
+  top: 0.5em;
+}
+
+.selected,
+.unselected {
+  position: relative;
+}
+
+.unselected {
+  background: rgba(0, 0, 0, 0.4) !important;
+
+  .selectIcon {
+    opacity: 0.15;
+  }
+}
+
+.selected {
+  background: rgba(255, 255, 255, 0.15) !important;
+}

js/src/modals/AddDapps/addDapps.js

@@ -14,14 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Checkbox } from 'material-ui';
-import { List, ListItem } from 'material-ui/List';
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal, Button } from '~/ui';
-import { DoneIcon } from '~/ui/Icons';
+import { ContainerTitle, DappCard, Portal, SectionList } from '~/ui';
+import { CheckIcon } from '~/ui/Icons';
 
 import styles from './addDapps.css';
 
@@ -39,6 +37,7 @@ export default class AddDapps extends Component {
     }
 
     return (
+<<<<<<< HEAD
       <Modal
         actions={ [
           <Button
@@ -90,10 +89,65 @@ export default class AddDapps extends Component {
           )
         }
       </Modal>
+=======
+      <Portal
+        className={ styles.modal }
+        onClose={ store.closeModal }
+        open
+      >
+        <ContainerTitle
+          title={
+            <FormattedMessage
+              id='dapps.add.label'
+              defaultMessage='visible applications'
+            />
+          }
+        />
+        <div className={ styles.container }>
+          <div className={ styles.warning } />
+          {
+            this.renderList(store.sortedLocal, store.displayApps,
+              <FormattedMessage
+                id='dapps.add.local.label'
+                defaultMessage='Applications locally available'
+              />,
+              <FormattedMessage
+                id='dapps.add.local.desc'
+                defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
+              />
+            )
+          }
+          {
+            this.renderList(store.sortedBuiltin, store.displayApps,
+              <FormattedMessage
+                id='dapps.add.builtin.label'
+                defaultMessage='Applications bundled with Parity'
+              />,
+              <FormattedMessage
+                id='dapps.add.builtin.desc'
+                defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
+              />
+            )
+          }
+          {
+            this.renderList(store.sortedNetwork, store.displayApps,
+              <FormattedMessage
+                id='dapps.add.network.label'
+                defaultMessage='Applications on the global network'
+              />,
+              <FormattedMessage
+                id='dapps.add.network.desc'
+                defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
+              />
+            )
+          }
+        </div>
+      </Portal>
+>>>>>>> 535ebb1... Available Dapp selection alignment with Permissions (Portal) (#4374)
     );
   }
 
-  renderList (items, header, byline) {
+  renderList (items, visibleItems, header, byline) {
     if (!items || !items.length) {
       return null;
     }
@@ -104,41 +158,40 @@ export default class AddDapps extends Component {
           <div className={ styles.header }>{ header }</div>
           <div className={ styles.byline }>{ byline }</div>
         </div>
-        <List>
-          { items.map(this.renderApp) }
-        </List>
+        <SectionList
+          items={ items }
+          noStretch
+          renderItem={ this.renderApp }
+        />
       </div>
     );
   }
 
   renderApp = (app) => {
     const { store } = this.props;
-    const isHidden = !store.displayApps[app.id].visible;
+    const isVisible = store.displayApps[app.id].visible;
 
-    const onCheck = () => {
-      if (isHidden) {
-        store.showApp(app.id);
-      } else {
+    const onClick = () => {
+      if (isVisible) {
         store.hideApp(app.id);
+      } else {
+        store.showApp(app.id);
       }
     };
 
     return (
-      <ListItem
-        key={ app.id }
-        leftCheckbox={
-          <Checkbox
-            checked={ !isHidden }
-            onCheck={ onCheck }
-          />
-        }
-        primaryText={ app.name }
-        secondaryText={
-          <div className={ styles.description }>
-            { app.description }
-          </div>
+      <DappCard
+        app={ app }
+        className={
+          isVisible
+            ? styles.selected
+            : styles.unselected
         }
-      />
+        key={ app.id }
+        onClick={ onClick }
+      >
+        <CheckIcon className={ styles.selectIcon } />
+      </DappCard>
     );
   }
 }

js/src/modals/AddDapps/addDapps.spec.js

@@ -33,13 +33,13 @@ describe('modals/AddDapps', () => {
 
     it('does not render the modal with modalOpen = false', () => {
       expect(
-        renderShallow({ modalOpen: false }).find('Connect(Modal)')
+        renderShallow({ modalOpen: false }).find('Portal')
       ).to.have.length(0);
     });
 
     it('does render the modal with modalOpen = true', () => {
       expect(
-        renderShallow({ modalOpen: true }).find('Connect(Modal)')
+        renderShallow({ modalOpen: true }).find('Portal')
       ).to.have.length(1);
     });
   });

js/src/modals/index.js

@@ -16,10 +16,10 @@
 
 import AddAddress from './AddAddress';
 import AddContract from './AddContract';
-import AddDapps from './AddDapps';
 import CreateAccount from './CreateAccount';
 import CreateWallet from './CreateWallet';
 import DappPermissions from './DappPermissions';
+import DappsVisible from './AddDapps';
 import DeleteAccount from './DeleteAccount';
 import DeployContract from './DeployContract';
 import EditMeta from './EditMeta';
@@ -37,10 +37,10 @@ import WalletSettings from './WalletSettings';
 export {
   AddAddress,
   AddContract,
-  AddDapps,
   CreateAccount,
   CreateWallet,
   DappPermissions,
+  DappsVisible,
   DeleteAccount,
   DeployContract,
   EditMeta,

js/src/ui/Container/container.js

@@ -29,24 +29,42 @@ export default class Container extends Component {
     className: PropTypes.string,
     compact: PropTypes.bool,
     light: PropTypes.bool,
+    onClick: PropTypes.func,
     style: PropTypes.object,
     tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, style, tabIndex } = this.props;
-    const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
-
+    const { children, className, compact, light, onClick, style, tabIndex } = this.props;
     const props = {};
 
     if (Number.isInteger(tabIndex)) {
       props.tabIndex = tabIndex;
     }
 
     return (
-      <div className={ classes } style={ style } { ...props }>
-        <Card className={ compact ? styles.compact : styles.padded }>
+      <div
+        className={
+          [
+            styles.container,
+            light
+              ? styles.light
+              : '',
+            className
+          ].join(' ')
+        }
+        style={ style }
+        { ...props }
+      >
+        <Card
+          className={
+            compact
+              ? styles.compact
+              : styles.padded
+          }
+          onClick={ onClick }
+        >
           { this.renderTitle() }
           { children }
         </Card>