feat: UpgradeButtonsHidden for cloudVersion (#6708)

* feat: UpgradeButtonsHidden for cloudVersion
airbytehq · Oct 6, 2021 · 81e2662 · 81e2662
1 parent acff636
commit 81e2662
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 44 deletions.
diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx
@@ -16,7 +16,7 @@ import {
   useCurrentWorkspace,
   usePickFirstWorkspace,
 } from "hooks/services/useWorkspace";
-import { Feature, FeatureService } from "hooks/services/Feature";
+import { Feature, FeatureItem, FeatureService } from "hooks/services/Feature";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
 import { ServicesProvider } from "core/servicesProvider";
 import { useApiServices } from "core/defaultServices";
@@ -36,10 +36,13 @@ function useCustomerIdProvider() {
 
 const Features: Feature[] = [
   {
-    id: "ALLOW_UPLOAD_CUSTOM_IMAGE",
+    id: FeatureItem.AllowUploadCustomImage,
   },
   {
-    id: "ALLOW_CUSTOM_DBT",
+    id: FeatureItem.AllowCustomDBT,
+  },
+  {
+    id: FeatureItem.AllowUpdateConnectors,
   },
 ];
 

diff --git a/airbyte-webapp/src/hooks/services/Feature/types.tsx b/airbyte-webapp/src/hooks/services/Feature/types.tsx
@@ -1,5 +1,12 @@
+export enum FeatureItem {
+  AllowUploadCustomImage = "ALLOW_UPLOAD_CUSTOM_IMAGE",
+  AllowCustomDBT = "ALLOW_CUSTOM_DBT",
+  AllowUpdateConnectors = "ALLOW_UPDATE_CONNECTORS",
+  AllowOAuthConnector = "ALLOW_OAUTH_CONNECTOR",
+}
+
 type Feature = {
-  id: string;
+  id: FeatureItem;
 };
 
 type FeatureServiceApi = {

diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx
@@ -15,7 +15,7 @@ import LoadingPage from "components/LoadingPage";
 import ApiErrorBoundary from "components/ApiErrorBoundary";
 import NotificationServiceProvider from "hooks/services/Notification";
 import { AnalyticsInitializer } from "views/common/AnalyticsInitializer";
-import { Feature, FeatureService } from "hooks/services/Feature";
+import { Feature, FeatureItem, FeatureService } from "hooks/services/Feature";
 import { AuthenticationProvider } from "packages/cloud/services/auth/AuthService";
 import { AppServicesProvider } from "./services/AppServicesProvider";
 
@@ -46,7 +46,7 @@ const StoreProvider: React.FC = ({ children }) => (
 
 const Features: Feature[] = [
   {
-    id: "ALLOW_OAUTH_CONNECTOR",
+    id: FeatureItem.AllowOAuthConnector,
   },
 ];
 

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -13,7 +13,11 @@ import CreateConnector from "./CreateConnector";
 import HeadTitle from "components/HeadTitle";
 import { DestinationDefinition } from "core/resources/DestinationDefinition";
 import { Connector, ConnectorDefinition } from "core/domain/connector";
-import { WithFeature } from "hooks/services/Feature";
+import {
+  FeatureItem,
+  useFeatureService,
+  WithFeature,
+} from "hooks/services/Feature";
 
 type ConnectorsViewProps = {
   type: "sources" | "destinations";
@@ -42,6 +46,8 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
   onUpdate,
   connectorsDefinitions,
 }) => {
+  const { hasFeature } = useFeatureService();
+
   const columns = React.useMemo(
     () => [
       {
@@ -72,24 +78,28 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
         accessor: "dockerImageTag",
         customWidth: 10,
       },
-      {
-        Header: (
-          <FormContentTitle>
-            <FormattedMessage id="admin.changeTo" />
-          </FormContentTitle>
-        ),
-        accessor: "latestDockerImageTag",
-        collapse: true,
-        Cell: ({ cell, row }: CellProps<ConnectorDefinition>) => (
-          <VersionCell
-            version={cell.value}
-            id={Connector.id(row.original)}
-            onChange={onUpdateVersion}
-            feedback={feedbackList[Connector.id(row.original)]}
-            currentVersion={row.original.dockerImageTag}
-          />
-        ),
-      },
+      ...(hasFeature(FeatureItem.AllowUpdateConnectors)
+        ? [
+            {
+              Header: (
+                <FormContentTitle>
+                  <FormattedMessage id="admin.changeTo" />
+                </FormContentTitle>
+              ),
+              accessor: "latestDockerImageTag",
+              collapse: true,
+              Cell: ({ cell, row }: CellProps<ConnectorDefinition>) => (
+                <VersionCell
+                  version={cell.value}
+                  id={Connector.id(row.original)}
+                  onChange={onUpdateVersion}
+                  feedback={feedbackList[Connector.id(row.original)]}
+                  currentVersion={row.original.dockerImageTag}
+                />
+              ),
+            },
+          ]
+        : []),
     ],
     [feedbackList, onUpdateVersion]
   );
@@ -98,17 +108,18 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
     ((section === "used" && usedConnectorsDefinitions.length > 0) ||
       (section === "available" && usedConnectorsDefinitions.length === 0)) && (
       <div>
-        <WithFeature featureId={"ALLOW_UPLOAD_CUSTOM_IMAGE"}>
+        <WithFeature featureId={FeatureItem.AllowUploadCustomImage}>
           <CreateConnector type={type} />
         </WithFeature>
-        {(hasNewConnectorVersion || isUpdateSuccess) && (
-          <UpgradeAllButton
-            isLoading={loading}
-            hasError={!!error && !loading}
-            hasSuccess={isUpdateSuccess}
-            onUpdate={onUpdate}
-          />
-        )}
+        {(hasNewConnectorVersion || isUpdateSuccess) &&
+          hasFeature(FeatureItem.AllowUpdateConnectors) && (
+            <UpgradeAllButton
+              isLoading={loading}
+              hasError={!!error && !loading}
+              hasSuccess={isUpdateSuccess}
+              onUpdate={onUpdate}
+            />
+          )}
       </div>
     );
 

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -29,7 +29,7 @@ import Connector from "./components/Connector";
 import SchemaField from "./components/SyncCatalogField";
 import EditControls from "./components/EditControls";
 import { Connection, ScheduleProperties } from "core/resources/Connection";
-import { useFeatureService } from "hooks/services/Feature";
+import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 
 const FormContainer = styled(Form)`
   padding: 22px 27px 23px 24px;
@@ -99,7 +99,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
   const { source, destination, operations } = connection;
   const supportsNormalization = destDefinition.supportsNormalization;
   const supportsTransformations =
-    destDefinition.supportsDbt && hasFeature("ALLOW_CUSTOM_DBT");
+    destDefinition.supportsDbt && hasFeature(FeatureItem.AllowCustomDBT);
 
   const initialValues = useInitialValues(
     connection,

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FormSection.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/FormSection.tsx
@@ -14,7 +14,7 @@ import GroupControls from "components/GroupControls";
 import { naturalComparator } from "utils/objects";
 import { IDataItem } from "components/base/DropDown/components/Option";
 import { AuthButton } from "./AuthButton";
-import { WithFeature } from "hooks/services/Feature";
+import { FeatureItem, WithFeature } from "hooks/services/Feature";
 
 function OrderComparator(a: FormBlock, b: FormBlock): number {
   const aIsNumber = Number.isInteger(a.order);
@@ -177,7 +177,7 @@ const FormSection: React.FC<{
   return (
     <>
       {hasOauth && (
-        <WithFeature featureId="ALLOW_OAUTH_CONNECTOR">
+        <WithFeature featureId={FeatureItem.AllowOAuthConnector}>
           {
             <SectionContainer>
               <AuthButton />

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/useBuildForm.tsx
@@ -11,7 +11,7 @@ import { buildYupFormForJsonSchema } from "core/jsonSchema/schemaToYup";
 import { buildPathInitialState } from "core/form/uiWidget";
 import { ServiceFormValues } from "./types";
 import { ConnectorDefinitionSpecification } from "core/domain/connector";
-import { useFeatureService } from "hooks/services/Feature";
+import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 import { applyFuncAt, removeNestedPaths } from "core/jsonSchema";
 
 function useBuildInitialSchema(
@@ -21,7 +21,7 @@ function useBuildInitialSchema(
 
   return useMemo(() => {
     if (
-      hasFeature("ALLOW_OAUTH_CONNECTOR") &&
+      hasFeature(FeatureItem.AllowOAuthConnector) &&
       connectorSpecification?.authSpecification
     ) {
       const spec = connectorSpecification.authSpecification.oauth2Specification;
@@ -143,13 +143,13 @@ const usePatchFormik = (): void => {
   /* Fixes issue https://github.com/airbytehq/airbyte/issues/1978
      Problem described here https://github.com/formium/formik/issues/445
      The problem is next:
-     
+
      When we touch the field, it would be set as touched field correctly.
      If validation fails on submit - Formik detects touched object mapping based
      either on initialValues passed to Formik or on current value set.
-     So in case of creation, if we touch an input, don't change value and 
-     press submit - our touched map will be cleared. 
-     
+     So in case of creation, if we touch an input, don't change value and
+     press submit - our touched map will be cleared.
+
      This hack just touches all fields on submit.
    */
   useEffect(() => {