Append PermissionRequestDialog to TabBar

src/browser/components/MainPage.jsx

@@ -25,7 +25,9 @@ const MainPage = createReactClass({
     useSpellChecker: PropTypes.bool.isRequired,
     onSelectSpellCheckerLocale: PropTypes.func.isRequired,
     deeplinkingUrl: PropTypes.string,
-    showAddServerButton: PropTypes.bool.isRequired
+    showAddServerButton: PropTypes.bool.isRequired,
+    requestingPermission: TabBar.propTypes.requestingPermission,
+    onClickPermissionDialog: PropTypes.func
   },
 
   getInitialState() {
@@ -260,6 +262,8 @@ const MainPage = createReactClass({
             onSelect={this.handleSelect}
             onAddServer={this.addServer}
             showAddServerButton={this.props.showAddServerButton}
+            requestingPermission={this.props.requestingPermission}
+            onClickPermissionDialog={this.props.onClickPermissionDialog}
           />
         </Row>
       );

src/browser/components/TabBar.jsx

@@ -1,34 +1,69 @@
 const React = require('react');
+const {findDOMNode} = require('react-dom');
 const PropTypes = require('prop-types');
-const {Glyphicon, Nav, NavItem} = require('react-bootstrap');
+const {Glyphicon, Nav, NavItem, Overlay} = require('react-bootstrap');
+const PermissionRequestDialog = require('./PermissionRequestDialog.jsx');
+const utils = require('../../utils/util');
 
-function TabBar(props) {
-  const tabs = props.teams.map((team, index) => {
-    let unreadCount = 0;
-    if (props.unreadCounts[index] > 0) {
-      unreadCount = props.unreadCounts[index];
-    }
-    if (props.unreadAtActive[index]) {
-      unreadCount += 1;
-    }
+class TabBar extends React.Component { // need "this"
+  render() {
+    const tabs = this.props.teams.map((team, index) => {
+      let unreadCount = 0;
+      if (this.props.unreadCounts[index] > 0) {
+        unreadCount = this.props.unreadCounts[index];
+      }
+      if (this.props.unreadAtActive[index]) {
+        unreadCount += 1;
+      }
 
-    let mentionCount = 0;
-    if (props.mentionCounts[index] > 0) {
-      mentionCount = props.mentionCounts[index];
-    }
-    if (props.mentionAtActiveCounts[index] > 0) {
-      mentionCount += props.mentionAtActiveCounts[index];
-    }
+      let mentionCount = 0;
+      if (this.props.mentionCounts[index] > 0) {
+        mentionCount = this.props.mentionCounts[index];
+      }
+      if (this.props.mentionAtActiveCounts[index] > 0) {
+        mentionCount += this.props.mentionAtActiveCounts[index];
+      }
 
-    let badgeDiv;
-    if (mentionCount !== 0) {
-      badgeDiv = (
-        <div className='TabBar-badge'>
-          {mentionCount}
-        </div>);
-    }
-    const id = 'teamTabItem' + index;
-    if (unreadCount === 0) {
+      let badgeDiv;
+      if (mentionCount !== 0) {
+        badgeDiv = (
+          <div className='TabBar-badge'>
+            {mentionCount}
+          </div>);
+      }
+      const id = 'teamTabItem' + index;
+      const permissionOverlay = this.props.requestingPermission[index] ? (
+        <Overlay
+          className='TabBar-permissionOverlay'
+          placement='bottom'
+          show={this.props.activeKey === index}
+          target={() => findDOMNode(this.refs[id])}
+        >
+          <PermissionRequestDialog
+            id={`${id}-permissionDialog`}
+            origin={this.props.requestingPermission[index].origin}
+            permission={this.props.requestingPermission[index].permission}
+            onClickAllow={this.props.onClickPermissionDialog.bind(null, index, 'allow')}
+            onClickBlock={this.props.onClickPermissionDialog.bind(null, index, 'block')}
+            onClickClose={this.props.onClickPermissionDialog.bind(null, index, 'close')}
+          />
+        </Overlay>
+      ) : null;
+      if (unreadCount === 0) {
+        return (
+          <NavItem
+            className='teamTabItem'
+            key={id}
+            id={id}
+            eventKey={index}
+            ref={id}
+          >
+            { team.name }
+            { ' ' }
+            { badgeDiv }
+            {permissionOverlay}
+          </NavItem>);
+      }
       return (
         <NavItem
           className='teamTabItem'
@@ -36,53 +71,42 @@ function TabBar(props) {
           id={id}
           eventKey={index}
         >
-          { team.name }
+          <b>{ team.name }</b>
           { ' ' }
           { badgeDiv }
         </NavItem>);
+    });
+    if (this.props.showAddServerButton === true) {
+      tabs.push(
+        <NavItem
+          className='TabBar-addServerButton'
+          key='addServerButton'
+          id='addServerButton'
+          eventKey='addServerButton'
+          title='Add new server'
+        >
+          <Glyphicon glyph='plus'/>
+        </NavItem>
+    );
     }
     return (
-      <NavItem
-        className='teamTabItem'
-        key={id}
-        id={id}
-        eventKey={index}
+      <Nav
+        className='TabBar'
+        id={this.props.id}
+        bsStyle='tabs'
+        activeKey={this.props.activeKey}
+        onSelect={(eventKey) => {
+          if (eventKey === 'addServerButton') {
+            this.props.onAddServer();
+          } else {
+            this.props.onSelect(eventKey);
+          }
+        }}
       >
-        <b>{ team.name }</b>
-        { ' ' }
-        { badgeDiv }
-      </NavItem>);
-  });
-  if (props.showAddServerButton === true) {
-    tabs.push(
-      <NavItem
-        className='TabBar-addServerButton'
-        key='addServerButton'
-        id='addServerButton'
-        eventKey='addServerButton'
-        title='Add new server'
-      >
-        <Glyphicon glyph='plus'/>
-      </NavItem>
+        { tabs }
+      </Nav>
     );
   }
-  return (
-    <Nav
-      className='TabBar'
-      id={props.id}
-      bsStyle='tabs'
-      activeKey={props.activeKey}
-      onSelect={(eventKey) => {
-        if (eventKey === 'addServerButton') {
-          props.onAddServer();
-        } else {
-          props.onSelect(eventKey);
-        }
-      }}
-    >
-      { tabs }
-    </Nav>
-  );
 }
 
 TabBar.propTypes = {
@@ -94,8 +118,13 @@ TabBar.propTypes = {
   unreadAtActive: PropTypes.array,
   mentionCounts: PropTypes.array,
   mentionAtActiveCounts: PropTypes.array,
+  showAddServerButton: PropTypes.bool,
+  requestingPermission: PropTypes.arrayOf(PropTypes.shape({
+    origin: PropTypes.string,
+    permission: PropTypes.string
+  })),
   onAddServer: PropTypes.func,
-  showAddServerButton: PropTypes.bool
+  onClickPermissionDialog: PropTypes.func
 };
 
 module.exports = TabBar;

src/browser/css/components/TabBar.css

@@ -36,4 +36,8 @@
   margin-left: 5px;
   margin-top: 5px;
   border-radius: 50%;
-};
+}
+
+div[id*="-permissionDialog"] {
+  max-width: 350px;
+}