🪟 🎉 Allow environment specific sections in docs (airbytehq#18829)

* Allow environment specific sections in docs

* Change syntax to lower case

airbyte-webapp/src/components/common/DocumentationPanel/DocumentationPanel.test.ts

@@ -0,0 +1,40 @@
+import { prepareMarkdown } from "./DocumentationPanel";
+
+const testMarkdown = `## Some documentation
+
+<!-- env:cloud -->
+### Only relevant for Cloud
+
+some specific documentation that only applies for cloud.
+<!-- /env:cloud -->
+
+<!-- env:oss -->
+### Only relevant for OSS users
+
+some specific documentation that only applies for OSS users
+<!-- /env:oss -->`;
+
+describe("prepareMarkdown", () => {
+  it("should prepare markdown for cloud", () => {
+    expect(prepareMarkdown(testMarkdown, "cloud")).toBe(`## Some documentation
+
+<!-- env:cloud -->
+### Only relevant for Cloud
+
+some specific documentation that only applies for cloud.
+<!-- /env:cloud -->
+
+`);
+  });
+  it("should prepare markdown for oss", () => {
+    expect(prepareMarkdown(testMarkdown, "oss")).toBe(`## Some documentation
+
+
+
+<!-- env:oss -->
+### Only relevant for OSS users
+
+some specific documentation that only applies for OSS users
+<!-- /env:oss -->`);
+  });
+});

airbyte-webapp/src/components/common/DocumentationPanel/DocumentationPanel.tsx

@@ -14,11 +14,19 @@ import { PageHeader } from "components/ui/PageHeader";
 
 import { useConfig } from "config";
 import { useDocumentation } from "hooks/services/useDocumentation";
+import { isCloudApp } from "utils/app";
 import { links } from "utils/links";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 
 import styles from "./DocumentationPanel.module.scss";
 
+const OSS_ENV_MARKERS = /<!-- env:oss -->([\s\S]*?)<!-- \/env:oss -->/gm;
+const CLOUD_ENV_MARKERS = /<!-- env:cloud -->([\s\S]*?)<!-- \/env:cloud -->/gm;
+
+export const prepareMarkdown = (markdown: string, env: "oss" | "cloud"): string => {
+  return env === "oss" ? markdown.replaceAll(CLOUD_ENV_MARKERS, "") : markdown.replaceAll(OSS_ENV_MARKERS, "");
+};
+
 export const DocumentationPanel: React.FC = () => {
   const { formatMessage } = useIntl();
   const config = useConfig();
@@ -57,7 +65,11 @@ export const DocumentationPanel: React.FC = () => {
       <PageHeader withLine title={<FormattedMessage id="connector.setupGuide" />} />
       <Markdown
         className={styles.content}
-        content={docs && !error ? docs : formatMessage({ id: "connector.setupGuide.notFound" })}
+        content={
+          docs && !error
+            ? prepareMarkdown(docs, isCloudApp() ? "cloud" : "oss")
+            : formatMessage({ id: "connector.setupGuide.notFound" })
+        }
         rehypePlugins={urlReplacerPlugin}
       />
     </div>

docs/integrations/sources/facebook-marketing.md

@@ -11,10 +11,13 @@ This page guides you through the process of setting up the Facebook Marketing so
 ## Prerequisites
 
 * A [Facebook Ad Account ID](https://www.facebook.com/business/help/1492627900875762)
+<!-- env:oss -->
 * (For Open Source) A [Facebook App](https://developers.facebook.com/apps/) with the Marketing API enabled
+<!-- /env:oss -->
 
 ## Set up Facebook Marketing as a source in Airbyte 
 
+<!-- env:cloud -->
 ### For Airbyte Cloud
 
 To set up Facebook Marketing as a source in Airbyte Cloud:
@@ -60,7 +63,9 @@ To set up Facebook Marketing as a source in Airbyte Cloud:
 12. For **Page Size of Requests**, fill in the size of the page in case pagintion kicks in. Feel free to ignore it, the default value should work in most cases.
 13. For **Insights Lookback Window**, fill in the appropriate value. See [more](#facebook-marketing-attribution-reporting) on this parameter.
 14. Click **Set up source**.
+<!-- /env:cloud -->
 
+<!-- env:oss -->
 ### For Airbyte Open Source
 
 To set up Facebook Marketing as a source in Airbyte Open Source:
@@ -76,6 +81,7 @@ To set up Facebook Marketing as a source in Airbyte Open Source:
 
     See the Facebook [documentation on Authorization](https://developers.facebook.com/docs/marketing-api/overview/authorization/#access-levels) to request Advanced Access to the relevant permissions.
 5. Navigate to the Airbyte Open Source Dashboard. Add the access token when prompted to do so and follow the same instructions as for [setting up the Facebook Connector on Airbyte Cloud](#for-airbyte-cloud).
+<!-- /env:oss -->
 
 ## Supported sync modes