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

fix (frontend): snippets & sentences

Browse source
This commit is contained in:
ShiKhu 2021-05-12 20:58:16 +02:00
parent 9da0defa93
commit a5ba7a3ed1
11 changed files with 75 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Login/Login.js
View file

@ -63,7 +63,7 @@ export default class Login extends React.Component {
<form onSubmit={ this.onSubmit }>
<div className="mb-8">
<h2 className="text-center text-3xl mb-6">Login to OpenReplay</h2>
{ tenants.length === 0 && <div className="text-center text-xl">Don't have an a Account? <span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
{ tenants.length === 0 && <div className="text-center text-xl">Don't have an account?<span className="link"><Link to={ SIGNUP_ROUTE }>Sign up</Link></span></div> }
</div>
<Loader loading={ loading }>
{ window.ENV.CAPTCHA_ENABLED && (

8
frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.js
View file

@ -14,9 +14,9 @@ export default function IdentifyUsersTab() {
<div>
<div className="font-bold mb-4 text-lg">By User ID</div>
<div className="mb-2">
Call <span className="highlight-gray">userID</span> to identify your users when recording a session. The identity of the user can be changed, but OpenReplay will only keep the last communicated user ID.
Call <span className="highlight-gray">setUserID</span> to identify your users when recording a session. The identity of the user can be changed, but OpenReplay will only keep the last communicated user ID.
</div>
<HighlightCode className="js" text={`tracker.userID('john@doe.com');`} />
<HighlightCode className="js" text={`tracker.setUserID('john@doe.com');`} />
</div>
<div className="my-8" />
@ -38,8 +38,8 @@ export default function IdentifyUsersTab() {
<CircleNumber text="2" />
<div className="pt-1">
<span className="font-bold">Inject metadata when recording sessions</span>
<div className="my-2">Use the <span className="highlight-gray">metadata</span> method in your code to inject custom user data in the form of a key/value pair (string).</div>
<HighlightCode className="js" text={`tracker.metadata('plan', 'premium');`} />
<div className="my-2">Use the <span className="highlight-gray">setMetadata</span> method in your code to inject custom user data in the form of a key/value pair (string).</div>
<HighlightCode className="js" text={`tracker.setMetadata('plan', 'premium');`} />
</div>
</div>
</div>

27
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js
View file

@ -6,26 +6,33 @@ import Highlight from 'react-highlight'
import CircleNumber from '../../CircleNumber'
import { Slider, CopyButton } from 'UI'
const installationCommand = 'npm i @openreplay/tracker --save'
const installationCommand = 'npm i @openreplay/tracker'
const usageCode = `import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
projectID: PROJECT_ID
projectKey: "PROJECT_KEY",
ingestPoint: "https://${window.location.hostname}/ingest",
});
tracker.start();`
const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs';
//...
const tracker = new Tracker({
projectID: PROJECT_ID,
onStart: () => { tracker.userID('MY_USER_ID'); },
projectKey: "PROJECT_KEY",
ingestPoint: "https://${window.location.hostname}/ingest",
});
//...
useEffect(() => { // or componentDidMount
function MyApp() {
useEffect(() => { // use componentDidMount in case of React Class Component
tracker.start();
}, [])`
}, []);
//...
}`
function InstallDocs({ site }) {
const _usageCode = usageCode.replace('PROJECT_ID', site.projectKey)
const _usageCodeSST = usageCodeSST.replace('PROJECT_ID', site.projectKey)
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
const _usageCodeSST = usageCodeSST.replace('PROJECT_KEY', site.projectKey)
const [isSpa, setIsSpa] = useState(true)
return (
<div>

18
frontend/app/components/Onboarding/components/OnboardingTabs/ProjectCodeSnippet/ProjectCodeSnippet.js
View file

@ -23,16 +23,18 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
r.setUserID=r.userID=function(id){r.push([2,id])};
r.setUserAnonymousID=r.userAnonymousID=function(id){r.push([3,id])};
r.setMetadata=r.metadata=function(k,v){r.push([4,k,v])};
r.setUserID=function(id){r.push([2,id])};
r.setUserAnonymousID=function(id){r.push([3,id])};
r.setMetadata=function(k,v){r.push([4,k,v])};
r.event=function(k,p,i){r.push([5,k,p,i])};
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=r.active=function(){return false};
r.getSessionToken=r.sessionID=function(){};
})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
r.isActive=function(){return false};
r.getSessionToken=function(){};
r.i="https://${window.location.hostname}/ingest";
})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
<script>`;
const ProjectCodeSnippet = props => {
const { site, gdpr } = props;
const [changed, setChanged] = useState(false)
@ -69,7 +71,7 @@ const ProjectCodeSnippet = props => {
const getCodeSnippet = site => {
let snippet = codeSnippet;
if (site && site.id) {
snippet = snippet.replace('PROJECT_HASH', site.projectKey);
snippet = snippet.replace('PROJECT_KEY', site.projectKey);
}
return snippet
.replace('XXX', getOptionValues())
@ -132,7 +134,7 @@ const ProjectCodeSnippet = props => {
<CircleNumber text="2" />
<span>Install SDK</span>
</div>
<div className={ stl.siteId }>{ 'Project ID: ' } <span>{ site.projectKey }</span></div>
<div className={ stl.siteId }>{ 'Project Key: ' } <span>{ site.projectKey }</span></div>
</div>
<div className="ml-10 mb-2 text-sm">

2
frontend/app/components/Signup/Signup.js
View file

@ -28,7 +28,7 @@ export default class Signup extends React.Component {
<div className="flex items-center text-3xl font-bold mb-6">
OpenReplay Cloud <div className="ml-2"><Icon name="signup" size="28" color="white" /></div>
</div>
<div>OpenReplay Cloud is the hosted version of our open source package.</div>
<div>OpenReplay Cloud is the hosted version of our open-source project.</div>
<div>We’ll manage hosting, scaling and upgrades.</div>
<div className="mt-8">

12
frontend/app/components/Signup/SignupForm/SignupForm.js
View file

@ -51,7 +51,7 @@ export default class SignupForm extends React.Component {
<form onSubmit={ this.onSubmit }>
<div className="mb-8">
<h2 className="text-center text-3xl mb-6">Get Started</h2>
<div className="text-center text-xl">Already having an account? <span className="link"><Link to={ LOGIN_ROUTE }>Sign In</Link></span></div>
<div className="text-center text-xl">Already having an account? <span className="link"><Link to={ LOGIN_ROUTE }>Sign in</Link></span></div>
</div>
<>
{ window.ENV.CAPTCHA_ENABLED && (
@ -69,7 +69,7 @@ export default class SignupForm extends React.Component {
<div className={ stl.inputWithIcon }>
<Dropdown
className="w-full"
placeholder="Select tenant"
placeholder="Select account"
selection
options={ tenants }
name="tenantId"
@ -95,7 +95,7 @@ export default class SignupForm extends React.Component {
</div>
</div>
<div className="mb-6">
<label className="mb-2">Create Password</label>
<label className="mb-2">Password</label>
<div className={ stl.inputWithIcon }>
<input
type="password"
@ -109,7 +109,7 @@ export default class SignupForm extends React.Component {
</div>
</div>
<div className="mb-6">
<label>Your Name</label>
<label>Name</label>
<div className={ stl.inputWithIcon }>
<input
type="text"
@ -123,7 +123,7 @@ export default class SignupForm extends React.Component {
</div>
<div className="mb-6">
<label>Organization Name</label>
<label>Organization</label>
<div className={ stl.inputWithIcon }>
<input
type="text"
@ -156,7 +156,7 @@ export default class SignupForm extends React.Component {
<Button type="submit" primary >
{ loading ?
<CircularLoader loading={true} /> :
'Signup'
'Create account'
}
</Button>
</div>

2
frontend/app/components/shared/EmailVerificationMessage/EmailVerificationMessage.js
View file

@ -21,7 +21,7 @@ function EmailVerificationMessage(props) {
className="mt-3 px-3 rounded-2xl font-medium"
style={{ paddingTop: '3px', height: '28px', backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
>
<span>Verify your registered email.</span> <a href="#" className="link" onClick={send}>Resend</a>
<span>Please, verify your email.</span> <a href="#" className="link" onClick={send}>Resend</a>
</div>
}
content={

2
frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
View file

@ -24,7 +24,7 @@ const NoSessionsMessage= (props) => {
<Icon name="info-circle" size="14" color="gray-darkest" />
</div>
<div className="ml-2color-gray-darkest mr-auto">
It takes a few minutes for first recordings to appear. <strong>All set but they are still not showing up?</strong> Check our <a>troubleshooting</a> section.
It takes a few minutes for first recordings to appear. All set but they are still not showing up? Check our <a href="https://docs.openreplay.com/troubleshooting">troubleshooting</a> section.
</div>
<Button outline size="smallest" onClick={() => props.history.push(withSiteId(onboardingRoute('installing'), siteId))}>Go to project setup</Button>
</div>

22
frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js
View file

@ -4,15 +4,31 @@ import stl from './installDocs.css'
import cn from 'classnames'
import { CopyButton } from 'UI';
const installationCommand = 'npm i @openreplay/tracker --save'
const installationCommand = 'npm i @openreplay/tracker'
const usageCode = `import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
projectID: PROJECT_ID
projectKey: "PROJECT_KEY",
ingestPoint: "https://${window.location.hostname}/ingest",
});
tracker.start();`
const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs';
const tracker = new Tracker({
projectKey: "PROJECT_KEY",
ingestPoint: "https://${window.location.hostname}/ingest",
});
function MyApp() {
useEffect(() => { // use componentDidMount in case of React Class Component
tracker.start();
}, []);
//...
}`
function InstallDocs({ site }) {
const _usageCode = usageCode.replace('PROJECT_ID', site.projectKey)
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
return (
<div>
<div className="mb-3">

18
frontend/app/components/shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet.js
View file

@ -22,16 +22,18 @@ const codeSnippet = `<!-- OpenReplay Tracking Code for HOST -->
document.getElementsByTagName('head')[0].appendChild(s);
r.start=function(v){r.push([0])};
r.stop=function(v){r.push([1])};
r.setUserID=r.userID=function(id){r.push([2,id])};
r.setUserAnonymousID=r.userAnonymousID=function(id){r.push([3,id])};
r.setMetadata=r.metadata=function(k,v){r.push([4,k,v])};
r.setUserID=function(id){r.push([2,id])};
r.setUserAnonymousID=function(id){r.push([3,id])};
r.setMetadata=function(k,v){r.push([4,k,v])};
r.event=function(k,p,i){r.push([5,k,p,i])};
r.issue=function(k,p){r.push([6,k,p])};
r.isActive=r.active=function(){return false};
r.getSessionToken=r.sessionID=function(){};
})(0,PROJECT_HASH,"//${window.location.hostname}/static/openreplay.js",1,XXX);
r.isActive=function(){return false};
r.getSessionToken=function(){};
r.i="https://${window.location.hostname}/ingest";
})(0, "PROJECT_KEY", "//static.openreplay.com/${window.ENV.TRACKER_VERSION}/openreplay.js",1,XXX);
<script>`;
const ProjectCodeSnippet = props => {
const { site, gdpr, saving } = props;
const [changed, setChanged] = useState(false)
@ -68,7 +70,7 @@ const ProjectCodeSnippet = props => {
const getCodeSnippet = site => {
let snippet = codeSnippet;
if (site && site.id) {
snippet = snippet.replace('PROJECT_HASH', site.projectKey);
snippet = snippet.replace('PROJECT_KEY', site.projectKey);
}
return snippet
.replace('XXX', getOptionValues())
@ -126,7 +128,7 @@ const ProjectCodeSnippet = props => {
<span className={ styles.highLight }> { '</head>' } </span>
<span>{ ' tag of your page.' }</span>
</div>
<div className={ styles.siteId }>{ 'Project ID: ' } <span>{ site.projectKey }</span></div>
<div className={ styles.siteId }>{ 'Project Key: ' } <span>{ site.projectKey }</span></div>
</div>
<div className={ styles.snippetsWrapper }>
<button className={ styles.codeCopy } onClick={ () => copyHandler(_snippet) }>{ copied ? 'copied' : 'copy' }</button>

6
frontend/env.js
View file

@ -1,5 +1,8 @@
require('dotenv').config()
// TODO: derive version from the tracker package on build
//const trackerInfo = require('../tracker/tracker/package.json');
const oss = {
name: 'oss',
PRODUCTION: true,
@ -16,7 +19,8 @@ const oss = {
MINIO_PORT: process.env.MINIO_PORT,
MINIO_USE_SSL: process.env.MINIO_USE_SSL,
MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY
MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
TRACKER_VERSION: '3.0.2', // trackerInfo.version,
}
module.exports = {
oss,