From 2ddd3ddfd7e41f31e0124e8aed2f94a485218686 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 30 May 2023 13:53:15 +0200 Subject: [PATCH] fix(ui) - project delete - reset the active site, and integrations project check (#1290) --- .../Integrations/AssistDoc/AssistDoc.js | 8 +- .../Integrations/GraphQLDoc/GraphQLDoc.js | 8 +- .../Client/Integrations/Integrations.tsx | 8 +- .../Client/Integrations/MobxDoc/MobxDoc.js | 8 +- .../Client/Integrations/NgRxDoc/NgRxDoc.js | 8 +- .../Client/Integrations/PiniaDoc/PiniaDoc.tsx | 10 ++- .../Integrations/ProfilerDoc/ProfilerDoc.js | 8 +- .../Client/Integrations/ReduxDoc/ReduxDoc.js | 8 +- .../Client/Integrations/VueDoc/VueDoc.js | 80 +++++++++++-------- .../Integrations/ZustandDoc/ZustandDoc.js | 8 +- .../components/Client/Sites/NewSiteForm.js | 5 ++ frontend/app/components/Client/Sites/Sites.js | 7 +- frontend/app/duck/site.js | 9 ++- 13 files changed, 117 insertions(+), 58 deletions(-) diff --git a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js index 1d0990847..e6c5f8e5d 100644 --- a/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js +++ b/frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js @@ -54,4 +54,10 @@ const AssistDoc = (props) => { AssistDoc.displayName = 'AssistDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(AssistDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(AssistDoc); diff --git a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js index e8779f962..2f827eb1c 100644 --- a/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js +++ b/frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js @@ -70,4 +70,10 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`} GraphQLDoc.displayName = 'GraphQLDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(GraphQLDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(GraphQLDoc); diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx index 2e8941cab..98cbf4f0a 100644 --- a/frontend/app/components/Client/Integrations/Integrations.tsx +++ b/frontend/app/components/Client/Integrations/Integrations.tsx @@ -57,12 +57,8 @@ function Integrations(props: Props) { }, [props.integratedList]); useEffect(() => { - if (!props.siteId) { - props.setSiteId(initialSiteId); - props.fetchIntegrationList(initialSiteId); - } else { - props.fetchIntegrationList(props.siteId); - } + props.fetchIntegrationList(initialSiteId); + props.setSiteId(initialSiteId); }, []); const onClick = (integration: any, width: number) => { diff --git a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js index 127839feb..99172ea46 100644 --- a/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js +++ b/frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js @@ -67,4 +67,10 @@ function SomeFunctionalComponent() { MobxDoc.displayName = 'MobxDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(MobxDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(MobxDoc); diff --git a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js index 0e508af2b..65c7c10b6 100644 --- a/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js +++ b/frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js @@ -80,4 +80,10 @@ const metaReducers = [tracker.use(trackerNgRx())]; // check list of ava NgRxDoc.displayName = 'NgRxDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(NgRxDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(NgRxDoc); diff --git a/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx b/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx index 171aa1d50..813f11e17 100644 --- a/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx +++ b/frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx @@ -97,6 +97,10 @@ piniaStorePlugin(examplePiniaStore) PiniaDoc.displayName = 'PiniaDoc'; -export default connect((state) => ({ - projectKey: state.getIn(['site', 'instance', 'projectKey']), -}))(PiniaDoc); +export default connect((state: any) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site: any) => site.get('id') === siteId).get('projectKey'), + }; +})(PiniaDoc); diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js index 092a0778a..40b88cda7 100644 --- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js +++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js @@ -74,4 +74,10 @@ const fn = profiler('call_name')(() => { ProfilerDoc.displayName = 'ProfilerDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ProfilerDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(ProfilerDoc); diff --git a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js index e154c80bd..b95c67e88 100644 --- a/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js +++ b/frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js @@ -73,4 +73,10 @@ const store = createStore( ReduxDoc.displayName = 'ReduxDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ReduxDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(ReduxDoc); diff --git a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js index c2ad189d1..1ffaea45b 100644 --- a/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js +++ b/frontend/app/components/Client/Integrations/VueDoc/VueDoc.js @@ -5,31 +5,31 @@ import DocLink from 'Shared/DocLink/DocLink'; import { connect } from 'react-redux'; const VueDoc = (props) => { - const { projectKey } = props; - return ( -
-

VueX

-
-
- This plugin allows you to capture VueX mutations/state and inspect them later on while replaying session recordings. This is very - useful for understanding and fixing issues. -
+ const { projectKey, siteId } = props; + return ( +
+

VueX

+
+
+ This plugin allows you to capture VueX mutations/state and inspect them later on while + replaying session recordings. This is very useful for understanding and fixing issues. +
-
Installation
- {`npm i @openreplay/tracker-vuex --save`} +
Installation
+ {`npm i @openreplay/tracker-vuex --save`} -
Usage
-

- Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins - field of your store. -

-
+
Usage
+

+ Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put + the generated plugin into your plugins field of your store. +

+
- - {`import Vuex from 'vuex' + + {`import Vuex from 'vuex' import OpenReplay from '@openreplay/tracker'; import trackerVuex from '@openreplay/tracker-vuex'; //... @@ -42,11 +42,11 @@ const store = new Vuex.Store({ //... plugins: [tracker.use(trackerVuex())] // check list of available options below });`} - - } - second={ - - {`import Vuex from 'vuex' + + } + second={ + + {`import Vuex from 'vuex' import OpenReplay from '@openreplay/tracker/cjs'; import trackerVuex from '@openreplay/tracker-vuex/cjs'; //... @@ -64,16 +64,26 @@ const store = new Vuex.Store({ plugins: [tracker.use(trackerVuex())] // check list of available options below }); }`} - - } - /> + + } + /> - -
-
- ); + +
+
+ ); }; VueDoc.displayName = 'VueDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(VueDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(VueDoc); diff --git a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js index 5944e3836..37aa1f879 100644 --- a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js +++ b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js @@ -89,4 +89,10 @@ const useBearStore = create( ZustandDoc.displayName = 'ZustandDoc'; -export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ZustandDoc) +export default connect((state) => { + const siteId = state.getIn(['integrations', 'siteId']); + const sites = state.getIn(['site', 'list']); + return { + projectKey: sites.find((site) => site.get('id') === siteId).get('projectKey'), + }; +})(ZustandDoc); diff --git a/frontend/app/components/Client/Sites/NewSiteForm.js b/frontend/app/components/Client/Sites/NewSiteForm.js index bc144341e..e892f137f 100644 --- a/frontend/app/components/Client/Sites/NewSiteForm.js +++ b/frontend/app/components/Client/Sites/NewSiteForm.js @@ -27,6 +27,7 @@ const NewSiteForm = ({ location: { pathname }, onClose, mstore, + activeSiteId, }) => { const [existsError, setExistsError] = useState(false); @@ -75,6 +76,9 @@ const NewSiteForm = ({ ) { remove(site.id).then(() => { onClose(null); + if (site.id === activeSiteId) { + setSiteId(null) + } }); } }; @@ -124,6 +128,7 @@ const NewSiteForm = ({ }; const mapStateToProps = (state) => ({ + activeSiteId: state.getIn(['site', 'active', 'id']), site: state.getIn(['site', 'instance']), siteList: state.getIn(['site', 'list']), loading: state.getIn(['site', 'save', 'loading']) || state.getIn(['site', 'remove', 'loading']), diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js index cab57e1f2..82dd37d00 100644 --- a/frontend/app/components/Client/Sites/Sites.js +++ b/frontend/app/components/Client/Sites/Sites.js @@ -2,8 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import withPageTitle from 'HOCs/withPageTitle'; import { Loader, Button, TextLink, NoContent } from 'UI'; -import { init, remove, fetchGDPR } from 'Duck/site'; -import { RED, YELLOW, GREEN } from 'Types/site'; +import { init, remove, fetchGDPR, setSiteId } from 'Duck/site'; import stl from './sites.module.css'; import NewSiteForm from './NewSiteForm'; import { confirm, PageTitle } from 'UI'; @@ -30,6 +29,7 @@ const NEW_SITE_FORM = 'NEW_SITE_FORM'; init, remove, fetchGDPR, + setSiteId, } ) @withPageTitle('Projects - OpenReplay Preferences') @@ -50,7 +50,8 @@ class Sites extends React.PureComponent { confirmation: `Are you sure you want to delete this Project? We won't be able to record anymore sessions.`, }) ) { - this.props.remove(site.id); + this.props.remove(site.id) + this.props.setSiteId(null); } }; diff --git a/frontend/app/duck/site.js b/frontend/app/duck/site.js index bc978128d..348642f16 100644 --- a/frontend/app/duck/site.js +++ b/frontend/app/duck/site.js @@ -80,11 +80,12 @@ const reducer = (state = initialState, action = {}) => { return state.set('list', list) .set('siteId', siteId) - .set('active', list.find(s => s.id === parseInt(siteId))); + .set('active', list.find(s => parseInt(s.id) === parseInt(siteId))); case SET_SITE_ID: - localStorage.setItem(SITE_ID_STORAGE_KEY, action.siteId) - const site = state.get('list').find(s => parseInt(s.id) == action.siteId); - return state.set('siteId', action.siteId).set('active', site); + const _siteId = action.siteId ? action.siteId : state.get('list').get(0).id; + localStorage.setItem(SITE_ID_STORAGE_KEY, _siteId) + const site = state.get('list').find(s => parseInt(s.id) == _siteId); + return state.set('siteId', _siteId).set('active', site); } return state; };