🪟 🔧 Add auto-detect schema changes feature flag (airbytehq#20035)

* Add auto-detect schema changes feature flag * Update schema changes enabled in StatusCell * Mock useIsAutoDetectSchemaChangesEnabled hook in tests
siddhant3030 · Dec 6, 2022 · b5fdbaf · b5fdbaf
1 parent 86f61a5
commit b5fdbaf
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 24 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
@@ -7,6 +7,7 @@ import { CellProps } from "react-table";
 import { Table, SortableTableHeader } from "components/ui/Table";
 
 import { ConnectionScheduleType, SchemaChange } from "core/request/AirbyteClient";
+import { useIsAutoDetectSchemaChangesEnabled } from "hooks/connection/useIsAutoDetectSchemaChangesEnabled";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useQuery } from "hooks/useQuery";
 
@@ -28,7 +29,7 @@ interface IProps {
 const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync }) => {
   const navigate = useNavigate();
   const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
-  const isSchemaChangesFeatureEnabled = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true";
+  const isSchemaChangesEnabled = useIsAutoDetectSchemaChangesEnabled();
   const allowSync = useFeature(FeatureItem.AllowSync);
 
   const sortBy = query.sortBy || "entityName";
@@ -163,7 +164,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
             isSyncing={row.original.isSyncing}
             isManual={row.original.scheduleType === ConnectionScheduleType.manual}
             onSync={onSync}
-            hasBreakingChange={isSchemaChangesFeatureEnabled && row.original.schemaChange === SchemaChange.breaking}
+            hasBreakingChange={isSchemaChangesEnabled && row.original.schemaChange === SchemaChange.breaking}
             allowSync={allowSync}
           />
         ),
@@ -175,7 +176,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
         Cell: ({ cell }: CellProps<ITableDataItem>) => <ConnectionSettingsCell id={cell.value} />,
       },
     ],
-    [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, isSchemaChangesFeatureEnabled]
+    [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, isSchemaChangesEnabled]
   );
 
   return <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />;

diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { SchemaChange } from "core/request/AirbyteClient";
+import { useIsAutoDetectSchemaChangesEnabled } from "hooks/connection/useIsAutoDetectSchemaChangesEnabled";
 
 import { ChangesStatusIcon } from "./ChangesStatusIcon";
 import styles from "./StatusCell.module.scss";
@@ -27,7 +28,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({
   schemaChange,
   hasBreakingChange,
 }) => {
-  const isSchemaChangesFeatureEnabled = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true";
+  const isSchemaChangesEnabled = useIsAutoDetectSchemaChangesEnabled();
 
   return (
     <div className={styles.container}>
@@ -40,7 +41,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({
         hasBreakingChange={hasBreakingChange}
         allowSync={allowSync}
       />
-      {isSchemaChangesFeatureEnabled && <ChangesStatusIcon schemaChange={schemaChange} />}
+      {isSchemaChangesEnabled && <ChangesStatusIcon schemaChange={schemaChange} />}
     </div>
   );
 };
diff --git a/airbyte-webapp/src/hooks/connection/useIsAutoDetectSchemaChangesEnabled.ts b/airbyte-webapp/src/hooks/connection/useIsAutoDetectSchemaChangesEnabled.ts
@@ -0,0 +1,6 @@
+import { useExperiment } from "hooks/services/Experiment";
+
+const isEnabledInEnv = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true";
+
+export const useIsAutoDetectSchemaChangesEnabled = () =>
+  useExperiment("connection.autoDetectSchemaChanges", isEnabledInEnv);
diff --git a/airbyte-webapp/src/hooks/connection/useSchemaChanges.ts b/airbyte-webapp/src/hooks/connection/useSchemaChanges.ts
@@ -2,11 +2,13 @@ import { useMemo } from "react";
 
 import { SchemaChange } from "core/request/AirbyteClient";
 
+import { useIsAutoDetectSchemaChangesEnabled } from "./useIsAutoDetectSchemaChangesEnabled";
+
 export const useSchemaChanges = (schemaChange: SchemaChange) => {
-  const isSchemaChangesFeatureEnabled = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true";
+  const isSchemaChangesEnabled = useIsAutoDetectSchemaChangesEnabled();
 
   return useMemo(() => {
-    const hasSchemaChanges = isSchemaChangesFeatureEnabled && schemaChange !== SchemaChange.no_change;
+    const hasSchemaChanges = isSchemaChangesEnabled && schemaChange !== SchemaChange.no_change;
     const hasBreakingSchemaChange = hasSchemaChanges && schemaChange === SchemaChange.breaking;
     const hasNonBreakingSchemaChange = hasSchemaChanges && schemaChange === SchemaChange.non_breaking;
 
@@ -16,5 +18,5 @@ export const useSchemaChanges = (schemaChange: SchemaChange) => {
       hasBreakingSchemaChange,
       hasNonBreakingSchemaChange,
     };
-  }, [isSchemaChangesFeatureEnabled, schemaChange]);
+  }, [isSchemaChangesEnabled, schemaChange]);
 };
diff --git a/airbyte-webapp/src/hooks/services/Experiment/experiments.ts b/airbyte-webapp/src/hooks/services/Experiment/experiments.ts
@@ -25,4 +25,5 @@ export interface Experiments {
   "authPage.oauth.position": "top" | "bottom";
   "connection.onboarding.sources": string;
   "connection.onboarding.destinations": string;
+  "connection.autoDetectSchemaChanges": boolean;
 }
diff --git a/...e-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx b/...e-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx
@@ -20,18 +20,14 @@ jest.doMock("views/Connection/ConnectionForm/components/refreshSourceSchemaWithC
   useRefreshSourceSchemaWithConfirmationOnDirty: mockUseRefreshSourceSchemaWithConfirmationOnDirty,
 }));
 
+jest.mock("hooks/connection/useIsAutoDetectSchemaChangesEnabled", () => ({
+  useIsAutoDetectSchemaChangesEnabled: () => true,
+}));
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { SchemaChangesDetected } = require("./SchemaChangesDetected");
 
 describe("<SchemaChangesDetected />", () => {
-  beforeAll(() => {
-    process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES = "true";
-  });
-
-  afterAll(() => {
-    delete process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES;
-  });
-
   beforeEach(() => {
     mockUseConnectionEditService.mockReturnValue({
       connection: mockConnection,

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx
@@ -26,18 +26,14 @@ jest.doMock("views/Connection/ConnectionForm/components/refreshSourceSchemaWithC
   useRefreshSourceSchemaWithConfirmationOnDirty: jest.fn(),
 }));
 
+jest.mock("hooks/connection/useIsAutoDetectSchemaChangesEnabled", () => ({
+  useIsAutoDetectSchemaChangesEnabled: () => true,
+}));
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { StatusMainInfo } = require("./StatusMainInfo");
 
 describe("<StatusMainInfo />", () => {
-  beforeAll(() => {
-    process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES = "true";
-  });
-
-  afterAll(() => {
-    delete process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES;
-  });
-
   beforeEach(() => {
     mockUseConnectionEditService.mockReturnValue({
       connection: mockConnection,