From 952515b29316e27ae8138dfc849bbee6f6e3d3c1 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 23 Jun 2022 16:04:33 +0200
Subject: [PATCH] change(ui) - remote pull resolve conflicts

---
 .../Alerts/Notifications/Notifications.tsx    |  3 --
 .../app/components/BugFinder/BugFinder.js     | 15 ----------
 .../app/components/Client/Users/UsersView.tsx | 22 ++------------
 .../AddUserButton/AddUserButton.tsx           | 30 +++++++++++++++++++
 .../Users/components/AddUserButton/index.ts   |  1 +
 .../Users/components/UserForm/UserForm.tsx    |  2 ++
 .../MetricListItem/MetricListItem.tsx         |  4 +--
 frontend/app/components/Header/Header.js      | 15 ++++++++--
 .../NewProjectButton/NewProjectButton.tsx     | 28 +++++++++++++++++
 .../Header/NewProjectButton/index.ts          |  1 +
 .../OnboardingExplore/OnboardingExplore.js    |  4 ++-
 .../app/components/Header/SiteDropdown.js     | 18 ++---------
 .../app/components/Header/components/index.js |  0
 frontend/app/mstore/userStore.ts              |  7 +++--
 14 files changed, 89 insertions(+), 61 deletions(-)
 create mode 100644 frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
 create mode 100644 frontend/app/components/Client/Users/components/AddUserButton/index.ts
 create mode 100644 frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
 create mode 100644 frontend/app/components/Header/NewProjectButton/index.ts
 delete mode 100644 frontend/app/components/Header/components/index.js

