diff --git a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx index dee8cf500232..2e86bfd12f94 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx @@ -2,6 +2,7 @@ import React, { Suspense, useEffect, useState } from "react"; import styled from "styled-components"; import { useResource } from "rest-hooks"; +import { Button } from "components"; import HeadTitle from "components/HeadTitle"; import useSource, { useSourceList } from "hooks/services/useSourceHook"; import useDestination, { @@ -28,6 +29,7 @@ import LoadingPage from "components/LoadingPage"; import useWorkspace from "hooks/services/useWorkspace"; import useRouterHook from "hooks/useRouter"; import { Routes } from "pages/routes"; +import { FormattedMessage } from "react-intl"; const Content = styled.div<{ big?: boolean; medium?: boolean }>` width: 100%; @@ -41,6 +43,17 @@ const Content = styled.div<{ big?: boolean; medium?: boolean }>` position: relative; z-index: 2; `; + +const Footer = styled.div` + width: 100%; + height: 100px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + padding: 40px 20px 0; +`; + const ScreenContent = styled.div` width: 100%; position: relative; @@ -96,6 +109,11 @@ const OnboardingPage: React.FC = () => { const getDestinationDefinitionById = (id: string) => destinationDefinitions.find((item) => item.destinationDefinitionId === id); + const handleFinishOnboarding = () => { + finishOnboarding(); + push(Routes.Connections); + }; + const renderStep = () => { if (currentStep === StepType.INSTRUCTION) { const onStart = () => setCurrentStep(StepType.CREATE_SOURCE); @@ -204,17 +222,9 @@ const OnboardingPage: React.FC = () => { } const onSync = () => syncConnection(connections[0]); - const onCloseOnboarding = () => { - finishOnboarding(); - push(Routes.Connections); - }; return ( - + ); }; @@ -235,6 +245,15 @@ const OnboardingPage: React.FC = () => { }>{renderStep()} +
+ +
); diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx index 0261bde007df..b78904a27b88 100644 --- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx +++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx @@ -6,7 +6,7 @@ import { useResource, useSubscription } from "rest-hooks"; import VideoItem from "./VideoItem"; import ProgressBlock from "./ProgressBlock"; import HighlightedText from "./HighlightedText"; -import { H1, Button } from "components/base"; +import { H1 } from "components/base"; import UseCaseBlock from "./UseCaseBlock"; import ConnectionResource from "core/resources/Connection"; import SyncCompletedModal from "views/Feedback/SyncCompletedModal"; @@ -17,7 +17,6 @@ import useWorkspace from "hooks/services/useWorkspace"; type FinalStepProps = { connectionId: string; onSync: () => void; - onFinishOnboarding: () => void; }; const Title = styled(H1)` @@ -35,15 +34,7 @@ const Videos = styled.div` padding: 0 27px; `; -const CloseButton = styled(Button)` - margin-top: 30px; -`; - -const FinalStep: React.FC = ({ - connectionId, - onSync, - onFinishOnboarding, -}) => { +const FinalStep: React.FC = ({ connectionId, onSync }) => { const { sendFeedback } = useWorkspace(); const { feedbackPassed, @@ -119,10 +110,6 @@ const FinalStep: React.FC = ({ /> ))} - - - - {isOpen ? ( setIsOpen(false)}