Add video to onboarding

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/pages/OnboardingPage/components/FinalStep.tsx

@@ -38,10 +38,14 @@ const FinalStep: React.FC<FinalStepProps> = ({ useCases }) => {
         <VideoItem
           small
           description={<FormattedMessage id="onboarding.watchVideo" />}
+          videoId="sKDviQrOAbU"
+          img="/videoCover.png"
         />
         <VideoItem
           small
           description={<FormattedMessage id="onboarding.exploreDemo" />}
+          videoId="sKDviQrOAbU"
+          img="/videoCover.png"
         />
       </Videos>
       <ProgressBlock />

airbyte-webapp/src/pages/OnboardingPage/components/LetterLine.tsx

@@ -50,16 +50,16 @@ const Path = styled.div<{ exit?: boolean }>`
   width: 100%;
   height: 2px;
   background: ${({ theme }) => theme.primaryColor};
-  animation: ${({ exit }) => (exit ? ExitRollAnimation : RollAnimation)} 0.8s
-    linear ${({ exit }) => (exit ? 0.2 : 0)}s;
+  animation: ${({ exit }) => (exit ? ExitRollAnimation : RollAnimation)} 0.6s
+    linear ${({ exit }) => (exit ? 0.8 : 0)}s;
   animation-fill-mode: forwards;
 `;
 const Img = styled.img<{ exit?: boolean }>`
   position: absolute;
   top: -58px;
   left: -78px;
-  animation: ${({ exit }) => (exit ? ExitAnimation : EnterAnimation)} 0.9s
-    linear ${({ exit }) => (exit ? 0 : 0.4)}s;
+  animation: ${({ exit }) => (exit ? ExitAnimation : EnterAnimation)} 0.8s
+    linear ${({ exit }) => (exit ? 0 : 0.6)}s;
   animation-fill-mode: both;
 `;
 

airbyte-webapp/src/pages/OnboardingPage/components/VideoItem.tsx → airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/VideoItem.tsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
+import ShowVideo from "./components/ShowVideo";
+import PlayButton from "./components/PlayButton";
+
 type VideoItemProps = {
   small?: boolean;
-  videoLink?: string;
+  videoId?: string;
+  img?: string;
   description?: React.ReactNode;
 };
 
@@ -44,16 +48,21 @@ const VideoBlock = styled.div<{ small?: boolean }>`
   }
 `;
 
-const VideoFrame = styled.div<{ small?: boolean }>`
+const VideoFrame = styled.div<{ small?: boolean; img?: string }>`
   position: relative;
   width: ${({ small }) => (small ? 158 : 317)}px;
   height: ${({ small }) => (small ? 92 : 185)}px;
-  background: ${({ theme }) => theme.whiteColor};
+  background: ${({ theme }) => theme.whiteColor}
+    ${({ img }) => (img ? `url(${img})` : "")};
+  background-size: cover;
   border: 2.4px solid ${({ theme }) => theme.whiteColor};
   box-shadow: 0 2.4px 4.8px rgba(26, 25, 77, 0.12),
     0 16.2px 7.2px -10.2px rgba(26, 25, 77, 0.2);
   border-radius: ${({ small }) => (small ? 3.6 : 7.2)}px;
   z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 const Description = styled.div<{ small?: boolean }>`
@@ -65,13 +74,25 @@ const Description = styled.div<{ small?: boolean }>`
   margin-top: 14px;
 `;
 
-const VideoItem: React.FC<VideoItemProps> = ({ description, small }) => {
+const VideoItem: React.FC<VideoItemProps> = ({
+  description,
+  small,
+  videoId,
+  img,
+}) => {
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+
   return (
     <Content small={small}>
       <VideoBlock small={small}>
-        <VideoFrame small={small} />
+        <VideoFrame small={small} img={img}>
+          <PlayButton small={small} onClick={() => setIsVideoOpen(true)} />
+        </VideoFrame>
       </VideoBlock>
       <Description small={small}>{description}</Description>
+      {isVideoOpen ? (
+        <ShowVideo videoId={videoId} onClose={() => setIsVideoOpen(false)} />
+      ) : null}
     </Content>
   );
 };

airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/PlayButton.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+
+type PlayButtonProps = {
+  small?: boolean;
+  onClick: () => void;
+};
+
+export const BigCircleAnimation = keyframes`
+  0% {
+    height: 80%;
+    width: 80%;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export const MiddleCircleAnimation = keyframes`
+  0% {
+    height: 53%;
+    width: 53%;
+  }
+  100% {
+    width: 73%;
+    height: 73%;
+  }
+`;
+
+export const SmallCircleAnimation = keyframes`
+  0% {
+    height: 20%;
+    width: 20%;
+  }
+  100% {
+    width: 40%;
+    height: 40%;
+  }
+`;
+
+const MainCircle = styled.div<PlayButtonProps>`
+  cursor: pointer;
+  height: ${({ small }) => (small ? 42 : 85)}px;
+  width: ${({ small }) => (small ? 42 : 85)}px;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.primaryColor};
+  padding: ${({ small }) => (small ? "10px 0 0 16px" : "20px 0 0 32px")};
+  box-shadow: 0 2.4px 4.8px ${({ theme }) => theme.cardShadowColor},
+    0 16.2px 7.2px -10.2px ${({ theme }) => theme.cardShadowColor};
+
+  &:hover {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+
+    & > img {
+      display: none;
+    }
+    & div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`;
+
+const BigCircle = styled.div<{ small?: boolean }>`
+  height: ${({ small }) => (small ? 32 : 65)}px;
+  width: ${({ small }) => (small ? 32 : 65)}px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  display: none;
+  animation: ${BigCircleAnimation} alternate 0.5s linear 0s infinite;
+`;
+
+const MiddleCircle = styled(BigCircle)`
+  height: ${({ small }) => (small ? 22 : 45)}px;
+  width: ${({ small }) => (small ? 22 : 45)}px;
+  animation-name: ${MiddleCircleAnimation};
+`;
+
+const SmallCircle = styled(BigCircle)`
+  height: ${({ small }) => (small ? 8 : 17)}px;
+  width: ${({ small }) => (small ? 8 : 17)}px;
+  animation-name: ${SmallCircleAnimation};
+`;
+
+const PlayButton: React.FC<PlayButtonProps> = ({ small, onClick }) => {
+  return (
+    <MainCircle small={small} onClick={onClick}>
+      <img src="/play.svg" height={small ? 22 : 44} alt="play" />
+      <BigCircle>
+        <MiddleCircle>
+          <SmallCircle />
+        </MiddleCircle>
+      </BigCircle>
+    </MainCircle>
+  );
+};
+
+export default PlayButton;

airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import Modal from "components/Modal";
+import { Button } from "components/base";
+
+type ShowVideoProps = {
+  videoId?: string;
+  onClose: () => void;
+};
+
+const CloseButton = styled(Button)`
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  color: ${({ theme }) => theme.whiteColor};
+  font-size: 20px;
+
+  &:hover {
+    border: none;
+  }
+`;
+
+const ShowVideo: React.FC<ShowVideoProps> = ({ videoId, onClose }) => {
+  return (
+    <Modal onClose={onClose} clear>
+      <CloseButton onClick={onClose} iconOnly>
+        <FontAwesomeIcon icon={faTimes} />
+      </CloseButton>
+      <iframe
+        width="940"
+        height="528"
+        src={`https://www.youtube.com/embed/${videoId}`}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </Modal>
+  );
+};
+
+export default ShowVideo;

airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/index.tsx

@@ -0,0 +1,4 @@
+import VideoItem from "./VideoItem";
+
+export default VideoItem;
+export { VideoItem };

airbyte-webapp/src/pages/OnboardingPage/components/WelcomeStep.tsx

@@ -52,10 +52,14 @@ const WelcomeStep: React.FC<WelcomeStepProps> = ({ userName, onSubmit }) => {
       <Videos>
         <VideoItem
           description={<FormattedMessage id="onboarding.watchVideo" />}
+          videoId="sKDviQrOAbU"
+          img="/videoCover.png"
         />
         <FormattedMessage id="onboarding.or" />
         <VideoItem
           description={<FormattedMessage id="onboarding.exploreDemo" />}
+          videoId="sKDviQrOAbU"
+          img="/videoCover.png"
         />
       </Videos>
       <BigButton onClick={onSubmit} shadow>

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

@@ -17,6 +17,8 @@ import Indicator from "components/Indicator";
 import Source from "./components/SourceIcon";
 import Connections from "./components/ConnectionsIcon";
 import Destination from "./components/DestinationIcon";
+import Onboarding from "./components/OnboardingIcon";
+import useWorkspace from "components/hooks/services/useWorkspace";
 
 const Bar = styled.nav`
   width: 100px;
@@ -102,6 +104,7 @@ const Notification = styled(Indicator)`
 
 const SideBar: React.FC = () => {
   const { hasNewVersions } = useConnector();
+  const { workspace } = useWorkspace();
 
   return (
     <Bar>
@@ -110,6 +113,16 @@ const SideBar: React.FC = () => {
           <img src="/simpleLogo.svg" alt="logo" height={33} width={33} />
         </Link>
         <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 />