From ed56cda43f3861da05b27e4f2b99a38b2594f958 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 10 Jun 2022 09:58:13 -0400 Subject: [PATCH 1/2] add setup proxy, use a callback in context to prevent endless loop --- airbyte-webapp/src/setupProxy.js | 5 +++++ .../DocumentationPanelContext.tsx | 16 ++++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/setupProxy.js b/airbyte-webapp/src/setupProxy.js index 05f7280fac402..50164acbe6195 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/ggl.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 f26872b1b0d72..f2b94273ba15e 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>(); 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", "ggl")); + }, []); return { documentationPanelOpen, From 7978d9bdd06af99883d0ba6e1bd05eeb6a853e5c Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 10 Jun 2022 10:05:48 -0400 Subject: [PATCH 2/2] change to gradle build, rename ggl to gglad --- airbyte-webapp/build.gradle | 2 ++ airbyte-webapp/src/setupProxy.js | 2 +- .../ConnectorDocumentationLayout/DocumentationPanelContext.tsx | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/build.gradle b/airbyte-webapp/build.gradle index 8aa67c7c3c340..e73003cbb3bb1 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 50164acbe6195..64be0ecc19689 100644 --- a/airbyte-webapp/src/setupProxy.js +++ b/airbyte-webapp/src/setupProxy.js @@ -17,7 +17,7 @@ module.exports = (app) => { app.use("/docs/integrations", express.static(`${__dirname}/../../docs/integrations`)); //workaround for adblockers to serve google ads docs in development app.use( - "/docs/integrations/sources/ggl.md", + "/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 f2b94273ba15e..489b3c9af06d7 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext.tsx @@ -16,7 +16,7 @@ export const useDocumentationPanelState = () => { */ const setDocumentationUrl = useCallback((url: string) => { - setDocumentationUrlState(url.replace("google-ads", "ggl")); + setDocumentationUrlState(url.replace("google-ads", "gglad")); }, []); return {