From 866fb52cb88a5c4a095a94a9efe37339390f3b97 Mon Sep 17 00:00:00 2001
From: Teal Larson <LARSON.TEAL@GMAIL.COM>
Date: Fri, 10 Jun 2022 14:51:47 -0400
Subject: [PATCH] Render Google Ads docs for users with Adblockers (#13681)

---
 airbyte-webapp/build.gradle                      |  2 ++
 airbyte-webapp/src/setupProxy.js                 |  5 +++++
 .../DocumentationPanelContext.tsx                | 16 ++++++++++++++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp/build.gradle b/airbyte-webapp/build.gradle
index 74acb459db9370..8d838994841fff 100644
--- a/airbyte-webapp/build.gradle
+++ b/airbyte-webapp/build.gradle
@@ -66,6 +66,8 @@ task copyDocs(type: Copy) {
 
     from "${project.rootProject.projectDir}/docs/integrations"
     into "build/docker/bin/docs/integrations"
+    //google-ads.md is blocked by Ad Blockers
+    rename ('google-ads.md', 'gglad.md')
     duplicatesStrategy DuplicatesStrategy.INCLUDE
 }
 
diff --git a/airbyte-webapp/src/setupProxy.js b/airbyte-webapp/src/setupProxy.js
index 05f7280fac4023..64be0ecc19689f 100644
--- a/airbyte-webapp/src/setupProxy.js
+++ b/airbyte-webapp/src/setupProxy.js
@@ -15,5 +15,10 @@ module.exports = (app) => {
   });
   // Serve the doc markdowns and assets that are also bundled into the docker image
   app.use("/docs/integrations", express.static(`${__dirname}/../../docs/integrations`));
+  //workaround for adblockers to serve google ads docs in development
+  app.use(
+    "/docs/integrations/sources/gglad.md",
+    express.static(`${__dirname}/../../docs/integrations/sources/google-ads.md`)
+  );
   app.use("/docs/.gitbook", express.static(`${__dirname}/../../docs/.gitbook`));
 };
diff --git a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
index f26872b1b0d728..489b3c9af06d7e 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx
@@ -1,11 +1,23 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 
 // @ts-expect-error Default value provided at implementation
 const DocumentationPanelContext = createContext<ReturnType<typeof useDocumentationPanelState>>();
 
 export const useDocumentationPanelState = () => {
   const [documentationPanelOpen, setDocumentationPanelOpen] = useState(false);
-  const [documentationUrl, setDocumentationUrl] = useState("");
+  const [documentationUrl, setDocumentationUrlState] = useState("");
+
+  /* Ad blockers prevent the Google Ads docs .md file from rendering.  Because these URLs are
+   * standardized, we work around this without changing the main file URL by:
+   *   1. Changing the name of the .md in the Gradle build
+   *       a. the docs we render aren't actually fetching from our website, they're compiled with our build
+   *       b. when running on localhost, we fetch them with our proxy, so there is an additional piece in setupProxy.js for that case
+   *   2. Changing the URL here to match the renamed .md file
+   */
+
+  const setDocumentationUrl = useCallback((url: string) => {
+    setDocumentationUrlState(url.replace("google-ads", "gglad"));
+  }, []);
 
   return {
     documentationPanelOpen,