From a0ec773a03bc500fe9fb308044209290e462aba6 Mon Sep 17 00:00:00 2001
From: Alex Kaminskii <alex@openreplay.com>
Date: Mon, 23 Jan 2023 13:12:26 +0100
Subject: [PATCH] feat(frontend): remove links to Fetch/Axios Plugin docs; add
 link to network options

---
 .../Client/Integrations/AxiosDoc/AxiosDoc.js  | 69 ------------------
 .../Client/Integrations/AxiosDoc/index.js     |  1 -
 .../Client/Integrations/FetchDoc/FetchDoc.js  | 73 -------------------
 .../Client/Integrations/FetchDoc/index.js     |  1 -
 .../Client/Integrations/Integrations.tsx      |  4 -
 .../Session_/Network/NetworkContent.js        |  9 ++-
 .../FetchDetailsModal/FetchDetailsModal.tsx   |  2 -
 .../FetchPluginMessage/FetchPluginMessage.tsx | 31 --------
 .../components/FetchPluginMessage/index.ts    |  1 -
 .../components/FetchTabs/FetchTabs.tsx        | 10 ++-
 10 files changed, 14 insertions(+), 187 deletions(-)
 delete mode 100644 frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
 delete mode 100644 frontend/app/components/Client/Integrations/AxiosDoc/index.js
 delete mode 100644 frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
 delete mode 100644 frontend/app/components/Client/Integrations/FetchDoc/index.js
 delete mode 100644 frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/FetchPluginMessage.tsx
 delete mode 100644 frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/index.ts

