Jamakase/update onboarding flow

airbyte-webapp/src/components/CenteredPageComponents/BigButton.tsx

@@ -1,11 +1,13 @@
 import styled from "styled-components";
 
 import { Button } from "components";
-const BigButton = styled(Button)`
+const BigButton = styled(Button)<{ shadow?: boolean }>`
   font-size: 16px;
   line-height: 19px;
   padding: 10px 27px;
   font-weight: 500;
+  box-shadow: ${({ shadow }) =>
+    shadow ? "0 8px 5px -5px rgba(0, 0, 0, 0.2)" : "none"};
 `;
 
 export default BigButton;

airbyte-webapp/src/components/ContentCard/ContentCard.tsx

@@ -7,6 +7,7 @@ type IProps = {
   title?: string | React.ReactNode;
   className?: string;
   onClick?: () => void;
+  full?: boolean;
 };
 
 const Title = styled(H5)`
@@ -19,7 +20,7 @@ const Title = styled(H5)`
 `;
 
 const ContentCard: React.FC<IProps> = (props) => (
-  <Card className={props.className} onClick={props.onClick}>
+  <Card className={props.className} onClick={props.onClick} full={props.full}>
     {props.title ? <Title>{props.title}</Title> : null}
     {props.children}
   </Card>

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -40,13 +40,15 @@ type IProps = {
   source: Source;
   destination: Destination;
   afterSubmitConnection?: () => void;
+  noTitles?: boolean;
 };
 
 const CreateConnectionContent: React.FC<IProps> = ({
   source,
   destination,
   afterSubmitConnection,
   additionBottomControls,
+  noTitles,
 }) => {
   const { createConnection } = useConnection();
   const analyticsService = useAnalytics();
@@ -80,15 +82,23 @@ const CreateConnectionContent: React.FC<IProps> = ({
 
   if (isLoading) {
     return (
-      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
+      <ContentCard
+        title={
+          noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
+        }
+      >
         <LoadingSchema />
       </ContentCard>
     );
   }
 
   if (schemaErrorStatus) {
     return (
-      <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
+      <ContentCard
+        title={
+          noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
+        }
+      >
         <TryAfterErrorBlock
           onClick={onDiscoverSchema}
           additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
@@ -130,7 +140,11 @@ const CreateConnectionContent: React.FC<IProps> = ({
   };
 
   return (
-    <ContentCard title={<FormattedMessage id="onboarding.setConnection" />}>
+    <ContentCard
+      title={
+        noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
+      }
+    >
       <Suspense fallback={<LoadingSchema />}>
         <ConnectionForm
           connection={connection}

airbyte-webapp/src/components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import ContentCard from "components/ContentCard";
 export type IProps = {
   title?: string | React.ReactNode;
   onClose?: () => void;
+  clear?: boolean;
 };
 
 const fadeIn = keyframes`
@@ -27,7 +28,7 @@ const Overlay = styled.div`
   z-index: 10;
 `;
 
-const Modal: React.FC<IProps> = ({ children, title, onClose }) => {
+const Modal: React.FC<IProps> = ({ children, title, onClose, clear }) => {
   const handleUserKeyPress = useCallback((event, closeModal) => {
     const { keyCode } = event;
     if (keyCode === 27) {
@@ -51,7 +52,7 @@ const Modal: React.FC<IProps> = ({ children, title, onClose }) => {
 
   return createPortal(
     <Overlay>
-      <ContentCard title={title}>{children}</ContentCard>
+      {clear ? children : <ContentCard title={title}>{children}</ContentCard>}
     </Overlay>,
     document.body
   );

airbyte-webapp/src/components/base/Card/Card.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
-export const Card = styled.div`
+export const Card = styled.div<{ full?: boolean }>`
+  width: ${({ full }) => (full ? "100%" : "auto")};
   background: ${({ theme }) => theme.whiteColor};
   border-radius: 10px;
   box-shadow: 0 2px 4px ${({ theme }) => theme.cardShadowColor};

airbyte-webapp/src/components/base/Titles/Titles.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 type IProps = {
   center?: boolean;
   bold?: boolean;
+  parentColor?: boolean;
 };
 
 export const H1 = styled.h1<IProps>`
@@ -12,7 +13,8 @@ export const H1 = styled.h1<IProps>`
   font-weight: ${(props) => (props.bold ? 600 : 500)};
   display: block;
   text-align: ${(props) => (props.center ? "center" : "left")};
-  color: ${({ theme }) => theme.textColor};
+  color: ${({ theme, parentColor }) =>
+    parentColor ? "inherid" : theme.textColor};
   margin: 0;
 `;
 

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -229,4 +229,13 @@ const useConnection = (): {
     deleteConnection,
   };
 };
+
+const useConnectionList = (): { connections: Connection[] } => {
+  const { workspace } = useWorkspace();
+  return useResource(ConnectionResource.listShape(), {
+    workspaceId: workspace.workspaceId,
+  });
+};
+
+export { useConnectionList };
 export default useConnection;

airbyte-webapp/src/locales/en.json

@@ -11,6 +11,7 @@
   "sidebar.connections": "Connections",
   "sidebar.settings": "Settings",
   "sidebar.update": "Update",
+  "sidebar.onboarding": "Onboarding",
 
   "form.continue": "Continue",
   "form.yourEmail": "Your email",
@@ -167,6 +168,31 @@
   "onboarding.fetchingSchema": "We are fetching the schema of your data source. \nThis should take less than a minute, but may take a few minutes on slow internet connections or data sources with a large amount of tables.",
   "onboarding.tutorial": "Check how you can sync PostgreSQL databases in minutes",
   "onboarding.skipOnboarding": "Skip Onboarding",
+  "onboarding.welcome": "Welcome to Airbyte!",
+  "onboarding.welcomeUser": "Welcome to Airbyte, {name}!",
+  "onboarding.welcomeUser.text": "<b>Your path to syncing your data starts here.</b>Connections are automated data pipelines that replicate data from a source to a destination.  ",
+  "onboarding.or": "or",
+  "onboarding.watchVideo": "Watch the 2-min demo video",
+  "onboarding.exploreDemo": "Explore our demo app with test data",
+  "onboarding.firstConnection": "Set up your first connection",
+  "onboarding.createFirstSource": "Create your <name>first source</name>",
+  "onboarding.createFirstSource.text": "Sources are tools where the data will be replicated from. ",
+  "onboarding.createFirstDestination": "Create your <name>first destination</name>",
+  "onboarding.createFirstDestination.text": "Sources are tools where the data will be replicated from. ",
+  "onboarding.createConnection": "Set up <name>the connection</name>",
+  "onboarding.createConnection.text": "Sources are tools where the data will be replicated from. ",
+  "onboarding.synchronisationProgress": "<sr>Source</sr><ds>Destination</ds> = <sync>Synchronisation</sync> in progress",
+  "onboarding.useCases": "Enable <name>popular use cases</name>",
+  "onboarding.replicateMySQL": "Replicate your MySQL database to Postgres with log-based CDC",
+  "onboarding.consolidateMarketing": "Consolidate your marketing data to compute the CAC for your paid customers",
+  "onboarding.consolidatePayment": "Consolidate your payment data to compute your LTV",
+  "onboarding.buildDashboard": "Build an activity dashboard for your engineering project",
+  "onboarding.zoomCalls": "Visualize the time spent by your team in Zoom calls ",
+  "onboarding.skip": "Skip",
+  "onboarding.closeOnboarding": "Close onboarding",
+  "onboarding.syncCompleted": "Your first sync has been successfully completed!",
+  "onboarding.checkData": "Please check the data at the destination.\nDoes it fit with your expectations?",
+  "onboarding.skipNow": "Skip for now",
 
   "sources.searchIncremental": "Search cursor value for incremental",
   "sources.incrementalDefault": "{value} (default)",

airbyte-webapp/src/packages/cloud/routes.tsx

@@ -36,6 +36,7 @@ import { PageConfig } from "pages/SettingsPage/SettingsPage";
 import { WorkspaceSettingsView } from "./views/workspaces/WorkspaceSettingsView";
 import { UsersSettingsView } from "packages/cloud/views/users/UsersSettingsView/UsersSettingsView";
 import { AccountSettingsView } from "packages/cloud/views/users/AccountSettingsView/AccountSettingsView";
+import OnboardingPage from "pages/OnboardingPage";
 import { ConfirmEmailPage } from "./views/auth/ConfirmEmailPage";
 import useRouter from "hooks/useRouter";
 import { WithPageAnalytics } from "pages/withPageAnalytics";
@@ -145,6 +146,9 @@ const MainRoutes: React.FC<{ currentWorkspaceId: string }> = ({
       <Route path={Routes.Settings}>
         <SettingsPage pageConfig={pageConfig} />
       </Route>
+      <Route exact path={Routes.Onboarding}>
+        <OnboardingPage />
+      </Route>
       <Route exact path={Routes.Root}>
         <SourcesPage />
       </Route>

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -16,7 +16,9 @@ import Indicator from "components/Indicator";
 import Source from "views/layout/SideBar/components/SourceIcon";
 import Connections from "views/layout/SideBar/components/ConnectionsIcon";
 import Destination from "views/layout/SideBar/components/DestinationIcon";
+import Onboarding from "views/layout/SideBar/components/OnboardingIcon";
 import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout";
+// import useWorkspace from "components/hooks/services/useWorkspace";
 
 const Bar = styled.nav`
   width: 100px;
@@ -123,6 +125,7 @@ const WorkspaceButton = styled.div`
 const SideBar: React.FC = () => {
   const { hasNewVersions } = useConnector();
   const config = useConfig();
+  // const { workspace } = useWorkspace();
 
   return (
     <Bar>
@@ -136,6 +139,16 @@ const SideBar: React.FC = () => {
           )}
         </WorkspacePopout>
         <Menu>
+          {/*{workspace.displaySetupWizard ? (*/}
+          <li>
+            <MenuItem to={Routes.Onboarding} activeClassName="active">
+              <Onboarding />
+              <Text>
+                <FormattedMessage id="sidebar.onboarding" />
+              </Text>
+            </MenuItem>
+          </li>
+          {/*) : null}*/}
           <li>
             <MenuItem to={Routes.Connections} activeClassName="active">
               <Connections />