From b36a0a09ea2568b872380f9970e1b5a6d93aaea7 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 1 Aug 2022 17:47:09 +0200
Subject: [PATCH] feat(ui) - session list - tabs and settings

---
 .../SessionHeader/SessionHeader.tsx           | 38 ++++++++++++++++---
 .../SessionSettingButton.tsx                  | 20 ++++++++++
 .../components/SessionSettingButton/index.ts  |  1 +
 frontend/app/types/session/issue.js           | 14 +++----
 4 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
 create mode 100644 frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/index.ts

diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
index 9efcf7e6e..a3af10ff4 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
@@ -6,14 +6,25 @@ import SelectDateRange from 'Shared/SelectDateRange';
 import SessionTags from '../SessionTags';
 import { connect } from 'react-redux';
 import SessionSort from '../SessionSort';
+import cn from 'classnames';
+import { setActiveTab } from 'Duck/search';
+import SessionSettingButton from '../SessionSettingButton';
 
 interface Props {
     listCount: number;
     filter: any;
+    isBookmark: any;
+    isEnterprise: boolean;
     applyFilter: (filter: any) => void;
+    setActiveTab: (tab: any) => void;
 }
 function SessionHeader(props: Props) {
-    const { listCount, filter: { startDate, endDate, rangeValue } } = props;
+    const {
+        listCount,
+        filter: { startDate, endDate, rangeValue },
+        isBookmark,
+        isEnterprise,
+    } = props;
     const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
     const onDateChange = (e: any) => {
@@ -23,17 +34,30 @@ function SessionHeader(props: Props) {
 
     return (
         <div className="flex items-center p-4 justify-between">
-            <div className="flex items-center">
-                <div className="mr-3 text-lg">
-                    <span className="font-bold">Sessions</span> <span className="color-gray-medium ml-2">{listCount}</span>
+            <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 })}
+                        onClick={() => props.setActiveTab({ type: 'all' })}
+                    >
+                        <span className="font-bold">Sessions</span> <span className="color-gray-medium ml-2">{listCount}</span>
+                    </div>
+                    <div
+                        className={cn('py-3 cursor-pointer', { 'border-b color-teal border-teal': isBookmark })}
+                        onClick={() => props.setActiveTab({ type: 'bookmark' })}
+                    >
+                        <span className="font-bold">{`${isEnterprise ? 'Vault' : 'Bookmarks'}`}</span>
+                    </div>
                 </div>
-                <SessionTags />
             </div>
 
             <div className="flex items-center">
+                {!isBookmark && <SessionTags />}
+                <div className="mx-4" />
                 <SelectDateRange period={period} onChange={onDateChange} right={true} />
                 <div className="mx-2" />
                 <SessionSort />
+                <SessionSettingButton />
             </div>
         </div>
     );
@@ -43,6 +67,8 @@ export default connect(
     (state: any) => ({
         filter: state.getIn(['search', 'instance']),
         listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
+        isBookmark: state.getIn(['search', 'activeTab', 'type']) === 'bookmark',
+        isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
     }),
-    { applyFilter }
+    { applyFilter, setActiveTab }
 )(SessionHeader);
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
new file mode 100644
index 000000000..897a59754
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -0,0 +1,20 @@
+import { useModal } from 'App/components/Modal';
+import React from 'react';
+import SessionSettings from 'Shared/SessionSettings';
+import { Button } from 'UI';
+
+function SessionSettingButton(props: any) {
+    const { showModal } = useModal();
+
+    const handleClick = () => {
+        showModal(<SessionSettings />, { right: true });
+    };
+
+    return (
+        <div className="cursor-pointer ml-4" onClick={handleClick}>
+            <Button icon="sliders" variant="text" />
+        </div>
+    );
+}
+
+export default SessionSettingButton;
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/index.ts b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/index.ts
new file mode 100644
index 000000000..dffed3cc0
--- /dev/null
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSettingButton';
\ No newline at end of file
diff --git a/frontend/app/types/session/issue.js b/frontend/app/types/session/issue.js
index 673467fd2..d2afff190 100644
--- a/frontend/app/types/session/issue.js
+++ b/frontend/app/types/session/issue.js
@@ -8,13 +8,13 @@ export const issues_types = List([
   { 'type': 'click_rage', 'visible': true, 'order': 2, 'name': 'Click Rage', 'icon': 'funnel/emoji-angry' },
   { 'type': 'crash', 'visible': true, 'order': 3, 'name': 'Crashes', 'icon': 'funnel/file-earmark-break' },
   { 'type': 'memory', 'visible': true, 'order': 4, 'name': 'High Memory', 'icon': 'funnel/sd-card' },
-  { 'type': 'vault', 'visible': true, 'order': 5, 'name': 'Vault', 'icon': 'safe' },
-  { 'type': 'bookmark', 'visible': true, 'order': 5, 'name': 'Bookmarks', 'icon': 'safe' },
-  { 'type': 'bad_request', 'visible': true, 'order': 1, 'name': 'Bad Requests', 'icon': 'funnel/file-medical-alt' },
-  { 'type': 'missing_resource', 'visible': true, 'order': 2, 'name': 'Missing Images', 'icon': 'funnel/image' },
-  { 'type': 'dead_click', 'visible': true, 'order': 4, 'name': 'Dead Clicks', 'icon': 'funnel/dizzy' },
-  { 'type': 'cpu', 'visible': true, 'order': 6, 'name': 'High CPU', 'icon': 'funnel/cpu' },
-  { 'type': 'custom', 'visible': false, 'order': 8, 'name': 'Custom', 'icon': 'funnel/exclamation-circle' }
+  // { 'type': 'vault', 'visible': true, 'order': 5, 'name': 'Vault', 'icon': 'safe' },
+  // { 'type': 'bookmark', 'visible': true, 'order': 5, 'name': 'Bookmarks', 'icon': 'safe' },
+  // { 'type': 'bad_request', 'visible': true, 'order': 1, 'name': 'Bad Requests', 'icon': 'funnel/file-medical-alt' },
+  // { 'type': 'missing_resource', 'visible': true, 'order': 2, 'name': 'Missing Images', 'icon': 'funnel/image' },
+  // { 'type': 'dead_click', 'visible': true, 'order': 4, 'name': 'Dead Clicks', 'icon': 'funnel/dizzy' },
+  // { 'type': 'cpu', 'visible': true, 'order': 6, 'name': 'High CPU', 'icon': 'funnel/cpu' },
+  // { 'type': 'custom', 'visible': false, 'order': 8, 'name': 'Custom', 'icon': 'funnel/exclamation-circle' }
 ]).map(Watchdog)
 
 export const issues_types_map = {}