jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - project delete - reset the active site, and integrations project check (#1290)

Browse source
This commit is contained in:
Shekar Siri 2023-05-30 13:53:15 +02:00 • committed by GitHub
parent 77aed44cec
commit 2ddd3ddfd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 117 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Client/Integrations/AssistDoc/AssistDoc.js
View file

@ -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);

8
frontend/app/components/Client/Integrations/GraphQLDoc/GraphQLDoc.js
View file

@ -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);

8
frontend/app/components/Client/Integrations/Integrations.tsx
View file

@ -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) => {

8
frontend/app/components/Client/Integrations/MobxDoc/MobxDoc.js
View file

@ -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);

8
frontend/app/components/Client/Integrations/NgRxDoc/NgRxDoc.js
View file

@ -80,4 +80,10 @@ const metaReducers = [tracker.use(trackerNgRx(<options>))]; // 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);

10
frontend/app/components/Client/Integrations/PiniaDoc/PiniaDoc.tsx
View file

@ -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);

8
frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.js
View file

@ -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);

8
frontend/app/components/Client/Integrations/ReduxDoc/ReduxDoc.js
View file

@ -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);

80
frontend/app/components/Client/Integrations/VueDoc/VueDoc.js
View file

@ -5,31 +5,31 @@ import DocLink from 'Shared/DocLink/DocLink';
import { connect } from 'react-redux';
const VueDoc = (props) => {
const { projectKey } = props;
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
<h3 className="p-5 text-2xl">VueX</h3>
<div className="p-5">
<div>
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.
</div>
const { projectKey, siteId } = props;
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
<h3 className="p-5 text-2xl">VueX</h3>
<div className="p-5">
<div>
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.
</div>
<div className="font-bold my-2 text-lg">Installation</div>
<Highlight className="js">{`npm i @openreplay/tracker-vuex --save`}</Highlight>
<div className="font-bold my-2 text-lg">Installation</div>
<Highlight className="js">{`npm i @openreplay/tracker-vuex --save`}</Highlight>
<div className="font-bold my-2 text-lg">Usage</div>
<p>
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.
</p>
<div className="py-3" />
<div className="font-bold my-2 text-lg">Usage</div>
<p>
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.
</p>
<div className="py-3" />
<ToggleContent
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import Vuex from 'vuex'
<ToggleContent
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`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(<options>))] // check list of available options below
});`}
</Highlight>
}
second={
<Highlight className="js">
{`import Vuex from 'vuex'
</Highlight>
}
second={
<Highlight className="js">
{`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(<options>))] // check list of available options below
});
}`}
</Highlight>
}
/>
</Highlight>
}
/>
<DocLink className="mt-4" label="Integrate Vuex" url="https://docs.openreplay.com/plugins/vuex" />
</div>
</div>
);
<DocLink
className="mt-4"
label="Integrate Vuex"
url="https://docs.openreplay.com/plugins/vuex"
/>
</div>
</div>
);
};
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);

8
frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
View file

@ -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);

5
frontend/app/components/Client/Sites/NewSiteForm.js
View file

@ -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']),

7
frontend/app/components/Client/Sites/Sites.js
View file

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

9
frontend/app/duck/site.js
View file

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