fix(ui): mobile highlights modal

frontend/app/components/Session/MobilePlayer.tsx

@@ -112,7 +112,6 @@ function MobilePlayer(props: any) {
   return (
     <MobilePlayerContext.Provider value={contextValue}>
       <MobilePlayerHeader
-        // @ts-ignore TODO?
         activeTab={activeTab}
         setActiveTab={setActiveTab}
         tabs={TABS}

frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { sessions as sessionsRoute, withSiteId } from 'App/routes';
 import { BackLink } from 'UI';
 import cn from 'classnames';
@@ -14,8 +14,14 @@ import { useStore } from 'App/mstore';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
-// TODO props
-function PlayerBlockHeader(props: any) {
+interface Props {
+  fullscreen: boolean;
+  setActiveTab: (tab: string) => void;
+  activeTab: string;
+  tabs: Record<string, string>;
+}
+
+function PlayerBlockHeader(props: Props) {
   const [hideBack, setHideBack] = React.useState(false);
   const { player, store } = React.useContext(PlayerContext);
 
@@ -24,13 +30,13 @@ function PlayerBlockHeader(props: any) {
   const { customFieldStore, projectsStore, sessionStore } = useStore();
   const session = sessionStore.current;
   const siteId = projectsStore.siteId!;
+  const history = useHistory();
   const {
     fullscreen,
     setActiveTab,
-    activeTab,
-    history,
+    activeTab
   } = props;
-  const metaList = customFieldStore.list.map((i: any) => i.key)
+  const metaList = customFieldStore.list.map((i: any) => i.key);
 
   React.useEffect(() => {
     const iframe = localStorage.getItem(IFRAME) || false;
@@ -53,7 +59,7 @@ function PlayerBlockHeader(props: any) {
 
   const TABS = Object.keys(props.tabs).map((tab) => ({
     text: props.tabs[tab],
-    key: tab,
+    key: tab
   }));
 
   return (
@@ -98,4 +104,4 @@ function PlayerBlockHeader(props: any) {
 
 const PlayerHeaderCont = observer(PlayerBlockHeader);
 
-export default withRouter(PlayerHeaderCont);
+export default PlayerHeaderCont;

frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import QueueControls from 'Components/Session_/QueueControls';
 import Bookmark from 'Shared/Bookmark';
 import Issues from 'Components/Session_/Issues/Issues';
-import NotePopup from 'Components/Session_/components/NotePopup';
 import { Tag } from 'antd';
 import { ShareAltOutlined } from '@ant-design/icons';
 import { Button as AntButton } from 'antd';
@@ -12,13 +11,21 @@ import ShareModal from 'Shared/SharePopup/SharePopup';
 import { Tooltip } from '.store/antd-virtual-7db13b4af6/package';
 import { useModal } from 'Components/ModalContext';
 import { PlayerContext } from 'Components/Session/playerContext';
+import HighlightButton from 'Components/Session_/Highlight/HighlightButton';
+import IssueForm from 'Components/Session_/Issues/IssueForm';
 
-function SubHeader(props: any) {
-  const { sessionStore, integrationsStore } = useStore();
+interface Props {
+  setActiveTab: (tab: string) => void;
+  sessionId: string;
+}
+
+function SubHeader(props: Props) {
+  const { sessionStore, integrationsStore, issueReportingStore } = useStore();
   const integrations = integrationsStore.issues.list;
   const isIOS = sessionStore.current.platform === 'ios';
   const { openModal, closeModal } = useModal();
   const { store } = React.useContext(PlayerContext);
+  const currentSession = sessionStore.current;
 
   const enabledIntegration = useMemo(() => {
     if (!integrations || !integrations.length) {
@@ -26,7 +33,24 @@ function SubHeader(props: any) {
     }
 
     return integrations.some((i: Record<string, any>) => i.token);
-  }, [props.integrations]);
+  }, [integrations]);
+
+  const handleOpenIssueModal = () => {
+    issueReportingStore.init({});
+    if (!issueReportingStore.projectsFetched) {
+      issueReportingStore.fetchProjects().then((projects) => {
+        if (projects && projects[0]) {
+          void issueReportingStore.fetchMeta(projects[0].id);
+        }
+      });
+    }
+    openModal(
+      <IssueForm sessionId={currentSession.sessionId} closeHandler={closeModal} errors={[]} />,
+      {
+        title: 'Create Issue'
+      }
+    );
+  };
 
   return (
     <>
@@ -36,7 +60,7 @@ function SubHeader(props: any) {
           className="ml-auto text-sm flex items-center color-gray-medium gap-2"
           style={{ width: 'max-content' }}
         >
-          <NotePopup />
+          <HighlightButton onClick={() => props.setActiveTab('HIGHLIGHT')} />
           {enabledIntegration && <Issues sessionId={props.sessionId} />}
           <Bookmark sessionId={props.sessionId} />
           <Tooltip title="Share Session" placement="bottom">

frontend/app/components/Session/Player/MobilePlayer/PlayerBlock.tsx

@@ -31,7 +31,7 @@ function PlayerBlock(props: IProps) {
       className={cn(styles.playerBlock, 'flex flex-col', 'overflow-x-hidden')}
     >
       {shouldShowSubHeader ? (
-        <MobilePlayerSubheader sessionId={sessionId} jiraConfig={jiraConfig} />
+        <MobilePlayerSubheader sessionId={sessionId} jiraConfig={jiraConfig} setActiveTab={setActiveTab}/>
       ) : null}
       <Player
         setActiveTab={setActiveTab}
@@ -42,4 +42,4 @@ function PlayerBlock(props: IProps) {
   );
 }
 
-export default observer(PlayerBlock)
+export default observer(PlayerBlock)