Filter out unavailable connectors in cloud connector settings, enable Snapchat in cloud (#13174)

* Filter out unavailable connectors in cloud connector settings
* Move list of excluded connectors to connector constants
* Add hook to filter out available connectors
* Update settings connectorview component to filter out connectors
* Add isCloudApp utility to check if the app is in cloud mode correctly

* Remove Snapchat from filtered out list

* Replace cloud check in index with util

* Restore info about excluded connectors

Author: edmundito

airbyte-webapp/src/core/domain/connector/constants.ts

@@ -1 +1,26 @@
+import { isCloudApp } from "utils/app";
+
 export const DEV_IMAGE_TAG = "dev";
+
+/**
+ * Returns the list of excluded connections for cloud users.
+ * 
+ * During the Cloud private beta, we let users pick any connector in our catalog.
+ * Later on, we realized we shouldn't have allowed using connectors whose platforms required oauth
+ * But by that point, some users were already leveraging them, so removing them would crash the app for users
+ * instead we'll filter out those connectors from this drop down menu, and retain them in the backend
+ * This way, they will not be available for usage in new connections, but they will be available for users
+ * already leveraging them.
+
+ * @param {string} workspaceId The workspace Id
+ * @returns {array} List of connectorIds that should be filtered out
+ */
+export const getExcludedConnectorIds = (workspaceId: string) =>
+  isCloudApp()
+    ? [
+        "2470e835-feaf-4db6-96f3-70fd645acc77", // Salesforce Singer
+        ...(workspaceId !== "54135667-ce73-4820-a93c-29fe1510d348" // Shopify workspace for review
+          ? ["9da77001-af33-4bcd-be46-6252bf9342b9"] // Shopify
+          : []),
+      ]
+    : [];

airbyte-webapp/src/hooks/domain/connector/useAvailableConnectorDefinitions.ts

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+
+import { Connector, ConnectorDefinition } from "core/domain/connector";
+import { getExcludedConnectorIds } from "core/domain/connector/constants";
+import { WorkspaceRead } from "core/request/AirbyteClient";
+
+export const useAvailableConnectorDefinitions = (
+  connectionDefinitions: ConnectorDefinition[],
+  workspace: WorkspaceRead
+) =>
+  useMemo(() => {
+    const excludedConnectorIds = getExcludedConnectorIds(workspace.workspaceId);
+    return connectionDefinitions.filter(
+      (connectorDefinition) => !excludedConnectorIds.includes(Connector.id(connectorDefinition))
+    );
+  }, [connectionDefinitions, workspace.workspaceId]);

airbyte-webapp/src/index.tsx

@@ -2,7 +2,9 @@ import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { lazy, Suspense } from "react";
 import ReactDOM from "react-dom";
+
 import "react-reflex/styles.css";
+import { isCloudApp } from "utils/app";
 
 import "./globals";
 
@@ -18,8 +20,6 @@ const CloudApp = lazy(() => import(`packages/cloud/App`));
 const App = lazy(() => import(`./App`));
 
 ReactDOM.render(
-  <Suspense fallback={null}>
-    {process.env.REACT_APP_CLOUD || window.CLOUD === "true" ? <CloudApp /> : <App />}
-  </Suspense>,
+  <Suspense fallback={null}>{isCloudApp() ? <CloudApp /> : <App />}</Suspense>,
   document.getElementById("root")
 );

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

@@ -7,7 +7,9 @@ import Table from "components/Table";
 
 import { Connector, ConnectorDefinition } from "core/domain/connector";
 import { DestinationDefinitionRead, SourceDefinitionRead } from "core/request/AirbyteClient";
+import { useAvailableConnectorDefinitions } from "hooks/domain/connector/useAvailableConnectorDefinitions";
 import { FeatureItem, useFeatureService, WithFeature } from "hooks/services/Feature";
+import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 
 import ConnectorCell from "./ConnectorCell";
 import CreateConnector from "./CreateConnector";
@@ -45,6 +47,8 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
 }) => {
   const { hasFeature } = useFeatureService();
   const allowUpdateConnectors = hasFeature(FeatureItem.AllowUpdateConnectors);
+  const workspace = useCurrentWorkspace();
+  const availableConnectorDefinitions = useAvailableConnectorDefinitions(connectorsDefinitions, workspace);
 
   const columns = React.useMemo(
     () => [
@@ -139,7 +143,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
           <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
           {renderHeaderControls("available")}
         </Title>
-        <Table columns={columns} data={connectorsDefinitions} sortBy={defaultSorting} />
+        <Table columns={columns} data={availableConnectorDefinitions} sortBy={defaultSorting} />
       </Block>
     </>
   );

airbyte-webapp/src/utils/app.ts

@@ -0,0 +1 @@
+export const isCloudApp = () => process.env.REACT_APP_CLOUD || window.CLOUD === "true";

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx

@@ -18,6 +18,7 @@ import { GAIcon } from "components/icons/GAIcon";
 import { Connector, ConnectorDefinition } from "core/domain/connector";
 import { FormBaseItem } from "core/form/types";
 import { ReleaseStage } from "core/request/AirbyteClient";
+import { useAvailableConnectorDefinitions } from "hooks/domain/connector/useAvailableConnectorDefinitions";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useExperiment } from "hooks/services/Experiment";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
@@ -172,31 +173,11 @@ const ConnectorServiceTypeControl: React.FC<{
   const orderOverwrite = useExperiment("connector.orderOverwrite", {});
   const [field, fieldMeta, { setValue }] = useField(property.path);
   const analytics = useAnalyticsService();
-
-  // TODO Begin hack
-  // During the Cloud private beta, we let users pick any connector in our catalog.
-  // Later on, we realized we shouldn't have allowed using connectors whose platforms required oauth
-  // But by that point, some users were already leveraging them, so removing them would crash the app for users
-  // instead we'll filter out those connectors from this drop down menu, and retain them in the backend
-  // This way, they will not be available for usage in new connections, but they will be available for users
-  // already leveraging them.
-  // TODO End hack
   const workspace = useCurrentWorkspace();
-  const disallowedOauthConnectors =
-    // I would prefer to use windowConfigProvider.cloud but that function is async
-    window.CLOUD === "true"
-      ? [
-          "200330b2-ea62-4d11-ac6d-cfe3e3f8ab2b", // Snapchat
-          "2470e835-feaf-4db6-96f3-70fd645acc77", // Salesforce Singer
-          ...(workspace.workspaceId !== "54135667-ce73-4820-a93c-29fe1510d348" // Shopify workspace for review
-            ? ["9da77001-af33-4bcd-be46-6252bf9342b9"] // Shopify
-            : []),
-        ]
-      : [];
+  const availableConnectorDefinitions = useAvailableConnectorDefinitions(availableServices, workspace);
   const sortedDropDownData = useMemo(
     () =>
-      availableServices
-        .filter((item) => !disallowedOauthConnectors.includes(Connector.id(item)))
+      availableConnectorDefinitions
         .map((item) => ({
           label: item.name,
           value: Connector.id(item),