change(ui) - removed client and updated account

frontend/app/Router.js

@@ -89,8 +89,8 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB);
     loading: siteId === null || userInfoLoading,
     email: state.getIn([ 'user', 'account', 'email' ]),
     account: state.getIn([ 'user', 'account' ]),
-    organisation: state.getIn([ 'user', 'client', 'name' ]),
-    tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
+    organisation: state.getIn([ 'user', 'account', 'name' ]),
+    tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
     tenants: state.getIn(['user', 'tenants']),
     existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
     onboarding: state.getIn([ 'user', 'onboarding' ])

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -141,7 +141,7 @@ const con = connect(state => {
   const permissions = state.getIn([ 'user', 'account', 'permissions' ]) || []
   return {
     hasPermission: permissions.includes('ASSIST_CALL'),
-    isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
   }
 }, { toggleChatWindow })
 

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

@@ -76,7 +76,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',
+  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }), {
   clearEvents, fetchSessionList
 })(SessionsMenu);

frontend/app/components/Client/Integrations/Integrations.js

@@ -96,7 +96,7 @@ const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic'
 		...props,
 		issues: state.getIn([ 'issues', 'list']).first() || {},
 		slackChannelListExists: state.getIn([ 'slack', 'list' ]).size > 0,
-		tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
+		tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
 		jwt: state.get('jwt'),
     projectKey: site ? site.projectKey : ''
 	};

frontend/app/components/Client/ManageUsers/ManageUsers.js

@@ -24,7 +24,7 @@ const LIMIT_WARNING = 'You have reached users limit.';
   loading: state.getIn([ 'members', 'loading' ]),
   saving: state.getIn([ 'members', 'saveRequest', 'loading' ]),
   roles: state.getIn(['roles', 'list']).filter(r => !r.protected).map(r => ({ text: r.name, value: r.roleId })).toJS(),
-  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }), {
   init,
   save,

frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js

@@ -112,5 +112,5 @@ function PreferencesMenu({ activeTab, history, isEnterprise }) {
 }
 
 export default connect(state => ({
-  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }))(withRouter(PreferencesMenu));

frontend/app/components/Client/ProfileSettings/Api.js

@@ -5,7 +5,7 @@ import styles from './profileSettings.module.css';
 import { Form, Input, Button } from 'UI';
 
 @connect(state => ({
-  apiKey: state.getIn([ 'user', 'client', 'apiKey' ]),
+  apiKey: state.getIn([ 'user', 'account', 'apiKey' ]),
   loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) ||
     state.getIn([ 'user', 'putClientRequest', 'loading' ]),
 }))

frontend/app/components/Client/ProfileSettings/OptOut.js

@@ -24,5 +24,5 @@ function OptOut(props) {
 }
 
 export default connect(state => ({
-  optOut: state.getIn([ 'user', 'client', 'optOut' ]),
+  optOut: state.getIn([ 'user', 'account', 'optOut' ]),
 }), { updateClient })(OptOut);

frontend/app/components/Client/ProfileSettings/Settings.js

@@ -3,13 +3,11 @@ import copy from 'copy-to-clipboard';
 import { connect } from 'react-redux';
 import { Button, Input, Form } from 'UI';
 import { updateAccount, updateClient } from 'Duck/user';
