From 1dbfdcc67ec1f4ba67a32289a3bd8cf6c086d738 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov Date: Fri, 9 Sep 2022 21:09:39 +0300 Subject: [PATCH 1/8] remove feedback modal components and from FinalStep component --- .../OnboardingPage/components/FinalStep.tsx | 34 ++----------- .../SyncCompletedModal/SyncCompletedModal.tsx | 22 --------- .../SyncCompletedModal/components/BadIcon.tsx | 10 ---- .../components/FeedbackButton.tsx | 33 ------------- .../components/GoodIcon.tsx | 10 ---- .../components/ModalBody.tsx | 48 ------------------- .../components/ModalHeader.tsx | 36 -------------- .../Feedback/SyncCompletedModal/index.tsx | 3 -- 8 files changed, 3 insertions(+), 193 deletions(-) delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/SyncCompletedModal.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/BadIcon.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/FeedbackButton.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/GoodIcon.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalBody.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalHeader.tsx delete mode 100644 airbyte-webapp/src/views/Feedback/SyncCompletedModal/index.tsx diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx index df092e6c90f5..4568be603831 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx @@ -1,15 +1,12 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { FormattedMessage } from "react-intl"; import styled from "styled-components"; import { H1 } from "components"; import { useConfig } from "config"; -import Status from "core/statuses"; import { useOnboardingService } from "hooks/services/Onboarding/OnboardingService"; import { useConnectionList, useGetConnection, useSyncConnection } from "hooks/services/useConnectionHook"; -import useWorkspace from "hooks/services/useWorkspace"; -import SyncCompletedModal from "views/Feedback/SyncCompletedModal"; import HighlightedText from "./HighlightedText"; import ProgressBlock from "./ProgressBlock"; @@ -33,35 +30,12 @@ const Videos = styled.div` const FinalStep: React.FC = () => { const config = useConfig(); - const { sendFeedback } = useWorkspace(); - const { feedbackPassed, passFeedback, visibleUseCases, useCaseLinks, skipCase } = useOnboardingService(); + const { visibleUseCases, useCaseLinks, skipCase } = useOnboardingService(); const { mutateAsync: syncConnection } = useSyncConnection(); const { connections } = useConnectionList(); const connection = useGetConnection(connections[0].connectionId, { refetchInterval: 2500, }); - const [isOpen, setIsOpen] = useState(false); - - useEffect(() => { - if (connection.latestSyncJobStatus === Status.SUCCEEDED && !feedbackPassed) { - setIsOpen(true); - } - }, [connection.latestSyncJobStatus, feedbackPassed]); - - const onSkipFeedback = () => { - passFeedback(); - setIsOpen(false); - }; - - const onSendFeedback = (feedback: string) => { - sendFeedback({ - feedback, - source: connection.source, - destination: connection.destination, - }); - passFeedback(); - setIsOpen(false); - }; const onSync = () => syncConnection(connections[0]); @@ -81,7 +55,7 @@ const FinalStep: React.FC = () => { img="/videoCover.png" /> - {!feedbackPassed && } + <FormattedMessage @@ -95,8 +69,6 @@ const FinalStep: React.FC = () => { {visibleUseCases?.map((item, key) => ( <UseCaseBlock key={item} count={key + 1} href={useCaseLinks[item]} onSkip={skipCase} id={item} /> ))} - - {isOpen ? <SyncCompletedModal onClose={onSkipFeedback} onPassFeedback={onSendFeedback} /> : null} </> ); }; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/SyncCompletedModal.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/SyncCompletedModal.tsx deleted file mode 100644 index b232732873a0..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/SyncCompletedModal.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import Modal from "components/Modal"; - -import ModalBody from "./components/ModalBody"; -import ModalHeader from "./components/ModalHeader"; - -interface SyncCompletedModalProps { - onClose: () => void; - onPassFeedback: (feedback: string) => void; -} - -const SyncCompletedModal: React.FC<SyncCompletedModalProps> = ({ onClose, onPassFeedback }) => { - return ( - <Modal> - <ModalHeader /> - <ModalBody onClose={onClose} onPassFeedback={onPassFeedback} /> - </Modal> - ); -}; - -export default SyncCompletedModal; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/BadIcon.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/BadIcon.tsx deleted file mode 100644 index 55483784a99c..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/BadIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const BadIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => ( - <svg width="66" height="62" viewBox="0 0 66 62" fill="none"> - <path - d="M25.2 39H6C4.4087 39 2.88258 38.3679 1.75736 37.2426C0.632144 36.1174 3.19289e-06 34.5913 3.19289e-06 33V26.688C-0.000805669 25.9039 0.152076 25.1273 0.450003 24.402L9.738 1.86C9.96385 1.31026 10.3479 0.839985 10.8414 0.508837C11.3349 0.177688 11.9157 0.000586411 12.51 0H63C63.7957 0 64.5587 0.31607 65.1213 0.87868C65.6839 1.44129 66 2.20435 66 3V33C66 33.7957 65.6839 34.5587 65.1213 35.1213C64.5587 35.6839 63.7957 36 63 36H52.554C52.0737 35.9999 51.6004 36.1151 51.1739 36.3359C50.7474 36.5567 50.3801 36.8767 50.103 37.269L33.744 60.447C33.5372 60.7401 33.2322 60.9493 32.8844 61.0368C32.5365 61.1243 32.1689 61.0843 31.848 60.924L26.406 58.2C24.8745 57.4345 23.651 56.1681 22.9388 54.6111C22.2266 53.054 22.0686 51.3002 22.491 49.641L25.2 39ZM48 31.236V6H14.52L6 26.688V33H25.2C26.1138 33.0001 27.0155 33.209 27.8363 33.6106C28.6571 34.0123 29.3753 34.5961 29.9362 35.3175C30.497 36.039 30.8857 36.879 31.0725 37.7735C31.2592 38.668 31.2393 39.5934 31.014 40.479L28.305 51.123C28.2202 51.455 28.2517 51.8061 28.3941 52.1177C28.5366 52.4294 28.7815 52.6829 29.088 52.836L31.071 53.826L45.201 33.81C45.951 32.748 46.911 31.878 48 31.236ZM54 30H60V6H54V30Z" - fill={color} - /> - </svg> -); - -export default BadIcon; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/FeedbackButton.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/FeedbackButton.tsx deleted file mode 100644 index ac5e8e4b3d82..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/FeedbackButton.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import BadIcon from "./BadIcon"; -import GoodIcon from "./GoodIcon"; - -interface FeedbackButtonProps { - isBad?: boolean; - onClick: () => void; -} - -const ButtonView = styled.div<FeedbackButtonProps>` - color: ${({ theme, isBad }) => (isBad ? theme.redColor : theme.primaryColor)}; - height: 133px; - width: 133px; - background: ${({ theme }) => theme.whiteColor}; - margin: 0 10px; - box-shadow: 0 19px 15px -15px #d1d1db; - border-radius: 24px; - cursor: pointer; - text-align: center; - padding-top: ${({ isBad }) => (isBad ? 40 : 32)}px; -`; - -const FeedbackButton: React.FC<FeedbackButtonProps> = ({ isBad, onClick }) => { - return ( - <ButtonView isBad={isBad} onClick={onClick}> - {isBad ? <BadIcon /> : <GoodIcon />} - </ButtonView> - ); -}; - -export default FeedbackButton; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/GoodIcon.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/GoodIcon.tsx deleted file mode 100644 index ba73ff9ab386..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/GoodIcon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const GoodIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => ( - <svg width="66" height="63" viewBox="0 0 66 63" fill="none"> - <path - d="M40.8 23.0012H60C61.5913 23.0012 63.1174 23.6333 64.2426 24.7585C65.3679 25.8838 66 27.4099 66 29.0012V35.3132C66.0008 36.0973 65.8479 36.8739 65.55 37.5992L56.265 60.1442C56.0385 60.6938 55.6538 61.1638 55.1597 61.4944C54.6657 61.8251 54.0845 62.0014 53.49 62.0012H3C2.20435 62.0012 1.44129 61.6851 0.87868 61.1225C0.31607 60.5599 0 59.7968 0 59.0012V29.0012C0 28.2055 0.31607 27.4425 0.87868 26.8799C1.44129 26.3172 2.20435 26.0012 3 26.0012H13.446C13.9263 26.0013 14.3996 25.8861 14.8261 25.6653C15.2526 25.4445 15.6199 25.1244 15.897 24.7322L32.256 1.55118C32.4628 1.25811 32.7678 1.04886 33.1156 0.961347C33.4635 0.873836 33.8311 0.913865 34.152 1.07418L39.594 3.79518C41.1255 4.56066 42.349 5.82712 43.0612 7.38412C43.7734 8.94113 43.9314 10.6949 43.509 12.3542L40.8 23.0012ZM18 30.7652V56.0012H51.48L60 35.3132V29.0012H40.8C39.8862 29.001 38.9845 28.7922 38.1637 28.3906C37.3429 27.9889 36.6247 27.4051 36.0638 26.6836C35.503 25.9622 35.1143 25.1222 34.9275 24.2276C34.7408 23.3331 34.7607 22.4078 34.986 21.5222L37.695 10.8782C37.7798 10.5462 37.7483 10.1951 37.6059 9.88346C37.4634 9.57181 37.2185 9.31832 36.912 9.16518L34.929 8.17518L20.799 28.1912C20.049 29.2532 19.089 30.1232 18 30.7652ZM12 32.0012H6V56.0012H12V32.0012Z" - fill={color} - /> - </svg> -); - -export default GoodIcon; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalBody.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalBody.tsx deleted file mode 100644 index af3802c51c97..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalBody.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; - -import { H3, Button } from "components/base"; - -import FeedbackButton from "./FeedbackButton"; - -const Body = styled.div` - color: ${({ theme }) => theme.textColor}; - padding: 22px 48px 23px 46px; - background: ${({ theme }) => theme.beigeColor}; - max-width: 492px; - border-radius: 0 0 10px 10px; - text-align: center; -`; - -const FeedbackButtons = styled.div` - padding: 15px 0 29px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -`; - -interface ModalBodyProps { - onClose: () => void; - onPassFeedback: (feedback: string) => void; -} - -const ModalBody: React.FC<ModalBodyProps> = ({ onClose, onPassFeedback }) => { - return ( - <Body> - <H3 center bold parentColor> - <FormattedMessage id="onboarding.checkData" /> - </H3> - <FeedbackButtons> - <FeedbackButton isBad onClick={() => onPassFeedback("dislike")} /> - <FeedbackButton onClick={() => onPassFeedback("like")} /> - </FeedbackButtons> - <Button secondary onClick={onClose}> - <FormattedMessage id="onboarding.skipFeedback" /> - </Button> - </Body> - ); -}; - -export default ModalBody; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalHeader.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalHeader.tsx deleted file mode 100644 index 864b88e31c14..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/components/ModalHeader.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import { FormattedMessage } from "react-intl"; -import styled from "styled-components"; - -import { H3 } from "components/base"; - -const Header = styled.div` - color: ${({ theme }) => theme.whiteColor}; - padding: 59px 78px 39px; - background: ${({ theme }) => theme.textColor} url("/stars-background.svg"); - max-width: 492px; - border-radius: 10px 10px 0 0; - position: relative; -`; - -const Rocket = styled.img` - position: absolute; - width: 218px; - transform: matrix(0.99, 0.12, -0.12, 0.99, 0, 0) rotate(-4.78deg); - top: -54px; - left: calc(50% - 261px / 2 + 24px); - transition: 0.8s; -`; - -const ModalHeader: React.FC = () => { - return ( - <Header> - <H3 center bold parentColor> - <FormattedMessage id="onboarding.syncCompleted" /> - </H3> - <Rocket src="/rocket.png" /> - </Header> - ); -}; - -export default ModalHeader; diff --git a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/index.tsx b/airbyte-webapp/src/views/Feedback/SyncCompletedModal/index.tsx deleted file mode 100644 index c4562bfc02ce..000000000000 --- a/airbyte-webapp/src/views/Feedback/SyncCompletedModal/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import SyncCompletedModal from "./SyncCompletedModal"; - -export default SyncCompletedModal; From 10ed3dae952b4d67329bce432780d5674a68c89c Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Tue, 13 Sep 2022 20:07:46 +0300 Subject: [PATCH 2/8] create FirstSuccessfulSync component --- .../FirstSuccessfulSync.module.scss | 24 +++++++++++++++++++ .../FirstSuccessfulSync.tsx | 17 +++++++++++++ .../components/FirstSuccessfulSync/index.ts | 1 + 3 files changed, 42 insertions(+) create mode 100644 airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss create mode 100644 airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx create mode 100644 airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/index.ts diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss new file mode 100644 index 000000000000..e1934e48acf2 --- /dev/null +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss @@ -0,0 +1,24 @@ +@use "../../../../scss/colors"; +@use "../../../../scss/variables"; + +.container { + width: 100%; + color: colors.$white; + padding: 50px 78px 40px; + background: colors.$dark-blue-900 url("../../../../../public/stars-background.svg"); + border-radius: variables.$border-radius-md; + position: relative; +} + +.rocket { + position: absolute; + width: 180px; + transform: matrix(0.99, 0.12, -0.12, 0.99, 0, 0) rotate(-4.78deg); + top: -54px; + left: calc(50% - 261px / 2 + 24px); + transition: 0.8s; +} + +.completedSyncText { + color: inherit; +} diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx new file mode 100644 index 000000000000..ff41292b8fc3 --- /dev/null +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { FormattedMessage } from "react-intl"; + +import { Text } from "components/base/Text"; + +import styles from "./FirstSuccessfulSync.module.scss"; + +export const FirstSuccessfulSync: React.FC = () => { + return ( + <div className={styles.container}> + <Text as="h3" size="md" centered className={styles.completedSyncText}> + <FormattedMessage id="onboarding.syncCompleted" /> + </Text> + <img className={styles.rocket} src="/rocket.png" alt="" /> + </div> + ); +}; diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/index.ts b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/index.ts new file mode 100644 index 000000000000..62f71481485e --- /dev/null +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/index.ts @@ -0,0 +1 @@ +export * from "./FirstSuccessfulSync"; From 7732e3bf27a06f99c729383ff96c6a6fdb1e47fe Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Tue, 13 Sep 2022 20:08:43 +0300 Subject: [PATCH 3/8] add FirstSuccessfulSync component to FinalStep --- .../pages/OnboardingPage/components/FinalStep.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx index 4568be603831..700d7fe0b0ca 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx @@ -1,13 +1,15 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { FormattedMessage } from "react-intl"; import styled from "styled-components"; import { H1 } from "components"; import { useConfig } from "config"; +import Status from "core/statuses"; import { useOnboardingService } from "hooks/services/Onboarding/OnboardingService"; import { useConnectionList, useGetConnection, useSyncConnection } from "hooks/services/useConnectionHook"; +import { FirstSuccessfulSync } from "./FirstSuccessfulSync"; import HighlightedText from "./HighlightedText"; import ProgressBlock from "./ProgressBlock"; import UseCaseBlock from "./UseCaseBlock"; @@ -36,6 +38,13 @@ const FinalStep: React.FC = () => { const connection = useGetConnection(connections[0].connectionId, { refetchInterval: 2500, }); + const [isFirstSyncSuccessful, setIsFirstSyncSuccessful] = useState(false); + + useEffect(() => { + if (connection.latestSyncJobStatus === Status.SUCCEEDED) { + setIsFirstSyncSuccessful(true); + } + }, [connection.latestSyncJobStatus]); const onSync = () => syncConnection(connections[0]); @@ -56,7 +65,7 @@ const FinalStep: React.FC = () => { /> </Videos> <ProgressBlock connection={connection} onSync={onSync} /> - + {isFirstSyncSuccessful && <FirstSuccessfulSync />} <Title bold> <FormattedMessage id="onboarding.useCases" From f5e623ff3456f86f549ca41634cab2c4a66d9660 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Tue, 13 Sep 2022 20:13:56 +0300 Subject: [PATCH 4/8] remove sendFeedback functionality from useWorkspace hook --- airbyte-webapp/src/core/analytics/types.ts | 1 - .../src/hooks/services/useWorkspace.tsx | 21 ------------------- 2 files changed, 22 deletions(-) diff --git a/airbyte-webapp/src/core/analytics/types.ts b/airbyte-webapp/src/core/analytics/types.ts index 92aa3994135f..f73597c16786 100644 --- a/airbyte-webapp/src/core/analytics/types.ts +++ b/airbyte-webapp/src/core/analytics/types.ts @@ -22,7 +22,6 @@ export const enum Action { DELETE = "Delete", REQUEST = "Request", SKIP = "Skip", - FEEDBACK = "Feedback", PREFERENCES = "Preferences", NO_MATCHING_CONNECTOR = "NoMatchingConnector", SELECTION_OPENED = "SelectionOpened", diff --git a/airbyte-webapp/src/hooks/services/useWorkspace.tsx b/airbyte-webapp/src/hooks/services/useWorkspace.tsx index ead12b156f56..742884dca98c 100644 --- a/airbyte-webapp/src/hooks/services/useWorkspace.tsx +++ b/airbyte-webapp/src/hooks/services/useWorkspace.tsx @@ -2,7 +2,6 @@ import { useMutation } from "react-query"; import { Action, Namespace } from "core/analytics"; import { NotificationService } from "core/domain/notification/NotificationService"; -import { DestinationRead, SourceRead } from "core/request/AirbyteClient"; import { useAnalyticsService } from "hooks/services/Analytics"; import { useInitService } from "services/useInitService"; import { useCurrentWorkspace, useUpdateWorkspace } from "services/workspaces/WorkspacesService"; @@ -45,25 +44,6 @@ const useWorkspace = () => { }); }; - const sendFeedback = async ({ - feedback, - source, - destination, - }: { - feedback: string; - source: SourceRead; - destination: DestinationRead; - }) => { - analyticsService.track(Namespace.ONBOARDING, Action.FEEDBACK, { - actionDescription: "Onboarding Feedback", - feedback, - connector_source_definition: source?.sourceName, - connector_source_definition_id: source?.sourceDefinitionId, - connector_destination_definition: destination?.destinationName, - connector_destination_definition_id: destination?.destinationDefinitionId, - }); - }; - const setInitialSetupConfig = async (data: { email: string; anonymousDataCollection: boolean; @@ -139,7 +119,6 @@ const useWorkspace = () => { updatePreferences, updateWebhook, testWebhook: tryWebhookUrl.mutateAsync, - sendFeedback, }; }; From 725a1febdd0180288cddab54feaa7858c1ff85a3 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Tue, 13 Sep 2022 20:22:48 +0300 Subject: [PATCH 5/8] remove sendFeedback functionality from Onboarding context --- .../src/hooks/services/Onboarding/OnboardingService.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx b/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx index 54ca702319ea..32f121eec9b8 100644 --- a/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx +++ b/airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx @@ -5,8 +5,6 @@ import casesConfig from "config/casesConfig.json"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; interface Context { - feedbackPassed?: boolean; - passFeedback: () => void; visibleUseCases?: string[]; useCaseLinks: Record<string, string>; skipCase: (skipId: string) => void; @@ -16,7 +14,6 @@ export const OnboardingServiceContext = React.createContext<Context | null>(null export const OnboardingServiceProvider: React.FC = ({ children }) => { const workspace = useCurrentWorkspace(); - const [feedbackPassed, setFeedbackPassed] = useLocalStorage<boolean>(`${workspace.workspaceId}/passFeedback`, false); const [skippedUseCases, setSkippedUseCases] = useLocalStorage<string[]>( `${workspace.workspaceId}/skippedUseCases`, [] @@ -24,14 +21,11 @@ export const OnboardingServiceProvider: React.FC = ({ children }) => { const ctx = useMemo<Context>( () => ({ - feedbackPassed, - passFeedback: () => setFeedbackPassed(true), visibleUseCases: Object.keys(casesConfig).filter((useCase) => !skippedUseCases?.includes(useCase)), useCaseLinks: casesConfig, skipCase: (skipId: string) => setSkippedUseCases([...(skippedUseCases ?? []), skipId]), }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [feedbackPassed, skippedUseCases] + [setSkippedUseCases, skippedUseCases] ); return <OnboardingServiceContext.Provider value={ctx}>{children}</OnboardingServiceContext.Provider>; From 20d861cdbc52759d60241e2828217895bfb4a396 Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Wed, 14 Sep 2022 15:16:38 +0300 Subject: [PATCH 6/8] move svg image closer to component where it's used --- .../FirstSuccessfulSync/FirstSuccessfulSync.module.scss | 2 +- .../components/FirstSuccessfulSync}/stars-background.svg | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename airbyte-webapp/{public => src/pages/OnboardingPage/components/FirstSuccessfulSync}/stars-background.svg (100%) diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss index e1934e48acf2..b48d9778e57b 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss @@ -5,7 +5,7 @@ width: 100%; color: colors.$white; padding: 50px 78px 40px; - background: colors.$dark-blue-900 url("../../../../../public/stars-background.svg"); + background: colors.$dark-blue-900 url("stars-background.svg"); border-radius: variables.$border-radius-md; position: relative; } diff --git a/airbyte-webapp/public/stars-background.svg b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/stars-background.svg similarity index 100% rename from airbyte-webapp/public/stars-background.svg rename to airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/stars-background.svg From a660d6e406b1a215c336d9acf01909124ffbc8cd Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Wed, 14 Sep 2022 15:21:02 +0300 Subject: [PATCH 7/8] update .completedSyncText text style --- .../FirstSuccessfulSync/FirstSuccessfulSync.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss index b48d9778e57b..d3ab31870af3 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss @@ -3,7 +3,6 @@ .container { width: 100%; - color: colors.$white; padding: 50px 78px 40px; background: colors.$dark-blue-900 url("stars-background.svg"); border-radius: variables.$border-radius-md; @@ -20,5 +19,5 @@ } .completedSyncText { - color: inherit; + color: colors.$white; } From fa4f3361b4345db6608d0c6a3275ec54991a6eef Mon Sep 17 00:00:00 2001 From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com> Date: Wed, 14 Sep 2022 17:45:13 +0300 Subject: [PATCH 8/8] add data-testid to FirstSuccessfulSync component --- .../components/FirstSuccessfulSync/FirstSuccessfulSync.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx index ff41292b8fc3..aa70ddf439c4 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx @@ -7,7 +7,7 @@ import styles from "./FirstSuccessfulSync.module.scss"; export const FirstSuccessfulSync: React.FC = () => { return ( - <div className={styles.container}> + <div className={styles.container} data-testid="firstSuccessfulSync"> <Text as="h3" size="md" centered className={styles.completedSyncText}> <FormattedMessage id="onboarding.syncCompleted" /> </Text>