Skip to content

Add loading state to switch, convert to scss modules #12790

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.

Sign up for GitHub

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

Merged
merged 21 commits into from
May 25, 2022
Merged

Add loading state to switch, convert to scss modules #12790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b9659a5
Adding sass
krishnaglick May 10, 2022
fc620d5
Rename Toggle -> Switch
krishnaglick May 10, 2022
2c24dcc
Loading state test works
krishnaglick May 10, 2022
54f3402
Mostly working styles
krishnaglick May 10, 2022
7632268
Smooth
krishnaglick May 11, 2022
23f4b66
cleanup
krishnaglick May 11, 2022
6eff267
Added loading where available
krishnaglick May 11, 2022
36ff0e2
Switch to classnames, move svg's, code review bits, move theme conten…
krishnaglick May 12, 2022
4aff330
Added switch to storybook
krishnaglick May 12, 2022
36f2376
Better
krishnaglick May 12, 2022
c5eece9
LabeledToggle -> LabeledSwitch
krishnaglick May 13, 2022
8d9e2b6
Edmundo CR
krishnaglick May 13, 2022
0f70bce
Import variables from SASS in TS
May 19, 2022
f9f7dc0
Minor adjustments
May 19, 2022
5019579
Refactor code
May 19, 2022
a685bf2
Adjust styling to discussion with Nico
May 19, 2022
0d39903
invalidate connection on source and destination item pages when updat…
edmundito May 20, 2022
981c20a
Fix switch loading status in NotificationForm
edmundito May 20, 2022
1a2b304
Update classnames in package-lock
edmundito May 23, 2022
2ec8916
While updating the connection, disable reset and sync buttons
edmundito May 23, 2022
1af095d
Disable switch while loading
edmundito May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 51 additions & 39 deletions airbyte-webapp/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions airbyte-webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@fullstory/browser": "^1.5.1",
"@sentry/react": "^6.19.6",
"@sentry/tracing": "^6.19.6",
"classnames": "^2.3.1",
"dayjs": "^1.11.0",
"firebase": "^9.6.10",
"flat": "^5.0.2",
Expand Down Expand Up @@ -54,6 +55,7 @@
"remark-gfm": "^3.0.0",
"rxjs": "^7.5.5",
"sanitize-html": "^2.7.0",
"sass": "^1.51.0",
"styled-components": "^5.3.5",
"typesafe-actions": "^5.1.0",
"yup": "^0.32.11"
Expand Down
14 changes: 7 additions & 7 deletions airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
import { useAsyncFn } from "react-use";
import styled from "styled-components";

import { LoadingButton, Toggle } from "components";
import { LoadingButton, Switch } from "components";

type IProps = {
allowSync?: boolean;
Expand All @@ -29,13 +29,13 @@ const StatusCell: React.FC<IProps> = ({ enabled, isManual, id, onChangeStatus, i
await onSync(id);
}, []);

const OnToggleClick = (event: React.SyntheticEvent) => {
event.stopPropagation();
onChangeStatus(id);
};

if (!isManual) {
return <Toggle checked={enabled} onChange={OnToggleClick} disabled={!allowSync} />;
const onSwitchChange = (event: React.SyntheticEvent) => {
event.stopPropagation();
onChangeStatus(id);
};

return <Switch checked={enabled} onChange={onSwitchChange} disabled={!allowSync} />;
}

if (isSyncing) {
Expand Down
Loading