🪟 🐛 Fix additional buttons for connection creation (#18372)

* make button enabled regardless credit balance

* remove FeatureItem.AllowCreateConnection at all, since we don't need it anymore

* update tests

* Replace "AllowCreateConnection" feature flag with "AllowDBTCloudIntegration" in tests

airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx

@@ -8,7 +8,6 @@ import { Popout } from "components/ui/Popout";
 import { Text } from "components/ui/Text";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
-import { FeatureItem, useFeature } from "hooks/services/Feature";
 
 import styles from "./TableItemTitle.module.scss";
 
@@ -31,7 +30,6 @@ const TableItemTitle: React.FC<TableItemTitleProps> = ({
   entityIcon,
   releaseStage,
 }) => {
-  const allowCreateConnection = useFeature(FeatureItem.AllowCreateConnection);
   const { formatMessage } = useIntl();
   const options = [
     {
@@ -76,7 +74,7 @@ const TableItemTitle: React.FC<TableItemTitleProps> = ({
           menuShouldBlockScroll={false}
           onChange={onSelect}
           targetComponent={({ onOpen }) => (
-            <Button onClick={onOpen} disabled={!allowCreateConnection}>
+            <Button onClick={onOpen}>
               <FormattedMessage id={`tables.${type}Add`} />
             </Button>
           )}

airbyte-webapp/src/hooks/services/Feature/FeatureService.test.tsx

@@ -1,12 +1,12 @@
 import { render } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
 import { FeatureService, IfFeatureEnabled, useFeature, useFeatureService } from "./FeatureService";
 import { FeatureItem, FeatureSet } from "./types";
 
 const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
-  <FeatureService features={[FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]}>{children}</FeatureService>
+  <FeatureService features={[FeatureItem.AllowDBTCloudIntegration, FeatureItem.AllowSync]}>{children}</FeatureService>
 );
 
 type FeatureOverwrite = FeatureItem[] | FeatureSet | undefined;
@@ -44,7 +44,7 @@ describe("Feature Service", () => {
   describe("FeatureService", () => {
     it("should allow setting default features", () => {
       const getFeature = (feature: FeatureItem) => renderHook(() => useFeature(feature), { wrapper }).result.current;
-      expect(getFeature(FeatureItem.AllowCreateConnection)).toBe(true);
+      expect(getFeature(FeatureItem.AllowDBTCloudIntegration)).toBe(true);
       expect(getFeature(FeatureItem.AllowCustomDBT)).toBe(false);
       expect(getFeature(FeatureItem.AllowSync)).toBe(true);
       expect(getFeature(FeatureItem.AllowUpdateConnectors)).toBe(false);
@@ -56,8 +56,8 @@ describe("Feature Service", () => {
           workspace: [FeatureItem.AllowCustomDBT, FeatureItem.AllowUploadCustomImage],
         }).result.current.sort()
       ).toEqual([
-        FeatureItem.AllowCreateConnection,
         FeatureItem.AllowCustomDBT,
+        FeatureItem.AllowDBTCloudIntegration,
         FeatureItem.AllowSync,
         FeatureItem.AllowUploadCustomImage,
       ]);
@@ -66,7 +66,10 @@ describe("Feature Service", () => {
     it("workspace features can disable default features", () => {
       expect(
         getFeatures({
-          workspace: { [FeatureItem.AllowCustomDBT]: true, [FeatureItem.AllowCreateConnection]: false } as FeatureSet,
+          workspace: {
+            [FeatureItem.AllowCustomDBT]: true,
+            [FeatureItem.AllowDBTCloudIntegration]: false,
+          } as FeatureSet,
         }).result.current.sort()
       ).toEqual([FeatureItem.AllowCustomDBT, FeatureItem.AllowSync]);
     });
@@ -78,8 +81,8 @@ describe("Feature Service", () => {
           user: [FeatureItem.AllowOAuthConnector],
         }).result.current.sort()
       ).toEqual([
-        FeatureItem.AllowCreateConnection,
         FeatureItem.AllowCustomDBT,
+        FeatureItem.AllowDBTCloudIntegration,
         FeatureItem.AllowOAuthConnector,
         FeatureItem.AllowSync,
         FeatureItem.AllowUploadCustomImage,
@@ -93,7 +96,7 @@ describe("Feature Service", () => {
           user: {
             [FeatureItem.AllowOAuthConnector]: true,
             [FeatureItem.AllowUploadCustomImage]: false,
-            [FeatureItem.AllowCreateConnection]: false,
+            [FeatureItem.AllowDBTCloudIntegration]: false,
           } as FeatureSet,
         }).result.current.sort()
       ).toEqual([FeatureItem.AllowCustomDBT, FeatureItem.AllowOAuthConnector, FeatureItem.AllowSync]);
@@ -106,27 +109,27 @@ describe("Feature Service", () => {
           user: [FeatureItem.AllowOAuthConnector, FeatureItem.AllowSync],
         }).result.current.sort()
       ).toEqual([
-        FeatureItem.AllowCreateConnection,
         FeatureItem.AllowCustomDBT,
+        FeatureItem.AllowDBTCloudIntegration,
         FeatureItem.AllowOAuthConnector,
         FeatureItem.AllowSync,
       ]);
     });
 
-    it("overwritte features can overwrite workspace and user features", () => {
+    it("overwrite features can overwrite workspace and user features", () => {
       expect(
         getFeatures({
           workspace: { [FeatureItem.AllowCustomDBT]: true, [FeatureItem.AllowSync]: false } as FeatureSet,
           user: {
             [FeatureItem.AllowOAuthConnector]: true,
             [FeatureItem.AllowSync]: true,
-            [FeatureItem.AllowCreateConnection]: false,
+            [FeatureItem.AllowDBTCloudIntegration]: false,
           } as FeatureSet,
-          overwrite: [FeatureItem.AllowUploadCustomImage, FeatureItem.AllowCreateConnection],
+          overwrite: [FeatureItem.AllowUploadCustomImage, FeatureItem.AllowDBTCloudIntegration],
         }).result.current.sort()
       ).toEqual([
-        FeatureItem.AllowCreateConnection,
         FeatureItem.AllowCustomDBT,
+        FeatureItem.AllowDBTCloudIntegration,
         FeatureItem.AllowOAuthConnector,
         FeatureItem.AllowSync,
         FeatureItem.AllowUploadCustomImage,
@@ -137,34 +140,34 @@ describe("Feature Service", () => {
       const { result, rerender } = getFeatures({
         workspace: { [FeatureItem.AllowCustomDBT]: true, [FeatureItem.AllowSync]: false } as FeatureSet,
       });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowCustomDBT]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowCustomDBT, FeatureItem.AllowDBTCloudIntegration]);
       rerender({ workspace: undefined });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowDBTCloudIntegration, FeatureItem.AllowSync]);
     });
 
     it("user features can be cleared again", () => {
       const { result, rerender } = getFeatures({
         user: { [FeatureItem.AllowCustomDBT]: true, [FeatureItem.AllowSync]: false } as FeatureSet,
       });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowCustomDBT]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowCustomDBT, FeatureItem.AllowDBTCloudIntegration]);
       rerender({ user: undefined });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowDBTCloudIntegration, FeatureItem.AllowSync]);
     });
 
     it("overwritten features can be cleared again", () => {
       const { result, rerender } = getFeatures({
         overwrite: { [FeatureItem.AllowCustomDBT]: true, [FeatureItem.AllowSync]: false } as FeatureSet,
       });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowCustomDBT]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowCustomDBT, FeatureItem.AllowDBTCloudIntegration]);
       rerender({ overwrite: undefined });
-      expect(result.current.sort()).toEqual([FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]);
+      expect(result.current.sort()).toEqual([FeatureItem.AllowDBTCloudIntegration, FeatureItem.AllowSync]);
     });
   });
 
   describe("IfFeatureEnabled", () => {
     it("renders its children if the given feature is enabled", () => {
       const { getByTestId } = render(
-        <IfFeatureEnabled feature={FeatureItem.AllowCreateConnection}>
+        <IfFeatureEnabled feature={FeatureItem.AllowDBTCloudIntegration}>
           <span data-testid="content" />
         </IfFeatureEnabled>,
         { wrapper }
@@ -184,7 +187,7 @@ describe("Feature Service", () => {
 
     it("allows changing features and rerenders correctly", () => {
       const { queryByTestId, rerender } = render(
-        <FeatureService features={[FeatureItem.AllowCreateConnection]}>
+        <FeatureService features={[FeatureItem.AllowDBTCloudIntegration]}>
           <IfFeatureEnabled feature={FeatureItem.AllowOAuthConnector}>
             <span data-testid="content" />
           </IfFeatureEnabled>

airbyte-webapp/src/hooks/services/Feature/constants.ts

@@ -2,7 +2,6 @@ import { FeatureItem } from "./types";
 
 /** The default feature set that OSS releases should use. */
 export const defaultFeatures = [
-  FeatureItem.AllowCreateConnection,
   FeatureItem.AllowCustomDBT,
   FeatureItem.AllowSync,
   FeatureItem.AllowUpdateConnectors,

airbyte-webapp/src/hooks/services/Feature/types.tsx

@@ -4,7 +4,6 @@ export enum FeatureItem {
   AllowDBTCloudIntegration = "ALLOW_DBT_CLOUD_INTEGRATION",
   AllowUpdateConnectors = "ALLOW_UPDATE_CONNECTORS",
   AllowOAuthConnector = "ALLOW_OAUTH_CONNECTOR",
-  AllowCreateConnection = "ALLOW_CREATE_CONNECTION",
   AllowSync = "ALLOW_SYNC",
 }
 

airbyte-webapp/src/packages/cloud/App.tsx

@@ -41,9 +41,7 @@ const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
         <ConfirmationModalService>
           <ModalServiceProvider>
             <FormChangeTrackerService>
-              <FeatureService
-                features={[FeatureItem.AllowOAuthConnector, FeatureItem.AllowCreateConnection, FeatureItem.AllowSync]}
-              >
+              <FeatureService features={[FeatureItem.AllowOAuthConnector, FeatureItem.AllowSync]}>
                 <AppServicesProvider>
                   <AuthenticationProvider>
                     <HelmetProvider>

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -67,9 +67,7 @@ const MainRoutes: React.FC = () => {
       cloudWorkspace.creditStatus === CreditStatus.NEGATIVE_MAX_THRESHOLD;
     // If the workspace is out of credits it doesn't allow creation of new connections
     // or syncing existing connections.
-    setWorkspaceFeatures(
-      outOfCredits ? ({ [FeatureItem.AllowCreateConnection]: false, [FeatureItem.AllowSync]: false } as FeatureSet) : []
-    );
+    setWorkspaceFeatures(outOfCredits ? ({ [FeatureItem.AllowSync]: false } as FeatureSet) : []);
     return () => {
       setWorkspaceFeatures(undefined);
     };