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

change(ui) - asist doc link, tracker upgrade msg height

Browse source
This commit is contained in:
Shekar Siri 2021-09-07 18:40:48 +05:30
parent c920d9c902
commit a3159872c1
9 changed files with 47 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const AssistDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>OpenReplay Assist allows you to support your users by seeing their live screen and instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen sharing software.</div>
@ -18,13 +19,13 @@ const AssistDoc = (props) => {
<div className="font-bold my-2">Usage</div>
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import Tracker from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
const tracker = new Tracker({
projectKey: PROJECT_KEY,
projectKey: '${projectKey}',
});
tracker.start();
tracker.use(trackerAssist(options)); // check the list of available options below`}
@ -35,7 +36,7 @@ tracker.use(trackerAssist(options)); // check the list of available options belo
{`import OpenReplay from '@openreplay/tracker/cjs';
import trackerFetch from '@openreplay/tracker-assist/cjs';
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
const trackerAssist = tracker.use(trackerAssist(options)); // check the list of available options below
//...

7
frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
View file

@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const FetchDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>This plugin allows you to capture fetch payloads and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@ -18,14 +19,14 @@ const FetchDoc = (props) => {
<div className="font-bold my-2">Usage</div>
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import tracker from '@openreplay/tracker';
import trackerFetch from '@openreplay/tracker-fetch';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -40,7 +41,7 @@ fetch('https://api.openreplay.com/').then(response => console.log(response.json(
import trackerFetch from '@openreplay/tracker-fetch/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {

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

@ -3,6 +3,7 @@ import DocLink from 'Shared/DocLink/DocLink';
import ToggleContent from 'Shared/ToggleContent';
const GraphQLDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<p>This plugin allows you to capture GraphQL requests and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</p>
@ -19,14 +20,14 @@ const GraphQLDoc = (props) => {
<div className="py-3" />
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import OpenReplay from '@openreplay/tracker';
import trackerGraphQL from '@openreplay/tracker-graphql';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -39,7 +40,7 @@ export const recordGraphQL = tracker.use(trackerGraphQL());`}
import trackerGraphQL from '@openreplay/tracker-graphql/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {

24
frontend/app/components/Client/Integrations/Integrations.js
View file

@ -75,7 +75,7 @@ const TITLE = {
[ ASSIST ] : 'Assist',
}
const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER]
const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST]
const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic', 'bugsnag', 'cloudwatch', 'elasticsearch', 'sumologic', 'issues' ];
@ -87,12 +87,14 @@ const integrations = [ 'sentry', 'datadog', 'stackdriver', 'rollbar', 'newrelic'
state.getIn([ name, 'list' ]).size > 0;
props.loading = props.loading || state.getIn([ name, 'fetchRequest', 'loading']);
})
const site = state.getIn([ 'site', 'instance' ]);
return {
...props,
issues: state.getIn([ 'issues', 'list']).first() || {},
slackChannelListExists: state.getIn([ 'slack', 'list' ]).size > 0,
tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
jwt: state.get('jwt')
jwt: state.get('jwt'),
projectKey: site ? site.projectKey : ''
};
}, {
fetchList,
@ -143,6 +145,8 @@ export default class Integrations extends React.PureComponent {
}
renderModalContent() {
const { projectKey } = this.props;
switch (this.state.modalContent) {
case SENTRY:
return <SentryForm onClose={ this.closeModal } />;
@ -172,21 +176,21 @@ export default class Integrations extends React.PureComponent {
case JIRA:
return <JiraForm onClose={ this.closeModal } />;
case REDUX:
return <ReduxDoc onClose={ this.closeModal } />
return <ReduxDoc onClose={ this.closeModal } projectKey={projectKey} />
case VUE:
return <VueDoc onClose={ this.closeModal } />
return <VueDoc onClose={ this.closeModal } projectKey={projectKey} />
case GRAPHQL:
return <GraphQLDoc onClose={ this.closeModal } />
return <GraphQLDoc onClose={ this.closeModal } projectKey={projectKey} />
case NGRX:
return <NgRxDoc onClose={ this.closeModal } />
return <NgRxDoc onClose={ this.closeModal } projectKey={projectKey} />
case FETCH:
return <FetchDoc onClose={ this.closeModal } />
return <FetchDoc onClose={ this.closeModal } projectKey={projectKey} />
case MOBX:
return <MobxDoc onClose={ this.closeModal } />
return <MobxDoc onClose={ this.closeModal } projectKey={projectKey} />
case PROFILER:
return <ProfilerDoc onClose={ this.closeModal } />
return <ProfilerDoc onClose={ this.closeModal } projectKey={projectKey} />
case ASSIST:
return <AssistDoc onClose={ this.closeModal } />
return <AssistDoc onClose={ this.closeModal } projectKey={projectKey} />
default:
return null;
}

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

@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const MobxDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>This plugin allows you to capture MobX events and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@ -18,14 +19,14 @@ const MobxDoc = (props) => {
<div className="font-bold my-2">Usage</div>
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import OpenReplay from '@openreplay/tracker';
import trackerMobX from '@openreplay/tracker-mobx';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.use(trackerMobX(<options>)); // check list of available options below
tracker.start();`}
@ -37,7 +38,7 @@ tracker.start();`}
import trackerMobX from '@openreplay/tracker-mobx/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.use(trackerMobX(<options>)); // check list of available options below
//...

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

@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const NgRxDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>This plugin allows you to capture NgRx actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@ -18,7 +19,7 @@ const NgRxDoc = (props) => {
<div className="font-bold my-2">Usage</div>
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import { StoreModule } from '@ngrx/store';
@ -27,7 +28,7 @@ import OpenReplay from '@openreplay/tracker';
import trackerNgRx from '@openreplay/tracker-ngrx';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -47,7 +48,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
import trackerNgRx from '@openreplay/tracker-ngrx/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {

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

@ -3,6 +3,7 @@ import ToggleContent from 'Shared/ToggleContent'
import DocLink from 'Shared/DocLink/DocLink';
const ProfilerDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>The profiler plugin allows you to measure your JS functions' performance and capture both arguments and result for each function call.</div>
@ -18,14 +19,14 @@ const ProfilerDoc = (props) => {
<div className="font-bold my-2">Usage</div>
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import OpenReplay from '@openreplay/tracker';
import trackerProfiler from '@openreplay/tracker-profiler';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -42,7 +43,7 @@ const fn = profiler('call_name')(() => {
import trackerProfiler from '@openreplay/tracker-profiler/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {

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

@ -3,6 +3,7 @@ import ToggleContent from '../../../shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
const ReduxDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<div>This plugin allows you to capture Redux actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
@ -17,7 +18,7 @@ const ReduxDoc = (props) => {
<p>Initialize the tracker then put the generated middleware into your Redux chain.</p>
<div className="py-3" />
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import { applyMiddleware, createStore } from 'redux';
@ -25,7 +26,7 @@ import OpenReplay from '@openreplay/tracker';
import trackerRedux from '@openreplay/tracker-redux';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -42,7 +43,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
import trackerRedux from '@openreplay/tracker-redux/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {

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

@ -3,6 +3,7 @@ import ToggleContent from '../../../shared/ToggleContent';
import DocLink from 'Shared/DocLink/DocLink';
const VueDoc = (props) => {
const { projectKey } = props;
return (
<div className="p-4">
<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>
@ -18,7 +19,7 @@ const VueDoc = (props) => {
<ToggleContent
label="Is SSR?"
label="Server-Side-Rendered (SSR)?"
first={
<Highlight className="js">
{`import Vuex from 'vuex'
@ -26,7 +27,7 @@ import OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
tracker.start();
//...
@ -43,7 +44,7 @@ import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
projectKey: '${projectKey}'
});
//...
function SomeFunctionalComponent() {