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

fix ui: fix mobile installation docs modal

Browse source
This commit is contained in:
nick-delirium 2024-06-05 13:46:05 +02:00
parent 453053179d
commit d3f2c3e8b4
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 116 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx
View file

@ -5,7 +5,7 @@ import Highlight from 'react-highlight';
import CircleNumber from '../../CircleNumber';
import {CopyButton} from 'UI';
const installationCommand = `// Add it in your root build.gradle at the end of repositories:
export const installationCommand = `// Add it in your root build.gradle at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
@ -20,7 +20,7 @@ dependencies {
}
`;
const usageCode = `// MainActivity.kt
export const usageCode = `// MainActivity.kt
import com.openreplay.tracker.OpenReplay
//...

6
frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx
View file

@ -5,7 +5,7 @@ import Highlight from 'react-highlight';
import CircleNumber from '../../CircleNumber';
import { CopyButton } from 'UI';
const installationCommand = `
export const installationCommand = `
// make sure to grab latest version from https://github.com/openreplay/ios-tracker
// Cocoapods
pod 'Openreplay', '~> 1.0.5'
@ -16,7 +16,7 @@ dependencies: [
]
`;
const usageCode = `// AppDelegate.swift
export const usageCode = `// AppDelegate.swift
import OpenReplay
//...
@ -24,7 +24,7 @@ import OpenReplay
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// not required if you're using our SaaS version
OpenReplay.shared.serverURL = "https://your.instance.com/ingest"
OpenReplay.shared.start(projectKey: "PROJECT_KEY", options: .defaults)

57
frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx Normal file
View file

@ -0,0 +1,57 @@
import React from 'react'
import cn from 'classnames'
import { Segmented } from 'antd';
import { CopyButton } from 'UI';
import Highlight from 'react-highlight'
import stl from './InstallDocs/installDocs.module.css'
import { usageCode as iosUsageCode, installationCommand as iosInstallCommand } from "../../Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs";
import { usageCode as androidUsageCode, installationCommand as androidInstallCommand } from "../../Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs";
function InstallMobileDocs({ site }) {
const [isIos, setIsIos] = React.useState(true)
const usageCode = isIos ? iosUsageCode : androidUsageCode
const installationCommand = isIos ? iosInstallCommand : androidInstallCommand
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey)
const docLink = `https://docs.openreplay.com/en/${isIos ? 'ios-' : 'android-'}sdk/`
return (
<div>
<div className="mb-3">
<Segmented
options={[
{ label: 'iOS', value: true },
{ label: 'Android', value: false },
]}
value={isIos}
onChange={setIsIos}
/>
</div>
<div className="mb-3">
<div className="font-semibold mb-2">1. Installation</div>
<div className={ '' }>
<div className={ cn(stl.snippetWrapper, '') }>
<CopyButton content={installationCommand} className={cn(stl.codeCopy, 'mt-2 mr-2')} />
<Highlight className="cli">
{installationCommand}
</Highlight>
</div>
</div>
</div>
<div>
<div className="font-semibold mb-2">2. Usage</div>
<div className={ '' }>
<div className={ cn(stl.snippetWrapper, '') }>
<CopyButton content={_usageCode} className={cn(stl.codeCopy, 'mt-2 mr-2')} />
<Highlight className="cli">
{_usageCode}
</Highlight>
</div>
</div>
</div>
<div className="mt-6">See <a href={docLink} className="color-teal underline" target="_blank">Documentation</a> for the list of available options.</div>
</div>
)
}
export default InstallMobileDocs

87
frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
View file

@ -1,49 +1,70 @@
import React from 'react';
import { Tabs } from 'UI';
import ProjectCodeSnippet from './ProjectCodeSnippet';
import InstallDocs from './InstallDocs';
import InstallMobileDocs from './InstallIosDocs';
import ProjectCodeSnippet from './ProjectCodeSnippet';
const PROJECT = 'Using Script';
const DOCUMENTATION = 'Using NPM';
const TABS = [
{ key: DOCUMENTATION, text: DOCUMENTATION },
{ key: PROJECT, text: PROJECT },
{ key: DOCUMENTATION, text: DOCUMENTATION },
{ key: PROJECT, text: PROJECT },
];
class TrackingCodeModal extends React.PureComponent {
state = { copied: false, changed: false, activeTab: DOCUMENTATION };
state = { copied: false, changed: false, activeTab: DOCUMENTATION };
setActiveTab = (tab) => {
this.setState({ activeTab: tab });
};
setActiveTab = (tab) => {
this.setState({ activeTab: tab });
};
renderActiveTab = () => {
const { site } = this.props;
switch (this.state.activeTab) {
case PROJECT:
return <ProjectCodeSnippet site={site} />;
case DOCUMENTATION:
return <InstallDocs site={site} />;
}
return null;
};
render() {
const { title = '', subTitle } = this.props;
const { activeTab } = this.state;
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '700px' }}>
<h3 className="p-5 text-2xl">
{title} {subTitle && <span className="text-sm color-gray-dark">{subTitle}</span>}
</h3>
<div>
<Tabs className="px-5" tabs={TABS} active={activeTab} onClick={this.setActiveTab} />
<div className="p-5">{this.renderActiveTab()}</div>
</div>
</div>
);
renderActiveTab = () => {
const { site } = this.props;
switch (this.state.activeTab) {
case PROJECT:
return <ProjectCodeSnippet site={site} />;
case DOCUMENTATION:
return <InstallDocs site={site} />;
}
return null;
};
render() {
const { title = '', subTitle, site } = this.props;
const { activeTab } = this.state;
console.log(this.props.site);
return (
<div
className="bg-white h-screen overflow-y-auto"
style={{ width: '700px' }}
>
<h3 className="p-5 text-2xl">
{title}{' '}
{subTitle && (
<span className="text-sm color-gray-dark">{subTitle}</span>
)}
</h3>
{site.platform === 'ios' ? (
<div className={'p-5'}>
<InstallMobileDocs site={site} />
</div>
) : (
<div>
<Tabs
className="px-5"
tabs={TABS}
active={activeTab}
onClick={this.setActiveTab}
/>
<div className="p-5">{this.renderActiveTab()}</div>
</div>
)}
</div>
);
}
}
export default TrackingCodeModal;