From d1a325c4139205eee0f962f80da08a4dc094172d Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 27 Sep 2022 14:35:15 +0200
Subject: [PATCH] feat(ui): add notes list to default page

---
 .../SessionListContainer.tsx                  |  5 +-
 .../components/Notes/NoteItem.tsx             | 46 +++++++++++
 .../components/Notes/NoteList.tsx             | 78 +++++++++++++++++++
 .../components/Notes/index.ts                 |  1 +
 .../SessionHeader/SessionHeader.tsx           | 44 +++++++----
 5 files changed, 158 insertions(+), 16 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/Notes/index.ts

diff --git a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
index 0b8bc35c6..41a033088 100644
--- a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
+++ b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import SessionList from './components/SessionList';
 import SessionHeader from './components/SessionHeader';
+import NotesList from './components/Notes/NoteList';
 
 function SessionListContainer() {
     return (
         <div className="widget-wrapper">
             <SessionHeader />
             <div className="border-b" />
-            <SessionList />
+            {/* <SessionList /> */}
+            <NotesList />
+
         </div>
     );
 }
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
new file mode 100644
index 000000000..e05cfac10
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { Icon } from 'UI'
+import PlayLink from 'Shared/SessionItem/PlayLink'
+
+enum Tags {
+  QUERY,
+  ISSUE,
+  TASK,
+  OTHER
+}
+
+interface Props {
+  author: string
+  date: string
+  tag: Tags
+  isPrivate: boolean
+  description: string
+  sessionId: string
+}
+
+function NoteItem(props: Props) {
+
+  return (
+     <div className="flex items-center p-4 border-b hover:backdrop-opacity-25" style={{ background: 'rgba(253, 243, 155, 0.1)' }}>
+        <div className="flex flex-col">
+          <div>{props.description}</div>
+          <div className="flex items-center gap-2">
+            <div>{props.tag}</div>
+            <div className='text-disabled-text flex items-center'>
+            <span className="text-figmaColors-text-primary mr-1">By </span>
+              {props.author}, {props.date}
+              {props.isPrivate ? null : (
+              <>
+                <Icon name="user-friends" className="ml-4 mr-1" color="gray-dark" /> Team
+              </>
+            )}
+            </div>
+          </div>
+        </div>
+        <div className="ml-auto"><PlayLink isAssist={false} viewed={false} sessionId={props.sessionId} queryParams="noteurlparams" /></div>
+        <div className="ml-2 cursor-pointer"><Icon name="ellipsis-v" size={20} /></div>
+     </div>
+  )
+}
+
+export default NoteItem
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
new file mode 100644
index 000000000..7695c968c
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { NoContent, Pagination, Icon } from 'UI';
+import { sliceListPerPage } from 'App/utils';
+import NoteItem from './NoteItem';
+
+//{ siteId }: { siteId: string }
+function NotesList() {
+  const list = [
+    {
+      author: 'nikita@openreplay.com',
+      date: 'Today, 12.00PM',
+      tag: 1,
+      isPrivate: true,
+      description: 'Testing private note stuff bla bla bla',
+      sessionId: '123123123',
+      id: 2,
+    },
+    {
+      author: 'sasha@openreplay.com',
+      date: 'Tomorrow, 12.00PM',
+      tag: 0,
+      isPrivate: false,
+      description: 'Not Testing team note stuff bla bla bla',
+      sessionId: '123123123',
+      id: 1,
+    },
+  ];
+
+  const store = {
+    page: 1,
+    pageSize: 10,
+    // @ts-ignore
+    updateKey: (a, b) => 1,
+  };
+
+  return (
+    <NoContent
+      show={list.length === 0}
+      title={
+        <div className="flex flex-col items-center justify-center">
+          <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
+          <div className="text-center text-gray-600 my-4">No notes yet</div>
+        </div>
+      }
+    >
+      <div className="mt-3 border-b rounded bg-white">
+        {sliceListPerPage(list, store.page - 1, store.pageSize).map((note) => (
+          <React.Fragment key={note.id}>
+            <NoteItem
+              author={note.author}
+              tag={note.tag}
+              date={note.date}
+              isPrivate={note.isPrivate}
+              description={note.description}
+              sessionId={note.sessionId}
+            />
+          </React.Fragment>
+        ))}
+      </div>
+
+      <div className="w-full flex items-center justify-between pt-4 px-6">
+        <div className="text-disabled-text">
+          Showing <span className="font-semibold">{Math.min(list.length, store.pageSize)}</span> out
+          of <span className="font-semibold">{list.length}</span> notes
+        </div>
+        <Pagination
+          page={store.page}
+          totalPages={Math.ceil(list.length / store.pageSize)}
+          onPageChange={(page) => store.updateKey('page', page)}
+          limit={store.pageSize}
+          debounceRequest={100}
+        />
+      </div>
+    </NoContent>
+  );
+}
+
+export default NotesList;
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts b/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts
new file mode 100644
index 000000000..49327f792
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/index.ts
@@ -0,0 +1 @@
+export { default } from './NoteList'
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
index e991c8c31..b22500419 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
@@ -10,10 +10,22 @@ import cn from 'classnames';
 import { setActiveTab } from 'Duck/search';
 import SessionSettingButton from '../SessionSettingButton';
 
