fix(ui): fix note create modal from context menu (#1990)

frontend/app/components/Session_/Player/Overlay.tsx

@@ -1,28 +1,32 @@
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { PlayerContext } from 'App/components/Session/playerContext';
 import {
   CONSOLE,
   NETWORK,
   PERFORMANCE,
   STACKEVENTS,
   STORAGE,
-  toggleBottomBlock
-} from "Duck/components/player";
-import React from 'react';
+  toggleBottomBlock,
+} from 'Duck/components/player';
+import { Icon } from 'UI';
+
+import { useModal } from '../../Modal';
+import CreateNote from './Controls/components/CreateNote';
 import AutoplayTimer from './Overlay/AutoplayTimer';
-import PlayIconLayer from './Overlay/PlayIconLayer';
-import Loader from './Overlay/Loader';
 import ElementsMarker from './Overlay/ElementsMarker';
-import { PlayerContext } from 'App/components/Session/playerContext';
-import { observer } from 'mobx-react-lite';
-import { Dropdown } from "antd"
-import type {MenuProps} from 'antd';
-import { connect } from 'react-redux';
-import { Icon } from 'UI'
+import Loader from './Overlay/Loader';
+import PlayIconLayer from './Overlay/PlayIconLayer';
 
 interface Props {
-  nextId?: string,
-  closedLive?: boolean,
-  isClickmap?: boolean,
-  toggleBottomBlock: (block: number) => void,
+  nextId?: string;
+  closedLive?: boolean;
+  isClickmap?: boolean;
+  toggleBottomBlock: (block: number) => void;
 }
 
 enum ItemKey {
@@ -38,44 +42,40 @@ const menuItems: MenuProps['items'] = [
   {
     key: ItemKey.Console,
     label: 'Console',
-    icon: <Icon name={"terminal"} size={14} />,
+    icon: <Icon name={'terminal'} size={14} />,
   },
   {
     key: ItemKey.Network,
     label: 'Network',
-    icon: <Icon name={"arrow-down-up"} size={14} />
+    icon: <Icon name={'arrow-down-up'} size={14} />,
   },
   {
     key: ItemKey.Performance,
     label: 'Performance',
-    icon: <Icon name={"speedometer2"} size={14} />
+    icon: <Icon name={'speedometer2'} size={14} />,
   },
   {
     key: ItemKey.Events,
     label: 'Events',
-    icon: <Icon name={"filetype-js"} size={14} />
+    icon: <Icon name={'filetype-js'} size={14} />,
   },
   {
     key: ItemKey.State,
     label: 'State',
-    icon: <Icon name={"redux"} size={14} />
+    icon: <Icon name={'redux'} size={14} />,
   },
   { type: 'divider' },
   {
     key: ItemKey.AddNote,
     label: 'Add Note',
-    icon: <Icon name={"quotes"} size={14} />
-  }
-]
+    icon: <Icon name={'quotes'} size={14} />,
+  },
+];
 
-function Overlay({
-   nextId,
-   isClickmap,
-   toggleBottomBlock,
-}: Props) {
-  const {player, store} = React.useContext(PlayerContext)
+function Overlay({ nextId, isClickmap, toggleBottomBlock }: Props) {
+  const { player, store } = React.useContext(PlayerContext);
 
-  const togglePlay = () => player.togglePlay()
+  const togglePlay = () => player.togglePlay();
   const {
     playing,
     messagesLoading,
@@ -85,47 +85,69 @@ function Overlay({
     markedTargets,
     activeTargetIndex,
     tabStates,
-  } = store.get()
-  const cssLoading = Object.values(tabStates).some(({cssLoading}) => cssLoading)
-  const loading = messagesLoading || cssLoading
+  } = store.get();
+  const { showModal, hideModal } = useModal();
+  const cssLoading = Object.values(tabStates).some(
+    ({ cssLoading }) => cssLoading
+  );
+  const loading = messagesLoading || cssLoading;
 
-  const showAutoplayTimer = completed && autoplay && nextId
-  const showPlayIconLayer = !isClickmap && !markedTargets && !inspectorMode && !loading && !showAutoplayTimer;
+  const showAutoplayTimer = completed && autoplay && nextId;
+  const showPlayIconLayer =
+    !isClickmap &&
+    !markedTargets &&
+    !inspectorMode &&
+    !loading &&
+    !showAutoplayTimer;
 
-  const onClick = ({key}: { key: string }) => {
+  const onClick = ({ key }: { key: string }) => {
     switch (key) {
       case ItemKey.Console:
-        toggleBottomBlock(CONSOLE)
+        toggleBottomBlock(CONSOLE);
         break;
       case ItemKey.Network:
-        toggleBottomBlock(NETWORK)
+        toggleBottomBlock(NETWORK);
         break;
       case ItemKey.Performance:
-        toggleBottomBlock(PERFORMANCE)
+        toggleBottomBlock(PERFORMANCE);
         break;
       case ItemKey.Events:
-        toggleBottomBlock(STACKEVENTS)
+        toggleBottomBlock(STACKEVENTS);
         break;
       case ItemKey.State:
-        toggleBottomBlock(STORAGE)
+        toggleBottomBlock(STORAGE);
         break;
       case ItemKey.AddNote:
-        // TODO setCreateNoteTooltip({ time: store.get().time, isVisible: true });
+        showModal(
+          <CreateNote
+            hideModal={hideModal}
+            isEdit={false}
+            time={Math.round(store.get().time)}
+          />,
+          { right: true, width: 380 }
+        );
         break;
       default:
         return;
     }
-  }
+  };
   return (
     <>
-      {showAutoplayTimer && <AutoplayTimer/>}
-      {loading ? <Loader/> : null}
-      <Dropdown menu={{items: menuItems, onClick}} trigger={['contextMenu']}>
+      {showAutoplayTimer && <AutoplayTimer />}
+      {loading ? <Loader /> : null}
+      <Dropdown menu={{ items: menuItems, onClick }} trigger={['contextMenu']}>
         <div>
-          {showPlayIconLayer && <PlayIconLayer playing={playing} togglePlay={togglePlay}/>}
+          {showPlayIconLayer && (
+            <PlayIconLayer playing={playing} togglePlay={togglePlay} />
+          )}
         </div>
       </Dropdown>
-      {markedTargets && <ElementsMarker targets={markedTargets} activeIndex={activeTargetIndex}/>}
+      {markedTargets && (
+        <ElementsMarker
+          targets={markedTargets}
+          activeIndex={activeTargetIndex}
+        />
+      )}
     </>
   );
 }