From c7a52426feee0edddda0b18a84e42e4353a123ef Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 6 Oct 2021 14:56:23 +0530
Subject: [PATCH] fix(ui) - first project edit, assist userId filter onClick,
 add new project button state in dropdown

---
 .../LiveSessionList/LiveSessionList.tsx       | 23 ++++++++++++++++---
 frontend/app/components/Client/Sites/Sites.js |  6 ++---
 .../app/components/Header/SiteDropdown.js     |  7 ++++--
 .../app/components/Header/siteDropdown.css    |  5 ++++
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
index 0fc99b3ac..95f6e4b76 100644
--- a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
@@ -4,6 +4,9 @@ import { connect } from 'react-redux';
 import { NoContent, Loader } from 'UI';
 import { List, Map } from 'immutable';
 import SessionItem from 'Shared/SessionItem';
+import { KEYS } from 'Types/filter/customFilter';
+import { applyFilter, addAttribute } from 'Duck/filters';
+import Filter from 'Types/filter';
 
 const AUTOREFRESH_INTERVAL = 1 * 60 * 1000
 
@@ -12,12 +15,14 @@ interface Props {
   list?: List<any>,  
   fetchList: (params) => void,
   applyFilter: () => void,
-  filters: List<any>
+  filters: Filter
+  addAttribute: (obj) => void,
 }
 
 function LiveSessionList(props: Props) {
   const { loading, list, filters } = props;  
   var timeoutId;
+  const hasUserFilter = filters && filters.filters.map(i => i.key).includes(KEYS.USERID);
 
   useEffect(() => {     
     props.fetchList(filters.toJS());
@@ -27,6 +32,16 @@ function LiveSessionList(props: Props) {
     }
   }, [])
 
+  const onUserClick = (userId, userAnonymousId) => {
+    if (userId) {
+      props.addAttribute({ label: 'User Id', key: KEYS.USERID, type: KEYS.USERID, operator: 'is', value: userId })
+    } else {
+      props.addAttribute({ label: 'Anonymous ID', key: 'USERANONYMOUSID', type: "USERANONYMOUSID", operator: 'is', value: userAnonymousId  })
+    }
+    
+    props.applyFilter()
+  }
+
   const timeout = () => {
     timeoutId = setTimeout(() => {
       props.fetchList(filters.toJS());
@@ -51,7 +66,9 @@ function LiveSessionList(props: Props) {
             <SessionItem
               key={ session.sessionId }
               session={ session }
-              live              
+              live
+              hasUserFilter={hasUserFilter}
+              onUserClick={onUserClick}
             />
           ))}
         </Loader>
@@ -64,4 +81,4 @@ export default connect(state => ({
   list: state.getIn(['sessions', 'liveSessions']),
   loading: state.getIn([ 'sessions', 'loading' ]),
   filters: state.getIn([ 'filters', 'appliedFilter' ]),
-}), { fetchList })(LiveSessionList)
+}), { fetchList, applyFilter, addAttribute })(LiveSessionList)
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 0f54b0b02..9b5e3b9b0 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -196,9 +196,9 @@ class Sites extends React.PureComponent {
                       <Icon name="trash" size="16" color="teal" />
                     </button>
                     <button
-                      className={cn({'hidden' : !canDeleteSites})}
-                      disabled={ !canDeleteSites }
-                      onClick={ () => canDeleteSites && this.edit(_site) }
+                      className={cn({'hidden' : !isAdmin})}
+                      disabled={ !isAdmin }
+                      onClick={ () => isAdmin && this.edit(_site) }
                       data-clickable
                     >
                       <Icon name="edit" size="16" color="teal"/>
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index f1d7bb907..170b99b6a 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/frontend/app/components/Header/SiteDropdown.js
@@ -14,6 +14,7 @@ import NewSiteForm from '../Client/Sites/NewSiteForm';
 @connect(state => ({  
   sites: state.getIn([ 'site', 'list' ]),
   siteId: state.getIn([ 'user', 'siteId' ]),
+  account: state.getIn([ 'user', 'account' ]),
 }), {
   setSiteId,
   pushNewSite,
@@ -32,11 +33,13 @@ export default class SiteDropdown extends React.PureComponent {
   }
 
   render() {
-    const { sites, siteId, location: { pathname } } = this.props;
+    const { sites, siteId, account, location: { pathname } } = this.props;
     const { showProductModal } = this.state;
+    const isAdmin = account.admin || account.superAdmin;
     const activeSite = sites.find(s => s.id == siteId);
     const disabled = !siteChangeAvaliable(pathname);
     const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
+    const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
     return (
       <div className={ styles.wrapper }>
         {
@@ -64,7 +67,7 @@ export default class SiteDropdown extends React.PureComponent {
             }
           </ul>
           <div
-            className={cn(styles.btnNew, 'flex items-center justify-center py-3 cursor-pointer')}
+            className={cn(styles.btnNew, 'flex items-center justify-center py-3 cursor-pointer', { [styles.disabled] : !canAddSites })}
             onClick={this.newSite}
           >
             <Icon 
diff --git a/frontend/app/components/Header/siteDropdown.css b/frontend/app/components/Header/siteDropdown.css
index cfe43ff06..886c60016 100644
--- a/frontend/app/components/Header/siteDropdown.css
+++ b/frontend/app/components/Header/siteDropdown.css
@@ -117,4 +117,9 @@
     background-color: $gray-lightest;
     transition: all 0.2s;
   }
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
 }
\ No newline at end of file