Render Google Ads docs for users with Adblockers (#13681)

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
 }
 

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`));
 };

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,