6814 / skip onboarding button (#6890)

airbytehq · Oct 11, 2021 · f37d13f · f37d13f
1 parent d767003
commit f37d13f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git 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 (
-      <FinalStep
-        connectionId={connections[0].connectionId}
-        onSync={onSync}
-        onFinishOnboarding={onCloseOnboarding}
-      />
+      <FinalStep connectionId={connections[0].connectionId} onSync={onSync} />
     );
   };
 
@@ -235,6 +245,15 @@ const OnboardingPage: React.FC = () => {
         <StepsCounter steps={steps} currentStep={currentStep} />
 
         <Suspense fallback={<LoadingPage />}>{renderStep()}</Suspense>
+        <Footer>
+          <Button secondary onClick={() => handleFinishOnboarding()}>
+            {currentStep === StepType.FINAl ? (
+              <FormattedMessage id="onboarding.closeOnboarding" />
+            ) : (
+              <FormattedMessage id="onboarding.skipOnboarding" />
+            )}
+          </Button>
+        </Footer>
       </Content>
     </ScreenContent>
   );

diff --git 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<FinalStepProps> = ({
-  connectionId,
-  onSync,
-  onFinishOnboarding,
-}) => {
+const FinalStep: React.FC<FinalStepProps> = ({ connectionId, onSync }) => {
   const { sendFeedback } = useWorkspace();
   const {
     feedbackPassed,
@@ -119,10 +110,6 @@ const FinalStep: React.FC<FinalStepProps> = ({
           />
         ))}
 
-      <CloseButton secondary onClick={onFinishOnboarding}>
-        <FormattedMessage id="onboarding.closeOnboarding" />
-      </CloseButton>
-
       {isOpen ? (
         <SyncCompletedModal
           onClose={() => setIsOpen(false)}