Skip to content

Commit

Permalink
🪟 🔧 Hide Stream's controls if it's disabled(not selected for sync) …
Browse files Browse the repository at this point in the history 
…(#11756)
  • Loading branch information
@dizel852
dizel852 committed Mar 21, 2024
1 parent 8a5393d commit 9ca44ae
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 163 deletions.
19 changes: 16 additions & 3 deletions airbyte-webapp/cypress/e2e/connection/streamDetails.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();

Expand All @@ -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);
Expand All @@ -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();

Expand Down
4 changes: 3 additions & 1 deletion airbyte-webapp/cypress/e2e/connection/syncModes.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down
60 changes: 2 additions & 58 deletions ...mponents/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1025,69 +1025,13 @@ exports[`CreateConnectionForm should render 1`] = `
</div>
<div
class="<removed-for-snapshot-test>"
>
<div
data-testid="sync-mode-select"
>
<button
aria-expanded="false"
aria-haspopup="listbox"
class="<removed-for-snapshot-test>"
data-headlessui-state=""
data-testid="sync-mode-select-listbox-button"
id="headlessui-listbox-button-:r5:"
type="button"
>
<div
class="<removed-for-snapshot-test>"
data-error="false"
data-testid="pill-select-button"
>
<div
class="<removed-for-snapshot-test>"
>
<p
class="<removed-for-snapshot-test>"
data-type="text"
>
Full refresh | Overwrite
</p>
</div>
<div
class="<removed-for-snapshot-test>"
data-icon="caret-down"
data-testid="mocksvg"
/>
</div>
</button>
<div
style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
/>
</div>
</div>
/>
<div
class="<removed-for-snapshot-test>"
/>
<div
class="<removed-for-snapshot-test>"
>
<div
class="<removed-for-snapshot-test>"
data-testid="field-selection-status"
>
<div
class="<removed-for-snapshot-test>"
>
<p
class="<removed-for-snapshot-test>"
data-testid="field-selection-status-selected-count"
data-type="text"
>
All
</p>
</div>
</div>
</div>
/>
</div>
</div>
</div>
Expand Down
50 changes: 22 additions & 28 deletions ...yte-webapp/src/components/connection/syncCatalog/StreamDetailsPanel/StreamPanelHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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[];
}
Expand Down Expand Up @@ -54,43 +54,37 @@ export const StreamPanelHeader: React.FC<StreamPanelHeaderProps> = ({
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 (
<Box pt="lg" pb="md" pr="sm" pl="md" className={styles.container}>
<FlexContainer justifyContent="space-between" alignItems="center" data-testid="stream-details-header">
<FlexContainer gap="md" alignItems="center" className={styles.leftActions}>
<div>
<Switch
size="sm"
checked={config?.selected}
onChange={onSelectedChange}
disabled={disabled}
data-testid="stream-details-sync-stream-switch"
/>
</div>
<Switch
size="sm"
checked={isStreamSelectedForSync}
onChange={onSelectedChange}
disabled={disabled}
data-testid="stream-details-sync-stream-switch"
/>
<Text color="grey300" size="xs">
<FormattedMessage id="form.stream.sync" />
</Text>
</FlexContainer>
<FlexContainer className={styles.properties} alignItems="center" justifyContent="center" gap="xl">
<NamespaceProperty namespace={stream?.namespace} />
<StreamProperty messageId="form.streamName" value={stream?.name} data-testid="stream-details-stream-name" />
<FlexItem className={styles.syncModeProperty} alignSelf="center">
<SyncModeSelect
options={availableSyncModes}
onChange={onSelectSyncMode}
value={syncSchema}
variant="grey"
disabled={disabled}
/>
</FlexItem>
{isStreamSelectedForSync && (
<FlexItem className={styles.syncModeProperty} alignSelf="center">
<SyncModeSelect
options={availableSyncModes}
onChange={onSelectSyncMode}
value={{ syncMode, destinationSyncMode }}
variant="grey"
disabled={disabled}
/>
</FlexItem>
)}
</FlexContainer>
<FlexContainer className={styles.rightActions} justifyContent="flex-end">
<Button
Expand Down
41 changes: 26 additions & 15 deletions ...webapp/src/components/connection/syncCatalog/StreamsConfigTable/StreamsConfigTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,14 @@ const StreamsConfigTableRowInner: React.FC<StreamsConfigTableRowInnerProps & { c
configErrors,
className,
}) => {
const { primaryKey, cursorField, syncMode, destinationSyncMode, selectedFields } = stream.config ?? {};
const {
primaryKey,
cursorField,
syncMode,
destinationSyncMode,
selectedFields,
selected: isStreamSelectedForSync,
} = stream.config ?? {};

const pathDisplayName = (path: Path): string => path.join(".");

Expand Down Expand Up @@ -173,7 +180,7 @@ const StreamsConfigTableRowInner: React.FC<StreamsConfigTableRowInnerProps & { c
<CellText size="fixed" className={styles.syncCell} data-noexpand>
<Switch
size="sm"
checked={stream.config?.selected} // stream sync enabled or disabled
checked={isStreamSelectedForSync}
onChange={onSelectStream}
disabled={disabled}
data-testid="selected-switch"
Expand All @@ -189,16 +196,18 @@ const StreamsConfigTableRowInner: React.FC<StreamsConfigTableRowInnerProps & { c
<TextWithOverflowTooltip size="md">{destName}</TextWithOverflowTooltip>
</CellText>
<CellText className={styles.syncModeCell}>
<SyncModeSelect
options={availableSyncModes}
onChange={onSelectSyncMode}
value={syncSchema}
variant={pillButtonVariant}
disabled={disabled}
/>
{isStreamSelectedForSync && (
<SyncModeSelect
options={availableSyncModes}
onChange={onSelectSyncMode}
value={syncSchema}
variant={pillButtonVariant}
disabled={disabled}
/>
)}
</CellText>
<CellText>
{(cursorType || pkType) && (
{isStreamSelectedForSync && (cursorType || pkType) && (
<FlexContainer direction="column" gap="xs">
{cursorType && (
<FlexContainer direction="row" gap="xs" alignItems="baseline" data-testid="cursor-field-cell">
Expand Down Expand Up @@ -234,11 +243,13 @@ const StreamsConfigTableRowInner: React.FC<StreamsConfigTableRowInnerProps & { c
)}
</CellText>
<CellText size="fixed" className={styles.fieldsCell}>
<FieldSelectionStatus
selectedFieldCount={selectedFieldCount}
totalFieldCount={fieldCount}
variant={pillButtonVariant as FieldSelectionStatusVariant}
/>
{isStreamSelectedForSync && (
<FieldSelectionStatus
selectedFieldCount={selectedFieldCount}
totalFieldCount={fieldCount}
variant={pillButtonVariant as FieldSelectionStatusVariant}
/>
)}
</CellText>
</FlexContainer>
);
Expand Down
60 changes: 2 additions & 58 deletions ...nnections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -656,69 +656,13 @@ exports[`ConnectionReplicationPage should render 1`] = `
</div>
<div
class="<removed-for-snapshot-test>"
>
<div
data-testid="sync-mode-select"
>
<button
aria-expanded="false"
aria-haspopup="listbox"
class="<removed-for-snapshot-test>"
data-headlessui-state=""
data-testid="sync-mode-select-listbox-button"
id="headlessui-listbox-button-:r2:"
type="button"
>
<div
class="<removed-for-snapshot-test>"
data-error="false"
data-testid="pill-select-button"
>
<div
class="<removed-for-snapshot-test>"
>
<p
class="<removed-for-snapshot-test>"
data-type="text"
>
Full refresh | Overwrite
</p>
</div>
<div
class="<removed-for-snapshot-test>"
data-icon="caret-down"
data-testid="mocksvg"
/>
</div>
</button>
<div
style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
/>
</div>
</div>
/>
<div
class="<removed-for-snapshot-test>"
/>
<div
class="<removed-for-snapshot-test>"
>
<div
class="<removed-for-snapshot-test>"
data-testid="field-selection-status"
>
<div
class="<removed-for-snapshot-test>"
>
<p
class="<removed-for-snapshot-test>"
data-testid="field-selection-status-selected-count"
data-type="text"
>
All
</p>
</div>
</div>
</div>
/>
</div>
</div>
</div>
Expand Down

0 comments on commit 9ca44ae

Please sign in to comment.