From 2b6642778a954759dc11d6a377b26ee98edc5514 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 10 Oct 2022 11:30:40 +0200
Subject: [PATCH] change(ui): some notes refinements and reposition

---
 .../Session_/EventsBlock/NoteEvent.tsx        | 30 +++++++++++++------
 .../Player/Controls/components/CreateNote.tsx | 13 ++++----
 .../Player/Controls/components/ReadNote.tsx   |  7 ++---
 .../components/Notes/NoteItem.tsx             |  5 ++--
 .../components/Notes/TeamBadge.tsx            | 11 +++++++
 .../components/Notes/index.ts                 |  1 +
 6 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx

diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 27ba022e6..8552d06dc 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -10,6 +10,7 @@ import { toast } from 'react-toastify';
 import { session } from 'App/routes';
 import { confirm } from 'UI';
 import { filterOutNote as filterOutTimelineNote } from 'Player';
+import { TeamBadge } from 'Shared/SessionListContainer/components/Notes';
 
 interface Props {
   note: Note;
@@ -74,21 +75,36 @@ function NoteEvent(props: Props) {
       className="flex items-start flex-col p-2 border rounded"
       style={{ background: 'rgba(253, 243, 155, 0.1)' }}
     >
-      <div className="flex items-center w-full">
+      <div className="flex items-center w-full relative">
         <div className="p-3 bg-gray-light rounded-full">
           <Icon name="quotes" color="main" />
         </div>
         <div className="ml-2">
-          <div className="text-base">{props.userEmail}</div>
+          <div
+            className="text-base"
+            style={{
+              maxWidth: 160,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {props.userEmail}, {props.userEmail}
+          </div>
           <div className="text-disabled-text text-sm">
             {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
           </div>
         </div>
-        <div className="cursor-pointer ml-auto">
+        <div className="cursor-pointer absolute" style={{ right: -10 }}>
           <ItemMenu bold items={menuItems} />
         </div>
       </div>
-      <div className="text-xl my-3 overflow-y-scroll overflow-x-hidden" style={{ maxHeight: 200, maxWidth: 220 }}>{props.note.message}</div>
+      <div
+        className="text-xl my-3 overflow-y-scroll overflow-x-hidden"
+        style={{ maxHeight: 200, maxWidth: 220 }}
+      >
+        {props.note.message}
+      </div>
       <div>
         <div className="flex items-center gap-2 flex-wrap w-full">
           {props.note.tag ? (
@@ -107,11 +123,7 @@ function NoteEvent(props: Props) {
               {props.note.tag}
             </div>
           ) : null}
-          {!props.note.isPublic ? null : (
-            <>
-              <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
-            </>
-          )}
+          {!props.note.isPublic ? null : <TeamBadge />}
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
index ba2e11b8b..902dc0034 100644
--- a/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/CreateNote.tsx
@@ -10,6 +10,8 @@ import { toast } from 'react-toastify';
 import { injectNotes } from 'Player';
 import { fetchList as fetchSlack } from 'Duck/integrations/slack';
 import Select from 'Shared/Select';
+import { TeamBadge } from 'Shared/SessionListContainer/components/Notes'
+import { List } from 'immutable';
 
 interface Props {
   isVisible: boolean;
@@ -20,7 +22,7 @@ interface Props {
   sessionId: string;
   isEdit: string;
   editNote: WriteNote;
-  slackChannels: Record<string, string>[];
+  slackChannels: List<Record<string, any>>;
   fetchSlack: () => void;
 }
 
@@ -56,7 +58,7 @@ function CreateNote({
   }, [isEdit]);
 
   React.useEffect(() => {
-    if (inputRef.current) {
+    if (inputRef.current && isVisible) {
       fetchSlack();
       inputRef.current.focus();
     }
@@ -134,7 +136,7 @@ function CreateNote({
   const slackChannelsOptions = slackChannels.map(({ webhookId, name }) => ({
     value: webhookId,
     label: name,
-  }));
+  })).toJS() as unknown as { value: string, label: string }[]
 
   const changeChannel = ({ value, name }: { value: string; name: string }) => {
     setChannel(value);
@@ -144,7 +146,7 @@ function CreateNote({
     <div
       className={stl.noteTooltip}
       style={{
-        top: -320,
+        top: slackChannelsOptions.length > 0 ? -310 : 255,
         width: 350,
         left: 'calc(50% - 175px)',
         display: isVisible ? 'flex' : 'none',
@@ -222,8 +224,7 @@ function CreateNote({
         </Button>
         <div className="flex items-center cursor-pointer" onClick={() => setPublic(!isPublic)}>
           <Checkbox checked={isPublic} />
-          <Icon name="user-friends" size={16} className="mx-1" />
-          Visible to the team
+          <TeamBadge />
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
index bdc6708e8..3123a6377 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@@ -4,6 +4,7 @@ import { tagProps, Note } from 'App/services/NotesService';
 import { formatTimeOrDate } from 'App/date';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
+import { TeamBadge } from 'Shared/SessionListContainer/components/Notes'
 
 interface Props {
   userEmail: string;
@@ -42,7 +43,7 @@ function ReadNote(props: Props) {
   }
 
   return (
-    <div onClick={props.onClose} style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }} className="flex items-center justify-center">
+    <div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }} className="flex items-center justify-center">
         <div
           className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
           style={{ background: '#FFFEF5', width: 500 }}
@@ -74,9 +75,7 @@ function ReadNote(props: Props) {
                     </div>
               ) : null}
               {!props.note.isPublic ? null : (
-                <>
-                  <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> <span className="text-disabled-text">Team</span>
-                </>
+                <TeamBadge />
               )}
 
               <div
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index 0771ae55a..cce645faf 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -9,6 +9,7 @@ import { ItemMenu } from 'UI';
 import copy from 'copy-to-clipboard';
 import { toast } from 'react-toastify';
 import { session } from 'App/routes';
+import TeamBadge from './TeamBadge'
 
 interface Props {
   note: Note;
@@ -75,9 +76,7 @@ function NoteItem(props: Props) {
               {props.userEmail},{' '}
               {formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
               {!props.note.isPublic ? null : (
-                <>
-                  <Icon name="user-friends" className="ml-4 mr-1" color="gray-dark" /> Team
-                </>
+                <TeamBadge />
               )}
             </div>
           </div>
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
new file mode 100644
index 000000000..c589305dc
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'UI'
+
+export default function TeamBadge() {
+  return (
+    <>
+      <Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" />
+      <span className="text-disabled-text">Team</span>
+    </>
+  )
+}
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts b/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts
index 49327f792..0d46fcee2 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts
@@ -1 +1,2 @@
 export { default } from './NoteList'
+export { default as TeamBadge } from './TeamBadge'