fix(ui) - first project edit, assist userId filter onClick, add new project button state in dropdown

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)

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"/>

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 

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;
 }