From f22440d14af947da8df6e8830a0a977502b3512a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 30 Jun 2022 15:39:14 +0200
Subject: [PATCH] change(ui) - show back the date range in bookmarks since the
 api is filtering by daterange

---
 .../SessionList/SessionListHeader.js          | 91 +++++++++----------
 1 file changed, 42 insertions(+), 49 deletions(-)

diff --git a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
index 7707424b0..a178c5990 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionListHeader.js
@@ -7,57 +7,50 @@ import { applyFilter } from 'Duck/search';
 import Period from 'Types/app/period';
 
 const sortOptionsMap = {
-  'startTs-desc': 'Newest',
-  'startTs-asc': 'Oldest',
-  'eventsCount-asc': 'Events Ascending',
-  'eventsCount-desc': 'Events Descending',
+    'startTs-desc': 'Newest',
+    'startTs-asc': 'Oldest',
+    'eventsCount-asc': 'Events Ascending',
+    'eventsCount-desc': 'Events Descending',
 };
-const sortOptions = Object.entries(sortOptionsMap)
-  .map(([ value, label ]) => ({ value, label }));
+const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({ value, label }));
 
+function SessionListHeader({ activeTab, count, applyFilter, filter }) {
+    const { startDate, endDate, rangeValue } = filter;
+    const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
-function SessionListHeader({
-  activeTab,
-  count,
-  applyFilter,
-  filter,
-}) {
-  const { startDate, endDate, rangeValue } = filter;
-  const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
-
-  const onDateChange = (e) => {
-    const dateValues = e.toJSON();
-    applyFilter(dateValues);
-  };
-  return (
-    <div className="flex mb-6 justify-between items-end">
-      <div className="flex items-baseline">
-        <h3 className="text-2xl capitalize">
-          <span>{ activeTab.name }</span>
-          <span className="ml-2 font-normal color-gray-medium">{ count ? numberWithCommas(count) : 0 }</span>
-        </h3>
-        { activeTab.type !== 'bookmark' && (
-          <div className="ml-3 flex items-center">
-            <span className="mr-2 color-gray-medium">Sessions Captured in</span>
-            <SelectDateRange
-                period={period}
-                onChange={onDateChange}
-            />
-          </div>
-        )}
-      </div>
-      <div className="flex items-center">
-        <div className="flex items-center ml-6">
-          <span className="mr-2 color-gray-medium">Sort By</span>
-          <SortDropdown options={ sortOptions }/>
+    const onDateChange = (e) => {
+        const dateValues = e.toJSON();
+        applyFilter(dateValues);
+    };
+    return (
+        <div className="flex mb-6 justify-between items-end">
+            <div className="flex items-baseline">
+                <h3 className="text-2xl capitalize">
+                    <span>{activeTab.name}</span>
+                    <span className="ml-2 font-normal color-gray-medium">{count ? numberWithCommas(count) : 0}</span>
+                </h3>
+                {
+                    <div className="ml-3 flex items-center">
+                        <span className="mr-2 color-gray-medium">Sessions Captured in</span>
+                        <SelectDateRange period={period} onChange={onDateChange} />
+                    </div>
+                }
+            </div>
+            <div className="flex items-center">
+                <div className="flex items-center ml-6">
+                    <span className="mr-2 color-gray-medium">Sort By</span>
+                    <SortDropdown options={sortOptions} />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
-};
+    );
+}
 
-export default connect(state => ({
-  activeTab: state.getIn([ 'search', 'activeTab' ]),
-  period: state.getIn([ 'search', 'period' ]),
-  filter: state.getIn([ 'search', 'instance' ]),
-}), { applyFilter })(SessionListHeader);
\ No newline at end of file
+export default connect(
+    (state) => ({
+        activeTab: state.getIn(['search', 'activeTab']),
+        period: state.getIn(['search', 'period']),
+        filter: state.getIn(['search', 'instance']),
+    }),
+    { applyFilter }
+)(SessionListHeader);