-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟 🎉 Auto-detect schema changes UX flow (#19226)
* Show breaking/non-breaking changes detected when auto detect schema featur is enabled * Fix spacing issues in StatusMainInfo component to more closely match design * Extract SchemaChanges detected cell from StatusMainInfo to a component Add checks when the connection has been refreshed Don't render when the connection is read-only. * Navigate to replication settings when clicking on review changes button * Disable connection status when breaking changes are detected Add useConnectionTableData hook to take advantage of hooks and replace usages of getConnectionTableData Clean up imports with relative paths * Cleanup isSchemaChangesFeatureEnabled flags * Revert some changes to getConnectionsTable Update how the StatusCell disables based on schema changes Update getConnectionTable to provide the schemaChange value * Clean up review action var naming * Show reset confirmation modal when trying to refresh the schema after editing a form Update FormChangeTracker service hooks to return hasFormChanges * Fix linting issues in SchemaChangesDetected component * Add StatusCell tests to verify has breaking changes * Add tests for StatusMainInfo for auto-detect schema changes * Add mock source and destination definition * Extract useSchemaChange out of SchemaChangesDetected file for better testing * Add SchemaDetectedChanges unit test * Simplify mocking in StatusMainInfo test * Add manual sync test cases to StatusCell * Update schemaChange when the catalog is updated
- Loading branch information
Showing
25 changed files
with
823 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
airbyte-webapp/src/components/EntityTable/components/StatusCell.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { render } from "@testing-library/react"; | ||
import { TestWrapper } from "test-utils/testutils"; | ||
|
||
import StatusCell from "./StatusCell"; | ||
|
||
const mockId = "mock-id"; | ||
|
||
jest.doMock("hooks/services/useConnectionHook", () => ({ | ||
useEnableConnection: () => ({ | ||
mutateAsync: jest.fn(), | ||
isLoading: false, | ||
}), | ||
})); | ||
|
||
describe("<StatusCell />", () => { | ||
it("renders switch when connection has schedule", () => { | ||
const { getByTestId } = render(<StatusCell id={mockId} onSync={jest.fn()} allowSync enabled />, { | ||
wrapper: TestWrapper, | ||
}); | ||
|
||
const switchElement = getByTestId("enable-connection-switch"); | ||
|
||
expect(switchElement).toBeEnabled(); | ||
expect(switchElement).toBeChecked(); | ||
}); | ||
|
||
it("renders button when connection does not have schedule", () => { | ||
const { getByTestId } = render(<StatusCell id={mockId} onSync={jest.fn()} allowSync enabled isManual />, { | ||
wrapper: TestWrapper, | ||
}); | ||
|
||
expect(getByTestId("manual-sync-button")).toBeEnabled(); | ||
}); | ||
|
||
it("disables switch when hasBreakingChange is true", () => { | ||
const { getByTestId } = render(<StatusCell id={mockId} onSync={jest.fn()} allowSync hasBreakingChange />, { | ||
wrapper: TestWrapper, | ||
}); | ||
|
||
expect(getByTestId("enable-connection-switch")).toBeDisabled(); | ||
}); | ||
|
||
it("disables manual sync button when hasBreakingChange is true", () => { | ||
const { getByTestId } = render( | ||
<StatusCell id={mockId} onSync={jest.fn()} allowSync hasBreakingChange enabled isManual />, | ||
{ | ||
wrapper: TestWrapper, | ||
} | ||
); | ||
|
||
expect(getByTestId("manual-sync-button")).toBeDisabled(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { useMemo } from "react"; | ||
|
||
import { SchemaChange } from "core/request/AirbyteClient"; | ||
|
||
export const useSchemaChanges = (schemaChange: SchemaChange) => { | ||
const isSchemaChangesFeatureEnabled = process.env.REACT_APP_AUTO_DETECT_SCHEMA_CHANGES === "true"; | ||
|
||
return useMemo(() => { | ||
const hasSchemaChanges = isSchemaChangesFeatureEnabled && schemaChange !== SchemaChange.no_change; | ||
const hasBreakingSchemaChange = hasSchemaChanges && schemaChange === SchemaChange.breaking; | ||
const hasNonBreakingSchemaChange = hasSchemaChanges && schemaChange === SchemaChange.non_breaking; | ||
|
||
return { | ||
schemaChange, | ||
hasSchemaChanges, | ||
hasBreakingSchemaChange, | ||
hasNonBreakingSchemaChange, | ||
}; | ||
}, [isSchemaChangesFeatureEnabled, schemaChange]); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
@use "scss/colors"; | ||
@use "scss/variables"; | ||
|
||
.container { | ||
display: flex; | ||
align-items: center; | ||
gap: variables.$spacing-md; | ||
} | ||
|
||
.label { | ||
min-width: 60px; | ||
font-size: 14px; | ||
line-height: 19px; | ||
font-weight: 500; | ||
color: colors.$grey-300; | ||
display: inline-block; | ||
text-align: left; | ||
cursor: pointer; | ||
} |
Oops, something went wrong.