fix(ui): fix jira integration, fix widget name esc handling, minor fixes

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -43,10 +43,10 @@ function WidgetName(props: Props) {
         setEditing(false)
       }
     }
-    document.addEventListener('keypress', handler, false)
+    document.addEventListener('keydown', handler, false)
 
     return () => {
-      document.removeEventListener('keypress', handler, false)
+      document.removeEventListener('keydown', handler, false)
     }
   }, [])
 

frontend/app/components/Session/WebPlayer.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Loader } from 'UI';
 import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
+import { fetchList } from 'Duck/integrations';
 import {
   PlayerProvider,
   connectPlayer,
@@ -40,7 +41,7 @@ function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
 }
 
 function WebPlayer (props) {
-  const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, config } = props;
+  const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
 
   const TABS = {
     EVENTS: 'Events',
@@ -50,6 +51,7 @@ function WebPlayer (props) {
   const [activeTab, setActiveTab] = useState('');
 
   useEffect(() => {
+    fetchList('issues')
     initPlayer(session, jwt);
 
     const jumptTime = props.query.get('jumpto');
@@ -89,4 +91,5 @@ export default connect(state => ({
 }), {
   toggleFullscreen,
   closeBottomBlock,
+  fetchList,
 })(withLocationHandlers()(WebPlayer));

frontend/app/components/Session_/Issues/Issues.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Popup, Button } from 'UI';
+import { Popup, Button, Icon } from 'UI';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import IssuesModal from './IssuesModal';
 import { fetchProjects, fetchMeta } from 'Duck/assignments';
-import withToggle from 'HOCs/withToggle';
 import stl from './issues.module.css';
-import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
 
 @connect(state => ({
   issues: state.getIn(['assignments', 'list']),
@@ -21,16 +19,10 @@ import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
 
   jiraConfig: state.getIn([ 'issues', 'list' ]).first(),
   issuesFetched: state.getIn([ 'issues', 'issuesFetched' ]),
-}), { fetchMeta, fetchProjects, fetchListIntegration })
-@withToggle('isModalDisplayed', 'toggleModal')
+}), { fetchMeta, fetchProjects })
 class Issues extends React.Component {
   state = {showModal: false };
 
-  componentDidMount() {
-    if (!this.props.issuesFetched)
-      this.props.fetchListIntegration('issues')
-  }
-
   constructor(props) {
     super(props);
     this.state = { showModal: false };
@@ -46,12 +38,7 @@ class Issues extends React.Component {
     this.setState({ showModal: true });
   }
 
-  handleClose = () => {
-    this.setState({ showModal: false });
-  }
-
   handleOpen = () => {
-    alert('test')
     this.setState({ showModal: true });
     if (!this.props.projectsFetched) { // cache projects fetch
       this.props.fetchProjects().then(function() {
@@ -67,52 +54,33 @@ class Issues extends React.Component {
     const {
       sessionId, isModalDisplayed, projectsLoading, metaLoading, fetchIssuesLoading, issuesIntegration
     } = this.props;
-    const { showModal } = this.state;
     const provider = issuesIntegration.provider
 
     return (
-      <div className="relative">
-        <div className={ stl.buttonWrapper}>
-          <Popup
-            open={ isModalDisplayed }
-            onOpen={ this.handleOpen }
-            onClose={ this.handleClose }
-            trigger={
-                <div className="flex items-center" onClick={this.props.toggleModal} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
-                  <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
-                  <span className="ml-2">Create Issue</span>
-                </div>
-            }
-            on="click"
-            position="top right"
-            content={
-              <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
-                <IssuesModal
-                  provider={provider}
-                  sessionId={ sessionId }
-                  closeHandler={ this.closeModal }
-                />
-              </OutsideClickDetectingDiv>
-            }
-            // trigger="click"
-            theme="tippy-light"
-          >
-            {
-              <Button
-                variant="outline"
-                onClick={ () => this.setState({ showModal: true }) }
-                className={ stl.button }
-                disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
-                icon={`integrations/${ provider === 'jira' ? 'jira' : 'github'}`}
-              >
-                <div className="h-full flex items-center">
-                  Report Issue
-                </div>
-              </Button>
-            }
-          </Popup>
+        <div className="relative">
+          <div className={ stl.buttonWrapper} onClick={this.handleOpen}>
+            <Popup
+              open={this.state.showModal}
+              position="top right"
+              interactive
+              content={
+                <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
+                  <IssuesModal
+                    provider={provider}
+                    sessionId={ sessionId }
+                    closeHandler={ this.closeModal }
+                  />
+                </OutsideClickDetectingDiv>
+              }
+              theme="tippy-light"
+            >
+              <div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
+                    <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
+                    <span className="ml-2">Create Issue</span>
+                  </div>
+            </Popup>
+          </div>
         </div>
-      </div>
     );
   }
 };

frontend/app/components/Session_/Issues/IssuesModal.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import stl from './issuesModal.module.css';
 import IssueForm from './IssueForm';
-import { Icon } from 'UI';
+import { Provider } from 'react-redux';
+import store from 'App/store';
 
 const IssuesModal = ({
   sessionId,
@@ -14,7 +15,9 @@ const IssuesModal = ({
         {/* <Icon name={headerIcon} size="18" color="color-gray-darkest" />  */}
         <span>{`Report an Issue on ${provider === 'jira' ? 'Jira' : 'Github'}`}</span>
       </h3>
-      <IssueForm sessionId={ sessionId } closeHandler={ closeHandler } />
+      <Provider store={store}>
+        <IssueForm sessionId={ sessionId } closeHandler={ closeHandler } />
+      </Provider>
     </div>
   );
 }

frontend/app/components/Session_/PlayerBlockHeader.js

@@ -138,7 +138,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
               tabs={ TABS }
               active={ activeTab }
               onClick={ (tab) => { setActiveTab(tab); !showEvents && toggleEvents(true) } }
-              border={ true }
+              border={ false }
             />
           </div>
         )}

frontend/tsconfig.json

@@ -25,6 +25,7 @@
       "Player": ["./app/player"],
       "HOCs/*": ["./app/components/hocs/*"],
       "Types/*": ["./app/types/*"],
+      "Duck/*": ["./app/duck/*"],
     }
   },
   "include": ["app"]