From 6800c19a904dbe4e56ab6990451cc1212a35bba0 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 22 Feb 2022 20:06:06 +0100
Subject: [PATCH] feat(ui) - assist ui - wip

---
 frontend/app/components/Assist/Assist.tsx              |  3 ++-
 .../Client/ProfileSettings/ProfileSettings.js          | 10 +++++-----
 .../shared/LiveSessionList/LiveSessionList.tsx         |  7 ++++++-
 .../app/components/shared/SessionItem/SessionItem.js   |  2 +-
 frontend/app/styles/main.css                           |  9 ++++++++-
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Assist/Assist.tsx b/frontend/app/components/Assist/Assist.tsx
index 476b7ac5c..77730f7b1 100644
--- a/frontend/app/components/Assist/Assist.tsx
+++ b/frontend/app/components/Assist/Assist.tsx
@@ -3,6 +3,7 @@ import LiveSessionList from 'Shared/LiveSessionList';
 import LiveSessionSearch from 'Shared/LiveSessionSearch';
 import cn from 'classnames'
 import withPageTitle from 'HOCs/withPageTitle';
+import withPermissions from 'HOCs/withPermissions'
 
 // @withPageTitle("Assist - OpenReplay")
 function Assist() {
@@ -21,4 +22,4 @@ function Assist() {
   )
 }
 
-export default withPageTitle("Assist - OpenReplay")(Assist);
+export default withPageTitle("Assist - OpenReplay")(withPermissions(['ASSIST_LIVE', 'SESSION_REPLAY'])(Assist));
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
index b12b2cf8c..48cf2ce23 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
@@ -26,7 +26,7 @@ export default class ProfileSettings extends React.PureComponent {
           <div><Settings /></div>
         </div>
 
-        <div className="divider" />
+        <div className="divider-h" />
 
         <div className="flex items-center">
           <div className={ styles.left }>
@@ -36,7 +36,7 @@ export default class ProfileSettings extends React.PureComponent {
           <div><ChangePassword /></div>
         </div>
 
-        <div className="divider" />
+        <div className="divider-h" />
 
         <div className="flex items-center">
           <div className={ styles.left }>
@@ -46,7 +46,7 @@ export default class ProfileSettings extends React.PureComponent {
           <div><Api /></div>
         </div>
 
-        <div className="divider" />
+        <div className="divider-h" />
 
         <div className="flex items-center">
           <div className={ styles.left }>
@@ -58,7 +58,7 @@ export default class ProfileSettings extends React.PureComponent {
 
         { !isEnterprise && (
           <>
-            <div className="divider" />
+            <div className="divider-h" />
             <div className="flex items-center">
               <div className={ styles.left }>
                 <h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
@@ -71,7 +71,7 @@ export default class ProfileSettings extends React.PureComponent {
 
         { account.license && (
           <>
-            <div className="divider" />
+            <div className="divider-h" />
 
             <div className="flex items-center">
               <div className={ styles.left }>
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 3a4fcc275..d498c53d9 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -109,7 +109,12 @@ function LiveSessionList(props: Props) {
   return (
     <div>
       <div className="flex mb-6 justify-between items-end">
-        <div></div>
+        <div className="flex items-baseline">
+          <h3 className="text-2xl capitalize">
+            <span>Live Sessions</span>
+            <span className="ml-2 font-normal color-gray-medium">{sessions.size}</span>
+          </h3>
+        </div>
         <div className="flex items-center">
           <div className="flex items-center">
             <span className="mr-2 color-gray-medium">Timezone</span>
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js
index 328df74a9..bb639a04e 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.js
+++ b/frontend/app/components/shared/SessionItem/SessionItem.js
@@ -136,7 +136,7 @@ export default class SessionItem extends React.PureComponent {
           <div className="flex items-center">
             <div className={ stl.playLink } id="play-button" data-viewed={ viewed }>
               <Link to={ sessionRoute(sessionId) }>
-                <Icon name={ !viewed ? 'play-fill' : 'play-circle-light' } size="42" color={isAssist ? "tealx" : "teal"} />
+                <Icon name={ !viewed && !isAssist ? 'play-fill' : 'play-circle-light' } size="42" color={isAssist ? "tealx" : "teal"} />
               </Link>
             </div>
           </div>
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 3339c4e48..81e5ab814 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -131,7 +131,14 @@
 
 .divider {
   width: 1px;
-  height: 49px;
   margin: 0 15px;
   background-color: $gray-light;
+}
+
+.divider-h {
+  height: 1px;
+  width: 100%;
+  
+  margin: 25px 0;
+  background-color: $gray-light;
 }
\ No newline at end of file