Skip to content

Commit

Permalink
Improve empty workspace view (#20018)
Browse files Browse the repository at this point in the history 
* Improve empty workspace view

* Fix alignment compromise

Co-authored-by: Sven Efftinge <[email protected]>

* Fix prebuild button focus state layout

* trigger ci

---------

Co-authored-by: Sven Efftinge <[email protected]>
Co-authored-by: Siddhant Khare <[email protected]>
  • Loading branch information
@filiptronicek @svenefftinge @Siddhant-K-code
3 people authored Jul 10, 2024
1 parent 64ce757 commit be4f157
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 63 deletions.
1 change: 1 addition & 0 deletions components/dashboard/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"file-saver": "^2.0.5",
"idb-keyval": "^6.2.0",
"js-cookie": "^3.0.1",
"lite-youtube-embed": "^0.3.2",
"lodash": "^4.17.21",
"lucide-react": "^0.287.0",
"monaco-editor": "^0.25.2",
Expand Down
13 changes: 6 additions & 7 deletions components/dashboard/src/prebuilds/detail/PrebuildDetailPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export const PrebuildDetailPage: FC = () => {
</div>
) : (
prebuild && (
<div className={"border border-pk-border-base rounded-xl py-6 divide-y"}>
<div className={"border border-pk-border-base rounded-xl pt-6 pb-3 divide-y"}>
<div className="px-6 pb-4">
<div className="flex flex-col gap-2">
<div className="flex justify-between">
Expand Down Expand Up @@ -320,7 +320,7 @@ export const PrebuildDetailPage: FC = () => {
)}
</Tabs>
</div>
<div className="px-6 pt-6 flex justify-between border-pk-border-base">
<div className="px-6 pt-6 pb-3 flex justify-between border-pk-border-base overflow-y-hidden gap-4">
{[PrebuildPhase_Phase.BUILDING, PrebuildPhase_Phase.QUEUED].includes(
prebuild?.status?.phase?.name ?? PrebuildPhase_Phase.UNSPECIFIED,
) ? (
Expand All @@ -341,24 +341,23 @@ export const PrebuildDetailPage: FC = () => {
onClick={() => triggerPrebuild()}
>{`Rerun Prebuild (${prebuild.ref})`}</LoadingButton>
)}
<div className="space-x-6 flex justify-right">
<div className="gap-4 flex justify-right">
<LinkButton
disabled={!prebuild?.id}
href={repositoriesRoutes.PrebuildsSettings(prebuild.configurationId)}
variant="secondary"
>
View Prebuild Settings
</LinkButton>
<LoadingButton
loading={false}
<Button
disabled={prebuild?.status?.phase?.name !== PrebuildPhase_Phase.AVAILABLE}
onClick={() =>
(window.location.href = `/#open-prebuild/${prebuild?.id}/${prebuild?.contextUrl}`)
}
variant="default"
variant="secondary"
>
Open Debug Workspace
</LoadingButton>
</Button>
</div>
</div>
</div>
Expand Down
96 changes: 40 additions & 56 deletions components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,78 +4,62 @@
* See License.AGPL.txt in the project root for license information.
*/

import React, { useEffect } from "react";
import { LinkButton } from "@podkit/buttons/LinkButton";
import { Heading2, Subheading } from "@podkit/typography/Headings";
import { trackVideoClick } from "../Analytics";

import "lite-youtube-embed/src/lite-yt-embed.css";
import "lite-youtube-embed/src/lite-yt-embed";

declare global {
interface Window {
onYouTubeIframeAPIReady: () => void;
YT: any;
}
namespace JSX {
interface IntrinsicElements {
"lite-youtube": 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");
}
const onPlayerStateChange = () => {
trackVideoClick("create-new-workspace");
};

return (
<div className="app-container flex flex-col space-y-2">
<div className="px-6 mt-16 flex flex-row items-center justify-center space-x-14">
<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 justify-center h-96 w-96">
<Heading2 className="text-left mb-4 !font-semibold !text-lg">
Create your first workspace
</Heading2>
<Subheading className="text-left max-w-xs">
Write code in your personal development environment that’s running in the cloud
</Subheading>
<span className="flex flex-col space-y-4 w-fit">
<LinkButton
variant="secondary"
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
href={"/new?showExamples=true"}
>
Try a configured demo repository
</LinkButton>
<LinkButton href={"/new"} className="gap-1.5">
Configure your own repository
</LinkButton>
</span>
</div>
<div className="px-6 mt-16 flex flex-col xl:flex-row items-center justify-center gap-x-14 gap-y-10 min-h-96 min-w-96">
<lite-youtube
videoid="1ZBN-b2cIB8"
width="535"
height="307"
onClick={onPlayerStateChange}
style={{
width: "535px",
backgroundImage: "url('https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp')",
}}
class="rounded-xl"
playlabel="Gitpod in under 120 seconds"
></lite-youtube>
<div className="flex flex-col items-center xl:items-start justify-center">
<Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
<Subheading className="max-w-xs xl:text-left text-center">
Write code in your personal development environment that’s running in the cloud
</Subheading>
<span className="flex flex-col space-y-4 w-fit">
<LinkButton
variant="secondary"
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
href={"/new?showExamples=true"}
>
Try a configured demo repository
</LinkButton>
<LinkButton href={"/new"} className="gap-1.5">
Configure your own repository
</LinkButton>
</span>
</div>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10446,6 +10446,11 @@ linkify-it@^3.0.1:
dependencies:
uc.micro "^1.0.1"

lite-youtube-embed@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/lite-youtube-embed/-/lite-youtube-embed-0.3.2.tgz#d43490743d93dd977fe18814c45d20f76ff2580a"
integrity sha512-b1dgKyF4PHhinonmr3PB172Nj0qQgA/7DE9EmeIXHR1ksnFEC2olWjNJyJGdsN2cleKHRjjsmrziKlwXtPlmLQ==

load-json-file@^5.2.0:
version "5.3.0"
resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz"
Expand Down

0 comments on commit be4f157

Please sign in to comment.