-
 import styles from './profileSettings.module.css';
 
 @connect(state => ({
   accountName: state.getIn([ 'user', 'account', 'name' ]),
-  apiKey: state.getIn([ 'user', 'client', 'apiKey' ]),
-  organizationName: state.getIn([ 'user', 'client', 'name' ]),
+  organizationName: state.getIn([ 'user', 'account', 'tenantName' ]),
   loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) ||
     state.getIn([ 'user', 'putClientRequest', 'loading' ]),
 }), {
@@ -26,15 +24,6 @@ export default class Settings extends React.PureComponent {
     this.setState({ changed: true, [ name ]: value });
   }
 
-  copyHandler = () => {
-    const { apiKey } = this.props;
-    this.setState({ copied: true });
-    copy(apiKey);
-    setTimeout(() => {
-      this.setState({ copied: false });
-    }, 1000);
-  };
-
   handleSubmit = (e) => {
     e.preventDefault();
     const { accountName, organizationName } = this.state;
@@ -50,7 +39,7 @@ export default class Settings extends React.PureComponent {
   }
 
   render() {
-    const { loading, apiKey } = this.props;
+    const { loading } = this.props;
     const { accountName, organizationName, changed, copied } = this.state;
 
     return (

frontend/app/components/Client/ProfileSettings/TenantKey.js

@@ -6,7 +6,7 @@ import styles from './profileSettings.module.css';
 import { Form, Input, Button } from "UI";
 
 @connect(state => ({
-  tenantKey: state.getIn([ 'user', 'client', 'tenantKey' ]),
+  tenantKey: state.getIn([ 'user', 'account', 'tenantKey' ]),
 }))
 export default class TenantKey extends React.PureComponent {
   state = { copied: false }

frontend/app/components/Client/ProfileSettings/profileSettings.module.css

@@ -11,25 +11,6 @@
 .form {
   margin-top: 30px;
   width: 350px;
-  & .formGroup {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 25px;
-    & label {
-      font-weight: 500 !important;
-      margin-bottom: 3px;
-    }
-
-    & input {
-      background-color: white;
-      padding: 8px 10px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      &:read-only { 
-        background-color: $gray-lightest;
-      }
-    }
-  }
 }
 
 .passwordPolicy {

frontend/app/components/Client/Users/UsersView.tsx

@@ -72,6 +72,6 @@ function UsersView(props: Props) {
 
 export default connect(state => ({
     account: state.getIn([ 'user', 'account' ]),
-    isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
     limits: state.getIn([ 'user', 'account', 'limits', 'teamMember' ]),
 }))(UsersView);

frontend/app/components/Client/Users/components/UserForm/UserForm.tsx

@@ -152,5 +152,5 @@ function UserForm(props: Props) {
 }
 
 export default connect(state => ({
-    isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }))(UserForm);

frontend/app/components/Dashboard/Widgets/index.js

@@ -1,37 +1,39 @@
-export { default as ApplicationActivity } from './ApplicationActivity';
-export { default as ProcessedSessions } from './ProcessedSessions';
-export { default as Errors } from './Errors';
-export { default as UserActivity } from './UserActivity';
-export { default as Performance } from './Performance';
-export { default as SlowestImages } from './SlowestImages';
-export { default as PageMetrics } from './PageMetrics';
-export { default as LastFrustrations } from './LastFrustrations';
-export { default as MissingResources } from './MissingResources';
-export { default as ResourceLoadingTime } from './ResourceLoadingTime';
-export { default as SlowestResources } from './SlowestResources';
-export { default as DomBuildingTime } from './DomBuildingTime';
-export { default as BusiestTimeOfTheDay } from './BusiestTimeOfTheDay';
-export { default as ResponseTime } from './ResponseTime';
-export { default as ResponseTimeDistribution } from './ResponseTimeDistribution';
-export { default as TimeToRender } from './TimeToRender';
-export { default as SessionsImpactedBySlowRequests } from './SessionsImpactedBySlowRequests';
-export { default as MemoryConsumption } from './MemoryConsumption';
-export { default as FPS } from './FPS';
-export { default as CpuLoad } from './CpuLoad';
-export { default as Crashes } from './Crashes';
-export { default as TopDomains } from './TopDomains';
-export { default as SlowestDomains } from './SlowestDomains';
-export { default as ErrorsPerDomain } from './ErrorsPerDomain';
-export { default as CallWithErrors } from './CallWithErrors';
-export { default as ErrorsByType } from './ErrorsByType';
-export { default as ErrorsByOrigin } from './ErrorsByOrigin';
-export { default as ResourceLoadedVsResponseEnd } from './ResourceLoadedVsResponseEnd';
-export { default as ResourceLoadedVsVisuallyComplete } from './ResourceLoadedVsVisuallyComplete';
-export { default as SessionsAffectedByJSErrors } from './SessionsAffectedByJSErrors';
-export { default as BreakdownOfLoadedResources } from './BreakdownOfLoadedResources';
-export { default as TopMetrics } from './TopMetrics';
-export { default as SpeedIndexLocation } from './SpeedIndexLocation';
-export { default as SessionsPerBrowser } from './SessionsPerBrowser';
-export { default as CallsErrors5xx } from './CallsErrors5xx';
-export { default as CallsErrors4xx } from './CallsErrors4xx';
-export { default as TrendChart } from './TrendChart';
+// export { default as ApplicationActivity } from './ApplicationActivity';
+// export { default as ProcessedSessions } from './ProcessedSessions';
+// export { default as Errors } from './Errors';
+// export { default as UserActivity } from './UserActivity';
+// export { default as Performance } from './Performance';
+// export { default as SlowestImages } from './SlowestImages';
+// export { default as PageMetrics } from './PageMetrics';
+// export { default as LastFrustrations } from './LastFrustrations';
+// export { default as MissingResources } from './MissingResources';
+// export { default as ResourceLoadingTime } from './ResourceLoadingTime';
+// export { default as SlowestResources } from './SlowestResources';
+// export { default as DomBuildingTime } from './DomBuildingTime';
+// export { default as BusiestTimeOfTheDay } from './BusiestTimeOfTheDay';
+// export { default as ResponseTime } from './ResponseTime';
+// export { default as ResponseTimeDistribution } from './ResponseTimeDistribution';
+// export { default as TimeToRender } from './TimeToRender';
+// export { default as SessionsImpactedBySlowRequests } from './SessionsImpactedBySlowRequests';
+// export { default as MemoryConsumption } from './MemoryConsumption';
+// export { default as FPS } from './FPS';
+// export { default as CpuLoad } from './CpuLoad';
+// export { default as Crashes } from './Crashes';
+// export { default as TopDomains } from './TopDomains';
+// export { default as SlowestDomains } from './SlowestDomains';
+// export { default as ErrorsPerDomain } from './ErrorsPerDomain';
+// export { default as CallWithErrors } from './CallWithErrors';
+// export { default as ErrorsByType } from './ErrorsByType';
+// export { default as ErrorsByOrigin } from './ErrorsByOrigin';
+// export { default as ResourceLoadedVsResponseEnd } from './ResourceLoadedVsResponseEnd';
+// export { default as ResourceLoadedVsVisuallyComplete } from './ResourceLoadedVsVisuallyComplete';
+// export { default as SessionsAffectedByJSErrors } from './SessionsAffectedByJSErrors';
+// export { default as BreakdownOfLoadedResources } from './BreakdownOfLoadedResources';
+// export { default as TopMetrics } from './TopMetrics';
+// export { default as SpeedIndexLocation } from './SpeedIndexLocation';
+// export { default as SessionsPerBrowser } from './SessionsPerBrowser';
+// export { default as CallsErrors5xx } from './CallsErrors5xx';
+// export { default as CallsErrors4xx } from './CallsErrors4xx';
+// export { default as TrendChart } from './TrendChart';
+
+// TODO remove all the references to the old widgets

frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx

@@ -31,5 +31,5 @@ function DashboardOptions(props: Props) {
 }
 
 export default connect(state => ({
-    isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+    isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }))(DashboardOptions);

frontend/app/components/Session/LivePlayer.js

@@ -66,7 +66,7 @@ export default withRequest({
       showAssist: state.getIn([ 'sessions', 'showChatWindow' ]),
       jwt: state.get('jwt'),
       fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-      isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+      isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
       hasErrors: !!state.getIn([ 'sessions', 'errors' ]),
     }
   },

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -98,7 +98,7 @@ function getStorageName(type) {
 }))
 @connect((state, props) => {  
   const permissions = state.getIn([ 'user', 'account', 'permissions' ]) || [];
-  const isEnterprise = state.getIn([ 'user', 'client', 'edition' ]) === 'ee';
+  const isEnterprise = state.getIn([ 'user', 'account', 'edition' ]) === 'ee';
   return {
     disabled: props.disabled || (isEnterprise && !permissions.includes('DEV_TOOLS')),
     fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),

frontend/app/components/hocs/withPermissions.js

@@ -5,7 +5,7 @@ import { NoPermission, NoSessionPermission } from 'UI';
 export default (requiredPermissions, className, isReplay = false) => BaseComponent => 
 @connect((state, props) => ({
   permissions: state.getIn([ 'user', 'account', 'permissions' ]) || [],
-  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }))
 class extends React.PureComponent {
   render() {

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

@@ -50,5 +50,5 @@ function Bookmark(props : Props ) {
 }
 
 export default connect(state => ({
-  isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
+  isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }), { toggleFavorite })(Bookmark)

frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js

@@ -22,5 +22,5 @@ function IntegrateSlackButton({ history, tenantId }) {
 }
 
 export default withRouter(connect(state => ({
-  tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
+  tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
 }))(IntegrateSlackButton))

frontend/app/components/shared/SharePopup/SharePopup.js

@@ -12,7 +12,7 @@ import { Tooltip } from 'react-tippy';
 
 @connect(state => ({
   channels: state.getIn([ 'slack', 'list' ]),
-  tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
+  tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
 }))
 @withRequest({
   endpoint: ({ id, entity }, integrationId) => 

frontend/app/duck/user.js

@@ -20,7 +20,7 @@ const PUSH_NEW_SITE = 'user/PUSH_NEW_SITE';
 const SET_ONBOARDING = 'user/SET_ONBOARDING';
 
 const initialState = Map({
-  client: Client(),
+  // client: Client(),
   account: Account(),
   siteId: null,
   passwordRequestError: false,
@@ -41,15 +41,9 @@ const reducer = (state = initialState, action = {}) => {
     case RESET_PASSWORD.SUCCESS:
     case UPDATE_PASSWORD.SUCCESS:
     case LOGIN.SUCCESS:
-      return setClient(
-        state.set('account', Account({...action.data.user, smtp: action.data.client.smtp })),
-        action.data.client,
-      );
+      state.set('account', Account({...action.data.user, smtp: action.data.client.smtp }))
     case SIGNUP.SUCCESS:
-      return setClient(
-        state.set('account', Account(action.data.user)),
-        action.data.client,
-      ).set('onboarding', true);
+      state.set('account', Account(action.data.user)).set('onboarding', true);
     case REQUEST_RESET_PASSWORD.SUCCESS:
       break;
     case UPDATE_ACCOUNT.SUCCESS:
@@ -63,7 +57,7 @@ const reducer = (state = initialState, action = {}) => {
     case DELETE:
       return initialState;
     case PUT_CLIENT.REQUEST:
-      return state.mergeIn([ 'client' ], action.params);
+      return state.mergeIn([ 'account' ], action.params);
     case FETCH_CLIENT.SUCCESS:
       return setClient(state, action.data);
     case PUSH_NEW_SITE:
@@ -123,10 +117,10 @@ export const fetchUserInfo = () => dispatch => Promise.all([
     types: FETCH_ACCOUNT.toArray(),
     call: client => client.get('/account'),
   }),
-  dispatch({
-    types: FETCH_CLIENT.toArray(),
-    call: client => client.get('/client'),
-  }),
+  // dispatch({
+  //   types: FETCH_CLIENT.toArray(),
+  //   call: client => client.get('/client'),
+  // }),
 ]);
 
 export function logout() {

frontend/app/mstore/index.tsx

@@ -4,6 +4,7 @@ import MetricStore, { IMetricStore } from './metricStore';
 import UserStore from './userStore';
 import RoleStore from './roleStore';
 import APIClient from 'App/api_client';
+import { makeAutoObservable, observable, action } from "mobx"
 import { dashboardService, metricService, sessionService, userService, auditService } from 'App/services';
 import SettingsStore from './settingsStore';
 import AuditStore from './auditStore';
@@ -12,10 +13,12 @@ export class RootStore {
     dashboardStore: IDashboardSotre;
     metricStore: IMetricStore;
     settingsStore: SettingsStore;
-    userStore: UserStore; 
+    userStore: UserStore;
     roleStore: RoleStore;
     auditStore: AuditStore;
 
+    limits: any;
+
     constructor() {
         this.dashboardStore = new DashboardStore();
         this.metricStore = new MetricStore();
@@ -23,6 +26,10 @@ export class RootStore {
         this.userStore = new UserStore();
         this.roleStore = new RoleStore();
         this.auditStore = new AuditStore();
+        makeAutoObservable(this, {
+          limits: observable,
+          fetchLimits: action,
+        });
     }
 
     initClient() {
@@ -32,11 +39,23 @@ export class RootStore {
       sessionService.initClient(client)
       userService.initClient(client)
     }
+    
+    fetchLimits(): Promise<any> {
+      return new Promise((resolve, reject) => {
+          userService.getLimits()
+              .then((response: any) => {
+                  this.limits = response;
+                  resolve(response);
+              }).catch((error: any) => {
+                  reject(error);
+              });
+      });
+    }
 }
 
 const StoreContext = React.createContext<RootStore>({} as RootStore);
 
-export const StoreProvider = ({ children, store }) => {
+export const StoreProvider = ({ children, store }: any) => {
   return (
     <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
   );
@@ -44,6 +63,6 @@ export const StoreProvider = ({ children, store }) => {
 
 export const useStore = () => React.useContext(StoreContext);
 
-export const withStore = (Component) => (props) => {
+export const withStore = (Component: any) => (props: any) => {
   return <Component {...props} mstore={useStore()} />;
 };

frontend/app/services/UserService.ts

@@ -54,4 +54,10 @@ export default class UserService {
             .then(response => response.json())
             .then(response => response.data || []);
     }
+
+    getLimits() {
+        return this.client.get('/limits')
+            .then((response: { json: () => any; }) => response.json())
+            .then((response: { data: any; }) => response.data || {});
+    }
 }

frontend/app/types/account/account.js

@@ -15,9 +15,13 @@ export default Member.extend({
   permissions: [],
   iceServers: undefined,
   hasPassword: false, // to check if it's SSO
+  apiKey: undefined,
+  tenantKey: undefined,
+  tenantName: undefined,
 }, {
   fromJS: ({ ...account})=> ({
     ...account,
+    id: account.id || account.userId,
     expirationDate: account.expirationDate > 0 && DateTime.fromMillis(account.expirationDate || 0),
   })
 });