-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪟 Per-Stream state new flow #14634
🪟 Per-Stream state new flow #14634
Conversation
@@ -114,59 +99,62 @@ export const ReplicationView: React.FC<ReplicationViewProps> = ({ onAfterSaveSch | |||
if (activeUpdatingSchemaMode) { | |||
setActiveUpdatingSchemaMode(false); | |||
} | |||
|
|||
formikHelpers?.resetForm({ values }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ The onSubmit
function was never called with the formikHelpers
parameters specified, so this should have never been called.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just have to make sure that after saving, the confirmation modal to discard chagnes does not appear.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems to work. This should all be handled by the call inside the ConnectionForm
: https://github.com/airbytehq/airbyte/blob/tim/per-stream-flow/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx#L167
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
Outdated
Show resolved
Hide resolved
} | ||
}; | ||
|
||
const onEnterRefreshCatalogMode = async () => { | ||
const onRefreshSourceSchema = async () => { | ||
setSaved(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ This (and the setSaved(false)
call below) solves some issue that the "This connection was saved" reappears again after an error vanished, despite no new save has happened.
const openResetDataModal = useCallback(() => { | ||
openConfirmationModal({ | ||
title: "form.resetData", | ||
text: "form.changedColumns", | ||
submitButtonText: "form.reset", | ||
cancelButtonText: "form.noNeed", | ||
onSubmit: async () => { | ||
await onReset?.(); | ||
closeConfirmationModal(); | ||
}, | ||
}); | ||
}, [closeConfirmationModal, onReset, openConfirmationModal]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ This was the old "should we reset or not" modal when the configuration inside the stream changed, but the stream wasn't manually refreshed.
Note: The warning shown here even was very much off, what actually happened. We showed "You have changed which column is used to detect new records for a stream. You may want to reset the data in your stream.", though we showed this also for other types of catalog changes (e.g. sync mode change).
const openResetDataModal = (values: ValuesProps) => { | ||
openConfirmationModal({ | ||
title: "connection.updateSchema", | ||
text: "connection.updateSchemaText", | ||
submitButtonText: "connection.updateSchema", | ||
submitButtonDataId: "refresh", | ||
onSubmit: async () => { | ||
await onSubmit(values); | ||
closeConfirmationModal(); | ||
}, | ||
}); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ This was the old "we'll need to reset your data", when a "Source schema refresh" has happened before.
const requireFullReset = stateType === ConnectionStateType.legacy; | ||
return ( | ||
<div className={styles.resetWarningModal}> | ||
{/* TODO: This should use proper text stylings once we have them available. */} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ This TODO is meant to stay inside, and hopefully we can build out the proper text styles soon, so use them here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If there is an issue for that, it could be helpful to link it in this comment so that its easy to find all of the related TODOs in the code
const service: ModalServiceContextType = useMemo( | ||
() => ({ | ||
openModal: (options) => { | ||
resultSubjectRef.current = new Subject(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ Why solving this with an observable here, despite only needing a one time resolved value. The problem is, that we can't control a Promise
from the outside, so we'd need to instantiate a promise here and store a reference to it's resolve
/reject
method in a ref for later consumption. I had this first, and the whole component read way worse imho, thus I switched this over to use a simple subject and convert that later to a promise.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks good
Code is good, but I ran into a situation while testing:
I didn't change anything about the streams, but I still got the dialog to reset the schema. This also happens if I modify a disabled stream. |
Another thing I noticed: After adding the new table and saving the schema, the stream disappears from the list. But when I reload the replication page, it appears again. |
Another thing about the modal, for me it makes more sense that it shows the "Save and Reset" as a button rather than a checkbox. so the user has three CTAs:
|
The problem is we really want to discourage saving without resetting, thus this layout. Cc @andyjih happy to get your input on that question, checkbox vs three buttons? |
That is so far actually intended behavior, since the catalog changed (despite the stream not being enabled that changed). @andyjih @lmossman I wonder if we should actually only compare enabled streams in the original and the catalog we're about to send? And only if there's a difference in the enabled ones show that modal? |
@timroes I believe this is actually how it already works in the backend - we only compare the configured catalog that the frontend passes us with the configured catalog that is stored in the database, and those configured catalogs only contain streams that are enabled. So I think it will be a purely frontend change to bring it in line with this behavior, which we should do so that they are consistent |
Just for double checking: At the moment (before and with this PR) we're sending to the backend also all non-enabled streams, and have |
Added the change to only compare selected streams for showing the modal. |
This is caused by some issue in the API. I filed #14839 to get this fixed. |
@edmundito Could you give this another look? With Andy out, Charles and I would prefer merging the changes (once BE is fixed) for now as it is, and do a separate PR for cleaning up the modal (wording + design) once Andy will be available again. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code changes look good. Will approve pending @andyjih's comments on the wording for final approval.
Co-authored-by: Andy Jih <andyjih@users.noreply.github.com>
Co-authored-by: Andy Jih <andyjih@users.noreply.github.com>
* [WIP] new per stream flow * Start work on ModalSerice * Continue work * Fix typo * Change wording * Add todos and remove dead code * Remove dead message * Adjust to new API * Adjust to new modal changes * Remove debug output * Fix e2e test * Add data-testids * Adjust for PR review * Switch to new ModalFooter/Body components * Add ModalService tests * Downgrade user-events again * Only compare selected streams * Update airbyte-webapp/src/locales/en.json Co-authored-by: Andy Jih <andyjih@users.noreply.github.com> * Update airbyte-webapp/src/locales/en.json Co-authored-by: Andy Jih <andyjih@users.noreply.github.com> * Remove redundant space Co-authored-by: Andy Jih <andyjih@users.noreply.github.com>
What
Fixes #14560
Partial reset possible:

Full reset required:

TODOs
Unit tests