+// @ts-ignore
+const Tab = ({ addBorder, onClick, children }) => (
+    <div
+        className={cn('py-3 cursor-pointer', {
+            'border-b color-teal border-teal': addBorder,
+        })}
+        onClick={onClick}
+    >
+        {children}
+    </div>
+)
+
 interface Props {
     listCount: number;
     filter: any;
-    isBookmark: any;
+    activeTab: string;
     isEnterprise: boolean;
     applyFilter: (filter: any) => void;
     setActiveTab: (tab: any) => void;
@@ -21,7 +33,7 @@ interface Props {
 function SessionHeader(props: Props) {
     const {
         filter: { startDate, endDate, rangeValue },
-        isBookmark,
+        activeTab,
         isEnterprise,
     } = props;
 
@@ -35,27 +47,29 @@ function SessionHeader(props: Props) {
     return (
         <div className="flex items-center px-4 justify-between">
             <div className="flex items-center justify-between">
-                <div className="mr-3 text-lg flex items-center">
-                    <div
-                        className={cn('py-3 cursor-pointer mr-4', {
-                            'border-b color-teal border-teal': !isBookmark,
-                        })}
+                <div className="mr-3 text-lg flex items-center gap-2">
+                    <Tab
                         onClick={() => props.setActiveTab({ type: 'all' })}
+                        addBorder={activeTab === 'all'}
                     >
                         <span className="font-bold">SESSIONS</span>
-                    </div>
-                    <div
-                        className={cn('py-3 cursor-pointer', {
-                            'border-b color-teal border-teal': isBookmark,
-                        })}
+                    </Tab>
+                    <Tab
                         onClick={() => props.setActiveTab({ type: 'bookmark' })}
+                        addBorder={activeTab === 'bookmark'}
                     >
                         <span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
-                    </div>
+                    </Tab>
+                    <Tab
+                        addBorder={activeTab === 'notes'}
+                        onClick={() => props.setActiveTab({ type: 'notes' })}
+                    >
+                        <span className="font-bold">NOTES</span>
+                    </Tab>
                 </div>
             </div>
 
-            {!isBookmark && <div className="flex items-center">
+            {activeTab === 'all' && <div className="flex items-center">
                 <SessionTags />
                 <div className="mx-4" />
                 <SelectDateRange period={period} onChange={onDateChange} right={true} />
@@ -71,7 +85,7 @@ export default connect(
     (state: any) => ({
         filter: state.getIn(['search', 'instance']),
         listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
-        isBookmark: state.getIn(['search', 'activeTab', 'type']) === 'bookmark',
+        activeTab: state.getIn(['search', 'activeTab', 'type']),
         isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
     }),
     { applyFilter, setActiveTab }