Merge pull request #1061 from openreplay/sessions-redesign

change(ui) - sessions listing improvements

frontend/app/components/Overview/Overview.tsx

@@ -4,25 +4,30 @@ import NoSessionsMessage from 'Shared/NoSessionsMessage';
 import MainSearchBar from 'Shared/MainSearchBar';
 import SessionSearch from 'Shared/SessionSearch';
 import SessionListContainer from 'Shared/SessionListContainer/SessionListContainer';
+import cn from 'classnames';
+import OverviewMenu from 'Shared/OverviewMenu';
 
 function Overview() {
-    return (
-        <div className="page-margin container-90 flex relative">
-            <div className="flex-1 flex">
-                <div className={'w-full mx-auto'} style={{ maxWidth: '1300px' }}>
-                    <NoSessionsMessage />
+  return (
+    <div className="page-margin container-90">
+      <div className={cn('side-menu')}>
+        <OverviewMenu />
+      </div>
+      <div
+        className={cn("side-menu-margined")}
+      >
+        <NoSessionsMessage />
 
-                    <div className="mb-5">
-                        <MainSearchBar />
-                        <SessionSearch />
+        <div className="mb-5">
+          <MainSearchBar />
+          <SessionSearch />
 
-                        <div className="my-4" />
-                        <SessionListContainer />
-                    </div>
-                </div>
-            </div>
+          <div className="my-4" />
+          <SessionListContainer />
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default withPageTitle('Sessions - OpenReplay')(Overview);

frontend/app/components/shared/OverviewMenu/OverviewMenu.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SideMenuitem } from 'UI';
+import { connect } from 'react-redux';
+import { setActiveTab } from 'Duck/search';
+
+interface Props {
+  setActiveTab: (tab: any) => void;
+  activeTab: string;
+  isEnterprise: boolean;
+}
+function OverviewMenu(props: Props) {
+  const { activeTab, isEnterprise } = props;
+
+  return (
+    <div>
+      <div className="w-full">
+        <SideMenuitem
+          active={activeTab === 'all'}
+          id="menu-manage-alerts"
+          title="Sessions"
+          iconName="play-circle-bold"
+          onClick={() => props.setActiveTab({ type: 'all' })}
+        />
+      </div>
+      <div className="w-full my-2" />
+      <div className="w-full">
+        <SideMenuitem
+          active={activeTab === 'bookmark'}
+          id="menu-manage-alerts"
+          title={`${isEnterprise ? 'Vault' : 'Bookmarks'}`}
+          iconName={ isEnterprise ? "safe" : "star" }
+          onClick={() => props.setActiveTab({ type: 'bookmark' })}
+        />
+      </div>
+      <div className="w-full my-2" />
+      <div className="w-full">
+        <SideMenuitem
+          active={activeTab === 'notes'}
+          id="menu-manage-alerts"
+          title="Notes"
+          iconName="stickies"
+          onClick={() => props.setActiveTab({ type: 'notes' })}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default connect((state: any) => ({
+    activeTab: state.getIn(['search', 'activeTab', 'type']),
+    isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+}), { setActiveTab })(OverviewMenu);

frontend/app/components/shared/OverviewMenu/index.ts

@@ -0,0 +1 @@
+export { default } from './OverviewMenu';

frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx

@@ -47,40 +47,24 @@ 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-base flex items-center gap-4">
-          <Tab onClick={() => props.setActiveTab({ type: 'all' })} addBorder={activeTab === 'all'}>
-            <span className="font-bold">SESSIONS</span>
-          </Tab>
-          <Tab
-            onClick={() => props.setActiveTab({ type: 'bookmark' })}
-            addBorder={activeTab === 'bookmark'}
-          >
-            <span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
-          </Tab>
-          <Tab
-            addBorder={activeTab === 'notes'}
-            onClick={() => props.setActiveTab({ type: 'notes' })}
-          >
-            <span className="font-bold">NOTES</span>
-          </Tab>
-        </div>
-      </div>
-
-      {activeTab !== 'notes' && activeTab !== 'bookmark' ? (
-        <div className="flex items-center">
-          <SessionTags />
-          <div className="mx-4" />
-          <SelectDateRange period={period} onChange={onDateChange} right={true} />
-          <div className="mx-2" />
+    <div className="flex items-center px-4 py-1 justify-between w-full">
+      {activeTab !== 'notes' ? (
+        <div className="flex items-center w-full justify-end">
+          {activeTab !== 'bookmark' && (
+            <>
+              <SessionTags />
+              <div className="mr-auto" />
+              <SelectDateRange period={period} onChange={onDateChange} right={true} />
+              <div className="mx-2" />
+            </>
+          )}
           <SessionSort />
           <SessionSettingButton />
         </div>
       ) : null}
 
       {activeTab === 'notes' && (
-        <div className="flex items-center">
+        <div className="flex items-center justify-end w-full">
           <NoteTags />
         </div>
       )}

frontend/app/svg/icons/stickies.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-stickies" viewBox="0 0 16 16">
+  <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"/>
+  <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"/>
+</svg>