From d3f2c3e8b479ba519066bbb6db40ba152be00f1c Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Wed, 5 Jun 2024 13:46:05 +0200 Subject: [PATCH] fix ui: fix mobile installation docs modal --- .../InstallDocs/AndroidInstallDocs.tsx | 4 +- .../InstallDocs/MobileInstallDocs.tsx | 6 +- .../TrackingCodeModal/InstallIosDocs.tsx | 57 ++++++++++++ .../TrackingCodeModal/TrackingCodeModal.js | 87 ++++++++++++------- 4 files changed, 116 insertions(+), 38 deletions(-) create mode 100644 frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx index aaadafdba..822084593 100644 --- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx @@ -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 //... diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx index 1efb37c44..c2de52485 100644 --- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs.tsx @@ -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) diff --git a/frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx b/frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx new file mode 100644 index 000000000..c39a70f5e --- /dev/null +++ b/frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx @@ -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 ( +
+
+ +
+
+
1. Installation
+
+
+ + + {installationCommand} + +
+
+
+
+
2. Usage
+
+
+ + + {_usageCode} + +
+
+
+
See Documentation for the list of available options.
+
+ ) +} + +export default InstallMobileDocs \ No newline at end of file diff --git a/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js b/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js index 96061521e..3b7094293 100644 --- a/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js +++ b/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js @@ -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 ; - case DOCUMENTATION: - return ; - } - return null; - }; - - render() { - const { title = '', subTitle } = this.props; - const { activeTab } = this.state; - return ( -
-

- {title} {subTitle && {subTitle}} -

- -
- -
{this.renderActiveTab()}
-
-
- ); + renderActiveTab = () => { + const { site } = this.props; + switch (this.state.activeTab) { + case PROJECT: + return ; + case DOCUMENTATION: + return ; } + return null; + }; + + render() { + const { title = '', subTitle, site } = this.props; + const { activeTab } = this.state; + console.log(this.props.site); + return ( +
+

+ {title}{' '} + {subTitle && ( + {subTitle} + )} +

+ + {site.platform === 'ios' ? ( +
+ +
+ ) : ( +
+ +
{this.renderActiveTab()}
+
+ )} +
+ ); + } } export default TrackingCodeModal;