From 9ca44ae8fb71d408323bdf1d2c9f90d9929e164a Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 21 Mar 2024 22:52:24 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=94=A7=20Hide=20`Stream`'s?= =?UTF-8?q?=20controls=20if=20it's=20disabled(not=20selected=20for=20sync)?= =?UTF-8?q?=20(#11756)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../e2e/connection/streamDetails.cy.ts | 19 +++++- .../cypress/e2e/connection/syncModes.cy.ts | 4 +- .../connection/StreamDetailsPageObject.ts | 12 ++++ .../CreateConnectionForm.test.tsx.snap | 60 +------------------ .../StreamDetailsPanel/StreamPanelHeader.tsx | 50 +++++++--------- .../StreamsConfigTableRow.tsx | 41 ++++++++----- .../ConnectionReplicationPage.test.tsx.snap | 60 +------------------ 7 files changed, 83 insertions(+), 163 deletions(-) diff --git a/airbyte-webapp/cypress/e2e/connection/streamDetails.cy.ts b/airbyte-webapp/cypress/e2e/connection/streamDetails.cy.ts index e3ca26606aa..9c10297e9c7 100644 --- a/airbyte-webapp/cypress/e2e/connection/streamDetails.cy.ts +++ b/airbyte-webapp/cypress/e2e/connection/streamDetails.cy.ts @@ -1,14 +1,14 @@ import { + createNewConnectionViaApi, createPostgresDestinationViaApi, createPostgresSourceViaApi, - createNewConnectionViaApi, } from "@cy/commands/connection"; import { - WebBackendConnectionRead, DestinationRead, DestinationSyncMode, - SyncMode, SourceRead, + SyncMode, + WebBackendConnectionRead, } from "@src/core/api/types/AirbyteClient"; import { requestDeleteConnection, requestDeleteDestination, requestDeleteSource } from "commands/api"; import { runDbQuery } from "commands/db/db"; @@ -103,11 +103,17 @@ describe("Connection - Stream details", () => { const fieldTypes = ["String", "Integer", "String", "Datetime"]; streamDetails.isSyncStreamDisabled(); + streamDetails.isSelectSyncModeHidden(); streamDetails.isNamespace("public"); streamDetails.isStreamName("users"); streamDetails.areFieldsValid({ names: fieldNames, dataTypes: fieldTypes }); }); + it("show sync mode dropdown if stream is enabled", () => { + streamDetails.enableSyncStream(); + streamDetails.isSelectSyncModeVisible(); + }); + it("closes", () => { streamDetails.close(); streamDetails.isClosed(); @@ -147,6 +153,8 @@ describe("Connection - Stream details", () => { const cursor = "created_at"; const primaryKeys = ["car_id", "user_id"]; + userCarsStreamRow.toggleStreamSync(); + userCarsStreamRow.isStreamSyncEnabled(true); userCarsStreamRow.selectSyncMode(SyncMode.incremental, DestinationSyncMode.append_dedup); userCarsStreamRow.showStreamDetails(); @@ -162,10 +170,13 @@ describe("Connection - Stream details", () => { describe("sync mode", () => { const userCarsStreamRow = new StreamRowPageObject("public", "user_cars"); + it("can select cursor and primary key", () => { const cursor = "created_at"; const primaryKeys = ["car_id", "user_id"]; + userCarsStreamRow.toggleStreamSync(); + userCarsStreamRow.isStreamSyncEnabled(true); userCarsStreamRow.showStreamDetails(); streamDetails.selectSyncMode(SyncMode.incremental, DestinationSyncMode.append_dedup); @@ -184,6 +195,8 @@ describe("Connection - Stream details", () => { const columnsStreamRow = new StreamRowPageObject("public", "columns"); it("selects cursors for stream with many fields", () => { + columnsStreamRow.toggleStreamSync(); + columnsStreamRow.isStreamSyncEnabled(true); columnsStreamRow.selectSyncMode(SyncMode.incremental, DestinationSyncMode.append); columnsStreamRow.showStreamDetails(); diff --git a/airbyte-webapp/cypress/e2e/connection/syncModes.cy.ts b/airbyte-webapp/cypress/e2e/connection/syncModes.cy.ts index 2f7d62b1844..860a95e38d3 100644 --- a/airbyte-webapp/cypress/e2e/connection/syncModes.cy.ts +++ b/airbyte-webapp/cypress/e2e/connection/syncModes.cy.ts @@ -442,8 +442,10 @@ describe("Connection - sync modes", () => { connectionPage.visit(connection, "transformation", { interceptGetHandler: modifyAccountsTableInterceptHandler }); connectionPage.visit(connection, "replication", { interceptGetHandler: modifyAccountsTableInterceptHandler }); - // change sync mode in disabled stream and save + // enable stream, change sync mode, then disable stream and save + accountsStreamRow.toggleStreamSync(); accountsStreamRow.selectSyncMode(SyncMode.full_refresh, DestinationSyncMode.append); + accountsStreamRow.toggleStreamSync(); saveConnectionAndAssertStreams( { namespace: "public", diff --git a/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts b/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts index 2485b4df24d..df5fb2f1c73 100644 --- a/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts +++ b/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts @@ -157,6 +157,18 @@ export class StreamDetailsPageObject { }); } + isSelectSyncModeVisible() { + cy.get(streamDetailsPanel).within(() => { + cy.get(syncModeSelectButton).should("be.visible"); + }); + } + + isSelectSyncModeHidden() { + cy.get(streamDetailsPanel).within(() => { + cy.get(syncModeSelectButton).should("not.exist"); + }); + } + selectCursor(fieldName: string) { getRowByFieldName(fieldName).within(() => { cy.get(cursorRadioButton).parent().click({ scrollBehavior: false }); diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap index 9b87244e172..a1e2bcb3ef4 100644 --- a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap +++ b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap @@ -1025,69 +1025,13 @@ exports[`CreateConnectionForm should render 1`] = `
-
- -
-
-
+ />
-
-
-

- All -

-
-
-
+ />
diff --git a/airbyte-webapp/src/components/connection/syncCatalog/StreamDetailsPanel/StreamPanelHeader.tsx b/airbyte-webapp/src/components/connection/syncCatalog/StreamDetailsPanel/StreamPanelHeader.tsx index c80e100f842..dc26f956731 100644 --- a/airbyte-webapp/src/components/connection/syncCatalog/StreamDetailsPanel/StreamPanelHeader.tsx +++ b/airbyte-webapp/src/components/connection/syncCatalog/StreamDetailsPanel/StreamPanelHeader.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useMemo } from "react"; +import React, { ReactNode } from "react"; import { FormattedMessage } from "react-intl"; import { Box } from "components/ui/Box"; @@ -13,11 +13,11 @@ import styles from "./StreamPanelHeader.module.scss"; import { SyncModeSelect, SyncModeValue } from "../SyncModeSelect"; interface StreamPanelHeaderProps { - config?: AirbyteStreamConfiguration; + stream: AirbyteStream; + config: AirbyteStreamConfiguration; disabled?: boolean; onClose: () => void; onSelectedChange: () => void; - stream?: AirbyteStream; onSelectSyncMode: (option: SyncModeValue) => void; availableSyncModes: SyncModeValue[]; } @@ -54,27 +54,19 @@ export const StreamPanelHeader: React.FC = ({ availableSyncModes, onSelectSyncMode, }) => { - const syncSchema: SyncModeValue | undefined = useMemo(() => { - if (!config) { - return undefined; - } - const { syncMode, destinationSyncMode } = config; - return { syncMode, destinationSyncMode }; - }, [config]); + const { syncMode, destinationSyncMode, selected: isStreamSelectedForSync } = config ?? {}; return ( -
- -
+ @@ -82,15 +74,17 @@ export const StreamPanelHeader: React.FC = ({ - - - + {isStreamSelectedForSync && ( + + + + )} -
-
- + />
-
-
-

- All -

-
-
-
+ />