Handle negative credit in UI (#10814)

* Handle create connection feature

* Handle sync feature

* Add create and sync connection features to service

* Add unit tests

* Add allowSync property to deps

Co-authored-by: Artem Astapenko <[email protected]>

Author: juliachvyrova

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

@@ -6,6 +6,7 @@ import { Button, DropDownRow, H3, H5 } from "components";
 import { Popout } from "components/base/Popout/Popout";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
 import { ReleaseStage } from "core/domain/connector";
+import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 
 type IProps = {
   type: "source" | "destination";
@@ -53,6 +54,8 @@ const TableItemTitle: React.FC<IProps> = ({
   entityIcon,
   releaseStage,
 }) => {
+  const { hasFeature } = useFeatureService();
+  const allowCreateConnection = hasFeature(FeatureItem.AllowCreateConnection);
   const formatMessage = useIntl().formatMessage;
   const options = [
     {
@@ -94,7 +97,7 @@ const TableItemTitle: React.FC<IProps> = ({
           }}
           onChange={onSelect}
           targetComponent={({ onOpen }) => (
-            <Button onClick={onOpen}>
+            <Button onClick={onOpen} disabled={!allowCreateConnection}>
               <FormattedMessage id={`tables.${type}Add`} />
             </Button>
           )}

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -15,6 +15,7 @@ import StatusCell from "./components/StatusCell";
 import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
 import { ITableDataItem, SortOrderEnum } from "./types";
 import useRouter from "hooks/useRouter";
+import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 
 const Content = styled.div`
   margin: 0 32px 0 27px;
@@ -36,6 +37,8 @@ const ConnectionTable: React.FC<IProps> = ({
   onSync,
 }) => {
   const { query, push } = useRouter();
+  const { hasFeature } = useFeatureService();
+  const allowSync = hasFeature(FeatureItem.AllowSync);
 
   const sortBy = query.sortBy || "entity";
   const sortOrder = query.order || SortOrderEnum.ASC;
@@ -165,6 +168,7 @@ const ConnectionTable: React.FC<IProps> = ({
             isManual={!row.original.schedule}
             onChangeStatus={onChangeStatus}
             onSync={onSync}
+            allowSync={allowSync}
           />
         ),
       },
@@ -177,7 +181,7 @@ const ConnectionTable: React.FC<IProps> = ({
         ),
       },
     ],
-    [entity, onChangeStatus, onSync, onSortClick, sortBy, sortOrder]
+    [allowSync, entity, onChangeStatus, onSync, onSortClick, sortBy, sortOrder]
   );
 
   return (

airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx

@@ -6,6 +6,7 @@ import { useAsyncFn } from "react-use";
 import { LoadingButton, Toggle } from "components";
 
 type IProps = {
+  allowSync?: boolean;
   enabled?: boolean;
   isSyncing?: boolean;
   isManual?: boolean;
@@ -29,6 +30,7 @@ const StatusCell: React.FC<IProps> = ({
   onChangeStatus,
   isSyncing,
   onSync,
+  allowSync,
 }) => {
   const [{ loading }, OnLaunch] = useAsyncFn(
     async (event: React.SyntheticEvent) => {
@@ -44,7 +46,13 @@ const StatusCell: React.FC<IProps> = ({
   };
 
   if (!isManual) {
-    return <Toggle checked={enabled} onChange={OnToggleClick} />;
+    return (
+      <Toggle
+        checked={enabled}
+        onChange={OnToggleClick}
+        disabled={!allowSync}
+      />
+    );
   }
 
   if (isSyncing) {
@@ -56,7 +64,7 @@ const StatusCell: React.FC<IProps> = ({
   }
 
   return (
-    <SmallButton onClick={OnLaunch} isLoading={loading}>
+    <SmallButton onClick={OnLaunch} isLoading={loading} disabled={!allowSync}>
       <FormattedMessage id="tables.launch" />
     </SmallButton>
   );

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -6,7 +6,7 @@ import { LoadingPage } from "components";
 import { Config, ValueProvider } from "./types";
 import { applyProviders } from "./configProviders";
 
-type ConfigContext<T extends Config = Config> = {
+export type ConfigContext<T extends Config = Config> = {
   config: T;
 };
 

airbyte-webapp/src/config/defaultConfig.ts

@@ -13,6 +13,12 @@ const features: Feature[] = [
   {
     id: FeatureItem.AllowUpdateConnectors,
   },
+  {
+    id: FeatureItem.AllowCreateConnection,
+  },
+  {
+    id: FeatureItem.AllowSync,
+  },
 ];
 
 const defaultConfig: Config = {

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { act, renderHook } from "@testing-library/react-hooks";
+import {
+  FeatureService,
+  useFeatureRegisterValues,
+  useFeatureService,
+} from "./FeatureService";
+import { FeatureItem } from "./types";
+import { TestWrapper } from "utils/testutils";
+import { ConfigContext, configContext } from "config";
+
+const predefinedFeatures = [
+  {
+    id: FeatureItem.AllowCustomDBT,
+  },
+];
+
+const wrapper: React.FC = ({ children }) => (
+  <TestWrapper>
+    <configContext.Provider
+      value={
+        ({
+          config: { features: predefinedFeatures },
+        } as unknown) as ConfigContext
+      }
+    >
+      <FeatureService>{children}</FeatureService>
+    </configContext.Provider>
+  </TestWrapper>
+);
+
+describe("FeatureService", () => {
+  test("should register and unregister features", async () => {
+    const { result } = renderHook(() => useFeatureService(), {
+      wrapper,
+    });
+
+    expect(result.current.features).toEqual(predefinedFeatures);
+
+    act(() => {
+      result.current.registerFeature([
+        {
+          id: FeatureItem.AllowCreateConnection,
+        },
+      ]);
+    });
+
+    expect(result.current.features).toEqual([
+      ...predefinedFeatures,
+      {
+        id: FeatureItem.AllowCreateConnection,
+      },
+    ]);
+
+    act(() => {
+      result.current.unregisterFeature([FeatureItem.AllowCreateConnection]);
+    });
+
+    expect(result.current.features).toEqual(predefinedFeatures);
+  });
+});
+
+describe("useFeatureRegisterValues", () => {
+  test("should register more than 1 feature", async () => {
+    const { result } = renderHook(
+      () => {
+        useFeatureRegisterValues([{ id: FeatureItem.AllowCreateConnection }]);
+        useFeatureRegisterValues([{ id: FeatureItem.AllowSync }]);
+
+        return useFeatureService();
+      },
+      {
+        initialProps: { initialValue: 0 },
+        wrapper,
+      }
+    );
+
+    expect(result.current.features).toEqual([
+      ...predefinedFeatures,
+      { id: FeatureItem.AllowCreateConnection },
+      { id: FeatureItem.AllowSync },
+    ]);
+
+    act(() => {
+      result.current.unregisterFeature([FeatureItem.AllowCreateConnection]);
+    });
+
+    expect(result.current.features).toEqual([
+      ...predefinedFeatures,
+      { id: FeatureItem.AllowSync },
+    ]);
+  });
+});

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

@@ -1,25 +1,43 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { Feature, FeatureItem, FeatureServiceApi } from "./types";
 import { useConfig } from "config";
+import { useDeepCompareEffect } from "react-use";
 
 const featureServiceContext = React.createContext<FeatureServiceApi | null>(
   null
 );
 
-export function FeatureService({
-  children,
-}: {
-  children: React.ReactNode;
-  features?: Feature[];
-}) {
-  const { features } = useConfig();
+export function FeatureService({ children }: { children: React.ReactNode }) {
+  const [additionFeatures, setAdditionFeatures] = useState<Feature[]>([]);
+  const { features: instanceWideFeatures } = useConfig();
+
+  const featureMethods = useMemo(() => {
+    return {
+      registerFeature: (newFeatures: Feature[]): void =>
+        setAdditionFeatures((oldFeatures) => [...oldFeatures, ...newFeatures]),
+      unregisterFeature: (unregisteredFeatures: FeatureItem[]): void => {
+        setAdditionFeatures((oldFeatures) =>
+          oldFeatures.filter(
+            (feature) => !unregisteredFeatures.includes(feature.id)
+          )
+        );
+      },
+    };
+  }, []);
+
+  const features = useMemo(
+    () => [...instanceWideFeatures, ...additionFeatures],
+    [instanceWideFeatures, additionFeatures]
+  );
+
   const featureService = useMemo(
     () => ({
       features,
       hasFeature: (featureId: FeatureItem): boolean =>
         !!features.find((feature) => feature.id === featureId),
+      ...featureMethods,
     }),
-    [features]
+    [features, featureMethods]
   );
 
   return (
@@ -44,3 +62,19 @@ export const WithFeature: React.FC<{ featureId: FeatureItem }> = ({
   const { hasFeature } = useFeatureService();
   return hasFeature(featureId) ? <>{children}</> : null;
 };
+
+export const useFeatureRegisterValues = (props?: Feature[] | null): void => {
+  const { registerFeature, unregisterFeature } = useFeatureService();
+
+  useDeepCompareEffect(() => {
+    if (props) {
+      registerFeature(props);
+
+      return () =>
+        unregisterFeature(props.map((feature: Feature) => feature.id));
+    }
+
+    return;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props]);
+};

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

@@ -3,6 +3,8 @@ export enum FeatureItem {
   AllowCustomDBT = "ALLOW_CUSTOM_DBT",
   AllowUpdateConnectors = "ALLOW_UPDATE_CONNECTORS",
   AllowOAuthConnector = "ALLOW_OAUTH_CONNECTOR",
+  AllowCreateConnection = "ALLOW_CREATE_CONNECTION",
+  AllowSync = "ALLOW_SYNC",
 }
 
 type Feature = {
@@ -11,6 +13,8 @@ type Feature = {
 
 type FeatureServiceApi = {
   features: Feature[];
+  registerFeature: (props: Feature[]) => void;
+  unregisterFeature: (props: FeatureItem[]) => void;
   hasFeature: (featureId: FeatureItem) => boolean;
 };
 

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

@@ -36,6 +36,9 @@ import { storeUtmFromQuery } from "utils/utmStorage";
 import { DefaultView } from "./views/DefaultView";
 import { hasFromState } from "utils/stateUtils";
 import { RoutePaths } from "../../pages/routePaths";
+import { FeatureItem, useFeatureRegisterValues } from "hooks/services/Feature";
+import { useGetCloudWorkspace } from "./services/workspaces/WorkspacesService";
+import { CreditStatus } from "./lib/domain/cloudWorkspaces/types";
 
 export const CloudRoutes = {
   Root: "/",
@@ -60,6 +63,7 @@ export const CloudRoutes = {
 
 const MainRoutes: React.FC = () => {
   const workspace = useCurrentWorkspace();
+  const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
 
   const analyticsContext = useMemo(
     () => ({
@@ -74,6 +78,21 @@ const MainRoutes: React.FC = () => {
     ? RoutePaths.Onboarding
     : RoutePaths.Connections;
 
+  const features = useMemo(
+    () =>
+      cloudWorkspace.creditStatus !==
+        CreditStatus.NEGATIVE_BEYOND_GRACE_PERIOD &&
+      cloudWorkspace.creditStatus !== CreditStatus.NEGATIVE_MAX_THRESHOLD
+        ? [
+            { id: FeatureItem.AllowCreateConnection },
+            { id: FeatureItem.AllowSync },
+          ]
+        : null,
+    [cloudWorkspace]
+  );
+
+  useFeatureRegisterValues(features);
+
   return (
     <Routes>
       <Route

airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx

@@ -9,6 +9,7 @@ import useRouter from "hooks/useRouter";
 import HeadTitle from "components/HeadTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import useWorkspace from "hooks/services/useWorkspace";
+import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 import { RoutePaths } from "../../../routePaths";
 
 const AllConnectionsPage: React.FC = () => {
@@ -18,6 +19,8 @@ const AllConnectionsPage: React.FC = () => {
   const { connections } = useResource(ConnectionResource.listShape(), {
     workspaceId: workspace.workspaceId,
   });
+  const { hasFeature } = useFeatureService();
+  const allowCreateConnection = hasFeature(FeatureItem.AllowCreateConnection);
 
   const onClick = () => push(`${RoutePaths.ConnectionNew}`);
 
@@ -28,7 +31,7 @@ const AllConnectionsPage: React.FC = () => {
         <PageTitle
           title={<FormattedMessage id="sidebar.connections" />}
           endComponent={
-            <Button onClick={onClick}>
+            <Button onClick={onClick} disabled={!allowCreateConnection}>
               <FormattedMessage id="connection.newConnection" />
             </Button>
           }