From b5fdbaf3635abeec5eef5af695e46769c0fa1369 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> Date: Tue, 6 Dec 2022 14:54:28 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=94=A7=20Add=20auto-detect?= =?UTF-8?q?=20schema=20changes=20feature=20flag=20(#20035)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add auto-detect schema changes feature flag * Update schema changes enabled in StatusCell * Mock useIsAutoDetectSchemaChangesEnabled hook in tests --- .../src/components/EntityTable/ConnectionTable.tsx | 7 ++++--- .../components/EntityTable/components/StatusCell.tsx | 5 +++-- .../useIsAutoDetectSchemaChangesEnabled.ts | 6 ++++++ .../src/hooks/connection/useSchemaChanges.ts | 8 +++++--- .../src/hooks/services/Experiment/experiments.ts | 1 + .../SchemaChangesDetected.test.tsx | 12 ++++-------- .../pages/ConnectionItemPage/StatusMainInfo.test.tsx | 12 ++++-------- 7 files changed, 27 insertions(+), 24 deletions(-) create mode 100644 airbyte-webapp/src/hooks/connection/useIsAutoDetectSchemaChangesEnabled.ts diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx index 970a6382cb71..81b1e1a41ad7 100644 --- 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 = ({ 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 = ({ 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 = ({ data, entity, onClickRow, onSync }) Cell: ({ cell }: CellProps) => , }, ], - [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, isSchemaChangesFeatureEnabled] + [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, isSchemaChangesEnabled] ); return ; diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx index 23aadba32aa8..2cfe091c1412 100644 --- 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 = ({ schemaChange, hasBreakingChange, }) => { - const isSchemaChangesFeatureEnabled = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true"; + const isSchemaChangesEnabled = useIsAutoDetectSchemaChangesEnabled(); return (
@@ -40,7 +41,7 @@ export const StatusCell: React.FC = ({ hasBreakingChange={hasBreakingChange} allowSync={allowSync} /> - {isSchemaChangesFeatureEnabled && } + {isSchemaChangesEnabled && }
); }; diff --git a/airbyte-webapp/src/hooks/connection/useIsAutoDetectSchemaChangesEnabled.ts b/airbyte-webapp/src/hooks/connection/useIsAutoDetectSchemaChangesEnabled.ts new file mode 100644 index 000000000000..3ea709e447b2 --- /dev/null +++ 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 index 0499a997203d..dffa32a442e2 100644 --- 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 index 9bb39f541302..23619ff103b6 100644 --- 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/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx index 534438ecd91e..f08bbac3e667 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx +++ b/airbyte-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("", () => { - 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 index 8c92f0ba616d..bc5b1eccf19e 100644 --- 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("", () => { - 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,