From bc646ba19e4e2e00bf92ca2e8e6842dd539c6ac9 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:17:06 -0400 Subject: [PATCH 01/24] hover, active states. transition. --- airbyte-webapp/src/scss/_variables.scss | 2 + .../views/layout/SideBar/SideBar.module.scss | 37 ++++ .../src/views/layout/SideBar/SideBar.tsx | 193 ++++++++---------- 3 files changed, 121 insertions(+), 111 deletions(-) create mode 100644 airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index 07297d51d0c9..ba13a5604f77 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -13,3 +13,5 @@ $spacing-lg: 15px; $spacing-xl: 20px; $spacing-2xl: 40px; $spacing-page-bottom: 150px; +$transition-out: all $transition ease-out; +$defaultBottomMargin: 150px; diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss new file mode 100644 index 000000000000..aada49c75396 --- /dev/null +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -0,0 +1,37 @@ +@use "../../../scss/colors"; +@use "../../../scss/variables"; + +.menuItem { + color: colors.$greyColor30; + width: 100%; + cursor: pointer; + border-radius: 4px; + height: 70px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-weight: normal; + font-size: 12px; + line-height: 15px; + margin-top: 7px; + text-decoration: none; + position: relative; + + &:hover { + background: #262963; //todo: update to use palette when palette up to date + transition: variables.$transition-out; + } + + &.activated { + color: colors.$whiteColor; + background: colors.$primaryColor; + transition: variables.$transition-out; + + &:hover { + color: colors.$whiteColor; + background: #7f7eff; //todo: update to use palette when palette up to date + transition: variables.$transition-out; + } + } +} diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 80d20629b5d5..f9fbeda041fc 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -1,5 +1,6 @@ import { faRocket } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; import { NavLink } from "react-router-dom"; @@ -20,6 +21,7 @@ import SettingsIcon from "./components/SettingsIcon"; import SidebarPopout from "./components/SidebarPopout"; import SourceIcon from "./components/SourceIcon"; import { NotificationIndicator } from "./NotificationIndicator"; +import styles from "./SideBar.module.scss"; const Bar = styled.nav` width: 100px; @@ -41,45 +43,6 @@ const Menu = styled.ul` width: 100%; `; -const MenuItem = styled(NavLink)` - color: ${({ theme }) => theme.greyColor30}; - width: 100%; - cursor: pointer; - border-radius: 4px; - height: 70px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-weight: normal; - font-size: 12px; - line-height: 15px; - margin-top: 7px; - text-decoration: none; - position: relative; - - &.active { - color: ${({ theme }) => theme.whiteColor}; - background: ${({ theme }) => theme.primaryColor}; - } -`; - -const MenuLinkItem = styled.a` - color: ${({ theme }) => theme.greyColor30}; - width: 100%; - cursor: pointer; - height: 70px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-weight: normal; - font-size: 12px; - line-height: 15px; - margin-top: 7px; - text-decoration: none; -`; - const Text = styled.div` margin-top: 7px; `; @@ -93,94 +56,102 @@ const SideBar: React.FC = () => { const config = useConfig(); const workspace = useCurrentWorkspace(); + const menuItemStyle = (isActive: boolean) => { + console.log(isActive); + return classnames(styles.menuItem, { [styles.activated]: isActive }); + }; + return ( - -
- - logo - - - {workspace.displaySetupWizard ? ( + <> + +
+ + logo + + + {workspace.displaySetupWizard ? ( +
  • + menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + + + + + +
    • + ) : null}
  • - - + menuItemStyle(isActive)} to={RoutePaths.Connections}> + - + - +
    • - ) : null} +
  • + menuItemStyle(isActive)} to={RoutePaths.Source}> + + + + + +
    • +
  • + menuItemStyle(isActive)} to={RoutePaths.Destination}> + + + + + +
    • +     +
    +
  • - - + + - + - +
  • - - - - - - + + {({ onOpen }) => ( +
    + + + + +
    + )} +
    • +
  • - - + menuItemStyle(isActive)} + to={RoutePaths.Settings} + // isActive={(_, location) => + // location.pathname.startsWith(RoutePaths.Settings) + // } + > + + + + - + - +
    • + {config.version ? ( +
  • + +
    • + ) : null}     -
    - -
  • - - - - - - -
    • -
  • - - {({ onOpen }) => ( - - - - - - - )} - -
    • - -
  • - - // location.pathname.startsWith(RoutePaths.Settings) - // } - > - - - - - - - - -
    • - {config.version ? ( -
  • - -
    • - ) : null} -     -     + + ); }; From 81e119c1d60123d496a6b40ee9e5fe7879532f77 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:38:25 -0400 Subject: [PATCH 02/24] add parent behavior --- .../src/views/layout/SideBar/SideBar.module.scss | 12 +++++++++++- .../src/views/layout/SideBar/SideBar.tsx | 14 +++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index aada49c75396..109685543ca2 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -23,7 +23,7 @@ transition: variables.$transition-out; } - &.activated { + &.active { color: colors.$whiteColor; background: colors.$primaryColor; transition: variables.$transition-out; @@ -34,4 +34,14 @@ transition: variables.$transition-out; } } + + &.activeChild { + color: colors.$whiteColor; + background: #353b7b; + + &:hover { + color: colors.$whiteColor; + background: #565c94; + } + } } diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index f9fbeda041fc..b119a8ee90ab 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -11,6 +11,7 @@ import Version from "components/Version"; import { useConfig } from "config"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; +import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../pages/routePaths"; import ConnectionsIcon from "./components/ConnectionsIcon"; @@ -55,10 +56,11 @@ const HelpIcon = styled(FontAwesomeIcon)` const SideBar: React.FC = () => { const config = useConfig(); const workspace = useCurrentWorkspace(); + const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - console.log(isActive); - return classnames(styles.menuItem, { [styles.activated]: isActive }); + const isChild = location.pathname.split("/").length > 4; + return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; return ( @@ -128,13 +130,7 @@ const SideBar: React.FC = () => {
  • - menuItemStyle(isActive)} - to={RoutePaths.Settings} - // isActive={(_, location) => - // location.pathname.startsWith(RoutePaths.Settings) - // } - > + menuItemStyle(isActive)} to={RoutePaths.Settings}> From c565ba7179bb251d48dcd7146ba8a4774af49e25 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:42:12 -0400 Subject: [PATCH 03/24] remove extra jsx fragment --- .../src/views/layout/SideBar/SideBar.tsx | 134 +++++++++--------- 1 file changed, 66 insertions(+), 68 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index b119a8ee90ab..f1e3809d2c5b 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -59,95 +59,93 @@ const SideBar: React.FC = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - const isChild = location.pathname.split("/").length > 4; + const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; return ( - <> - -
    - - logo - - - {workspace.displaySetupWizard ? ( -
  • - menuItemStyle(isActive)} to={RoutePaths.Onboarding}> - - - - - -
    • - ) : null} -
  • - menuItemStyle(isActive)} to={RoutePaths.Connections}> - - - - - -
    • -
  • - menuItemStyle(isActive)} to={RoutePaths.Source}> - - - - - -
    • + +
    + + logo + + + {workspace.displaySetupWizard ? (
  • - menuItemStyle(isActive)} to={RoutePaths.Destination}> - + menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + - +
    • -     -
    - + ) : null}
  • - - + menuItemStyle(isActive)} to={RoutePaths.Connections}> + - + - +
  • - - {({ onOpen }) => ( -
    - - - - -
    - )} -     + menuItemStyle(isActive)} to={RoutePaths.Source}> + + + + +
    • -
  • - menuItemStyle(isActive)} to={RoutePaths.Settings}> - - - - + menuItemStyle(isActive)} to={RoutePaths.Destination}> + - +
    • - {config.version ? ( -
  • - -
    • - ) : null}     -     - +
    + +
  • + + + + + + +
    • +
  • + + {({ onOpen }) => ( +
    + + + + +
    + )} +     +
    • + +
  • + menuItemStyle(isActive)} to={RoutePaths.Settings}> + + + + + + + + +
    • + {config.version ? ( +
  • + +
    • + ) : null} +     +     ); }; From b3d11c1c720c2d13c38696d92c05b9232537e382 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 14:54:53 -0400 Subject: [PATCH 04/24] basic behavior for cloud --- .../cloud/views/layout/SideBar/SideBar.tsx | 56 ++++++------------- .../views/layout/SideBar/Sidebar.module.scss | 1 + 2 files changed, 18 insertions(+), 39 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 0a2e2bc61d30..6dc7f8988259 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -25,6 +25,7 @@ import SourceIcon from "views/layout/SideBar/components/SourceIcon"; import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator"; import { RoutePaths } from "../../../../../pages/routePaths"; +import styles from "./Sidebar.module.scss"; const CreditsIcon = styled(FontAwesomeIcon)` font-size: 21px; @@ -51,29 +52,6 @@ const Menu = styled.ul` width: 100%; `; -const MenuItem = styled(NavLink)` - color: ${({ theme }) => theme.greyColor30}; - width: 100%; - cursor: pointer; - border-radius: 4px; - height: 70px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-weight: normal; - font-size: 12px; - line-height: 15px; - margin-top: 7px; - text-decoration: none; - position: relative; - - &.active { - color: ${({ theme }) => theme.whiteColor}; - background: ${({ theme }) => theme.primaryColor}; - } -`; - const Text = styled.div` margin-top: 7px; `; @@ -114,58 +92,58 @@ const SideBar: React.FC = () => { {workspace.displaySetupWizard ? (
  • - + - +
    • ) : null}
  • - + - +
  • - + - +
  • - + - +
  • - + - +
  • {({ onOpen }) => ( - +
    - +
    )}
    • @@ -187,17 +165,17 @@ const SideBar: React.FC = () => { ]} > {({ onOpen }) => ( - +
    - +
    )}
  • - + @@ -207,7 +185,7 @@ const SideBar: React.FC = () => { - +
    • diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss new file mode 100644 index 000000000000..b8e52284341c --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss @@ -0,0 +1 @@ +@forward "../../../../../views/layout/SideBar/SideBar.module.scss"; From 483cc295d62c60cf20e7950bfe8c168ebd21e99e Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 15 Jun 2022 12:23:03 -0400 Subject: [PATCH 05/24] add focus-visible --- .../src/views/layout/SideBar/SideBar.module.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index 109685543ca2..83eb85c249c3 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -18,7 +18,8 @@ text-decoration: none; position: relative; - &:hover { + &:hover, + &:focus-visible { background: #262963; //todo: update to use palette when palette up to date transition: variables.$transition-out; } @@ -28,7 +29,8 @@ background: colors.$primaryColor; transition: variables.$transition-out; - &:hover { + &:hover, + &:focus-visible { color: colors.$whiteColor; background: #7f7eff; //todo: update to use palette when palette up to date transition: variables.$transition-out; @@ -39,7 +41,8 @@ color: colors.$whiteColor; background: #353b7b; - &:hover { + &:hover, + &:focus-visible { color: colors.$whiteColor; background: #565c94; } From 6b37741fdde7d754f74779bac9826ad2d9f8deb7 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 28 Jun 2022 10:50:10 -0400 Subject: [PATCH 06/24] add changes to cloud, update to new theme --- .../cloud/views/layout/SideBar/SideBar.tsx | 21 +++++++++++++------ .../views/layout/SideBar/SideBar.module.scss | 20 +++++++++--------- .../src/views/layout/SideBar/SideBar.tsx | 3 ++- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 6dc7f8988259..56f9487a2353 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -1,6 +1,7 @@ import { faStar } from "@fortawesome/free-regular-svg-icons"; import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; import React from "react"; import { FormattedMessage, FormattedNumber } from "react-intl"; import { NavLink } from "react-router-dom"; @@ -10,6 +11,7 @@ import { Link } from "components"; import { FeatureItem, WithFeature } from "hooks/services/Feature"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; +import useRouter from "hooks/useRouter"; import { CloudRoutes } from "packages/cloud/cloudRoutes"; import { useIntercom } from "packages/cloud/services/thirdParty/intercom"; import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService"; @@ -79,6 +81,13 @@ const SideBar: React.FC = () => { const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId); const { show } = useIntercom(); const handleChatUs = () => show(); + const { location } = useRouter(); + + const menuItemStyle = (isActive: boolean) => { + console.log(isActive); + const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); + return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); + }; return ( @@ -92,7 +101,7 @@ const SideBar: React.FC = () => { {workspace.displaySetupWizard ? (
  • - + menuItemStyle(isActive)} to={RoutePaths.Onboarding}> @@ -101,7 +110,7 @@ const SideBar: React.FC = () => {
    • ) : null}
  • - + menuItemStyle(isActive)} to={RoutePaths.Connections}> @@ -109,7 +118,7 @@ const SideBar: React.FC = () => {
  • - + menuItemStyle(isActive)} to={RoutePaths.Source}> @@ -117,7 +126,7 @@ const SideBar: React.FC = () => {
  • - + menuItemStyle(isActive)} to={RoutePaths.Destination}> @@ -128,7 +137,7 @@ const SideBar: React.FC = () => {
  • - + menuItemStyle(isActive)} to={CloudRoutes.Credits}> @@ -175,7 +184,7 @@ const SideBar: React.FC = () => {
  • - + menuItemStyle(isActive)} to={RoutePaths.Settings}> diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index 83eb85c249c3..505821472936 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -2,7 +2,7 @@ @use "../../../scss/variables"; .menuItem { - color: colors.$greyColor30; + color: colors.$grey-30; width: 100%; cursor: pointer; border-radius: 4px; @@ -20,31 +20,31 @@ &:hover, &:focus-visible { - background: #262963; //todo: update to use palette when palette up to date + background: colors.$dark-blue-800; transition: variables.$transition-out; } &.active { - color: colors.$whiteColor; - background: colors.$primaryColor; + color: colors.$white; + background: colors.$blue-400; transition: variables.$transition-out; &:hover, &:focus-visible { - color: colors.$whiteColor; - background: #7f7eff; //todo: update to use palette when palette up to date + color: colors.$white; + background: colors.$blue-300; transition: variables.$transition-out; } } &.activeChild { - color: colors.$whiteColor; - background: #353b7b; + color: colors.$white; + background: colors.$dark-blue-600; &:hover, &:focus-visible { - color: colors.$whiteColor; - background: #565c94; + color: colors.$white; + background: colors.$dark-blue-400; } } } diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index f1e3809d2c5b..2c14ae35a1ec 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -59,10 +59,11 @@ const SideBar: React.FC = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { + console.log(isActive); const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; - + console.log("ok"); return (
    From 933ea4b49927a61c2e7c72c48e11c6e54661fa0d Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 15:25:14 -0400 Subject: [PATCH 07/24] import other stylesheet --- .../cloud/views/layout/SideBar/SideBar.tsx | 2 +- .../views/layout/SideBar/Sidebar.module.scss | 1 - .../CatalogDiffModal/components/FieldRow.tsx | 54 +++++++++++++++++++ 3 files changed, 55 insertions(+), 2 deletions(-) delete mode 100644 airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss create mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 56f9487a2353..3ded269ebadc 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -27,7 +27,7 @@ import SourceIcon from "views/layout/SideBar/components/SourceIcon"; import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator"; import { RoutePaths } from "../../../../../pages/routePaths"; -import styles from "./Sidebar.module.scss"; +import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; const CreditsIcon = styled(FontAwesomeIcon)` font-size: 21px; diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss deleted file mode 100644 index b8e52284341c..000000000000 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "../../../../../views/layout/SideBar/SideBar.module.scss"; diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx new file mode 100644 index 000000000000..569566cc4524 --- /dev/null +++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx @@ -0,0 +1,54 @@ +import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classnames from "classnames"; + +import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; + +import styles from "./StreamRow.module.scss"; + +interface StreamRowProps { + item: StreamTransform; + catalog: AirbyteCatalog; +} + +export const SyncModeBox: React.FC<{ syncModeString: string; mode: "remove" | "update" }> = ({ + syncModeString, + mode, +}) => { + const syncModeBoxStyle = classnames(styles.syncModeBox, { + [styles.remove]: mode === "remove", + }); + return
    {syncModeString}
    ; +}; + +export const StreamRow: React.FC = ({ item, catalog }) => { + const diffType = item.transformType.includes("add") ? "remove" : "add"; + const rowStyle = classnames(styles.row, { + [styles.add]: diffType === "add", + [styles.remove]: diffType === "remove", + }); + + const iconStyle = classnames(styles.icon, { + [styles.plus]: diffType === "add", + [styles.minus]: diffType === "remove", + }); + + const streamConfig = catalog.streams.find( + (stream) => + stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name + )?.config; + + const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; + + return ( +
    + {diffType === "add" ? ( + + ) : ( + + )} +
    {item.streamDescriptor.name}
    + {diffType === "remove" && streamConfig?.selected && } +
    + ); +}; From 6cd5613d618076c8acf15b2ca4b62f8c99ad1314 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:17:06 -0400 Subject: [PATCH 08/24] hover, active states. transition. --- .../views/layout/SideBar/SideBar.module.scss | 2 +- .../src/views/layout/SideBar/SideBar.tsx | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index 505821472936..f470430d70bf 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -2,7 +2,7 @@ @use "../../../scss/variables"; .menuItem { - color: colors.$grey-30; + color: colors.$greyColor30; width: 100%; cursor: pointer; border-radius: 4px; diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 2c14ae35a1ec..a9d1dbf4540a 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -14,7 +14,6 @@ import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../pages/routePaths"; -import ConnectionsIcon from "./components/ConnectionsIcon"; import DestinationIcon from "./components/DestinationIcon"; import DocsIcon from "./components/DocsIcon"; import OnboardingIcon from "./components/OnboardingIcon"; @@ -60,10 +59,9 @@ const SideBar: React.FC = () => { const menuItemStyle = (isActive: boolean) => { console.log(isActive); - const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); - return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); + return classnames(styles.menuItem, { [styles.activated]: isActive }); }; - console.log("ok"); + return (
    @@ -82,8 +80,8 @@ const SideBar: React.FC = () => {
    • ) : null}
  • - menuItemStyle(isActive)} to={RoutePaths.Connections}> - + menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + @@ -130,7 +128,13 @@ const SideBar: React.FC = () => {
  • - menuItemStyle(isActive)} to={RoutePaths.Settings}> + menuItemStyle(isActive)} + to={RoutePaths.Settings} + // isActive={(_, location) => + // location.pathname.startsWith(RoutePaths.Settings) + // } + > From d895358a5e014f2eb9ea8d0d8468071561820933 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:38:25 -0400 Subject: [PATCH 09/24] add parent behavior --- .../src/views/layout/SideBar/SideBar.tsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index a9d1dbf4540a..314f0e83349a 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -58,8 +58,8 @@ const SideBar: React.FC = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - console.log(isActive); - return classnames(styles.menuItem, { [styles.activated]: isActive }); + const isChild = location.pathname.split("/").length > 4; + return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; return ( @@ -80,7 +80,7 @@ const SideBar: React.FC = () => {
    • ) : null}
  • - menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + menuItemStyle(isActive)} to={RoutePaths.Connection}> @@ -100,6 +100,31 @@ const SideBar: React.FC = () => { + + + +
    • +
  • + + {({ onOpen }) => ( +
    + + + + +
    + )} +     +
    • + +
  • + menuItemStyle(isActive)} to={RoutePaths.Settings}> + + + + + +
    • From fbb682e4227048c917a4f2e36aaa131de353350f Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 13:42:12 -0400 Subject: [PATCH 10/24] remove extra jsx fragment --- airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 314f0e83349a..327b8dc5fb07 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -22,6 +22,7 @@ import SidebarPopout from "./components/SidebarPopout"; import SourceIcon from "./components/SourceIcon"; import { NotificationIndicator } from "./NotificationIndicator"; import styles from "./SideBar.module.scss"; +import ConnectionsIcon from "./components/ConnectionsIcon"; const Bar = styled.nav` width: 100px; @@ -58,7 +59,7 @@ const SideBar: React.FC = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - const isChild = location.pathname.split("/").length > 4; + const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; @@ -80,8 +81,10 @@ const SideBar: React.FC = () => {
    • ) : null}
  • - menuItemStyle(isActive)} to={RoutePaths.Connection}> - + menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + + menuItemStyle(isActive)} to={RoutePaths.Connections}> + From bb67a6bbd642d0f479c1a6d15fa5a41437410e64 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 14 Jun 2022 14:54:53 -0400 Subject: [PATCH 11/24] basic behavior for cloud --- .../cloud/views/layout/SideBar/SideBar.tsx | 204 ------------------ .../views/layout/SideBar/Sidebar.module.scss | 1 + 2 files changed, 1 insertion(+), 204 deletions(-) create mode 100644 airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 3ded269ebadc..e69de29bb2d1 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -1,204 +0,0 @@ -import { faStar } from "@fortawesome/free-regular-svg-icons"; -import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classnames from "classnames"; -import React from "react"; -import { FormattedMessage, FormattedNumber } from "react-intl"; -import { NavLink } from "react-router-dom"; -import styled from "styled-components"; - -import { Link } from "components"; - -import { FeatureItem, WithFeature } from "hooks/services/Feature"; -import { useCurrentWorkspace } from "hooks/services/useWorkspace"; -import useRouter from "hooks/useRouter"; -import { CloudRoutes } from "packages/cloud/cloudRoutes"; -import { useIntercom } from "packages/cloud/services/thirdParty/intercom"; -import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService"; -import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout"; -import ChatIcon from "views/layout/SideBar/components/ChatIcon"; -import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon"; -import DestinationIcon from "views/layout/SideBar/components/DestinationIcon"; -import DocsIcon from "views/layout/SideBar/components/DocsIcon"; -import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon"; -import SettingsIcon from "views/layout/SideBar/components/SettingsIcon"; -import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout"; -import SourceIcon from "views/layout/SideBar/components/SourceIcon"; -import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator"; - -import { RoutePaths } from "../../../../../pages/routePaths"; -import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; - -const CreditsIcon = styled(FontAwesomeIcon)` - font-size: 21px; - line-height: 21px; -`; - -const Bar = styled.nav` - width: 100px; - min-width: 65px; - height: 100%; - background: ${({ theme }) => theme.darkPrimaryColor}; - padding: 23px 3px 15px 4px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: space-between; - position: relative; - z-index: 9999; -`; - -const Menu = styled.ul` - padding: 0; - margin: 20px 0 0; - width: 100%; -`; - -const Text = styled.div` - margin-top: 7px; -`; - -const WorkspaceButton = styled.div` - font-size: 9px; - line-height: 21px; - font-weight: 400; - height: 21px; - color: ${({ theme }) => theme.whiteColor}; - border-radius: 10px; - margin-top: 13px; - background: rgba(255, 255, 255, 0.2); - cursor: pointer; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0 8px; - text-align: center; -`; - -const SideBar: React.FC = () => { - const workspace = useCurrentWorkspace(); - const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId); - const { show } = useIntercom(); - const handleChatUs = () => show(); - const { location } = useRouter(); - - const menuItemStyle = (isActive: boolean) => { - console.log(isActive); - const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); - return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); - }; - - return ( - -
    - - logo - - - {({ onOpen, value }) => {value}} - - - {workspace.displaySetupWizard ? ( -
  • - menuItemStyle(isActive)} to={RoutePaths.Onboarding}> - - - - - -
    • - ) : null} -
  • - menuItemStyle(isActive)} to={RoutePaths.Connections}> - - - - - -
    • -
  • - menuItemStyle(isActive)} to={RoutePaths.Source}> - - - - - -
    • -
  • - menuItemStyle(isActive)} to={RoutePaths.Destination}> - - - - - -
    • -     -
    - -
  • - menuItemStyle(isActive)} to={CloudRoutes.Credits}> - - - - - -
    • -
  • - - {({ onOpen }) => ( -
    - - - - -
    - )} -     -
    • -
  • - - - - - - - ), - }, - ]} - > - {({ onOpen }) => ( -
    - - - - -
    - )} -     -
    • -
  • - menuItemStyle(isActive)} to={RoutePaths.Settings}> - - - - - - - - - - -
    • -     -     - ); -}; - -export default SideBar; diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss new file mode 100644 index 000000000000..b8e52284341c --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss @@ -0,0 +1 @@ +@forward "../../../../../views/layout/SideBar/SideBar.module.scss"; From bee2b3b027e4e40be5ae84fa8607d15007a9d8a7 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Tue, 28 Jun 2022 10:50:10 -0400 Subject: [PATCH 12/24] add changes to cloud, update to new theme --- airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss | 2 +- airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index f470430d70bf..505821472936 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -2,7 +2,7 @@ @use "../../../scss/variables"; .menuItem { - color: colors.$greyColor30; + color: colors.$grey-30; width: 100%; cursor: pointer; border-radius: 4px; diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 327b8dc5fb07..86535df9045f 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -59,10 +59,11 @@ const SideBar: React.FC = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { + console.log(isActive); const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; - + console.log("ok"); return (
    From d0f5b4ceceea54ba6a59224dde57a976fe55a461 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 29 Jun 2022 15:31:33 -0400 Subject: [PATCH 13/24] Update airbyte-webapp/src/views/layout/SideBar/SideBar.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 86535df9045f..78f310f4a6e6 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -63,7 +63,6 @@ const SideBar: React.FC = () => { const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; - console.log("ok"); return (
    From 0167cd24161aceffb1147cd574415dea6f897cf3 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 15:30:48 -0400 Subject: [PATCH 14/24] class name utility --- .../src/views/layout/SideBar/SideBar.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 78f310f4a6e6..0fdb191d0b49 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -63,6 +63,9 @@ const SideBar: React.FC = () => { const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; + + const navLinkClassName = ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive); + return (
    @@ -72,7 +75,7 @@ const SideBar: React.FC = () => { {workspace.displaySetupWizard ? (
  • - menuItemStyle(isActive)} to={RoutePaths.Onboarding}> + @@ -81,9 +84,13 @@ const SideBar: React.FC = () => {
    • ) : null}
  • +<<<<<<< HEAD menuItemStyle(isActive)} to={RoutePaths.Onboarding}> menuItemStyle(isActive)} to={RoutePaths.Connections}> +======= + +>>>>>>> 01edbe6da6 (class name utility) @@ -91,7 +98,7 @@ const SideBar: React.FC = () => {
  • - menuItemStyle(isActive)} to={RoutePaths.Source}> + @@ -99,7 +106,7 @@ const SideBar: React.FC = () => {
  • - menuItemStyle(isActive)} to={RoutePaths.Destination}> + @@ -156,6 +163,7 @@ const SideBar: React.FC = () => {
  • +<<<<<<< HEAD menuItemStyle(isActive)} to={RoutePaths.Settings} @@ -163,6 +171,9 @@ const SideBar: React.FC = () => { // location.pathname.startsWith(RoutePaths.Settings) // } > +======= + +>>>>>>> 01edbe6da6 (class name utility) From 6275da033885587c9acb12093847f6b80ce09fbb Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 15:43:27 -0400 Subject: [PATCH 15/24] consolidate classname logic to shared function --- .../cloud/views/layout/SideBar/SideBar.tsx | 198 ++++++++++++++++++ .../src/views/layout/SideBar/SideBar.tsx | 13 +- 2 files changed, 207 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index e69de29bb2d1..4b0a842a2082 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -0,0 +1,198 @@ +import { faStar } from "@fortawesome/free-regular-svg-icons"; +import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React from "react"; +import { FormattedMessage, FormattedNumber } from "react-intl"; +import { NavLink } from "react-router-dom"; +import styled from "styled-components"; + +import { Link } from "components"; + +import { FeatureItem, WithFeature } from "hooks/services/Feature"; +import { useCurrentWorkspace } from "hooks/services/useWorkspace"; +import { CloudRoutes } from "packages/cloud/cloudRoutes"; +import { useIntercom } from "packages/cloud/services/thirdParty/intercom"; +import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService"; +import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout"; +import ChatIcon from "views/layout/SideBar/components/ChatIcon"; +import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon"; +import DestinationIcon from "views/layout/SideBar/components/DestinationIcon"; +import DocsIcon from "views/layout/SideBar/components/DocsIcon"; +import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon"; +import SettingsIcon from "views/layout/SideBar/components/SettingsIcon"; +import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout"; +import SourceIcon from "views/layout/SideBar/components/SourceIcon"; +import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator"; +import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar"; + +import { RoutePaths } from "../../../../../pages/routePaths"; +import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; + +const CreditsIcon = styled(FontAwesomeIcon)` + font-size: 21px; + line-height: 21px; +`; + +const Bar = styled.nav` + width: 100px; + min-width: 65px; + height: 100%; + background: ${({ theme }) => theme.darkPrimaryColor}; + padding: 23px 3px 15px 4px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + z-index: 9999; +`; + +const Menu = styled.ul` + padding: 0; + margin: 20px 0 0; + width: 100%; +`; + +const Text = styled.div` + margin-top: 7px; +`; + +const WorkspaceButton = styled.div` + font-size: 9px; + line-height: 21px; + font-weight: 400; + height: 21px; + color: ${({ theme }) => theme.whiteColor}; + border-radius: 10px; + margin-top: 13px; + background: rgba(255, 255, 255, 0.2); + cursor: pointer; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 8px; + text-align: center; +`; + +const SideBar: React.FC = () => { + const workspace = useCurrentWorkspace(); + const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId); + const { show } = useIntercom(); + const handleChatUs = () => show(); + + const navLinkClassName = useCalculateSidebarStyles(); + + return ( + +
    + + logo + + + {({ onOpen, value }) => {value}} + + + {workspace.displaySetupWizard ? ( +
  • + + + + + + +
    • + ) : null} +
  • + + + + + + +
    • +
  • + + + + + + +
    • +
  • + + + + + + +
    • +     +
    + +
  • + + + + + + +
    • +
  • + + {({ onOpen }) => ( +
    + + + + +
    + )} +     +
    • +
  • + + + + + + + ), + }, + ]} + > + {({ onOpen }) => ( +
    + + + + +
    + )} +     +
    • +
  • + + + + + + + + + + + +
    • +     +     + ); +}; + +export default SideBar; diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 0fdb191d0b49..06833fcf3d76 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -53,9 +53,7 @@ const HelpIcon = styled(FontAwesomeIcon)` line-height: 21px; `; -const SideBar: React.FC = () => { - const config = useConfig(); - const workspace = useCurrentWorkspace(); +export const useCalculateSidebarStyles = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { @@ -64,7 +62,14 @@ const SideBar: React.FC = () => { return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; - const navLinkClassName = ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive); + return ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive); +}; + +const SideBar: React.FC = () => { + const config = useConfig(); + const workspace = useCurrentWorkspace(); + + const navLinkClassName = useCalculateSidebarStyles(); return ( From 923204d6611174534691eba85bb9a43c7174aced Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 15:49:22 -0400 Subject: [PATCH 16/24] Revert "Merge branch 'teal/main-menu-hover-state' of https://github.com/airbytehq/airbyte into teal/main-menu-hover-state" This reverts commit 423f6714fa6902f3bd265b3842009e342118dc37, reversing changes made to 38a39a3b1b2757e109cc61ab43bdf09ba60439be. --- .../src/packages/cloud/views/layout/SideBar/Sidebar.module.scss | 1 - 1 file changed, 1 deletion(-) delete mode 100644 airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss deleted file mode 100644 index b8e52284341c..000000000000 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/Sidebar.module.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "../../../../../views/layout/SideBar/SideBar.module.scss"; From 8241812fb449e983fbe0d6b2018a8e8e8aeb8105 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 16:04:56 -0400 Subject: [PATCH 17/24] fix rebase things --- .../src/views/layout/SideBar/SideBar.tsx | 43 +------------------ 1 file changed, 1 insertion(+), 42 deletions(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index 06833fcf3d76..a365f69325b5 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -14,6 +14,7 @@ import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../pages/routePaths"; +import ConnectionsIcon from "./components/ConnectionsIcon"; import DestinationIcon from "./components/DestinationIcon"; import DocsIcon from "./components/DocsIcon"; import OnboardingIcon from "./components/OnboardingIcon"; @@ -22,7 +23,6 @@ import SidebarPopout from "./components/SidebarPopout"; import SourceIcon from "./components/SourceIcon"; import { NotificationIndicator } from "./NotificationIndicator"; import styles from "./SideBar.module.scss"; -import ConnectionsIcon from "./components/ConnectionsIcon"; const Bar = styled.nav` width: 100px; @@ -89,13 +89,7 @@ const SideBar: React.FC = () => {
    • ) : null}
  • -<<<<<<< HEAD - menuItemStyle(isActive)} to={RoutePaths.Onboarding}> - - menuItemStyle(isActive)} to={RoutePaths.Connections}> -======= ->>>>>>> 01edbe6da6 (class name utility) @@ -115,31 +109,6 @@ const SideBar: React.FC = () => { - - - -
    • -
  • - - {({ onOpen }) => ( -
    - - - - -
    - )} -     -
    • - -
  • - menuItemStyle(isActive)} to={RoutePaths.Settings}> - - - - - -
    • @@ -168,17 +137,7 @@ const SideBar: React.FC = () => {
  • -<<<<<<< HEAD - menuItemStyle(isActive)} - to={RoutePaths.Settings} - // isActive={(_, location) => - // location.pathname.startsWith(RoutePaths.Settings) - // } - > -======= ->>>>>>> 01edbe6da6 (class name utility) From 1a7c2daac8f7d46b985ca67f8010762dd4c535ea Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 16:07:58 -0400 Subject: [PATCH 18/24] border radius tweak from figma --- airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index 505821472936..181acc9136e6 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -5,7 +5,7 @@ color: colors.$grey-30; width: 100%; cursor: pointer; - border-radius: 4px; + border-radius: 12px; height: 70px; display: flex; flex-direction: column; From cfd49ae6b61db60fcbec2ed1a7ef6e4edc979702 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 30 Jun 2022 16:12:31 -0400 Subject: [PATCH 19/24] cleanup --- airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index a365f69325b5..b4d957176003 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -57,7 +57,6 @@ export const useCalculateSidebarStyles = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - console.log(isActive); const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; From e64c2635fa33478e1e016a2a821a9959e10dd07b Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 1 Jul 2022 08:40:19 -0400 Subject: [PATCH 20/24] disable eslint for this line... these classes _are_ used --- .../src/packages/cloud/views/layout/SideBar/SideBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 4b0a842a2082..f754ed965796 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -26,7 +26,7 @@ import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicato import { useCalculateSidebarStyles } from "views/layout/SideBar/SideBar"; import { RoutePaths } from "../../../../../pages/routePaths"; -import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; +import styles from "../../../../../views/layout/SideBar/SideBar.module.scss"; // eslint-disable-line const CreditsIcon = styled(FontAwesomeIcon)` font-size: 21px; From 6dde4d18b98a99ea4adf19f90c171a928d909811 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 7 Jul 2022 10:05:20 -0400 Subject: [PATCH 21/24] cleanup file from other pr --- .../CatalogDiffModal/components/FieldRow.tsx | 54 ------------------- 1 file changed, 54 deletions(-) delete mode 100644 airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx deleted file mode 100644 index 569566cc4524..000000000000 --- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import classnames from "classnames"; - -import { AirbyteCatalog, StreamTransform } from "core/request/AirbyteClient"; - -import styles from "./StreamRow.module.scss"; - -interface StreamRowProps { - item: StreamTransform; - catalog: AirbyteCatalog; -} - -export const SyncModeBox: React.FC<{ syncModeString: string; mode: "remove" | "update" }> = ({ - syncModeString, - mode, -}) => { - const syncModeBoxStyle = classnames(styles.syncModeBox, { - [styles.remove]: mode === "remove", - }); - return
    {syncModeString}
    ; -}; - -export const StreamRow: React.FC = ({ item, catalog }) => { - const diffType = item.transformType.includes("add") ? "remove" : "add"; - const rowStyle = classnames(styles.row, { - [styles.add]: diffType === "add", - [styles.remove]: diffType === "remove", - }); - - const iconStyle = classnames(styles.icon, { - [styles.plus]: diffType === "add", - [styles.minus]: diffType === "remove", - }); - - const streamConfig = catalog.streams.find( - (stream) => - stream.stream?.namespace === item.streamDescriptor.namespace && stream.stream?.name === item.streamDescriptor.name - )?.config; - - const syncModeString = `${streamConfig?.syncMode} | ${streamConfig?.destinationSyncMode}`; - - return ( -
    - {diffType === "add" ? ( - - ) : ( - - )} -
    {item.streamDescriptor.name}
    - {diffType === "remove" && streamConfig?.selected && } -
    - ); -}; From 83fc175dcb82b7d34c8e4c35fd714440da5cc604 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Thu, 7 Jul 2022 10:09:57 -0400 Subject: [PATCH 22/24] cleanup --- airbyte-webapp/src/scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index ba13a5604f77..1e500186680f 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -1,4 +1,5 @@ $transition: 0.3s; +$transition-out: all $transition ease-out; $border-thin: 1px; $border-thick: 2px; @@ -13,5 +14,4 @@ $spacing-lg: 15px; $spacing-xl: 20px; $spacing-2xl: 40px; $spacing-page-bottom: 150px; -$transition-out: all $transition ease-out; $defaultBottomMargin: 150px; From 97df03549c9138227c2cab647303e0b941a66fac Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 8 Jul 2022 09:53:49 -0400 Subject: [PATCH 23/24] fix settings glitch --- airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index b4d957176003..ad85cb5959b2 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -57,7 +57,7 @@ export const useCalculateSidebarStyles = () => { const { location } = useRouter(); const menuItemStyle = (isActive: boolean) => { - const isChild = location.pathname.split("/").length > 4 && !location.pathname.includes("settings"); + const isChild = location.pathname.split("/").length > 4 && location.pathname.split("/")[3] !== "settings"; return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive }); }; From 2ce4e454c24d664e97972edbb98e3deed2623af6 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Fri, 8 Jul 2022 13:29:33 -0400 Subject: [PATCH 24/24] popout menu gets hover state when open --- airbyte-webapp/src/components/base/Popout/Popout.tsx | 10 +++++++--- .../packages/cloud/views/layout/SideBar/SideBar.tsx | 11 +++++------ .../src/views/layout/SideBar/SideBar.module.scss | 5 +++++ airbyte-webapp/src/views/layout/SideBar/SideBar.tsx | 8 ++++++-- .../views/layout/SideBar/components/SidebarPopout.tsx | 9 +++++++-- 5 files changed, 30 insertions(+), 13 deletions(-) diff --git a/airbyte-webapp/src/components/base/Popout/Popout.tsx b/airbyte-webapp/src/components/base/Popout/Popout.tsx index 915501ca19b6..28053686cab3 100644 --- a/airbyte-webapp/src/components/base/Popout/Popout.tsx +++ b/airbyte-webapp/src/components/base/Popout/Popout.tsx @@ -22,14 +22,15 @@ const ControlComponent = (props: ControlProps) => (
    {props.selectProps.selectProps.targetComponent({ onOpen: props.selectProps.selectProps.onOpen, + isOpen: props.selectProps.menuIsOpen, value: props.selectProps.value, })}
    ); -type PopoutProps = DropdownProps & { +interface PopoutProps extends DropdownProps { targetComponent: (props: { onOpen: () => void; isOpen?: boolean; value: Value }) => ReactNode; -}; +} const Popout: React.FC = ({ onChange, targetComponent, ...props }) => { const [isOpen, toggleOpen] = useToggle(false); @@ -61,7 +62,10 @@ const Popout: React.FC = ({ onChange, targetComponent, ...props }) return ( <> {
  • - {({ onOpen }) => ( -
    + {({ onOpen, isOpen }) => ( +
    @@ -167,8 +166,8 @@ const SideBar: React.FC = () => { }, ]} > - {({ onOpen }) => ( -
    + {({ onOpen, isOpen }) => ( +
    diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss index 181acc9136e6..ce6754aa1d73 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss @@ -47,4 +47,9 @@ background: colors.$dark-blue-400; } } + + &.popoutOpen { + background: colors.$dark-blue-600; + transition: variables.$transition-out; + } } diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index ad85cb5959b2..893a6c65fbe6 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -64,6 +64,10 @@ export const useCalculateSidebarStyles = () => { return ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive); }; +export const getPopoutStyles = (isOpen?: boolean) => { + return classnames(styles.menuItem, { [styles.popoutOpen]: isOpen }); +}; + const SideBar: React.FC = () => { const config = useConfig(); const workspace = useCurrentWorkspace(); @@ -124,8 +128,8 @@ const SideBar: React.FC = () => {
  • - {({ onOpen }) => ( -
    + {({ onOpen, isOpen }) => ( +
    diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx index 6bd93af12a3b..842732987692 100644 --- a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx @@ -29,7 +29,7 @@ export const Icon = styled.div` `; const SidebarPopout: React.FC<{ - children: (props: { onOpen: () => void }) => React.ReactNode; + children: (props: { onOpen: () => void; isOpen?: boolean }) => React.ReactNode; options: Array<{ value: string; label?: React.ReactNode }>; }> = ({ children, options }) => { const config = useConfig(); @@ -110,7 +110,12 @@ const SidebarPopout: React.FC<{ return ( children({ onOpen: targetProps.onOpen })} + targetComponent={(targetProps) => + children({ + onOpen: targetProps.onOpen, + isOpen: targetProps.isOpen, + }) + } styles={{ menuPortal: (base) => ({ ...base,