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,23 +1,27 @@
 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) {
+class TabBar extends React.Component { // need "this"
-  const tabs = props.teams.map((team, index) => {
+  render() {
+    const tabs = this.props.teams.map((team, index) => {
       let unreadCount = 0;
-    if (props.unreadCounts[index] > 0) {
+      if (this.props.unreadCounts[index] > 0) {
-      unreadCount = props.unreadCounts[index];
+        unreadCount = this.props.unreadCounts[index];
       }
-    if (props.unreadAtActive[index]) {
+      if (this.props.unreadAtActive[index]) {
         unreadCount += 1;
       }
 
       let mentionCount = 0;
-    if (props.mentionCounts[index] > 0) {
+      if (this.props.mentionCounts[index] > 0) {
-      mentionCount = props.mentionCounts[index];
+        mentionCount = this.props.mentionCounts[index];
       }
-    if (props.mentionAtActiveCounts[index] > 0) {
+      if (this.props.mentionAtActiveCounts[index] > 0) {
-      mentionCount += props.mentionAtActiveCounts[index];
+        mentionCount += this.props.mentionAtActiveCounts[index];
       }
 
       let badgeDiv;
@@ -28,6 +32,23 @@ function TabBar(props) {
           </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
@@ -35,10 +56,12 @@ function TabBar(props) {
             key={id}
             id={id}
             eventKey={index}
+            ref={id}
           >
             { team.name }
             { ' ' }
             { badgeDiv }
+            {permissionOverlay}
           </NavItem>);
       }
       return (
@@ -53,7 +76,7 @@ function TabBar(props) {
           { badgeDiv }
         </NavItem>);
     });
-  if (props.showAddServerButton === true) {
+    if (this.props.showAddServerButton === true) {
       tabs.push(
         <NavItem
           className='TabBar-addServerButton'
@@ -69,14 +92,14 @@ function TabBar(props) {
     return (
       <Nav
         className='TabBar'
-      id={props.id}
+        id={this.props.id}
         bsStyle='tabs'
-      activeKey={props.activeKey}
+        activeKey={this.props.activeKey}
         onSelect={(eventKey) => {
           if (eventKey === 'addServerButton') {
-          props.onAddServer();
+            this.props.onAddServer();
           } else {
-          props.onSelect(eventKey);
+            this.props.onSelect(eventKey);
           }
         }}
       >
@@ -84,6 +107,7 @@ function TabBar(props) {
       </Nav>
     );
   }
+}
 
 TabBar.propTypes = {
   activeKey: PropTypes.number,
@@ -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;
+}