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/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; skipCase: (skipId: string) => void; @@ -16,7 +14,6 @@ export const OnboardingServiceContext = React.createContext(null export const OnboardingServiceProvider: React.FC = ({ children }) => { const workspace = useCurrentWorkspace(); - const [feedbackPassed, setFeedbackPassed] = useLocalStorage(`${workspace.workspaceId}/passFeedback`, false); const [skippedUseCases, setSkippedUseCases] = useLocalStorage( `${workspace.workspaceId}/skippedUseCases`, [] @@ -24,14 +21,11 @@ export const OnboardingServiceProvider: React.FC = ({ children }) => { const ctx = useMemo( () => ({ - 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 {children}; 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, }; }; diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx index df092e6c90f5..700d7fe0b0ca 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx @@ -8,9 +8,8 @@ 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 { FirstSuccessfulSync } from "./FirstSuccessfulSync"; import HighlightedText from "./HighlightedText"; import ProgressBlock from "./ProgressBlock"; import UseCaseBlock from "./UseCaseBlock"; @@ -33,35 +32,19 @@ 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); + const [isFirstSyncSuccessful, setIsFirstSyncSuccessful] = useState(false); useEffect(() => { - if (connection.latestSyncJobStatus === Status.SUCCEEDED && !feedbackPassed) { - setIsOpen(true); + if (connection.latestSyncJobStatus === Status.SUCCEEDED) { + setIsFirstSyncSuccessful(true); } - }, [connection.latestSyncJobStatus, feedbackPassed]); - - const onSkipFeedback = () => { - passFeedback(); - setIsOpen(false); - }; - - const onSendFeedback = (feedback: string) => { - sendFeedback({ - feedback, - source: connection.source, - destination: connection.destination, - }); - passFeedback(); - setIsOpen(false); - }; + }, [connection.latestSyncJobStatus]); const onSync = () => syncConnection(connections[0]); @@ -81,8 +64,8 @@ const FinalStep: React.FC = () => { img="/videoCover.png" /> - {!feedbackPassed && } - + + {isFirstSyncSuccessful && } <FormattedMessage id="onboarding.useCases" @@ -95,8 +78,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/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss new file mode 100644 index 000000000000..d3ab31870af3 --- /dev/null +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss @@ -0,0 +1,23 @@ +@use "../../../../scss/colors"; +@use "../../../../scss/variables"; + +.container { + width: 100%; + padding: 50px 78px 40px; + background: colors.$dark-blue-900 url("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: colors.$white; +} 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..aa70ddf439c4 --- /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} data-testid="firstSuccessfulSync"> + <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"; 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 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;