UI ingest point patch (#2293)

* fix ui: fix mobile installation docs modal * change(ui): show ingest point --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
2024-06-21 17:46:55 +02:00 · 2024-06-21 17:46:55 +02:00 · 409b05a24c
commit 409b05a24c
parent 4150d06ff9
5 changed files with 143 additions and 63 deletions
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs.tsx
@ -3,9 +3,9 @@ import stl from './installDocs.module.css';
 import cn from 'classnames';
 import Highlight from 'react-highlight';
 import CircleNumber from '../../CircleNumber';
-import {CopyButton} from 'UI';
+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,18 +20,18 @@ dependencies {
 }
 `;

-const usageCode = `// MainActivity.kt
+export const usageCode = `// MainActivity.kt
 import com.openreplay.tracker.OpenReplay

 //...
 class MainActivity : TrackingActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    // not required if you're using our SaaS version
-    OpenReplay.serverURL = "https://your.instance.com/ingest"
+    OpenReplay.serverURL = "INGEST_POINT"
    // check out our SDK docs to see available options
    OpenReplay.start(
        applicationContext,
-        "projectkey",
+        "PROJECT_KEY",
        OpenReplay.Options.defaults(),
        onStarted = {
            println("OpenReplay Started")
@ -40,7 +40,7 @@ class MainActivity : TrackingActivity() {
        // ...
    }
 }`;
-const configuration = `let crashs: Bool
+const configuration = `let crashes: Bool
 let analytics: Bool
 let performances: Bool
 let logs: Bool
@ -57,38 +57,38 @@ const sensitive = `import com.openreplay.tracker.OpenReplay
 OpenReplay.addIgnoredView(view)
 `

-const inputs = `import com.opnereplay.tracker.OpenReplay
+const inputs = `import com.openreplay.tracker.OpenReplay

 val passwordEditText = binding.password
 passwordEditText.trackTextInput(label = "password", masked = true)`

-function AndroidInstallDocs({site}: any) {
-    const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey);
+function AndroidInstallDocs({ site, ingestPoint }: any) {
+    let _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey).replace('INGEST_POINT', ingestPoint);

    return (
        <div>
            <div className="mb-4">
                <div className="font-semibold mb-2 flex items-center">
-                    <CircleNumber text="1"/>
+                    <CircleNumber text="1" />
                    Install the SDK
                </div>
                <div className={cn(stl.snippetWrapper, 'ml-10')}>
                    <div className="absolute mt-1 mr-2 right-0">
-                        <CopyButton content={installationCommand}/>
+                        <CopyButton content={installationCommand} />
                    </div>
                    <Highlight className="cli">{installationCommand}</Highlight>
                </div>
            </div>

            <div className="font-semibold mb-2 flex items-center">
-                <CircleNumber text="2"/>
+                <CircleNumber text="2" />
                Add to your app
            </div>
            <div className="flex ml-10 mt-4">
                <div className="w-full">
                    <div className={cn(stl.snippetWrapper)}>
                        <div className="absolute mt-1 mr-2 right-0">
-                            <CopyButton content={_usageCode}/>
+                            <CopyButton content={_usageCode} />
                        </div>
                        <Highlight className="swift">{_usageCode}</Highlight>
                    </div>
@ -96,7 +96,7 @@ function AndroidInstallDocs({site}: any) {
            </div>

            <div className="font-semibold mb-2 mt-4 flex items-center">
-                <CircleNumber text="3"/>
+                <CircleNumber text="3" />
                Configuration
            </div>
            <div className="flex ml-10 mt-4">
@ -110,14 +110,14 @@ function AndroidInstallDocs({site}: any) {
            </div>

            <div className="font-semibold mb-2 mt-4 flex items-center">
-                <CircleNumber text="4"/>
+                <CircleNumber text="4" />
                Set up touch events listener
            </div>
            <div className="flex ml-10 mt-4">
                <div className="w-full">
                    <div className={cn(stl.snippetWrapper)}>
                        <div className="absolute mt-1 mr-2 right-0">
-                            <CopyButton content={touches}/>
+                            <CopyButton content={touches} />
                        </div>
                        <Highlight className="swift">{touches}</Highlight>
                    </div>
@ -125,14 +125,14 @@ function AndroidInstallDocs({site}: any) {
            </div>

            <div className="font-semibold mb-2 mt-4 flex items-center">
-                <CircleNumber text="5"/>
+                <CircleNumber text="5" />
                Hide sensitive views
            </div>
            <div className="flex ml-10 mt-4">
                <div className="w-full">
                    <div className={cn(stl.snippetWrapper)}>
                        <div className="absolute mt-1 mr-2 right-0">
-                            <CopyButton content={sensitive}/>
+                            <CopyButton content={sensitive} />
                        </div>
                        <Highlight className="swift">{sensitive}</Highlight>
                    </div>
@ -140,14 +140,14 @@ function AndroidInstallDocs({site}: any) {
            </div>

            <div className="font-semibold mb-2 mt-4 flex items-center">
-                <CircleNumber text="6"/>
+                <CircleNumber text="6" />
                Track inputs
            </div>
            <div className="flex ml-10 mt-4">
                <div className="w-full">
                    <div className={cn(stl.snippetWrapper)}>
                        <div className="absolute mt-1 mr-2 right-0">
-                            <CopyButton content={inputs}/>
+                            <CopyButton content={inputs} />
                        </div>
                        <Highlight className="swift">{inputs}</Highlight>
                    </div>
@ -157,4 +157,4 @@ function AndroidInstallDocs({site}: any) {
    );
 }

-export default AndroidInstallDocs
+export default AndroidInstallDocs;
--- 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,15 +24,15 @@ import OpenReplay
 class AppDelegate: UIResponder, UIApplicationDelegate {
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
-        
-        OpenReplay.shared.serverURL = "https://your.instance.com/ingest"
+        // not required if you're using our SaaS version
+        OpenReplay.shared.serverURL = "INGEST_POINT"
        OpenReplay.shared.start(projectKey: "PROJECT_KEY", options: .defaults)
        
        // ...
        return true
    }
 // ...`;
-const configuration = `let crashs: Bool
+const configuration = `let crashes: Bool
 let analytics: Bool
 let performances: Bool
 let logs: Bool
@ -72,8 +72,8 @@ TextField("Input", text: $text)
 // UIKit will use placeholder as label and sender.isSecureTextEntry to mask the input
 Analytics.shared.addObservedInput(inputEl)`

-function MobileInstallDocs({ site }: any) {
-  const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey);
+function MobileInstallDocs({ site, ingestPoint }: any) {
+  const _usageCode = usageCode.replace('INGEST_POINT', ingestPoint).replace('PROJECT_KEY', site.projectKey);

  return (
    <div>
--- a/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx
+++ b/frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx
@ -21,6 +21,7 @@ const MobileTrackingCodeModal = (props: Props) => {
  const { site } = props;
  const [activeTab, setActiveTab] = useState(iOS);
  const { showModal } = useModal();
+  const ingestPoint = `https://${window.location.hostname}/ingest`;

  const showUserModal = () => {
    showModal(<UserForm />, { right: true });
@ -32,7 +33,7 @@ const MobileTrackingCodeModal = (props: Props) => {
        return (
          <div className="grid grid-cols-6 gap-4">
            <div className="col-span-4">
-              <MobileInstallDocs site={site} />
+              <MobileInstallDocs site={site} ingestPoint={ingestPoint} />
            </div>

            <div className="col-span-2">
@ -55,7 +56,7 @@ const MobileTrackingCodeModal = (props: Props) => {
        return (
          <div className="grid grid-cols-6 gap-4">
            <div className="col-span-4">
-              <AndroidInstallDocs site={site} />
+              <AndroidInstallDocs site={site} ingestPoint={ingestPoint} />
            </div>

            <div className="col-span-2">
--- a/frontend/app/components/shared/TrackingCodeModal/InstallIosDocs.tsx
+++ 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, ingestPoint }: any) {
+  const [isIos, setIsIos] = React.useState(true)
+
+  const usageCode = isIos ? iosUsageCode : androidUsageCode
+  const installationCommand = isIos ? iosInstallCommand : androidInstallCommand
+  const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey).replace('INGEST_POINT', ingestPoint)
+
+  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
--- a/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
+++ b/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
@ -1,49 +1,71 @@
 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;
+      const ingestPoint = `https://${window.location.hostname}/ingest`;
+
+    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} ingestPoint={ingestPoint}  />
+          </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;