diff --git a/frontend/app/components/Alerts/Notifications/Notifications.tsx b/frontend/app/components/Alerts/Notifications/Notifications.tsx
index c4fad52ca..d6327d530 100644
--- a/frontend/app/components/Alerts/Notifications/Notifications.tsx
+++ b/frontend/app/components/Alerts/Notifications/Notifications.tsx
@@ -16,14 +16,11 @@ interface Props {
   fetchList: any;
 }
 function Notifications(props: Props) {
-  // const { notifications } = props;
   const { showModal } = useModal();
-  // const unReadNotificationsCount = notifications.filter(({viewed}: any) => !viewed).size
   const { notificationStore } = useStore();
   const count = useObserver(() => notificationStore.notificationsCount);
 
   useEffect(() => {
-    notificationStore.fetchNotificationsCount();
     const interval = setInterval(() => {
       notificationStore.fetchNotificationsCount()
     }, AUTOREFRESH_INTERVAL);
diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index 4b319bc86..10404a6e2 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -6,19 +6,14 @@ import {
   fetchFavoriteList as fetchFavoriteSessionList
 } from 'Duck/sessions';
 import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
-import { fetchList as fetchFunnelsList } from 'Duck/funnels';
 import { KEYS } from 'Types/filter/customFilter';
 import SessionList from './SessionList';
 import stl from './bugFinder.module.css';
 import withLocationHandlers from "HOCs/withLocationHandlers";
 import { fetch as fetchFilterVariables } from 'Duck/sources';
 import { fetchSources } from 'Duck/customField';
-import { setFunnelPage } from 'Duck/sessions';
 import { setActiveTab } from 'Duck/search';
 import SessionsMenu from './SessionsMenu/SessionsMenu';
-import { LAST_7_DAYS } from 'Types/app/period';
-import { resetFunnel } from 'Duck/funnels';
-import { resetFunnelFilters } from 'Duck/funnelFilters'
 import NoSessionsMessage from 'Shared/NoSessionsMessage';
 import SessionSearch from 'Shared/SessionSearch';
 import MainSearchBar from 'Shared/MainSearchBar';
@@ -65,10 +60,6 @@ const allowedQueryKeys = [
   fetchSources,
   clearEvents,
   setActiveTab,
-  fetchFunnelsList,
-  resetFunnel,
-  resetFunnelFilters,
-  setFunnelPage,
   clearSearch,
   fetchSessions,
 })
@@ -94,8 +85,6 @@ export default class BugFinder extends React.PureComponent {
     if (props.sessions.size === 0) {
       props.fetchSessions();
     }
-    // props.resetFunnel();
-    // props.resetFunnelFilters();
 
     const queryFilter = this.props.query.all(allowedQueryKeys);
     if (queryFilter.hasOwnProperty('userId')) {
@@ -103,10 +92,6 @@ export default class BugFinder extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
-    this.props.setFunnelPage(false);
-  }
-
   toggleRehydratePanel = () => {
     this.setState({ showRehydratePanel: !this.state.showRehydratePanel })
   }
diff --git a/frontend/app/components/Client/Users/UsersView.tsx b/frontend/app/components/Client/Users/UsersView.tsx
index 4ae7b9653..3b4d0c95f 100644
--- a/frontend/app/components/Client/Users/UsersView.tsx
+++ b/frontend/app/components/Client/Users/UsersView.tsx
@@ -1,15 +1,14 @@
 import React, { useEffect } from 'react';
 import UserList from './components/UserList';
-import { PageTitle, Popup, IconButton } from 'UI';
+import { PageTitle } from 'UI';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import UserSearch from './components/UserSearch';
 import { useModal } from 'App/components/Modal';
 import UserForm from './components/UserForm';
 import { connect } from 'react-redux';
+import AddUserButton from './components/AddUserButton';
 
-const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
-const LIMIT_WARNING = 'You have reached users limit.';
 interface Props {
     account: any;
     isEnterprise: boolean;
@@ -43,22 +42,7 @@ function UsersView(props: Props) {
                 <PageTitle
                     title={<div>Team <span className="color-gray-medium">{userCount}</span></div>}
                     actionButton={(
-                        <Popup
-                            content={ `${ !isAdmin ? PERMISSION_WARNING : (reachedLimit ? LIMIT_WARNING : 'Add team member') }` }
-                            size="tiny"
-                            inverted
-                            position="top left"
-                        >
-                            <IconButton
-                                id="add-button"
-                                disabled={ reachedLimit || !isAdmin }
-                                circle
-                                icon="plus"
-                                outline
-                                className="ml-3"
-                                onClick={ () => editHandler(null) }
-                            />
-                        </Popup>
+                        <AddUserButton isAdmin={isAdmin} onClick={() => editHandler(null)} />
                     )}
                 />
                 <div>
diff --git a/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
new file mode 100644
index 000000000..6907a7b12
--- /dev/null
+++ b/frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Popup, IconButton } from 'UI';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
+const LIMIT_WARNING = 'You have reached users limit.';
+
+function AddUserButton({ isAdmin = false, onClick }: any ) {
+    const { userStore } = useStore();
+    const limtis = useObserver(() => userStore.limits);
+    const cannAddUser = useObserver(() => isAdmin && (limtis.teamMember === -1 || limtis.teamMember > 0));
+    return (
+        <Popup
+            content={ `${ !isAdmin ? PERMISSION_WARNING : (!cannAddUser ? LIMIT_WARNING : 'Add team member') }` }
+        >
+            <IconButton
+                id="add-button"
+                disabled={ !cannAddUser || !isAdmin }
+                circle
+                icon="plus"
+                outline
+                onClick={ onClick }
+                className="ml-4"
+            />
+        </Popup>
+    );
+}
+
+export default AddUserButton;
\ No newline at end of file
diff --git a/frontend/app/components/Client/Users/components/AddUserButton/index.ts b/frontend/app/components/Client/Users/components/AddUserButton/index.ts
new file mode 100644
index 000000000..66beb9cf8
--- /dev/null
+++ b/frontend/app/components/Client/Users/components/AddUserButton/index.ts
@@ -0,0 +1 @@
+export { default } from './AddUserButton';
\ No newline at end of file
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index 7e47f5a98..eb25b069e 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -27,6 +27,7 @@ function UserForm(props: Props) {
     const onSave = () => {
         userStore.saveUser(user).then(() => {
             hideModal();
+            userStore.fetchLimits();
         });
     }
 
@@ -42,6 +43,7 @@ function UserForm(props: Props) {
           })) {
             userStore.deleteUser(user.userId).then(() => {
                 hideModal();
+                userStore.fetchLimits();
             });
         }
     }
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 4dcfa0d61..6f6334fc2 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -14,9 +14,9 @@ function DashboardLink({ dashboards}: any) {
             <Link to={`/dashboard/${dashboard.dashboardId}`}>
                 <div className="flex items-center mb-1 py-1">
                     <div className="mr-2">
-                        <Icon name="circle-fill" size="4" color="gray-medium" />
+                        <Icon name="circle-fill" size={4} color="gray-medium" />
                     </div>
-                    <span className="link leading-4">{dashboard.name}</span>
+                    <span className="link leading-4 capitalize-first">{dashboard.name}</span>
                 </div>
             </Link>
             </React.Fragment>
diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js
index 22d35c843..8dbc74396 100644
--- a/frontend/app/components/Header/Header.js
+++ b/frontend/app/components/Header/Header.js
@@ -27,6 +27,7 @@ import Alerts from '../Alerts/Alerts';
 import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
 import { fetchList as fetchMetadata } from 'Duck/customField';
 import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
 
 const DASHBOARD_PATH = dashboard();
 const SESSIONS_PATH = sessions();
@@ -47,18 +48,26 @@ const Header = (props) => {
   
   const name = account.get('name').split(" ")[0];
   const [hideDiscover, setHideDiscover] = useState(false)
-  const { userStore } = useStore();
+  const { userStore, notificationStore } = useStore();
+  const initialDataFetched = useObserver(() => userStore.initialDataFetched);
   let activeSite = null;
 
   useEffect(() => {
-    userStore.fetchLimits();
+    if (initialDataFetched) return;
+    
+    Promise.all([
+      userStore.fetchLimits(),
+      notificationStore.fetchNotificationsCount(),
+    ]).then(() => {
+      userStore.updateKey('initialDataFetched', true);
+    });
   }, []);
 
   useEffect(() => {
     activeSite = sites.find(s => s.id == siteId);
     props.initSite(activeSite);
     props.fetchMetadata();
-  }, [sites])
+  }, [siteId])
 
   return (
     <div className={ cn(styles.header) }>
diff --git a/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
new file mode 100644
index 000000000..695139fa3
--- /dev/null
+++ b/frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from 'UI';
+import cn from 'classnames';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+
+function NewProjectButton({ onClick, isAdmin = false }: any) {
+    const { userStore } = useStore();
+    const limtis = useObserver(() => userStore.limits);
+    const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
+
+    return (
+        <div
+            className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { 'disabled' : !canAddProject })}
+            onClick={onClick}
+          >
+            <Icon 
+              name="plus"
+              size={12}
+              className="mr-2"
+              color="teal"
+            /> 
+            <span className="color-teal">Add New Project</span>
+        </div>
+    );
+}
+
+export default NewProjectButton;
\ No newline at end of file
diff --git a/frontend/app/components/Header/NewProjectButton/index.ts b/frontend/app/components/Header/NewProjectButton/index.ts
new file mode 100644
index 000000000..b9d180076
--- /dev/null
+++ b/frontend/app/components/Header/NewProjectButton/index.ts
@@ -0,0 +1 @@
+export { default } from './NewProjectButton'
\ No newline at end of file
diff --git a/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js b/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
index f22f7c503..71359120d 100644
--- a/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
+++ b/frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
@@ -47,7 +47,9 @@ const styles = {
 @withRouter
 class OnboardingExplore extends React.PureComponent {
   UNSAFE_componentWillMount() {
-    this.props.getOnboard();
+    if (this.props.boarding.size === 0) {
+      this.props.getOnboard();
+    }
   }
 
   componentDidMount() {    
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index d46c347fe..d6df6be31 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/frontend/app/components/Header/SiteDropdown.js
@@ -14,6 +14,7 @@ import { clearSearch } from 'Duck/search';
 import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
 import { withStore } from 'App/mstore'
 import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
+import NewProjectButton from './NewProjectButton';
 
 @withStore
 @withRouter
@@ -57,10 +58,8 @@ export default class SiteDropdown extends React.PureComponent {
     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;
+    // const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
   
-    // const signslGreenSvg = <object data={SignalGreenSvg} type="image/svg+xml" className={styles.signalGreen} />
-    // const signslRedSvg = <object data={SignalRedSvg} type="image/svg+xml" className={styles.signalRed} />
     return (
       <div className={ styles.wrapper }>
         {
@@ -87,18 +86,7 @@ export default class SiteDropdown extends React.PureComponent {
               ))
             }
           </ul>
-          <div
-            className={cn(styles.btnNew, 'flex items-center justify-center py-3 cursor-pointer', { [styles.disabled] : !canAddSites })}
-            onClick={this.newSite}
-          >
-            <Icon 
-              name="plus"
-              size="12"
-              marginRight="5" 
-              color="teal"
-            /> 
-            <span className="color-teal">Add New Project</span>
-          </div>
+          <NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
         </div>
 
         <SlideModal
diff --git a/frontend/app/components/Header/components/index.js b/frontend/app/components/Header/components/index.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/app/mstore/userStore.ts b/frontend/app/mstore/userStore.ts
index 719ca0f01..479f75e66 100644
--- a/frontend/app/mstore/userStore.ts
+++ b/frontend/app/mstore/userStore.ts
@@ -14,7 +14,8 @@ export default class UserStore {
 
     loading: boolean = false;
     saving: boolean = false;
-    limits: any = null;
+    limits: any = {};
+    initialDataFetched: boolean = false;
 
     constructor() {
         makeAutoObservable(this, {
@@ -29,8 +30,8 @@ export default class UserStore {
         return new Promise((resolve, reject) => {
             userService.getLimits()
                 .then((response: any) => {
-                    this.limits = response.limits;
-                    resolve(response.limits);
+                    this.limits = response;
+                    resolve(response);
                 }).catch((error: any) => {
                     reject(error);
                 });