Session Vault (#480)

* change(ui) - session vault - icons and text

* change(ui) - session vault - session list head

frontend/app/components/BugFinder/SessionList/SessionListHeader.js

@@ -33,23 +33,14 @@ function SessionListHeader({
           <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>
-          <DateRange />
-        </div>
+        { activeTab.type !== 'bookmark' && (
+          <div className="ml-3 flex items-center">
+            <span className="mr-2 color-gray-medium">Sessions Captured in</span>
+            <DateRange />
+          </div>
+        )}
       </div>
       <div className="flex items-center">
-        {/* <div className="flex items-center">
-          <span className="mr-2 color-gray-medium">Session View</span>
-          <DropdownPlain
-            options={[
-              { text: 'List', value: 'list' },
-              { text: 'Grouped', value: 'grouped' }
-            ]}
-            onChange={() => {}}
-            value='list'
-          />
-        </div> */}
         <div className="flex items-center">
           <span className="mr-2 color-gray-medium">Timezone</span>
           <TimezoneDropdown />

frontend/app/components/BugFinder/SessionsMenu/SessionsMenu.js

@@ -9,7 +9,7 @@ import { issues_types } from 'Types/session/issue'
 import { fetchList as fetchSessionList } from 'Duck/sessions';
 
 function SessionsMenu(props) {
-  const { activeTab, keyMap, wdTypeCount, toggleRehydratePanel } = props;
+  const { activeTab, keyMap, wdTypeCount, toggleRehydratePanel, isEnterprise } = props;
 
   const onMenuItemClick = (filter) => {
     props.onMenuItemClick(filter)
@@ -66,10 +66,11 @@ function SessionsMenu(props) {
       <div className={stl.divider} />
       <div className="my-3">
         <SideMenuitem
-          title="Bookmarks"
-          iconName="star"
+          title={ isEnterprise ? "Vault" : "Bookmarks" }
+          iconName={ isEnterprise ? "safe" : "star" }
           active={activeTab.type === 'bookmark'}
-          onClick={() => onMenuItemClick({ name: 'Bookmarks', type: 'bookmark' })}
+          onClick={() => onMenuItemClick({ name: isEnterprise ? 'Vault' : 'Bookmarks', type: 'bookmark', description: isEnterprise ? 'Sessions saved to vault never get\'s deleted from records.' : '' })}
+          // TODO show the description in header
         />
       </div>      
       
@@ -86,6 +87,7 @@ export default connect(state => ({
   captureRate: state.getIn(['watchdogs', 'captureRate']),
   filters: state.getIn([ 'filters', 'appliedFilter' ]),
   sessionsLoading: state.getIn([ 'sessions', 'fetchLiveListRequest', 'loading' ]),
+  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
 }), { 
   fetchWatchdogStatus, clearEvents, fetchSessionList
 })(SessionsMenu);

frontend/app/components/Session_/PlayerBlockHeader.js

@@ -12,6 +12,7 @@ import SharePopup from '../shared/SharePopup/SharePopup';
 import { fetchList as fetchListIntegration } from 'Duck/integrations/actions';
 import { countries } from 'App/constants';
 import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
+import Bookmark from 'Shared/Bookmark'
 
 import stl from './playerBlockHeader.css';
 import Issues from './Issues/Issues';
@@ -162,7 +163,8 @@ export default class PlayerBlockHeader extends React.PureComponent {
               <>
                 <Autoplay />
                 <div className={ stl.divider } />
-                <IconButton
+                <Bookmark sessionId={sessionId} favorite={favorite} />
+                {/* <IconButton
                   // className="mr-2"
                   tooltip="Bookmark"
                   tooltipPosition="top right"
@@ -170,7 +172,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
                   loading={ loading }
                   icon={ favorite ? 'star-solid' : 'star' }                  
                   plain
-                />
+                /> */}
                 <div className={ stl.divider } />
                 <SharePopup
                   entity="sessions"

frontend/app/components/shared/Bookmark/Bookmark.tsx

@@ -1,26 +1,59 @@
-import React, { useState } from 'react'
+//@ts-nocheck
+import React, { useEffect, useState } from 'react'
 import stl from './bookmark.css'
 import { Icon } from 'UI'
 import { toggleFavorite } from 'Duck/sessions'
 import { connect } from 'react-redux'
-// import Session from 'Types/session';
+import { toast } from 'react-toastify';
+import { Tooltip } from 'react-tippy';
 
 interface Props {
-  toggleFavorite: (session) => void,
+  toggleFavorite: (sessionId: string) => Promise<void>,
   favorite: Boolean,
-  sessionId: any
+  sessionId: any,
+  isEnterprise: Boolean
 }
-function Bookmark({ toggleFavorite, sessionId, favorite } : Props ) {  
+function Bookmark(props : Props ) {  
+  const { sessionId, favorite, isEnterprise } = props;
+  const [isFavorite, setIsFavorite] = useState(favorite);
+  const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your favorites';
+  const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your favorites';  
+  const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to favorites';
+  const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from favorites';
 
-  return ( 
-    <div
-      className={ stl.favoriteWrapper }
-      onClick={ () => toggleFavorite(sessionId) }
-      data-favourite={ favorite }
+  const ACTIVE_ICON = isEnterprise ? 'safe-fill' : 'star-solid';
+  const INACTIVE_ICON = isEnterprise ? 'safe' : 'star';
+
+
+  useEffect(() => {
+    setIsFavorite(favorite);
+  }, [favorite]);
+
+  const toggleFavorite = async () => {
+    props.toggleFavorite(sessionId).then(() => {
+      toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
+      setIsFavorite(!isFavorite);
+    });
+  }
+
+  return (
+    <Tooltip 
+      delay={500}
+      arrow
+      title={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
+      hideOnClick={true}
     >
-      <Icon name={ favorite ? 'star-solid' : 'star' } size="20" />
-    </div>
+      <div
+        className={ stl.favoriteWrapper }
+        onClick={ toggleFavorite }
+        data-favourite={ isFavorite }
+      >
+        <Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color="teal" size="20" />
+      </div>
+    </Tooltip>
   )
 }
 
-export default connect(null, { toggleFavorite })(Bookmark)
+export default connect(state => ({
+  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+}), { toggleFavorite })(Bookmark)

frontend/app/svg/icons/safe-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-safe-fill" viewBox="0 0 16 16">
+  <path d="M9.778 9.414A2 2 0 1 1 6.95 6.586a2 2 0 0 1 2.828 2.828z"/>
+  <path d="M2.5 0A1.5 1.5 0 0 0 1 1.5V3H.5a.5.5 0 0 0 0 1H1v3.5H.5a.5.5 0 0 0 0 1H1V12H.5a.5.5 0 0 0 0 1H1v1.5A1.5 1.5 0 0 0 2.5 16h12a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 14.5 0h-12zm3.036 4.464 1.09 1.09a3.003 3.003 0 0 1 3.476 0l1.09-1.09a.5.5 0 1 1 .707.708l-1.09 1.09c.74 1.037.74 2.44 0 3.476l1.09 1.09a.5.5 0 1 1-.707.708l-1.09-1.09a3.002 3.002 0 0 1-3.476 0l-1.09 1.09a.5.5 0 1 1-.708-.708l1.09-1.09a3.003 3.003 0 0 1 0-3.476l-1.09-1.09a.5.5 0 1 1 .708-.708zM14 6.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 1 0z"/>
+</svg>

frontend/app/svg/icons/safe.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-safe" viewBox="0 0 16 16">
+  <path d="M1 1.5A1.5 1.5 0 0 1 2.5 0h12A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 1 14.5V13H.5a.5.5 0 0 1 0-1H1V8.5H.5a.5.5 0 0 1 0-1H1V4H.5a.5.5 0 0 1 0-1H1V1.5zM2.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5h-12z"/>
+  <path d="M13.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zM4.828 4.464a.5.5 0 0 1 .708 0l1.09 1.09a3.003 3.003 0 0 1 3.476 0l1.09-1.09a.5.5 0 1 1 .707.708l-1.09 1.09c.74 1.037.74 2.44 0 3.476l1.09 1.09a.5.5 0 1 1-.707.708l-1.09-1.09a3.002 3.002 0 0 1-3.476 0l-1.09 1.09a.5.5 0 1 1-.708-.708l1.09-1.09a3.003 3.003 0 0 1 0-3.476l-1.09-1.09a.5.5 0 0 1 0-.708zM6.95 6.586a2 2 0 1 0 2.828 2.828A2 2 0 0 0 6.95 6.586z"/>
+</svg>