From b9659a571f64e104ea0a1f1751598d6ffc950f63 Mon Sep 17 00:00:00 2001 From: KC Date: Tue, 10 May 2022 14:48:12 -0400 Subject: [PATCH 01/21] Adding sass --- airbyte-webapp/package-lock.json | 77 ++++++++++++++++++-------------- airbyte-webapp/package.json | 1 + 2 files changed, 45 insertions(+), 33 deletions(-) diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json index f53625efa0dd9..7bad8002ec541 100644 --- a/airbyte-webapp/package-lock.json +++ b/airbyte-webapp/package-lock.json @@ -46,6 +46,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" @@ -16714,7 +16715,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -17957,7 +17957,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -18209,7 +18208,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -18841,7 +18839,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -23627,7 +23624,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -24495,7 +24491,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -26428,7 +26423,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -26600,7 +26594,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -26632,7 +26625,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -26724,7 +26716,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -33841,7 +33832,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -35260,7 +35250,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -40457,7 +40446,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -42586,6 +42574,27 @@ "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==", "dev": true }, + "node_modules/sass": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz", + "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/sass/node_modules/immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==" + }, "node_modules/sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -44857,7 +44866,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -61162,7 +61170,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -62157,8 +62164,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "bl": { "version": "4.1.0", @@ -62354,7 +62360,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -62857,7 +62862,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -66690,7 +66694,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -67368,7 +67371,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "requires": { "is-glob": "^4.0.1" } @@ -68857,7 +68859,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -68977,8 +68978,7 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-fullwidth-code-point": { "version": "3.0.0", @@ -69001,7 +69001,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "requires": { "is-extglob": "^2.1.1" } @@ -69063,8 +69062,7 @@ "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" }, "is-number-object": { "version": "1.0.5", @@ -74457,8 +74455,7 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, "normalize-range": { "version": "0.1.2", @@ -75562,8 +75559,7 @@ "picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, "pidtree": { "version": "0.5.0", @@ -79215,7 +79211,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -80780,6 +80775,23 @@ "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==", "dev": true }, + "sass": { + "version": "1.51.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.51.0.tgz", + "integrity": "sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "dependencies": { + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==" + } + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -82635,7 +82647,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "requires": { "is-number": "^7.0.0" } diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json index 5b47307744993..ac7282d26dfcf 100644 --- a/airbyte-webapp/package.json +++ b/airbyte-webapp/package.json @@ -54,6 +54,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" From fc620d55968538d56e3be4a6ccd06532374a3d75 Mon Sep 17 00:00:00 2001 From: KC Date: Tue, 10 May 2022 14:50:44 -0400 Subject: [PATCH 02/21] Rename Toggle -> Switch --- .../components/EntityTable/components/StatusCell.tsx | 4 ++-- .../src/components/LabeledToggle/LabeledToggle.tsx | 4 ++-- .../base/{Toggle/Toggle.tsx => Switch/Switch.tsx} | 12 ++++++------ airbyte-webapp/src/components/base/Switch/index.tsx | 4 ++++ airbyte-webapp/src/components/base/Toggle/index.tsx | 4 ---- airbyte-webapp/src/components/base/index.tsx | 2 +- .../ConnectionItemPage/components/EnabledControl.tsx | 4 ++-- .../views/Connection/CatalogTree/StreamHeader.tsx | 4 ++-- .../Connection/CatalogTree/components/BulkHeader.tsx | 4 ++-- 9 files changed, 21 insertions(+), 21 deletions(-) rename airbyte-webapp/src/components/base/{Toggle/Toggle.tsx => Switch/Switch.tsx} (83%) create mode 100644 airbyte-webapp/src/components/base/Switch/index.tsx delete mode 100644 airbyte-webapp/src/components/base/Toggle/index.tsx diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx index c702f86aa426f..93a82ac6296be 100644 --- a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx +++ b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx @@ -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; @@ -35,7 +35,7 @@ const StatusCell: React.FC = ({ enabled, isManual, id, onChangeStatus, i }; if (!isManual) { - return ; + return ; } if (isSyncing) { diff --git a/airbyte-webapp/src/components/LabeledToggle/LabeledToggle.tsx b/airbyte-webapp/src/components/LabeledToggle/LabeledToggle.tsx index 982b30777d95d..46664d197b180 100644 --- a/airbyte-webapp/src/components/LabeledToggle/LabeledToggle.tsx +++ b/airbyte-webapp/src/components/LabeledToggle/LabeledToggle.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { CheckBox, Toggle } from "components/base"; +import { CheckBox, Switch } from "components/base"; type IProps = { message?: React.ReactNode; @@ -38,7 +38,7 @@ const LabeledToggle: React.FC = (props) => ( {props.checkbox ? ( ) : ( - + )} ); - -export default LabeledToggle; diff --git a/airbyte-webapp/src/components/LabeledSwitch/index.tsx b/airbyte-webapp/src/components/LabeledSwitch/index.tsx new file mode 100644 index 0000000000000..f46bd5e0788ca --- /dev/null +++ b/airbyte-webapp/src/components/LabeledSwitch/index.tsx @@ -0,0 +1 @@ +export { LabeledSwitch } from "./LabeledSwitch"; diff --git a/airbyte-webapp/src/components/LabeledToggle/index.tsx b/airbyte-webapp/src/components/LabeledToggle/index.tsx deleted file mode 100644 index c3bbc450dbd0e..0000000000000 --- a/airbyte-webapp/src/components/LabeledToggle/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import LabeledToggle from "./LabeledToggle"; - -export default LabeledToggle; -export { LabeledToggle }; diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx index 160bbdb080df0..9ce0e992401bc 100644 --- a/airbyte-webapp/src/components/index.tsx +++ b/airbyte-webapp/src/components/index.tsx @@ -8,7 +8,7 @@ export * from "./Label"; export * from "./LabeledControl"; export * from "./LabeledInput"; export * from "./LabeledRadioButton"; -export * from "./LabeledToggle"; +export * from "./LabeledSwitch"; export * from "./Link"; export * from "./LoadingPage"; export * from "./MainPageWithScroll"; diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/MetricsPage/components/MetricsForm.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/MetricsPage/components/MetricsForm.tsx index 6b081bb5af79a..e2159338975de 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/MetricsPage/components/MetricsForm.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/MetricsPage/components/MetricsForm.tsx @@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl"; import styled from "styled-components"; import Label from "components/Label"; -import LabeledToggle from "components/LabeledToggle"; +import { LabeledSwitch } from "components/LabeledSwitch"; import { useConfig } from "config"; @@ -69,7 +69,7 @@ const MetricsForm: React.FC = ({ /> - } diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx index 4d42defb6663f..76e8c6c5bfe65 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx @@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl"; import styled from "styled-components"; import Label from "components/Label"; -import LabeledToggle from "components/LabeledToggle"; +import { LabeledSwitch } from "components/LabeledSwitch"; import FeedbackBlock from "../../../components/FeedbackBlock"; @@ -40,7 +40,7 @@ const NotificationsForm: React.FC = ({ - = ({ - = ({ webhook, onSubmit, successMes {({ field }: FieldProps) => ( - = ({ webhook, onSubmit, successMes {({ field }: FieldProps) => ( - = ({ if (property.type === "boolean") { return ( - } diff --git a/airbyte-webapp/src/views/Settings/PreferencesForm/PreferencesForm.tsx b/airbyte-webapp/src/views/Settings/PreferencesForm/PreferencesForm.tsx index 77717ac1d245c..f43edaf2d933d 100644 --- a/airbyte-webapp/src/views/Settings/PreferencesForm/PreferencesForm.tsx +++ b/airbyte-webapp/src/views/Settings/PreferencesForm/PreferencesForm.tsx @@ -7,7 +7,7 @@ import * as yup from "yup"; import { BigButton } from "components/CenteredPageComponents"; import Label from "components/Label"; import LabeledInput from "components/LabeledInput"; -import LabeledToggle from "components/LabeledToggle"; +import { LabeledSwitch } from "components/LabeledSwitch"; import { useConfig } from "config"; @@ -135,7 +135,7 @@ const PreferencesForm: React.FC = ({ {({ field }: FieldProps) => ( - } @@ -149,7 +149,7 @@ const PreferencesForm: React.FC = ({ {({ field }: FieldProps) => ( - } @@ -164,7 +164,7 @@ const PreferencesForm: React.FC = ({ {({ field }: FieldProps) => ( - } From 8d9e2b628eadd42f148cc6e4d66104e32b30c4c5 Mon Sep 17 00:00:00 2001 From: KC Date: Fri, 13 May 2022 12:01:18 -0400 Subject: [PATCH 12/21] Edmundo CR --- airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx index b9401af44931d..69756e9c2dd07 100644 --- a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx +++ b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import { CheckBox, Switch } from "components/base"; -interface LabeledToggleProps extends React.InputHTMLAttributes { +interface LabeledSwitchProps extends React.InputHTMLAttributes { message?: React.ReactNode; label?: React.ReactNode; checkbox?: boolean; @@ -34,7 +34,7 @@ const AdditionMessage = styled.span` } `; -export const LabeledSwitch: React.FC = (props) => ( +export const LabeledSwitch: React.FC = (props) => ( {props.checkbox ? ( From 0f70bced1b5450446734dc0111762f98cb2da6d1 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 19 May 2022 12:21:35 +0200 Subject: [PATCH 13/21] Import variables from SASS in TS --- airbyte-webapp/src/scss/export.module.scss | 69 ++++++++++++ airbyte-webapp/src/theme.ts | 116 +++++++++++---------- 2 files changed, 129 insertions(+), 56 deletions(-) create mode 100644 airbyte-webapp/src/scss/export.module.scss diff --git a/airbyte-webapp/src/scss/export.module.scss b/airbyte-webapp/src/scss/export.module.scss new file mode 100644 index 0000000000000..0aa7c55c119f4 --- /dev/null +++ b/airbyte-webapp/src/scss/export.module.scss @@ -0,0 +1,69 @@ +// This module is only meant to be imported in TypeScript to give access to all SCSS variables +// that TS needs access to while we're migrating from styled components to SCSS. +// New variables won't need to be added here, unless there would be any reason we need to access +// its value from TypeScript. + +@use "./colors"; +@use "./fonts"; + +:export { + // Colors + primaryColor: colors.$primaryColor; + primaryColor25: colors.$primaryColor25; + primaryColor12: colors.$primaryColor12; + mediumPrimaryColor: colors.$mediumPrimaryColor; + mediumPrimaryColor20: colors.$mediumPrimaryColor20; + darkPrimaryColor: colors.$darkPrimaryColor; + darkPrimaryColor60: colors.$darkPrimaryColor60; + brightPrimaryColor: colors.$brightPrimaryColor; + lightPrimaryColor: colors.$lightPrimaryColor; + + brightColor: colors.$brightColor; + + dangerColor: colors.$dangerColor; + dangerColor25: colors.$dangerColor25; + warningColor: colors.$warningColor; + warningBackgroundColor: colors.$warningBackgroundColor; + lightDangerColor: colors.$lightDangerColor; + dangerTransparentColor: colors.$dangerTransparentColor; + attentionColor: colors.$attentionColor; + successColor: colors.$successColor; + successColor10: colors.$successColor10; + successColor20: colors.$successColor20; + backgroundColor: colors.$backgroundColor; + shadowColor: colors.$shadowColor; + cardShadowColor: colors.$cardShadowColor; + + textColor: colors.$textColor; + lightTextColor: colors.$lightTextColor; + textColor90: colors.$textColor90; + darkBlue90: colors.$darkBlue90; + greyColor80: colors.$greyColor80; + greyColor70: colors.$greyColor70; + greyColor60: colors.$greyColor60; + greyColor55: colors.$greyColor55; + greyColor40: colors.$greyColor40; + greyColor30: colors.$greyColor30; + greyColor20: colors.$greyColor20; + greyColor10: colors.$greyColor10; + greyColor0: colors.$greyColor0; + + whiteColor: colors.$whiteColor; + blackColor: colors.$blackColor; + beigeColor: colors.$beigeColor; + darkBeigeColor: colors.$darkBeigeColor; + borderTableColor: colors.$borderTableColor; + lightTableColor: colors.$lightTableColor; + darkGreyColor: colors.$darkGreyColor; + redColor: colors.$redColor; + lightRedColor: colors.$lightRedColor; + redTransparentColor: colors.$redTransparentColor; + whiteColor5: colors.$whiteColor5; + transparentColor: colors.$transparentColor; + + // Fonts + regularFont: fonts.$regularFont; + highlightFont: fonts.$highlightFont; + codeFont: fonts.$codeFont; + italicFont: fonts.$italicFont; +} diff --git a/airbyte-webapp/src/theme.ts b/airbyte-webapp/src/theme.ts index 8844bbe9df708..42f4e1f812e2a 100644 --- a/airbyte-webapp/src/theme.ts +++ b/airbyte-webapp/src/theme.ts @@ -1,60 +1,64 @@ +import scss from "./scss/export.module.scss"; + +// Load all theme variables from our SCSS variables export const theme = { - primaryColor: "#615EFF", - primaryColor25: "rgba(98, 94, 255, .25)", - primaryColor12: "rgba(103, 87, 255, .12)", - mediumPrimaryColor: "#36348F", - mediumPrimaryColor20: "rgba(73, 68, 193, .2)", - darkPrimaryColor: "#010047", - darkPrimaryColor60: "rgba(1, 0, 71, .6)", - brightPrimaryColor: "#C5C4FF", - lightPrimaryColor: "#EDEBFF", - - brightColor: "#F7F6FF", - - dangerColor: "#FF5E7B", - warningColor: "#FFBF00", - warningBackgroundColor: "rgba(255, 191, 0, 0.2)", - lightDangerColor: "#FEEDEE", - dangerTransparentColor: "rgba(247, 77, 88, 0.1)", - attentionColor: "#FFBD2E", - successColor: "#67DAE1", - successColor10: "rgba(69, 230, 152, .1)", - successColor20: "rgba(69, 230, 152, .2)", - backgroundColor: "#FEF9F4", - shadowColor: "rgba(0, 0, 0, 0.25)", - cardShadowColor: "rgba(26, 25, 77, 0.12)", - - textColor: "#1A194D", - lightTextColor: "#AFAFC1", - textColor90: "rgba(26,26,33, .9)", - darkBlue90: "rgba(26, 25, 77, 0.9)", - greyColor80: "#353542", - greyColor70: "#555461", - greyColor60: "#6B6B75", - greyColor55: "#868696", - greyColor40: "#B3B3BD", - greyColor30: "#D9D9E0", - greyColor20: "#E8E8ED", - greyColor10: "#F0F0F5", - greyColor0: "#F7F7FA", - - whiteColor: "#FFFFFF", - blackColor: "#000000", - beigeColor: "#FEF9F4", - darkBeigeColor: "#FFEBD7", - borderTableColor: "#D3DCE4", - lightTableColor: "#F5F7F9", - darkGreyColor: "#8B8BA0", - redColor: "#FF6A4D", - lightRedColor: "#FF8870", - redTransparentColor: "rgba(255, 118, 94, 0.1)", - whiteColor5: "rgba(255, 255, 255, .5)", - transparentColor: "rgba(255, 255, 255, 0)", - - regularFont: "Inter, Arial, sans-serif", - highlightFont: "Montserrat, Arial, sans-serif", - codeFont: "Courier Prime, Arial, sans-serif", - italicFont: "Shrikhand, serif", + primaryColor: scss.primaryColor, + primaryColor25: scss.primaryColor25, + primaryColor12: scss.primaryColor12, + mediumPrimaryColor: scss.mediumPrimaryColor, + mediumPrimaryColor20: scss.mediumPrimaryColor20, + darkPrimaryColor: scss.darkPrimaryColor, + darkPrimaryColor60: scss.darkPrimaryColor60, + brightPrimaryColor: scss.brightPrimaryColor, + lightPrimaryColor: scss.lightPrimaryColor, + + brightColor: scss.brightColor, + + dangerColor: scss.dangerColor, + dangerColor25: scss.dangerColor25, + warningColor: scss.warningColor, + warningBackgroundColor: scss.warningBackgroundColor, + lightDangerColor: scss.lightDangerColor, + dangerTransparentColor: scss.dangerTransparentColor, + attentionColor: scss.attentionColor, + successColor: scss.successColor, + successColor10: scss.successColor10, + successColor20: scss.successColor20, + backgroundColor: scss.backgroundColor, + shadowColor: scss.shadowColor, + cardShadowColor: scss.cardShadowColor, + + textColor: scss.textColor, + lightTextColor: scss.lightTextColor, + textColor90: scss.textColor90, + darkBlue90: scss.darkBlue90, + greyColor80: scss.greyColor80, + greyColor70: scss.greyColor70, + greyColor60: scss.greyColor60, + greyColor55: scss.greyColor55, + greyColor40: scss.greyColor40, + greyColor30: scss.greyColor30, + greyColor20: scss.greyColor20, + greyColor10: scss.greyColor10, + greyColor0: scss.greyColor0, + + whiteColor: scss.whiteColor, + blackColor: scss.blackColor, + beigeColor: scss.beigeColor, + darkBeigeColor: scss.darkBeigeColor, + borderTableColor: scss.borderTableColor, + lightTableColor: scss.lightTableColor, + darkGreyColor: scss.darkGreyColor, + redColor: scss.redColor, + lightRedColor: scss.lightRedColor, + redTransparentColor: scss.redTransparentColor, + whiteColor5: scss.whiteColor5, + transparentColor: scss.transparentColor, + + regularFont: scss.regularFont, + highlightFont: scss.highlightFont, + codeFont: scss.codeFont, + italicFont: scss.italicFont, }; export const barChartColors = ["#E8E8ED", "#AFAFC1"]; From f9f7dc0e15532043323139b9f3494775efab48f7 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 19 May 2022 12:23:56 +0200 Subject: [PATCH 14/21] Minor adjustments --- .../src/components/EntityTable/components/StatusCell.tsx | 3 --- .../pages/ConnectionItemPage/components/EnabledControl.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx index 37d687f9127a1..93a82ac6296be 100644 --- a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx +++ b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx @@ -35,9 +35,6 @@ const StatusCell: React.FC = ({ enabled, isManual, id, onChangeStatus, i }; if (!isManual) { - // 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. return ; } diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx index 747c30535e05d..aca90e883f0a3 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx @@ -61,8 +61,8 @@ const EnabledControl: React.FC = ({ connection, disabled, f frequency: frequencyText, }); } finally { + setLoading(false); } - setLoading(false); }; return ( From 501957929a40904bfe578c729103ccf4958c371e Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 19 May 2022 13:09:21 +0200 Subject: [PATCH 15/21] Refactor code --- .../images => src/components/base/Switch}/Progress.svg | 0 .../components/base/Switch}/ProgressReverse.svg | 0 .../src/components/base/Switch/Switch.module.scss | 9 +++++---- airbyte-webapp/src/scss/_variables.scss | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) rename airbyte-webapp/{public/images => src/components/base/Switch}/Progress.svg (100%) rename airbyte-webapp/{public/images => src/components/base/Switch}/ProgressReverse.svg (100%) create mode 100644 airbyte-webapp/src/scss/_variables.scss diff --git a/airbyte-webapp/public/images/Progress.svg b/airbyte-webapp/src/components/base/Switch/Progress.svg similarity index 100% rename from airbyte-webapp/public/images/Progress.svg rename to airbyte-webapp/src/components/base/Switch/Progress.svg diff --git a/airbyte-webapp/public/images/ProgressReverse.svg b/airbyte-webapp/src/components/base/Switch/ProgressReverse.svg similarity index 100% rename from airbyte-webapp/public/images/ProgressReverse.svg rename to airbyte-webapp/src/components/base/Switch/ProgressReverse.svg diff --git a/airbyte-webapp/src/components/base/Switch/Switch.module.scss b/airbyte-webapp/src/components/base/Switch/Switch.module.scss index debc4bac89967..988860e191bc6 100644 --- a/airbyte-webapp/src/components/base/Switch/Switch.module.scss +++ b/airbyte-webapp/src/components/base/Switch/Switch.module.scss @@ -1,4 +1,5 @@ @use "../../../scss/colors"; +@use "../../../scss/variables"; .switch { position: relative; @@ -28,12 +29,12 @@ } &.loading { - background: url("../../../../public/images/ProgressReverse.svg"); + background: url("./ProgressReverse.svg"); } } &:not(:checked) + .slider.loading { - background: url("../../../../public/images/Progress.svg"); + background: url("./Progress.svg"); } &:disabled + .slider { @@ -50,7 +51,7 @@ right: 0; bottom: 0; background: colors.$greyColor20; - transition: 0.3s; + transition: variables.$transition; border-radius: 19px; &.small:before { @@ -67,7 +68,7 @@ left: 1px; top: 1px; background: colors.$whiteColor; - transition: 0.3s; + transition: variables.$transition; border-radius: 50%; } } diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss new file mode 100644 index 0000000000000..6e21721b3bfa2 --- /dev/null +++ b/airbyte-webapp/src/scss/_variables.scss @@ -0,0 +1 @@ +$transition: 0.3s; From a685bf22d43f1ea3608f462c0a55e77946685b5c Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 19 May 2022 15:58:26 +0200 Subject: [PATCH 16/21] Adjust styling to discussion with Nico --- .../components/base/Switch/Switch.module.scss | 62 +++++++++++++++---- 1 file changed, 50 insertions(+), 12 deletions(-) diff --git a/airbyte-webapp/src/components/base/Switch/Switch.module.scss b/airbyte-webapp/src/components/base/Switch/Switch.module.scss index 988860e191bc6..d1618eb2010a6 100644 --- a/airbyte-webapp/src/components/base/Switch/Switch.module.scss +++ b/airbyte-webapp/src/components/base/Switch/Switch.module.scss @@ -1,11 +1,21 @@ @use "../../../scss/colors"; @use "../../../scss/variables"; +@mixin knobTransform($position, $small: false) { + @if $position == left { + transform: translateX(0); + } @else if $small { + transform: translateX(10px); + } @else { + transform: translateX(18px); + } +} + .switch { position: relative; display: inline-block; width: 42px; - height: 24px; + height: 26px; &.small { width: 28px; @@ -18,23 +28,49 @@ height: 0; &:checked + .slider { - background: colors.$primaryColor; + background-color: colors.$primaryColor; &:before { - transform: translateX(18px); + @include knobTransform(right, false); } &.small:before { - transform: translateX(10px); + @include knobTransform(right, true); } &.loading { - background: url("./ProgressReverse.svg"); + background-image: url("./ProgressReverse.svg"); + + &:before { + @include knobTransform(left, false); + } + + &.small:before { + @include knobTransform(left, true); + } } } - &:not(:checked) + .slider.loading { - background: url("./Progress.svg"); + &:not(:checked) + .slider { + &:before { + @include knobTransform(left, false); + } + + &.small:before { + @include knobTransform(left, true); + } + + &.loading { + background-image: url("./Progress.svg"); + + &:before { + @include knobTransform(right, false); + } + + &.small:before { + @include knobTransform(right, true); + } + } } &:disabled + .slider { @@ -52,7 +88,8 @@ bottom: 0; background: colors.$greyColor20; transition: variables.$transition; - border-radius: 19px; + border-radius: 20px; + border: 1px solid colors.$greyColor30; &.small:before { height: 16px; @@ -63,13 +100,14 @@ position: absolute; z-index: 1; content: ""; - height: 22px; - width: 22px; - left: 1px; - top: 1px; + height: 24px; + width: 24px; + left: -1px; + top: -1px; background: colors.$whiteColor; transition: variables.$transition; border-radius: 50%; + border: 1px solid colors.$greyColor30; } } } From 0d3990383eba453306278e0f914afa2cbd892246 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Fri, 20 May 2022 14:22:24 -0400 Subject: [PATCH 17/21] invalidate connection on source and destination item pages when updating status --- .../components/EntityTable/components/StatusCell.tsx | 12 ++++++------ .../components/DestinationConnectionTable.tsx | 6 +++++- .../components/SourceConnectionTable.tsx | 6 +++++- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx index 93a82ac6296be..d67c429036354 100644 --- a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx +++ b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx @@ -29,13 +29,13 @@ const StatusCell: React.FC = ({ enabled, isManual, id, onChangeStatus, i await onSync(id); }, []); - const OnToggleClick = (event: React.SyntheticEvent) => { - event.stopPropagation(); - onChangeStatus(id); - }; - if (!isManual) { - return ; + const onSwitchChange = (event: React.SyntheticEvent) => { + event.stopPropagation(); + onChangeStatus(id); + }; + + return ; } if (isSyncing) { diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx index bade037bc5efa..573b2ec384adc 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx @@ -1,10 +1,12 @@ import React, { useCallback } from "react"; +import { useQueryClient } from "react-query"; import { ConnectionTable } from "components/EntityTable"; import useSyncActions from "components/EntityTable/hooks"; import { ITableDataItem } from "components/EntityTable/types"; import { getConnectionTableData } from "components/EntityTable/utils"; +import { invalidateConnectionsList } from "hooks/services/useConnectionHook"; import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; @@ -18,6 +20,7 @@ type IProps = { const DestinationConnectionTable: React.FC = ({ connections }) => { const { push } = useRouter(); + const queryClient = useQueryClient(); const { changeStatus, syncManualConnection } = useSyncActions(); const { sourceDefinitions } = useSourceDefinitionList(); @@ -31,9 +34,10 @@ const DestinationConnectionTable: React.FC = ({ connections }) => { if (connection) { await changeStatus(connection); + await invalidateConnectionsList(queryClient); } }, - [changeStatus, connections] + [changeStatus, connections, queryClient] ); const onSync = useCallback( diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx index 131965dd726eb..3badeda1ca1b8 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx @@ -1,10 +1,12 @@ import React, { useCallback } from "react"; +import { useQueryClient } from "react-query"; import { ConnectionTable } from "components/EntityTable"; import useSyncActions from "components/EntityTable/hooks"; import { ITableDataItem } from "components/EntityTable/types"; import { getConnectionTableData } from "components/EntityTable/utils"; +import { invalidateConnectionsList } from "hooks/services/useConnectionHook"; import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; @@ -18,6 +20,7 @@ type IProps = { const SourceConnectionTable: React.FC = ({ connections }) => { const { push } = useRouter(); + const queryClient = useQueryClient(); const { changeStatus, syncManualConnection } = useSyncActions(); const { sourceDefinitions } = useSourceDefinitionList(); @@ -32,9 +35,10 @@ const SourceConnectionTable: React.FC = ({ connections }) => { if (connection) { await changeStatus(connection); + await invalidateConnectionsList(queryClient); } }, - [changeStatus, connections] + [changeStatus, connections, queryClient] ); const onSync = useCallback( From 981c20a6dab21701a424568f1c6c5be0cc666656 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Fri, 20 May 2022 14:43:48 -0400 Subject: [PATCH 18/21] Fix switch loading status in NotificationForm --- .../components/NotificationsForm.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx index 76e8c6c5bfe65..aa46bfb30f7fd 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/NotificationsForm.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { FormattedMessage } from "react-intl"; import styled from "styled-components"; @@ -33,6 +33,16 @@ const NotificationsForm: React.FC = ({ errorMessage, isLoading, }) => { + const [securityUpdatesUpdating, setSecurityUpdatesUpdating] = useState(false); + const [newsletterUpdating, setNewsletterUpdating] = useState(false); + + useEffect(() => { + if (!isLoading) { + setSecurityUpdatesUpdating(false); + setNewsletterUpdating(false); + } + }, [isLoading]); + return ( <> @@ -44,9 +54,10 @@ const NotificationsForm: React.FC = ({ name="securityUpdates" checked={preferencesValues.securityUpdates} disabled={isLoading} - loading={isLoading} + loading={securityUpdatesUpdating} label={} onChange={(event) => { + setSecurityUpdatesUpdating(true); onChange({ securityUpdates: event.target.checked, news: preferencesValues.news, @@ -60,9 +71,10 @@ const NotificationsForm: React.FC = ({ name="newsletter" checked={preferencesValues.news} disabled={isLoading} - loading={isLoading} + loading={newsletterUpdating} label={} onChange={(event) => { + setNewsletterUpdating(true); onChange({ news: event.target.checked, securityUpdates: preferencesValues.securityUpdates, From 1a2b3043cb30a29bf2e23020ed02e7df48799604 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 23 May 2022 14:42:04 -0400 Subject: [PATCH 19/21] Update classnames in package-lock --- airbyte-webapp/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json index 234b86bfaf052..33b4de84b5f29 100644 --- a/airbyte-webapp/package-lock.json +++ b/airbyte-webapp/package-lock.json @@ -18933,9 +18933,9 @@ } }, "node_modules/classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/clean-css": { "version": "4.2.4", @@ -62935,9 +62935,9 @@ } }, "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "clean-css": { "version": "4.2.4", From 2ec89162337ea4ea48ab97e4c9c9754e01a15103 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 23 May 2022 15:12:38 -0400 Subject: [PATCH 20/21] While updating the connection, disable reset and sync buttons --- .../components/EnabledControl.tsx | 57 +++++++++---------- .../components/StatusMainInfo.tsx | 9 ++- .../components/StatusView.tsx | 7 ++- 3 files changed, 41 insertions(+), 32 deletions(-) diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx index aca90e883f0a3..acb3f1910d7d8 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx @@ -1,5 +1,6 @@ -import React, { useState } from "react"; +import React from "react"; import { FormattedMessage } from "react-intl"; +import { useUpdateEffect } from "react-use"; import styled from "styled-components"; import { Switch } from "components"; @@ -30,41 +31,39 @@ interface EnabledControlProps { connection: WebBackendConnectionRead; disabled?: boolean; frequencyText?: string; + onStatusUpdating?: (updating: boolean) => void; } -const EnabledControl: React.FC = ({ connection, disabled, frequencyText }) => { - const { mutateAsync: updateConnection } = useUpdateConnection(); +const EnabledControl: React.FC = ({ connection, disabled, frequencyText, onStatusUpdating }) => { + const { mutateAsync: updateConnection, isLoading } = useUpdateConnection(); const analyticsService = useAnalyticsService(); - const [loading, setLoading] = useState(false); - const onChangeStatus = async () => { - setLoading(true); - try { - await updateConnection({ - connectionId: connection.connectionId, - syncCatalog: connection.syncCatalog, - schedule: connection.schedule, - namespaceDefinition: connection.namespaceDefinition, - namespaceFormat: connection.namespaceFormat, - prefix: connection.prefix, - operations: connection.operations, - status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, - }); + await updateConnection({ + connectionId: connection.connectionId, + syncCatalog: connection.syncCatalog, + schedule: connection.schedule, + namespaceDefinition: connection.namespaceDefinition, + namespaceFormat: connection.namespaceFormat, + prefix: connection.prefix, + operations: connection.operations, + status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active, + }); - analyticsService.track("Source - Action", { - action: connection.status === ConnectionStatus.active ? "Disable connection" : "Reenable connection", - connector_source: connection.source?.sourceName, - connector_source_id: connection.source?.sourceDefinitionId, - connector_destination: connection.destination?.name, - connector_destination_definition_id: connection.destination?.destinationDefinitionId, - frequency: frequencyText, - }); - } finally { - setLoading(false); - } + analyticsService.track("Source - Action", { + action: connection.status === ConnectionStatus.active ? "Disable connection" : "Reenable connection", + connector_source: connection.source?.sourceName, + connector_source_id: connection.source?.sourceDefinitionId, + connector_destination: connection.destination?.name, + connector_destination_definition_id: connection.destination?.destinationDefinitionId, + frequency: frequencyText, + }); }; + useUpdateEffect(() => { + onStatusUpdating?.(isLoading); + }, [isLoading]); + return ( @@ -74,7 +73,7 @@ const EnabledControl: React.FC = ({ connection, disabled, f disabled={disabled} onChange={onChangeStatus} checked={connection.status === ConnectionStatus.active} - loading={loading} + loading={isLoading} id="toggle-enabled-source" /> diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx index fc5cab5f4702b..e88f0a957efa8 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx @@ -43,6 +43,7 @@ interface StatusMainInfoProps { destinationDefinition?: DestinationDefinitionRead; sourceDefinition?: SourceDefinitionRead; allowSync?: boolean; + onStatusUpdating?: (updating: boolean) => void; } export const StatusMainInfo: React.FC = ({ @@ -51,6 +52,7 @@ export const StatusMainInfo: React.FC = ({ destinationDefinition, sourceDefinition, allowSync, + onStatusUpdating, }) => { return ( @@ -80,7 +82,12 @@ export const StatusMainInfo: React.FC = ({ {frequencyText} {connection.status !== ConnectionStatus.deprecated && ( - + )} diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx index 060a8a3078460..178a85b153fbb 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx @@ -66,6 +66,8 @@ const StatusView: React.FC = ({ connection, frequencyText }) => configTypes: ["sync", "reset_connection"], }); + const [isStatusUpdating, setStatusUpdating] = useState(false); + const { mutateAsync: resetConnection } = useResetConnection(); const { mutateAsync: syncConnection } = useSyncConnection(); @@ -80,6 +82,7 @@ const StatusView: React.FC = ({ connection, frequencyText }) => sourceDefinition={sourceDefinition} destinationDefinition={destinationDefinition} allowSync={allowSync} + onStatusUpdating={setStatusUpdating} /> = ({ connection, frequencyText }) => {connection.status === ConnectionStatus.active && (
- startAction({ action: onSync })} From 1af095d7a9831a26496f0b6dad15b35bef199c72 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Mon, 23 May 2022 15:18:02 -0400 Subject: [PATCH 21/21] Disable switch while loading --- airbyte-webapp/src/components/base/Switch/Switch.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/base/Switch/Switch.tsx b/airbyte-webapp/src/components/base/Switch/Switch.tsx index cf7fa5662c86e..6674b122cf6d4 100644 --- a/airbyte-webapp/src/components/base/Switch/Switch.tsx +++ b/airbyte-webapp/src/components/base/Switch/Switch.tsx @@ -17,9 +17,17 @@ export const Switch: React.FC = ({ loading, small, checked, value, [styles.small]: small, [styles.loading]: loading, }); + return ( );