From 9caaabcaccbffe12e53cb3179bf53339e6896cb6 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 31 May 2022 17:01:00 +0200
Subject: [PATCH] fix(ui): move issues button to the subheader

---
 .../app/components/Session_/Issues/Issues.js  | 27 ++++++++++---------
 .../Session_/Issues/issues.module.css         |  3 +--
 .../app/components/Session_/PlayerBlock.js    | 11 +++++++-
 .../components/Session_/PlayerBlockHeader.js  |  2 --
 frontend/app/components/Session_/Subheader.js |  4 +++
 frontend/app/svg/icons/integrations/jira.svg  | 12 ++++-----
 6 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/frontend/app/components/Session_/Issues/Issues.js b/frontend/app/components/Session_/Issues/Issues.js
index 8bbf4232d..a6f6dd077 100644
--- a/frontend/app/components/Session_/Issues/Issues.js
+++ b/frontend/app/components/Session_/Issues/Issues.js
@@ -35,7 +35,7 @@ class Issues extends React.Component {
     super(props);
     this.state = { showModal: false };
   }
-  
+
   closeModal = () => {
     this.setState({ showModal: false });
   }
@@ -64,7 +64,7 @@ class Issues extends React.Component {
   }
 
   render() {
-    const { 
+    const {
       sessionId, isModalDisplayed, projectsLoading, metaLoading, fetchIssuesLoading, issuesIntegration
     } = this.props;
     const { showModal } = this.state;
@@ -74,15 +74,18 @@ class Issues extends React.Component {
       <div className="relative">
         <div className={ stl.buttonWrapper}>
           <Popup
-            interactive={true}
-            hideOnClick={false}
-            useContext
-            multiple={false}
-            unmountHTMLWhenHide={true}
-            open={ showModal }
-            // onOpen={ this.handleOpen }
-            // onClose={ this.handleClose }
-            content = {
+            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}
@@ -94,7 +97,7 @@ class Issues extends React.Component {
             // trigger="click"
             theme="tippy-light"
           >
-            { 
+            {
               <Button
                 variant="outline"
                 onClick={ () => this.setState({ showModal: true }) }
diff --git a/frontend/app/components/Session_/Issues/issues.module.css b/frontend/app/components/Session_/Issues/issues.module.css
index 07b79c740..33dbd5ac7 100644
--- a/frontend/app/components/Session_/Issues/issues.module.css
+++ b/frontend/app/components/Session_/Issues/issues.module.css
@@ -4,7 +4,6 @@
 }
 
 .buttonWrapper {
-  height: 36px;
   display: flex;
   align-items: center;
   /* &:hover {
@@ -17,4 +16,4 @@
   &:hover {
     background-color: $active-blue !important;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 9884bafbc..0dc636856 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -15,16 +15,25 @@ import styles from './playerBlock.css';
   bottomBlock: state.getIn([ 'components', 'player', 'bottomBlock' ]),
   sessionId: state.getIn([ 'sessions', 'current', 'sessionId' ]),
   disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]),
+  jiraConfig: state.getIn([ 'issues', 'list' ]).first(),
 }))
 export default class PlayerBlock extends React.PureComponent {
   render() {
-    const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues, activeTab } = this.props;
+    const { 
+      fullscreen, 
+      bottomBlock, 
+      sessionId, 
+      disabled, 
+      activeTab,
+      jiraConfig,
+     } = this.props;
 
     return (
       <div className={ cn(styles.playerBlock, "flex flex-col") }>
           <SubHeader
             sessionId={sessionId}
             disabled={disabled}
+            jiraConfig={jiraConfig}
           />
         <Player
           className="flex-1"
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index ef91909b6..8c42e40fa 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/frontend/app/components/Session_/PlayerBlockHeader.js
@@ -76,7 +76,6 @@ export default class PlayerBlockHeader extends React.PureComponent {
       width,
       height,
       session,
-      jiraConfig,
       fullscreen,
       metaList,
       closedLive = false,
@@ -135,7 +134,6 @@ export default class PlayerBlockHeader extends React.PureComponent {
             )}
 
             { isAssist && <AssistActions userId={userId} /> }
-            { !isAssist && jiraConfig && jiraConfig.token && <Issues sessionId={ sessionId } /> }
           </div>
         </div>
         {!isAssist && (
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 175985258..7943290b1 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -6,6 +6,7 @@ import SharePopup from '../shared/SharePopup/SharePopup';
 import { connectPlayer } from 'Player';
 import copy from 'copy-to-clipboard';
 import { Tooltip } from 'react-tippy';
+import Issues from './Issues/Issues';
 
 function SubHeader(props) {
     const [isCopied, setCopied] = React.useState(false);
@@ -39,6 +40,9 @@ function SubHeader(props) {
                 </div>
             )}
             <div className="ml-auto text-sm flex items-center color-gray-medium" style={{ width: 'max-content' }}>
+                <div className="cursor-pointer mr-4 hover:bg-gray-light-shade rounded-md p-1">
+                {!isAssist && props.jiraConfig && props.jiraConfig.token && <Issues sessionId={props.sessionId} />}
+                </div>
                 <div className="cursor-pointer">
                     <SharePopup
                         entity="sessions"
diff --git a/frontend/app/svg/icons/integrations/jira.svg b/frontend/app/svg/icons/integrations/jira.svg
index 883f260bd..36b328d35 100644
--- a/frontend/app/svg/icons/integrations/jira.svg
+++ b/frontend/app/svg/icons/integrations/jira.svg
@@ -5,19 +5,19 @@
     <desc>Created with Sketch.</desc>
     <defs>
         <linearGradient x1="67.6800148%" y1="40.3276956%" x2="40.820818%" y2="81.6596195%" id="linearGradient-1">
-            <stop stop-color="#0052CC" offset="18%"></stop>
-            <stop stop-color="#2684FF" offset="100%"></stop>
+            <stop stop-color="#777" offset="18%"></stop>
+            <stop stop-color="#999" offset="100%"></stop>
         </linearGradient>
         <linearGradient x1="32.6559851%" y1="59.1664468%" x2="59.3430302%" y2="17.9899763%" id="linearGradient-2">
-            <stop stop-color="#0052CC" offset="18%"></stop>
-            <stop stop-color="#2684FF" offset="100%"></stop>
+            <stop stop-color="#777" offset="18%"></stop>
+            <stop stop-color="#999" offset="100%"></stop>
         </linearGradient>
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Jira-Software-blue" fill-rule="nonzero">
-            <path d="M72.4,35.76 L39.8,3.16 L36.64,0 L36.64,0 L12.1,24.54 L12.1,24.54 L0.88,35.76 C-0.289813512,36.9312702 -0.289813512,38.8287298 0.88,40 L23.3,62.42 L36.64,75.76 L61.18,51.22 L61.56,50.84 L72.4,40 C73.5698135,38.8287298 73.5698135,36.9312702 72.4,35.76 Z M36.64,49.08 L25.44,37.88 L36.64,26.68 L47.84,37.88 L36.64,49.08 Z" id="Shape" fill="#2684FF"></path>
+            <path d="M72.4,35.76 L39.8,3.16 L36.64,0 L36.64,0 L12.1,24.54 L12.1,24.54 L0.88,35.76 C-0.289813512,36.9312702 -0.289813512,38.8287298 0.88,40 L23.3,62.42 L36.64,75.76 L61.18,51.22 L61.56,50.84 L72.4,40 C73.5698135,38.8287298 73.5698135,36.9312702 72.4,35.76 Z M36.64,49.08 L25.44,37.88 L36.64,26.68 L47.84,37.88 L36.64,49.08 Z" id="Shape" fill="#999"></path>
             <path d="M36.64,26.68 C29.3070783,19.346212 29.2713402,7.46777926 36.56,0.09 L12.05,24.59 L25.39,37.93 L36.64,26.68 Z" id="Path" fill="url(#linearGradient-1)"></path>
             <path d="M47.87,37.85 L36.64,49.08 C40.179363,52.6172581 42.1679334,57.4160731 42.1679334,62.42 C42.1679334,67.4239269 40.179363,72.2227419 36.64,75.76 L36.64,75.76 L61.21,51.19 L47.87,37.85 Z" id="Path" fill="url(#linearGradient-2)"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>