[dashboard] Onboarding: new video onboarding for new workspace (#19987)

* [dashboard] Onboarding: new video onboarding for new workspace * New button and copy text updates * Update YT Video
gitpod-io · Jul 2, 2024 · 60f9db9 · 60f9db9
1 parent 2cc42e2
commit 60f9db9
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 24 deletions.
diff --git a/components/dashboard/src/Analytics.tsx b/components/dashboard/src/Analytics.tsx
@@ -22,7 +22,8 @@ export type Event =
     | "modal_dismiss"
     | "ide_configuration_changed"
     | "status_rendered"
-    | "error_rendered";
+    | "error_rendered"
+    | "video_clicked";
 type InternalEvent = Event | "path_changed" | "dashboard_clicked";
 
 export type EventProperties =
@@ -36,7 +37,8 @@ export type EventProperties =
     | TrackIDEConfigurationChanged
     | TrackWorkspaceClassChanged
     | TrackStatusRendered
-    | TrackErrorRendered;
+    | TrackErrorRendered
+    | TrackVideoClicked;
 type InternalEventProperties = EventProperties | TrackDashboardClick | TrackPathChanged;
 
 export interface TrackErrorRendered {
@@ -105,6 +107,11 @@ export interface TrackBrowserExtensionPromotionInteraction {
     action: "chrome_navigation" | "firefox_navigation" | "manually_dismissed";
 }
 
+export interface TrackVideoClicked {
+    context: string;
+    path: string;
+}
+
 interface TrackDashboardClick {
     dnt?: boolean;
     path: string;
@@ -140,6 +147,7 @@ export function trackEvent(event: "modal_dismiss", properties: TrackModalDismiss
 export function trackEvent(event: "ide_configuration_changed", properties: TrackIDEConfigurationChanged): void;
 export function trackEvent(event: "status_rendered", properties: TrackStatusRendered): void;
 export function trackEvent(event: "error_rendered", properties: TrackErrorRendered): void;
+export function trackEvent(event: "video_clicked", properties: TrackVideoClicked): void;
 export function trackEvent(event: Event, properties: EventProperties): void {
     trackEventInternal(event, properties);
 }
@@ -157,6 +165,13 @@ export function sendTrackEvent(message: RemoteTrackMessage): void {
     sendAnalytics("trackEvent", message);
 }
 
+export function trackVideoClick(context: string) {
+    trackEvent("video_clicked", {
+        context: context,
+        path: window.location.pathname,
+    });
+}
+
 export const trackButtonOrAnchor = (target: HTMLAnchorElement | HTMLButtonElement | HTMLDivElement) => {
     //read manually passed analytics props from 'data-analytics' attribute of event target
     let passedProps: TrackDashboardClick | undefined;

diff --git a/components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx b/components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx
@@ -4,34 +4,81 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import React, { useEffect } from "react";
 import { StartWorkspaceModalKeyBinding } from "../App";
 import { LinkButton } from "@podkit/buttons/LinkButton";
-import { Heading2, Subheading } from "@podkit/typography/Headings";
+import { Heading1, Heading2, Subheading } from "@podkit/typography/Headings";
+import { trackVideoClick } from "../Analytics";
+
+declare global {
+    interface Window {
+        onYouTubeIframeAPIReady: () => void;
+        YT: any;
+    }
+}
 
 export const EmptyWorkspacesContent = () => {
+    useEffect(() => {
+        // Load the YouTube IFrame Player API code asynchronously
+        const tag = document.createElement("script");
+        tag.src = "https://www.youtube.com/iframe_api";
+        const firstScriptTag = document.getElementsByTagName("script")[0];
+        firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
+
+        // Create YouTube player when API is ready
+        window.onYouTubeIframeAPIReady = () => {
+            new window.YT.Player("gitpod-video", {
+                events: {
+                    onStateChange: onPlayerStateChange,
+                },
+            });
+        };
+    }, []);
+
+    const onPlayerStateChange = (event: any) => {
+        if (event.data === window.YT.PlayerState.PLAYING) {
+            trackVideoClick("create-new-workspace");
+        }
+    };
+
     return (
         <div className="app-container flex flex-col space-y-2">
-            <div className="px-6 py-3 flex flex-col">
-                <div className="flex flex-col items-center justify-center h-96 w-96 mx-auto">
-                    <Heading2 className="text-center pb-3">No Workspaces</Heading2>
-                    <Subheading className="text-center pb-6">
-                        Prefix any Git repository URL with {window.location.host}/# or create a new workspace for a
-                        recently used project.{" "}
-                        <a
-                            className="gp-link"
-                            target="_blank"
-                            rel="noreferrer"
-                            href="https://www.gitpod.io/docs/getting-started/"
-                        >
-                            Learn more
-                        </a>
-                    </Subheading>
-                    <span>
-                        <LinkButton href={"/new"} className="gap-1.5">
-                            New Workspace{" "}
-                            <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
-                        </LinkButton>
-                    </span>
+            <div className="px-6 mt-12 flex flex-row justify-center space-x-8">
+                <div>
+                    <iframe
+                        id="gitpod-video"
+                        width="535"
+                        height="307"
+                        src="https://www.youtube.com/embed/1ZBN-b2cIB8?enablejsapi=1&modestbranding=1&rel=0&controls=1&showinfo=0&fs=1"
+                        title="YouTube - Gitpod in 120 seconds"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowFullScreen
+                        className="rounded-xl"
+                    ></iframe>
+                </div>
+                <div>
+                    <div className="flex flex-col items-left h-96 w-96">
+                        <Heading1 className="text-left mb-4 !font-semibold !text-2xl">Welcome to Gitpod</Heading1>
+                        <Heading2 className="text-left !mb-0 !font-semibold !text-lg">
+                            Create your first workspace
+                        </Heading2>
+                        <Subheading className="text-left max-w-xs">
+                            A workspace is a cloud development environment
+                        </Subheading>
+                        <span className="flex flex-col space-y-4 w-fit">
+                            <LinkButton
+                                variant="secondary"
+                                className="mt-4 border border-pk-content-secondary text-pk-content-secondary bg-pk-surface-secondary"
+                                href={"/new?showExamples=true"}
+                            >
+                                Try a configured demo repo
+                            </LinkButton>
+                            <LinkButton href={"/new"} className="gap-1.5">
+                                Open your repository{" "}
+                                <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
+                            </LinkButton>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>