Skip to content

Commit be4f157

Browse files
filiptroniceksvenefftingeSiddhant-K-code
authored
Improve empty workspace view (#20018)
* 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]>
1 parent 64ce757 commit be4f157

File tree

4 files changed

+52
-63
lines changed

4 files changed

+52
-63
lines changed

‎components/dashboard/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"file-saver": "^2.0.5",
3838
"idb-keyval": "^6.2.0",
3939
"js-cookie": "^3.0.1",
40+
"lite-youtube-embed": "^0.3.2",
4041
"lodash": "^4.17.21",
4142
"lucide-react": "^0.287.0",
4243
"monaco-editor": "^0.25.2",

‎components/dashboard/src/prebuilds/detail/PrebuildDetailPage.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export const PrebuildDetailPage: FC = () => {
222222
</div>
223223
) : (
224224
prebuild && (
225-
<div className={"border border-pk-border-base rounded-xl py-6 divide-y"}>
225+
<div className={"border border-pk-border-base rounded-xl pt-6 pb-3 divide-y"}>
226226
<div className="px-6 pb-4">
227227
<div className="flex flex-col gap-2">
228228
<div className="flex justify-between">
@@ -320,7 +320,7 @@ export const PrebuildDetailPage: FC = () => {
320320
)}
321321
</Tabs>
322322
</div>
323-
<div className="px-6 pt-6 flex justify-between border-pk-border-base">
323+
<div className="px-6 pt-6 pb-3 flex justify-between border-pk-border-base overflow-y-hidden gap-4">
324324
{[PrebuildPhase_Phase.BUILDING, PrebuildPhase_Phase.QUEUED].includes(
325325
prebuild?.status?.phase?.name ?? PrebuildPhase_Phase.UNSPECIFIED,
326326
) ? (
@@ -341,24 +341,23 @@ export const PrebuildDetailPage: FC = () => {
341341
onClick={() => triggerPrebuild()}
342342
>{`Rerun Prebuild (${prebuild.ref})`}</LoadingButton>
343343
)}
344-
<div className="space-x-6 flex justify-right">
344+
<div className="gap-4 flex justify-right">
345345
<LinkButton
346346
disabled={!prebuild?.id}
347347
href={repositoriesRoutes.PrebuildsSettings(prebuild.configurationId)}
348348
variant="secondary"
349349
>
350350
View Prebuild Settings
351351
</LinkButton>
352-
<LoadingButton
353-
loading={false}
352+
<Button
354353
disabled={prebuild?.status?.phase?.name !== PrebuildPhase_Phase.AVAILABLE}
355354
onClick={() =>
356355
(window.location.href = `/#open-prebuild/${prebuild?.id}/${prebuild?.contextUrl}`)
357356
}
358-
variant="default"
357+
variant="secondary"
359358
>
360359
Open Debug Workspace
361-
</LoadingButton>
360+
</Button>
362361
</div>
363362
</div>
364363
</div>

‎components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx

Lines changed: 40 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,78 +4,62 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7-
import React, { useEffect } from "react";
87
import { LinkButton } from "@podkit/buttons/LinkButton";
98
import { Heading2, Subheading } from "@podkit/typography/Headings";
109
import { trackVideoClick } from "../Analytics";
1110

11+
import "lite-youtube-embed/src/lite-yt-embed.css";
12+
import "lite-youtube-embed/src/lite-yt-embed";
13+
1214
declare global {
1315
interface Window {
1416
onYouTubeIframeAPIReady: () => void;
1517
YT: any;
1618
}
19+
namespace JSX {
20+
interface IntrinsicElements {
21+
"lite-youtube": any;
22+
}
23+
}
1724
}
1825

1926
export const EmptyWorkspacesContent = () => {
20-
useEffect(() => {
21-
// Load the YouTube IFrame Player API code asynchronously
22-
const tag = document.createElement("script");
23-
tag.src = "https://www.youtube.com/iframe_api";
24-
const firstScriptTag = document.getElementsByTagName("script")[0];
25-
firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
26-
27-
// Create YouTube player when API is ready
28-
window.onYouTubeIframeAPIReady = () => {
29-
new window.YT.Player("gitpod-video", {
30-
events: {
31-
onStateChange: onPlayerStateChange,
32-
},
33-
});
34-
};
35-
}, []);
36-
37-
const onPlayerStateChange = (event: any) => {
38-
if (event.data === window.YT.PlayerState.PLAYING) {
39-
trackVideoClick("create-new-workspace");
40-
}
27+
const onPlayerStateChange = () => {
28+
trackVideoClick("create-new-workspace");
4129
};
4230

4331
return (
4432
<div className="app-container flex flex-col space-y-2">
45-
<div className="px-6 mt-16 flex flex-row items-center justify-center space-x-14">
46-
<div>
47-
<iframe
48-
id="gitpod-video"
49-
width="535"
50-
height="307"
51-
src="https://www.youtube.com/embed/1ZBN-b2cIB8?enablejsapi=1&modestbranding=1&rel=0&controls=1&showinfo=0&fs=1"
52-
title="YouTube - Gitpod in 120 seconds"
53-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
54-
allowFullScreen
55-
className="rounded-xl"
56-
></iframe>
57-
</div>
58-
<div>
59-
<div className="flex flex-col items-left justify-center h-96 w-96">
60-
<Heading2 className="text-left mb-4 !font-semibold !text-lg">
61-
Create your first workspace
62-
</Heading2>
63-
<Subheading className="text-left max-w-xs">
64-
Write code in your personal development environment that’s running in the cloud
65-
</Subheading>
66-
<span className="flex flex-col space-y-4 w-fit">
67-
<LinkButton
68-
variant="secondary"
69-
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
70-
href={"/new?showExamples=true"}
71-
>
72-
Try a configured demo repository
73-
</LinkButton>
74-
<LinkButton href={"/new"} className="gap-1.5">
75-
Configure your own repository
76-
</LinkButton>
77-
</span>
78-
</div>
33+
<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">
34+
<lite-youtube
35+
videoid="1ZBN-b2cIB8"
36+
width="535"
37+
height="307"
38+
onClick={onPlayerStateChange}
39+
style={{
40+
width: "535px",
41+
backgroundImage: "url('https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp')",
42+
}}
43+
class="rounded-xl"
44+
playlabel="Gitpod in under 120 seconds"
45+
></lite-youtube>
46+
<div className="flex flex-col items-center xl:items-start justify-center">
47+
<Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
48+
<Subheading className="max-w-xs xl:text-left text-center">
49+
Write code in your personal development environment that’s running in the cloud
50+
</Subheading>
51+
<span className="flex flex-col space-y-4 w-fit">
52+
<LinkButton
53+
variant="secondary"
54+
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
55+
href={"/new?showExamples=true"}
56+
>
57+
Try a configured demo repository
58+
</LinkButton>
59+
<LinkButton href={"/new"} className="gap-1.5">
60+
Configure your own repository
61+
</LinkButton>
62+
</span>
7963
</div>
8064
</div>
8165
</div>

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10446,6 +10446,11 @@ linkify-it@^3.0.1:
1044610446
dependencies:
1044710447
uc.micro "^1.0.1"
1044810448

10449+
lite-youtube-embed@^0.3.2:
10450+
version "0.3.2"
10451+
resolved "https://registry.yarnpkg.com/lite-youtube-embed/-/lite-youtube-embed-0.3.2.tgz#d43490743d93dd977fe18814c45d20f76ff2580a"
10452+
integrity sha512-b1dgKyF4PHhinonmr3PB172Nj0qQgA/7DE9EmeIXHR1ksnFEC2olWjNJyJGdsN2cleKHRjjsmrziKlwXtPlmLQ==
10453+
1044910454
load-json-file@^5.2.0:
1045010455
version "5.3.0"
1045110456
resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz"

0 commit comments

Comments
 (0)