From 92888ab8fb8e48f12ea1fb1b23c2e3192ed49316 Mon Sep 17 00:00:00 2001 From: Harshith Mullapudi Date: Thu, 10 Nov 2022 11:20:59 +0530 Subject: [PATCH 01/23] feat: changed styling for toast --- .../src/components/ui/Toast/ErrorSign.tsx | 28 ---- .../src/components/ui/Toast/Toast.module.scss | 123 ++++++++++++++++++ .../src/components/ui/Toast/Toast.tsx | 116 +++++++---------- .../src/components/ui/Toast/index.stories.tsx | 33 ++++- 4 files changed, 202 insertions(+), 98 deletions(-) delete mode 100644 airbyte-webapp/src/components/ui/Toast/ErrorSign.tsx diff --git a/airbyte-webapp/src/components/ui/Toast/ErrorSign.tsx b/airbyte-webapp/src/components/ui/Toast/ErrorSign.tsx deleted file mode 100644 index d0e0e7fb7842..000000000000 --- a/airbyte-webapp/src/components/ui/Toast/ErrorSign.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { faExclamation } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import React from "react"; -import styled from "styled-components"; - -const ErrorIcon = styled.div` - width: 28px; - min-width: 28px; - height: 28px; - border-radius: 50%; - margin-right: 11px; - display: flex; - justify-content: center; - align-items: center; - background: ${({ theme }) => theme.dangerColor}; - border: 1px solid ${({ theme }) => theme.mediumPrimaryColor20}; -`; - -const ExclamationLight = styled(FontAwesomeIcon)` - font-size: 16px; - color: ${({ theme }) => theme.whiteColor}; -`; - -export const ErrorSign: React.FC = () => ( - - - -); diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 0bf06de4cd58..adcc9b65f9da 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -1,3 +1,126 @@ +@use "../../../scss/colors"; + +@keyframes slide-up-animations { + 0% { + transform: translate(-50%, -100%); + bottom: -49px; + } + + 100% { + transform: translate(-50%, 0); + bottom: 49px; + } +} + +.toastContainer { + position: fixed; + bottom: 49px; + left: 50%; + transform: translate(-50%, 0); + z-index: 20; + padding: 25px 25px 22px; + border-radius: 8px; + display: flex; + flex-direction: row; + align-items: center; + animation: slide-up-animations 0.25s linear; +} + +.iconContainer { + padding: 10px; + margin-right: 20px; + border-radius: 9px; +} + +.toastIcon { + width: 15px; + height: 15px; + background: white; + border-radius: 50%; + padding: 2px; +} + +.warning { + background-color: colors.$yellow-50; + border: 1px solid colors.$yellow-500; + + .iconContainer { + background-color: colors.$yellow-500; + } + + .toastIcon { + color: colors.$yellow-500; + } +} + +.error { + background-color: colors.$red-50; + border: 1px solid colors.$red-300; + + .iconContainer { + background-color: colors.$red-300; + } + + .toastIcon { + color: colors.$red-300; + } +} + +.success { + background-color: colors.$green-50; + border: 1px solid colors.$green-200; + + .iconContainer { + background-color: colors.$green-200; + } + + .toastIcon { + color: colors.$green-200; + } +} + +.info { + background-color: colors.$blue-50; + border: 1px solid colors.$blue-400; + + .iconContainer { + background-color: colors.$blue-400; + } + + .toastIcon { + color: colors.$blue-400; + } +} + +.title { + color: colors.$dark-blue-900; + font-style: normal; + font-size: 15px; + line-height: 18px; + margin: 0; +} + +.text { + color: colors.$dark-blue-700; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 17px; + margin-top: 5px; +} + .closeButton { + svg { + font-size: 20px; + color: colors.$dark-blue-900; + } +} + +.closeButton, +.actionButton { margin-left: 10px; } + +.actionButton { + background-color: colors.$dark-blue-900 !important; +} diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index c0eec9417009..9564c235ade9 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -1,86 +1,64 @@ -import { faTimes } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import classNames from "classnames"; import React from "react"; -import styled, { keyframes } from "styled-components"; - -import { H5 } from "components/base/Titles"; import { Button } from "../Button"; -import { ErrorSign } from "./ErrorSign"; +// eslint-disable-next-line css-modules/no-unused-class import styles from "./Toast.module.scss"; +export enum ToastType { + WARNING = "warning", + SUCCESS = "success", + ERROR = "error", + INFO = "info", +} + interface ToastProps { title: string | React.ReactNode; text?: string | React.ReactNode; + type?: ToastType; hasError?: boolean; + onAction?: () => void; onClose?: () => void; } -export const SlideUpAnimation = keyframes` - 0% { - translate(-50%, -100%); - bottom: -49px; - } - 100% { - translate(-50%, 0); - bottom: 49px; - } -`; - -const Singleton = styled.div<{ hasError?: boolean }>` - position: fixed; - bottom: 49px; - left: 50%; - transform: translate(-50%, 0); - z-index: 20; - - padding: 25px 25px 22px; - - background: ${({ theme, hasError }) => (hasError ? theme.lightDangerColor : theme.lightPrimaryColor)}; - border: 1px solid ${({ theme }) => theme.greyColor20}; - box-shadow: 0 1px 2px ${({ theme }) => theme.shadowColor}; - border-radius: 8px; +const ICON_MAPPING = { + [ToastType.WARNING]: faExclamation, + [ToastType.ERROR]: faTimes, + [ToastType.SUCCESS]: faCheck, + [ToastType.INFO]: faExclamation, +}; - display: flex; - flex-direction: row; - align-items: center; - - animation: ${SlideUpAnimation} 0.25s linear; -`; - -const Title = styled(H5)<{ hasError?: boolean }>` - color: ${({ theme, hasError }) => (hasError ? theme.dangerColor : theme.primaryColor)}; - - font-style: normal; - font-weight: bold; - font-size: 15px; - line-height: 18px; -`; - -const Text = styled.div` - color: ${({ theme }) => theme.mediumPrimaryColor}; +function getIcon(toastType: ToastType) { + return ICON_MAPPING[toastType]; +} - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 17px; - margin-top: 5px; -`; +export const Toast: React.FC = (props) => { + const { type = ToastType.INFO, onAction, onClose, title, text } = props; -export const Toast: React.FC = (props) => ( - - {props.hasError && } -
- {props.title} - {props.text && {props.text}} + return ( +
+
+ +
+
+
{title}
+ {text &&
{text}
} +
+ {onAction && ( + + )} + {onClose && ( +
- {props.onClose && ( - )} {onClose && ( From 290921d700555c244bfec07eb334ecdb067a7e1d Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Thu, 1 Dec 2022 16:04:37 +0200 Subject: [PATCH 05/23] update Toast storybook --- .../src/components/ui/Toast/index.stories.tsx | 46 +++++++++++-------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/index.stories.tsx b/airbyte-webapp/src/components/ui/Toast/index.stories.tsx index ea8a94628800..9caeb2fde2cd 100644 --- a/airbyte-webapp/src/components/ui/Toast/index.stories.tsx +++ b/airbyte-webapp/src/components/ui/Toast/index.stories.tsx @@ -6,9 +6,10 @@ export default { title: "UI/Toast", component: Toast, argTypes: { - title: { type: { name: "string", required: false } }, text: { type: { name: "string", required: false } }, type: { type: { name: "string", required: false } }, + onAction: { table: { disable: true } }, + actionBtnText: { type: { name: "string", required: false } }, onClose: { table: { disable: true } }, }, } as ComponentMeta; @@ -20,47 +21,56 @@ Basic.args = { text: "This is a basic card", }; -export const WithTitle = Template.bind({}); -WithTitle.args = { - title: "With Title", - text: "This is a card with a title", +export const WithText = Template.bind({}); +WithText.args = { + text: "This is a card with a text", +}; + +export const WithLongText = Template.bind({}); +WithLongText.args = { + text: "This is a card with a long text, very very long text message. Just an example how ", }; export const WithCloseButton = Template.bind({}); WithCloseButton.args = { - title: "With Close button", text: "This is a card with a close button", onClose: () => { console.log("Closed!"); }, }; +export const WithActionButton = Template.bind({}); +WithActionButton.args = { + text: "This is a card with an action button button", + onAction: () => console.log("Action btn clicked!"), + actionBtnText: "Click me!", +}; + +export const WithActionAndCloseButton = Template.bind({}); +WithActionAndCloseButton.args = { + text: "This is a card with an action button button", + onAction: () => console.log("Action btn clicked!"), + actionBtnText: "Click me!", + onClose: () => console.log("Closed!"), +}; + export const WarningToast = Template.bind({}); WarningToast.args = { - title: "With Close button", text: "This is a card with a close button", - onClose: () => { - console.log("Closed!"); - }, + onClose: () => console.log("Closed!"), type: ToastType.WARNING, }; export const ErrorToast = Template.bind({}); ErrorToast.args = { - title: "With Close button", text: "This is a card with a close button", - onClose: () => { - console.log("Closed!"); - }, + onClose: () => console.log("Closed!"), type: ToastType.ERROR, }; export const SuccessToast = Template.bind({}); SuccessToast.args = { - title: "With Close button", text: "This is a card with a close button", - onClose: () => { - console.log("Closed!"); - }, + onClose: () => console.log("Closed!"), type: ToastType.SUCCESS, }; From e21b2fca7d228b59dd87c35e5dce4f5178cdf05f Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Thu, 1 Dec 2022 23:02:14 +0200 Subject: [PATCH 06/23] replace "hasError" with actual type of Toast --- .../UpdateConnectionDataResidency.tsx | 5 +++-- .../Notification/NotificationService.tsx | 3 +-- .../src/hooks/services/Notification/types.ts | 11 ++-------- .../src/hooks/services/useConnectorAuth.tsx | 8 ++++--- .../cloud/views/FirebaseActionRoute.tsx | 7 ++++--- .../ConfirmPasswordResetPage.tsx | 21 ++++++++++--------- .../ResetPasswordPage/ResetPasswordPage.tsx | 5 +++-- .../components/EmailVerificationHint.tsx | 14 ++++++------- .../InviteUsersModal/InviteUsersModal.tsx | 4 +++- .../DataResidencyView/DataResidencyView.tsx | 5 +++-- .../components/LogsContent.tsx | 5 +++-- .../components/WebHookForm.tsx | 15 ++++++------- 12 files changed, 53 insertions(+), 50 deletions(-) diff --git a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx index 9bf9c44372d0..3887b6873c61 100644 --- a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx +++ b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx @@ -5,6 +5,7 @@ import { DataGeographyDropdown } from "components/common/DataGeographyDropdown"; import { ControlLabels } from "components/LabeledControl"; import { Card } from "components/ui/Card"; import { Spinner } from "components/ui/Spinner"; +import { ToastType } from "components/ui/Toast"; import { Geography } from "core/request/AirbyteClient"; import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService"; @@ -32,8 +33,8 @@ export const UpdateConnectionDataResidency: React.FC = () => { } catch (e) { registerNotification({ id: "connection.geographyUpdateError", - title: formatMessage({ id: "connection.geographyUpdateError" }), - isError: true, + text: formatMessage({ id: "connection.geographyUpdateError" }), + type: ToastType.ERROR, }); } setSelectedValue(undefined); diff --git a/airbyte-webapp/src/hooks/services/Notification/NotificationService.tsx b/airbyte-webapp/src/hooks/services/Notification/NotificationService.tsx index c1ac44317ada..3ec22bf99413 100644 --- a/airbyte-webapp/src/hooks/services/Notification/NotificationService.tsx +++ b/airbyte-webapp/src/hooks/services/Notification/NotificationService.tsx @@ -33,9 +33,8 @@ const NotificationService = ({ children }: { children: React.ReactNode }) => { {firstNotification ? ( // Show only first notification void; -} +export type Notification = ToastProps & { id: string | number; nonClosable?: boolean }; export interface NotificationServiceApi { addNotification: (notification: Notification) => void; diff --git a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx b/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx index 8e52c24b194c..a7e415cca2e6 100644 --- a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx +++ b/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx @@ -2,6 +2,8 @@ import { useCallback, useMemo, useRef } from "react"; import { useIntl } from "react-intl"; import { useAsyncFn, useEffectOnce, useEvent } from "react-use"; +import { ToastType } from "components/ui/Toast"; + import { useConfig } from "config"; import { ConnectorDefinitionSpecification, ConnectorSpecification } from "core/domain/connector"; import { DestinationAuthService } from "core/domain/connector/DestinationAuthService"; @@ -107,7 +109,7 @@ export function useConnectorAuth(): { notificationService.registerNotification({ id: "oauthConnector.credentialsMissing", // Since it's dev only we don't need i18n on this string - title: "OAuth is not enabled for this connector on this environment.", + text: "OAuth is not enabled for this connector on this environment.", }); } else { // Log error to our monitoring, this should never happen and means OAuth credentials @@ -119,8 +121,8 @@ export function useConnectorAuth(): { }); notificationService.registerNotification({ id: "oauthConnector.credentialsMissing", - title: formatMessage({ id: "connector.oauthCredentialsMissing" }), - isError: true, + text: formatMessage({ id: "connector.oauthCredentialsMissing" }), + type: ToastType.ERROR, }); } } diff --git a/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx b/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx index 244d7ea78c3f..a41f6c84db18 100644 --- a/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx +++ b/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx @@ -4,8 +4,9 @@ import { Navigate, useNavigate } from "react-router-dom"; import { useAsync } from "react-use"; import LoadingPage from "components/LoadingPage"; +import { ToastType } from "components/ui/Toast"; -import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; +import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics"; import { useNotificationService } from "hooks/services/Notification"; import { useQuery } from "hooks/useQuery"; import { useAuthService } from "packages/cloud/services/auth/AuthService"; @@ -38,8 +39,8 @@ export const VerifyEmailAction: React.FC = () => { // Show a notification that the mail got verified successfully registerNotification({ id: "auth/email-verified", - title: formatMessage({ id: "verifyEmail.notification" }), - isError: false, + text: formatMessage({ id: "verifyEmail.notification" }), + type: ToastType.SUCCESS, }); // Navigate the user to the homepage navigate("/"); diff --git a/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx index f383b991cecb..295990e98a69 100644 --- a/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx @@ -7,6 +7,7 @@ import * as yup from "yup"; import { LabeledInput, Link } from "components"; import { Button } from "components/ui/Button"; +import { ToastType } from "components/ui/Toast"; import { useNotificationService } from "hooks/services/Notification/NotificationService"; import { useQuery } from "hooks/useQuery"; @@ -46,8 +47,8 @@ const ResetPasswordConfirmPage: React.FC = () => { await confirmPasswordReset(query.oobCode, newPassword); registerNotification({ id: "confirmResetPassword.success", - title: formatMessage({ id: "confirmResetPassword.success" }), - isError: false, + text: formatMessage({ id: "confirmResetPassword.success" }), + type: ToastType.SUCCESS, }); navigate(CloudRoutes.Login); } catch (err) { @@ -57,37 +58,37 @@ const ResetPasswordConfirmPage: React.FC = () => { case AuthErrorCodes.EXPIRED_OOB_CODE: registerNotification({ id: "confirmResetPassword.error.expiredActionCode", - title: formatMessage({ + text: formatMessage({ id: "confirmResetPassword.error.expiredActionCode", }), - isError: true, + type: ToastType.ERROR, }); break; case AuthErrorCodes.INVALID_OOB_CODE: registerNotification({ id: "confirmResetPassword.error.invalidActionCode", - title: formatMessage({ + text: formatMessage({ id: "confirmResetPassword.error.invalidActionCode", }), - isError: true, + type: ToastType.ERROR, }); break; case AuthErrorCodes.WEAK_PASSWORD: registerNotification({ id: "confirmResetPassword.error.weakPassword", - title: formatMessage({ + text: formatMessage({ id: "confirmResetPassword.error.weakPassword", }), - isError: true, + type: ToastType.WARNING, }); break; default: registerNotification({ id: "confirmResetPassword.error.default", - title: formatMessage({ + text: formatMessage({ id: "confirmResetPassword.error.default", }), - isError: true, + type: ToastType.ERROR, }); } } diff --git a/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx index 2e477ba4afb8..b63fdbe6ae6b 100644 --- a/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/auth/ResetPasswordPage/ResetPasswordPage.tsx @@ -6,6 +6,7 @@ import * as yup from "yup"; import { LabeledInput, Link } from "components"; import { HeadTitle } from "components/common/HeadTitle"; import { Button } from "components/ui/Button"; +import { ToastType } from "components/ui/Toast"; import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics"; import { useNotificationService } from "hooks/services/Notification/NotificationService"; @@ -42,8 +43,8 @@ const ResetPasswordPage: React.FC = () => { await requirePasswordReset(email); registerNotification({ id: "resetPassword.emailSent", - title: formatMessage({ id: "login.resetPassword.emailSent" }), - isError: false, + text: formatMessage({ id: "login.resetPassword.emailSent" }), + type: ToastType.SUCCESS, }); } catch (err) { err.message.includes("user-not-found") diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx index 68ed96d4b74f..b0cd3aca2156 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx @@ -5,6 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import styled from "styled-components"; import { InfoBox } from "components/ui/InfoBox"; +import { ToastType } from "components/ui/Toast"; import { useNotificationService } from "hooks/services/Notification"; import { useAuthService } from "packages/cloud/services/auth/AuthService"; @@ -16,7 +17,6 @@ interface Props { const ResendEmailLink = styled.button` appearance: none; background: none; - padding: none; border: none; font-size: inherit; text-decoration: underline; @@ -48,28 +48,28 @@ export const EmailVerificationHint: React.FC = ({ className }) => { case AuthErrorCodes.NETWORK_REQUEST_FAILED: registerNotification({ id: error.code, - title: formatMessage({ + text: formatMessage({ id: FirebaseAuthMessageId.NetworkFailure, }), - isError: true, + type: ToastType.ERROR, }); break; case AuthErrorCodes.TOO_MANY_ATTEMPTS_TRY_LATER: registerNotification({ id: error.code, - title: formatMessage({ + text: formatMessage({ id: FirebaseAuthMessageId.TooManyRequests, }), - isError: true, + type: ToastType.WARNING, }); break; default: registerNotification({ id: error.code, - title: formatMessage({ + text: formatMessage({ id: FirebaseAuthMessageId.DefaultError, }), - isError: true, + type: ToastType.ERROR, }); } } diff --git a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx index 82ea74f3acac..e32c31e126b3 100644 --- a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx +++ b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx @@ -12,6 +12,7 @@ import { Button } from "components/ui/Button"; import { DropDown } from "components/ui/DropDown"; import { Input } from "components/ui/Input"; import { Modal } from "components/ui/Modal"; +import { ToastType } from "components/ui/Toast"; import { Action, Namespace } from "core/analytics"; import { useAnalyticsService } from "hooks/services/Analytics"; @@ -88,8 +89,9 @@ export const InviteUsersModal: React.FC<{ { onSuccess: () => { registerNotification({ - title: formatMessage({ id: "addUsers.success.title" }), + text: formatMessage({ id: "addUsers.success.title" }), id: "invite-users-success", + type: ToastType.SUCCESS, }); props.onClose(); }, diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx index 553e9508ef62..6dd5cba76557 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx @@ -6,6 +6,7 @@ import { ControlLabels } from "components"; import { DataGeographyDropdown } from "components/common/DataGeographyDropdown"; import { Button } from "components/ui/Button"; import { Text } from "components/ui/Text"; +import { ToastType } from "components/ui/Toast"; import { Geography } from "core/request/AirbyteClient"; import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics"; @@ -44,8 +45,8 @@ export const DataResidencyView: React.FC = () => { } catch (e) { registerNotification({ id: "workspaceSettings.defaultGeographyError", - title: formatMessage({ id: "settings.defaultDataResidencyUpdateError" }), - isError: true, + text: formatMessage({ id: "settings.defaultDataResidencyUpdateError" }), + type: ToastType.ERROR, }); } }; diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx index 3de89859cfb6..47a3001ef5a7 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/components/LogsContent.tsx @@ -4,6 +4,7 @@ import { useAsyncFn } from "react-use"; import styled from "styled-components"; import { Button } from "components/ui/Button"; +import { ToastType } from "components/ui/Toast"; import { LogType } from "core/domain/logs/types"; import { useNotificationService } from "hooks/services/Notification"; @@ -33,8 +34,8 @@ const LogsContent: React.FC = () => { registerNotification({ id: "admin.logs.error", - title: formatMessage({ id: "admin.logs.error" }), - isError: true, + text: formatMessage({ id: "admin.logs.error" }), + type: ToastType.ERROR, }); } }; diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.tsx index ca50fc542bbc..de597f65ea17 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.tsx @@ -9,11 +9,12 @@ import * as yup from "yup"; import { Label, LabeledSwitch } from "components"; import { DocsIcon } from "components/icons/DocsIcon"; import { PlayIcon } from "components/icons/PlayIcon"; -import { Row, Cell } from "components/SimpleTableComponents"; +import { Cell, Row } from "components/SimpleTableComponents"; import { Button } from "components/ui/Button"; import { Heading } from "components/ui/Heading"; import { Input } from "components/ui/Input"; import { Text } from "components/ui/Text"; +import { ToastType } from "components/ui/Toast"; import { Tooltip } from "components/ui/Tooltip"; import useWorkspace, { WebhookPayload } from "hooks/services/useWorkspace"; @@ -59,16 +60,16 @@ export const WebHookForm: React.FC = ({ webhook }) => { case true: { registerNotification({ id: "settings.webhook.test.passed", - title: formatMessage({ id: "settings.webhook.test.passed" }), - isError: false, + text: formatMessage({ id: "settings.webhook.test.passed" }), + type: ToastType.SUCCESS, }); break; } case false: { registerNotification({ id: "settings.webhook.test.failed", - title: formatMessage({ id: "settings.webhook.test.failed" }), - isError: true, + text: formatMessage({ id: "settings.webhook.test.failed" }), + type: ToastType.ERROR, }); break; } @@ -83,8 +84,8 @@ export const WebHookForm: React.FC = ({ webhook }) => { case false: { registerNotification({ id: "settings.webhook.save.failed", - title: formatMessage({ id: "settings.webhook.save.failed" }), - isError: true, + text: formatMessage({ id: "settings.webhook.save.failed" }), + type: ToastType.ERROR, }); break; } From 1bd1ea8bfb93424dab44387212cbac11ee459202 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Thu, 1 Dec 2022 23:04:45 +0200 Subject: [PATCH 07/23] replace classes with mixins --- .../src/components/ui/Toast/Toast.module.scss | 82 ++++++------------- .../src/components/ui/Toast/Toast.tsx | 13 ++- 2 files changed, 35 insertions(+), 60 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 5ebf4c70f00e..9ffbb77fe602 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -16,6 +16,21 @@ $toast-icon-container-size: 34px; } } +@mixin type($name, $color, $background) { + &.#{$name} { + background-color: $background; + border: 1px solid $color; + + .iconContainer { + background-color: $color; + } + + .toastIcon { + color: $color; + } + } +} + .toastContainer { display: flex; flex-direction: row; @@ -30,6 +45,11 @@ $toast-icon-container-size: 34px; padding: vars.$spacing-md; border-radius: vars.$border-radius-md; animation: slide-up-animations 0.25s linear; + + @include type("info", colors.$blue-400, colors.$blue-50); + @include type("warning", colors.$yellow-500, colors.$yellow-50); + @include type("success", colors.$green-200, colors.$green-50); + @include type("error", colors.$red-300, colors.$red-50); } .iconContainer { @@ -50,70 +70,20 @@ $toast-icon-container-size: 34px; border-radius: 50%; } -.warning { - background-color: colors.$yellow-50; - border: 1px solid colors.$yellow-500; - - .iconContainer { - background-color: colors.$yellow-500; - } - - .toastIcon { - color: colors.$yellow-500; - } -} - -.error { - background-color: colors.$red-50; - border: 1px solid colors.$red-300; - - .iconContainer { - background-color: colors.$red-300; - } - - .toastIcon { - color: colors.$red-300; - } -} - -.success { - background-color: colors.$green-50; - border: 1px solid colors.$green-200; - - .iconContainer { - background-color: colors.$green-200; - } - - .toastIcon { - color: colors.$green-200; - } -} - -.info { - background-color: colors.$blue-50; - border: 1px solid colors.$blue-400; - - .iconContainer { - background-color: colors.$blue-400; - } - - .toastIcon { - color: colors.$blue-400; - } -} - .text { line-height: 17px; text-align: center; } +// style can be removed when Button Dark style will be implemented +// https://github.com/airbytehq/airbyte/issues/19445 +.actionButton { + background-color: colors.$dark-blue-900 !important; +} + .closeButton { svg { font-size: 20px; color: colors.$dark-blue-900; } } - -.actionButton { - background-color: colors.$dark-blue-900 !important; -} diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index 97a003a3aa8d..4d9583290413 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -6,7 +6,6 @@ import React from "react"; import { Text } from "components/ui/Text"; import { Button } from "../Button"; -/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['warning', 'error', 'success', 'info'] }] */ import styles from "./Toast.module.scss"; export enum ToastType { @@ -16,10 +15,9 @@ export enum ToastType { INFO = "info", } -interface ToastProps { +export interface ToastProps { text?: string | React.ReactNode; type?: ToastType; - hasError?: boolean; onAction?: () => void; actionBtnText?: string; onClose?: () => void; @@ -32,9 +30,16 @@ const ICON_MAPPING = { [ToastType.INFO]: faExclamation, }; +const STYLES_BY_TYPE: Readonly> = { + [ToastType.WARNING]: styles.warning, + [ToastType.ERROR]: styles.error, + [ToastType.SUCCESS]: styles.success, + [ToastType.INFO]: styles.info, +}; + export const Toast: React.FC = ({ type = ToastType.INFO, onAction, actionBtnText, onClose, text }) => { return ( -
+
From 0bffea614006e8e00e69c8c0838e104738e6d4bc Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 00:43:44 +0200 Subject: [PATCH 08/23] fix broken notifications --- .../src/components/ui/Toast/Toast.tsx | 2 +- .../services/Health/HealthPollService.tsx | 9 +++++--- airbyte-webapp/src/hooks/useLoadingState.tsx | 21 ++++++++----------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index 4d9583290413..5d42a6359642 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -16,7 +16,7 @@ export enum ToastType { } export interface ToastProps { - text?: string | React.ReactNode; + text: string | React.ReactNode; type?: ToastType; onAction?: () => void; actionBtnText?: string; diff --git a/airbyte-webapp/src/hooks/services/Health/HealthPollService.tsx b/airbyte-webapp/src/hooks/services/Health/HealthPollService.tsx index 28f5428e012e..000714fc210d 100644 --- a/airbyte-webapp/src/hooks/services/Health/HealthPollService.tsx +++ b/airbyte-webapp/src/hooks/services/Health/HealthPollService.tsx @@ -6,6 +6,9 @@ import { HealthService } from "core/health/HealthService"; import { useGetService } from "core/servicesProvider"; import { useNotificationService } from "hooks/services/Notification/NotificationService"; +import { ToastType } from "../../../components/ui/Toast"; +import { Notification } from "../Notification"; + const HEALTH_NOTIFICATION_ID = "health.error"; const HEALTHCHECK_MAX_COUNT = 3; @@ -17,10 +20,10 @@ function useApiHealthPoll(): void { const { registerNotification, unregisterNotificationById } = useNotificationService(); useEffect(() => { - const errorNotification = { + const errorNotification: Notification = { id: HEALTH_NOTIFICATION_ID, - title: formatMessage({ id: "notifications.error.health" }), - isError: true, + text: formatMessage({ id: "notifications.error.health" }), + type: ToastType.ERROR, }; const interval = setInterval(async () => { diff --git a/airbyte-webapp/src/hooks/useLoadingState.tsx b/airbyte-webapp/src/hooks/useLoadingState.tsx index cb002923d061..1074019eda54 100644 --- a/airbyte-webapp/src/hooks/useLoadingState.tsx +++ b/airbyte-webapp/src/hooks/useLoadingState.tsx @@ -1,7 +1,8 @@ import { useState } from "react"; import { useIntl } from "react-intl"; -import { useNotificationService } from "./services/Notification"; +import { ToastType } from "../components/ui/Toast"; +import { Notification, useNotificationService } from "./services/Notification"; const useLoadingState = (): { isLoading: boolean; @@ -13,13 +14,11 @@ const useLoadingState = (): { const [isLoading, setIsLoading] = useState(false); const [showFeedback, setShowFeedback] = useState(false); - const errorNotificationId = "error.somethingWentWrong"; - const errorNotification = (message: string) => ({ - isError: true, - title: formatMessage({ id: `notifications.${errorNotificationId}` }), - text: message, - id: errorNotificationId, - }); + const errorNotification: Notification = { + id: "notifications.error.somethingWentWrong", + text: formatMessage({ id: `notifications.error.somethingWentWrong` }), + type: ToastType.ERROR, + }; const startAction = async ({ action, feedbackAction }: { action: () => void; feedbackAction?: () => void }) => { try { @@ -37,11 +36,9 @@ const useLoadingState = (): { feedbackAction(); } }, 2000); - } catch (error) { - const message = error?.message || formatMessage({ id: "notifications.error.noMessage" }); - + } catch { setIsLoading(false); - registerNotification(errorNotification(message)); + registerNotification(errorNotification); } }; From 2248340e22134787251319a17f89a79ee96d7d25 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 21:55:33 +0200 Subject: [PATCH 09/23] change the animation to "ease-out" --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 9ffbb77fe602..7572b30905fc 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -44,7 +44,7 @@ $toast-icon-container-size: 34px; z-index: 20; padding: vars.$spacing-md; border-radius: vars.$border-radius-md; - animation: slide-up-animations 0.25s linear; + animation: slide-up-animations 0.25s ease-out; @include type("info", colors.$blue-400, colors.$blue-50); @include type("warning", colors.$yellow-500, colors.$yellow-50); From 3945164f715e5bd30e1e768190d651f09e45e92d Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 21:58:25 +0200 Subject: [PATCH 10/23] replace Notification type with interface --- airbyte-webapp/src/hooks/services/Notification/types.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/hooks/services/Notification/types.ts b/airbyte-webapp/src/hooks/services/Notification/types.ts index eef7f3f8d1d3..a37543cf77eb 100644 --- a/airbyte-webapp/src/hooks/services/Notification/types.ts +++ b/airbyte-webapp/src/hooks/services/Notification/types.ts @@ -1,6 +1,9 @@ import { ToastProps } from "components/ui/Toast"; -export type Notification = ToastProps & { id: string | number; nonClosable?: boolean }; +export interface Notification extends ToastProps { + id: string | number; + nonClosable?: boolean; +} export interface NotificationServiceApi { addNotification: (notification: Notification) => void; From 1b89f151669b1fa0e7042f944e2a2db1721fe8bb Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 22:06:14 +0200 Subject: [PATCH 11/23] make enum const --- airbyte-webapp/src/components/ui/Toast/Toast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index 5d42a6359642..b21a294906d8 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -8,7 +8,7 @@ import { Text } from "components/ui/Text"; import { Button } from "../Button"; import styles from "./Toast.module.scss"; -export enum ToastType { +export const enum ToastType { WARNING = "warning", SUCCESS = "success", ERROR = "error", From 6dd3f50a1e3ceebb1a014db5ea2c742d9a0cc171 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 22:33:53 +0200 Subject: [PATCH 12/23] use button dark theme --- .../src/components/ui/Toast/Toast.module.scss | 7 ------- airbyte-webapp/src/components/ui/Toast/Toast.tsx | 10 +++------- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 7572b30905fc..8dd01c6c2cb8 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -75,15 +75,8 @@ $toast-icon-container-size: 34px; text-align: center; } -// style can be removed when Button Dark style will be implemented -// https://github.com/airbytehq/airbyte/issues/19445 -.actionButton { - background-color: colors.$dark-blue-900 !important; -} - .closeButton { svg { - font-size: 20px; color: colors.$dark-blue-900; } } diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index b21a294906d8..db7bc683786d 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classNames from "classnames"; import React from "react"; +import { CrossIcon } from "components/icons/CrossIcon"; import { Text } from "components/ui/Text"; import { Button } from "../Button"; @@ -51,17 +52,12 @@ export const Toast: React.FC = ({ type = ToastType.INFO, onAction, a )}
{onAction && ( - )} {onClose && ( -
); From 4e0c7c24b5a65ec6120c5c009a020ba5a69906fc Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 23:13:52 +0200 Subject: [PATCH 13/23] fixed stretched icon --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 8dd01c6c2cb8..33ffaf4a029b 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -55,6 +55,8 @@ $toast-icon-container-size: 34px; .iconContainer { width: $toast-icon-container-size; height: $toast-icon-container-size; + max-height: $toast-icon-container-size; + min-width: $toast-icon-container-size; padding: vars.$border-radius-md; border-radius: vars.$border-radius-md; box-sizing: border-box; From 77c3bff5d5ce58e72238caa391dcf3930d096fbf Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 23:25:57 +0200 Subject: [PATCH 14/23] move z-index value to css variables file --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 3 ++- airbyte-webapp/src/scss/_z-indices.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 33ffaf4a029b..ffa745cab561 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -1,5 +1,6 @@ @use "scss/colors"; @use "scss/variables" as vars; +@use "scss/z-indices"; $toast-icon-size: 13px; $toast-icon-container-size: 34px; @@ -41,7 +42,7 @@ $toast-icon-container-size: 34px; bottom: 49px; left: 50%; transform: translate(-50%, 0); - z-index: 20; + z-index: z-indices.$notification; padding: vars.$spacing-md; border-radius: vars.$border-radius-md; animation: slide-up-animations 0.25s ease-out; diff --git a/airbyte-webapp/src/scss/_z-indices.scss b/airbyte-webapp/src/scss/_z-indices.scss index 09cb6dfd3cf1..9220f5a16e53 100644 --- a/airbyte-webapp/src/scss/_z-indices.scss +++ b/airbyte-webapp/src/scss/_z-indices.scss @@ -3,3 +3,4 @@ $modal: 9999 + 1; $sidebar: 9999; $panelSplitter: 0; $dropdownMenu: 2; +$notification: 20; From e4ed4325fdac27a12fc4dcd557c2ba41599c5fd4 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 23:49:39 +0200 Subject: [PATCH 15/23] fix toast bottom-margin and update animation --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index ffa745cab561..dba522f106d6 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -4,16 +4,17 @@ $toast-icon-size: 13px; $toast-icon-container-size: 34px; +$toast-bottom-margin: 27px; @keyframes slide-up-animations { 0% { transform: translate(-50%, -100%); - bottom: -49px; + bottom: -60px; } 100% { transform: translate(-50%, 0); - bottom: 49px; + bottom: $toast-bottom-margin; } } @@ -39,7 +40,7 @@ $toast-icon-container-size: 34px; gap: vars.$spacing-md; position: fixed; box-sizing: border-box; - bottom: 49px; + bottom: $toast-bottom-margin; left: 50%; transform: translate(-50%, 0); z-index: z-indices.$notification; From d9ec81e6aadd6fa994fdfba8a93ad0657a9773a4 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 2 Dec 2022 23:54:49 +0200 Subject: [PATCH 16/23] add shadow mixin --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index dba522f106d6..714f468a56f8 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -1,6 +1,7 @@ @use "scss/colors"; @use "scss/variables" as vars; @use "scss/z-indices"; +@use "scss/mixins"; $toast-icon-size: 13px; $toast-icon-container-size: 34px; @@ -48,6 +49,8 @@ $toast-bottom-margin: 27px; border-radius: vars.$border-radius-md; animation: slide-up-animations 0.25s ease-out; + @include mixins.shadow; + @include type("info", colors.$blue-400, colors.$blue-50); @include type("warning", colors.$yellow-500, colors.$yellow-50); @include type("success", colors.$green-200, colors.$green-50); From 6c72aced0130e19dbd4b36f82f519421cae371ef Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 5 Dec 2022 18:38:12 +0200 Subject: [PATCH 17/23] reduce spacing-page-bottom to 88px --- 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 4b747c904771..bbee58c77a1c 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -19,7 +19,7 @@ $spacing-md: 10px; $spacing-lg: 15px; $spacing-xl: 20px; $spacing-2xl: 40px; -$spacing-page-bottom: 150px; +$spacing-page-bottom: 88px; $main-page-content-min-width: 960px; $width-size-menu: 93px; From 6c9c4407c2e2e2a2b8c55a7e530269919e07832d Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 5 Dec 2022 19:17:40 +0200 Subject: [PATCH 18/23] Revert "reduce spacing-page-bottom to 88px" This reverts commit 6c72aced0130e19dbd4b36f82f519421cae371ef. --- 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 bbee58c77a1c..4b747c904771 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -19,7 +19,7 @@ $spacing-md: 10px; $spacing-lg: 15px; $spacing-xl: 20px; $spacing-2xl: 40px; -$spacing-page-bottom: 88px; +$spacing-page-bottom: 150px; $main-page-content-min-width: 960px; $width-size-menu: 93px; From 24e223ad1f541fddb56df9473f65b4bb933998dc Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 5 Dec 2022 19:35:46 +0200 Subject: [PATCH 19/23] extend base Button component: do not break the text --- airbyte-webapp/src/components/ui/Button/Button.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/airbyte-webapp/src/components/ui/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss index 1358b7fbc546..55dfdaa9362c 100644 --- a/airbyte-webapp/src/components/ui/Button/Button.module.scss +++ b/airbyte-webapp/src/components/ui/Button/Button.module.scss @@ -13,6 +13,7 @@ font-weight: 600; cursor: pointer; transition: 0.2s ease-in; + white-space: nowrap; &.full { width: 100%; From 0323965e7c490ce170f3bec2080a99186e7076a3 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 5 Dec 2022 19:36:39 +0200 Subject: [PATCH 20/23] align text to left set baseline as flex-start --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 714f468a56f8..550dfea62a53 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -37,7 +37,7 @@ $toast-bottom-margin: 27px; .toastContainer { display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; gap: vars.$spacing-md; position: fixed; box-sizing: border-box; @@ -79,7 +79,7 @@ $toast-bottom-margin: 27px; .text { line-height: 17px; - text-align: center; + text-align: left; } .closeButton { From 02037746904bc9810fd4f0254f4b6a65f53e3a05 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Mon, 5 Dec 2022 19:45:53 +0200 Subject: [PATCH 21/23] set max width for notification container --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 1 + airbyte-webapp/src/scss/_variables.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 550dfea62a53..17bc633f0f00 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -39,6 +39,7 @@ $toast-bottom-margin: 27px; flex-direction: row; align-items: flex-start; gap: vars.$spacing-md; + max-width: vars.$width-max-notification; position: fixed; box-sizing: border-box; bottom: $toast-bottom-margin; diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss index 4b747c904771..e0ac714ca4ab 100644 --- a/airbyte-webapp/src/scss/_variables.scss +++ b/airbyte-webapp/src/scss/_variables.scss @@ -24,6 +24,7 @@ $main-page-content-min-width: 960px; $width-size-menu: 93px; $width-wide-menu: 200px; +$width-max-notification: 600px; $width-modal-sm: 492px; $width-modal-md: 585px; From 00fcf2c323456f3b41ac732dd2889b183523e7ce Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Wed, 7 Dec 2022 19:22:40 +0200 Subject: [PATCH 22/23] fix text center alignment --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 4 ++++ airbyte-webapp/src/components/ui/Toast/Toast.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 17bc633f0f00..0580633d4925 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -78,6 +78,10 @@ $toast-bottom-margin: 27px; border-radius: 50%; } +.textContainer { + align-self: center; +} + .text { line-height: 17px; text-align: left; diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx index db7bc683786d..ef018b6e1869 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx +++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx @@ -44,7 +44,7 @@ export const Toast: React.FC = ({ type = ToastType.INFO, onAction, a
-
+
{text && ( {text} From 98837471b6679938dcd633a1d3afd8fba57e32e2 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Wed, 7 Dec 2022 19:25:57 +0200 Subject: [PATCH 23/23] fix action button margin --- airbyte-webapp/src/components/ui/Toast/Toast.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss index 0580633d4925..42d4ac5840fe 100644 --- a/airbyte-webapp/src/components/ui/Toast/Toast.module.scss +++ b/airbyte-webapp/src/components/ui/Toast/Toast.module.scss @@ -87,6 +87,10 @@ $toast-bottom-margin: 27px; text-align: left; } +.actionButton { + margin-top: vars.$spacing-xs; +} + .closeButton { svg { color: colors.$dark-blue-900;