Add loading state to switch, convert to scss modules #12790
Merged
Conversation
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
github-actions
bot
added
area/frontend
area/platform
krishnaglick
commented
May 11, 2022
|
|
||
| &.small:before { | ||
| transform: translateX(10px); | ||
| } |
There was a problem hiding this comment.
Doing &:before { &.small {} } did not work.
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx
Outdated
Show resolved
Hide resolved
| @@ -103,7 +103,7 @@ export const BulkHeader: React.FC<BulkHeaderProps> = ({ destinationSupportedSync | |||
| <CheckboxCell /> | |||
| <ArrowCell /> | |||
| <HeaderCell flex={0.4}> | |||
| <Toggle small checked={options.selected} onChange={() => onChangeOption({ selected: !options.selected })} /> | |||
| <Switch small checked={options.selected} onChange={() => onChangeOption({ selected: !options.selected })} /> | |||
There was a problem hiding this comment.
This is an example of an async effect caused by a sync option. Hard to know what Switch triggered things.
edmundito
reviewed
May 11, 2022
timroes
reviewed
May 12, 2022
|
Could we as part of this PR also add the |
teallarson
reviewed
May 12, 2022
airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx
Show resolved
Hide resolved
|
@timroes Unsure how you wanted to implement a11y features into this. It's at least labeled correctly. |
timroes
reviewed
May 19, 2022
Comment on lines
38
to
40
| // Getting the loading state down here may be difficult. | ||
| // ConnectionsTable.tsx#28 | ||
| // The data is invalidated, then re-loaded. There's no specific action flow for loading. |
There was a problem hiding this comment.
@edmundito I think this should rather just be a coment on the PR not in the code. Could we remove this before merging this?
edmundito
force-pushed
the
kc/better-switch
branch
from
678af52 to
a3e9ab3
Compare
edmundito
force-pushed
the
kc/better-switch
branch
from
a3e9ab3 to
1af095d
Compare
teallarson
approved these changes
May 24, 2022
jscottpolevault
pushed a commit
to jscottpolevault/airbyte
that referenced
this pull request
Jun 1, 2022
* Adding sass * Rename Toggle -> Switch * Loading state test works * Mostly working styles * Smooth * cleanup * Added loading where available * Switch to classnames, move svg's, code review bits, move theme content into scss. * Added switch to storybook * Better * LabeledToggle -> LabeledSwitch * Edmundo CR * Import variables from SASS in TS * Minor adjustments * Refactor code * Adjust styling to discussion with Nico * invalidate connection on source and destination item pages when updating status * Fix switch loading status in NotificationForm * Update classnames in package-lock * While updating the connection, disable reset and sync buttons * Disable switch while loading Co-authored-by: Tim Roes <tim@airbyte.io> Co-authored-by: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #12530
Renamed, has a loading state, and uses sass modules.
Arguably done. Many places this component is used actually cause sync actions that trigger async updates so we don't have a way to track when to start/stop loading. I could code something up, like using a key to track loading state, but I'd argue the problem views (connections list, destinations list, and sources list) merit a refactor that would make this way easier.
Error states are arguably outside the scope of this work. The mocks place them below the label, not the switch itself, and there are several components that implement Switch. Additionally error states are bubbled up to Error Boundaries more often than not so I'm unsure how much value this gets us.
Merits discussion.