diff --git a/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js b/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
deleted file mode 100644
index 80ae5e0a7..000000000
--- a/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import Highlight from 'react-highlight';
-import ToggleContent from 'Shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
-
-const AxiosDoc = (props) => {
-    const { projectKey } = props;
-    return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
-            <h3 className="p-5 text-2xl">Axios</h3>
-            <div className="p-5">
-                <div>
-                    This plugin allows you to capture axios requests and inspect them later on while replaying session recordings. This is very useful
-                    for understanding and fixing issues.
-                </div>
-
-                <div className="font-bold my-2">Installation</div>
-                <Highlight className="js">{`npm i @openreplay/tracker-axios`}</Highlight>
-
-                <div className="font-bold my-2">Usage</div>
-                <p>
-                    Initialize the @openreplay/tracker package as usual then load the axios plugin. Note that OpenReplay axios plugin requires
-                    axios@^0.21.2 as a peer dependency.
-                </p>
-                <div className="py-3" />
-
-                <div className="font-bold my-2">Usage</div>
-                <ToggleContent
-                    label="Server-Side-Rendered (SSR)?"
-                    first={
-                        <Highlight className="js">
-                            {`import OpenReplay from '@openreplay/tracker';
-import trackerAxios from '@openreplay/tracker-axios';
-const tracker = new OpenReplay({
-  projectKey: '${projectKey}'
-});
-tracker.use(trackerAxios(options)); // check list of available options below
-tracker.start();`}
-                        </Highlight>
-                    }
-                    second={
-                        <Highlight className="js">
-                            {`import OpenReplay from '@openreplay/tracker/cjs';
-import trackerAxios from '@openreplay/tracker-axios/cjs';
-const tracker = new OpenReplay({
-  projectKey: '${projectKey}'
-});
-tracker.use(trackerAxios(options)); // check list of available options below
-//...
-function MyApp() {
-  useEffect(() => { // use componentDidMount in case of React Class Component
-    tracker.start();
-  }, [])
-//...
-}`}
-                        </Highlight>
-                    }
-                />
-
-                <DocLink className="mt-4" label="Integrate Fetch" url="https://docs.openreplay.com/plugins/axios" />
-            </div>
-        </div>
-    );
-};
-
-AxiosDoc.displayName = 'AxiosDoc';
-
-export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(AxiosDoc)
diff --git a/frontend/app/components/Client/Integrations/AxiosDoc/index.js b/frontend/app/components/Client/Integrations/AxiosDoc/index.js
deleted file mode 100644
index a5a8a1873..000000000
--- a/frontend/app/components/Client/Integrations/AxiosDoc/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './AxiosDoc'
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js b/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
deleted file mode 100644
index 761d4160b..000000000
--- a/frontend/app/components/Client/Integrations/FetchDoc/FetchDoc.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import Highlight from 'react-highlight';
-import ToggleContent from 'Shared/ToggleContent';
-import DocLink from 'Shared/DocLink/DocLink';
-import { connect } from 'react-redux';
-
-const FetchDoc = (props) => {
-    const { projectKey } = props;
-    return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
-            <h3 className="p-5 text-2xl">Fetch</h3>
-            <div className="p-5">
-                <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>
-
-                <div className="font-bold my-2">Installation</div>
-                <Highlight className="js">{`npm i @openreplay/tracker-fetch --save`}</Highlight>
-
-                <div className="font-bold my-2">Usage</div>
-                <p>Use the provided fetch method from the plugin instead of the one built-in.</p>
-                <div className="py-3" />
-
-                <div className="font-bold my-2">Usage</div>
-                <ToggleContent
-                    label="Server-Side-Rendered (SSR)?"
-                    first={
-                        <Highlight className="js">
-                            {`import OpenReplay from '@openreplay/tracker';
-import trackerFetch from '@openreplay/tracker-fetch';
-//...
-const tracker = new OpenReplay({
-  projectKey: '${projectKey}'
-});
-tracker.start();
-//...
-export const fetch = tracker.use(trackerFetch(<options>)); // check list of available options below
-//...
-fetch('https://api.openreplay.com/').then(response => console.log(response.json()));`}
-                        </Highlight>
-                    }
-                    second={
-                        <Highlight className="js">
-                            {`import OpenReplay from '@openreplay/tracker/cjs';
-import trackerFetch from '@openreplay/tracker-fetch/cjs';
-//...
-const tracker = new OpenReplay({
-  projectKey: '${projectKey}'
-});
-//...
-function SomeFunctionalComponent() {
-  useEffect(() => { // or componentDidMount in case of Class approach
-    tracker.start();
-  }, [])
-//...
-export const fetch = tracker.use(trackerFetch(<options>)); // check list of available options below
-//...
-fetch('https://api.openreplay.com/').then(response => console.log(response.json()));
-}`}
-                        </Highlight>
-                    }
-                />
-
-                <DocLink className="mt-4" label="Integrate Fetch" url="https://docs.openreplay.com/plugins/fetch" />
-            </div>
-        </div>
-    );
-};
-
-FetchDoc.displayName = 'FetchDoc';
-
-export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(FetchDoc)
diff --git a/frontend/app/components/Client/Integrations/FetchDoc/index.js b/frontend/app/components/Client/Integrations/FetchDoc/index.js
deleted file mode 100644
index 9bb21e9b9..000000000
--- a/frontend/app/components/Client/Integrations/FetchDoc/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FetchDoc'
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index fe281235b..6afb5f172 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -22,9 +22,7 @@ import VueDoc from './VueDoc';
 import GraphQLDoc from './GraphQLDoc';
 import NgRxDoc from './NgRxDoc';
 import MobxDoc from './MobxDoc';
-import FetchDoc from './FetchDoc';
 import ProfilerDoc from './ProfilerDoc';
-import AxiosDoc from './AxiosDoc';
 import AssistDoc from './AssistDoc';
 import { PageTitle } from 'UI';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@@ -170,9 +168,7 @@ const integrations = [
             { title: 'GraphQL', slug: '', icon: 'integrations/graphql', component: <GraphQLDoc /> },
             { title: 'NgRx', slug: '', icon: 'integrations/ngrx', component: <NgRxDoc /> },
             { title: 'MobX', slug: '', icon: 'integrations/mobx', component: <MobxDoc /> },
-            { title: 'Fetch', slug: '', icon: 'integrations/openreplay', component: <FetchDoc /> },
             { title: 'Profiler', slug: '', icon: 'integrations/openreplay', component: <ProfilerDoc /> },
-            { title: 'Axios', slug: '', icon: 'integrations/openreplay', component: <AxiosDoc /> },
             { title: 'Assist', slug: '', icon: 'integrations/openreplay', component: <AssistDoc /> },
             { title: 'Zustand', slug: '', icon: '', header: '🐻', component: <ZustandDoc /> }
         ],
diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js
index 8174162c0..5718fb55e 100644
--- a/frontend/app/components/Session_/Network/NetworkContent.js
+++ b/frontend/app/components/Session_/Network/NetworkContent.js
@@ -76,15 +76,16 @@ const renderXHRText = () => (
     <QuestionMarkHint
       content={
         <>
-          Use our{' '}
+          Configure{' '}
           <a
             className="color-teal underline"
             target="_blank"
-            href="https://docs.openreplay.com/plugins/fetch"
+            href="https://docs.openreplay.com/installation/network-options"
           >
-            Fetch plugin
+            Configure
           </a>
-          {' to capture HTTP requests and responses, including status codes and bodies.'} <br />
+          network capturing
+          {' to see fetch/XHR requests and response payloads.'} <br />
           We also provide{' '}
           <a
             className="color-teal underline"
diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
index 183294788..0da607afc 100644
--- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import FetchBasicDetails from './components/FetchBasicDetails';
 import { Button } from 'UI';
-import FetchPluginMessage from './components/FetchPluginMessage';
 import { TYPES } from 'Types/session/resource';
 import FetchTabs from './components/FetchTabs/FetchTabs';
 import { useStore } from 'App/mstore';
@@ -52,7 +51,6 @@ function FetchDetailsModal(props: Props) {
       <h5 className="mb-2 text-2xl">Network Request</h5>
       <FetchBasicDetails resource={resource} timestamp={props.time ? DateTime.fromMillis(props.time).setZone(timezone.value).toFormat(`hh:mm:ss a`) : undefined} />
 
-      {isXHR && !fetchPresented && <FetchPluginMessage />}
       {isXHR && <FetchTabs resource={resource} />}
 
       {rows && rows.length > 0 && (
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/FetchPluginMessage.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/FetchPluginMessage.tsx
deleted file mode 100644
index 8699b8cb6..000000000
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/FetchPluginMessage.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Icon } from 'UI';
-
-function FetchPluginMessage() {
-  return (
-    <div className="bg-active-blue rounded p-3 mt-4">
-      <div className="mb-2 flex items-center">
-        <Icon name="lightbulb" size="18" />
-        <span className="ml-2 font-medium">Get more out of network requests</span>
-      </div>
-      <ul className="list-disc ml-5">
-        <li>
-          Integrate{' '}
-          <a href="https://docs.openreplay.com/plugins/fetch" className="link" target="_blank">
-            Fetch plugin
-          </a>{' '}
-          to capture fetch payloads.
-        </li>
-        <li>
-          Find a detailed{' '}
-          <a href="https://www.youtube.com/watch?v=YFCKstPZzZg" className="link" target="_blank">
-            video tutorial
-          </a>{' '}
-          to understand practical example of how to use fetch plugin.
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-export default FetchPluginMessage;
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/index.ts b/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/index.ts
deleted file mode 100644
index df224dbbf..000000000
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchPluginMessage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FetchPluginMessage';
diff --git a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx
index f9ed3a745..62b72a473 100644
--- a/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx
+++ b/frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx
@@ -101,7 +101,15 @@ function FetchTabs({ resource }: Props) {
             title={
               <div className="flex flex-col items-center justify-center">
                 <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-                <div className="mt-6 text-2xl">Body is Empty.</div>
+                <div className="mt-6 text-2xl">
+                  Body is Empty.
+                  {' '}
+                  <a href="https://docs.openreplay.com/installation/network-options" className="link" target="_blank">
+                    Configure
+                  </a>
+                  {' '}
+                  network capturing to get more out of fetch/XHR requests.
+                </div>
               </div>
             }
             size="small"