Skip to content

Commit 5c8700e

Browse files
filiptronicekfiliptronicek
authored
[dashboard] Add org resources to the top of the workspace list (#20520)
* UI reorg * generated stuffs * Make it woooooooork * Enterprise workspace list overhaul Todo: - [ ] only enable on dedicated installs - [ ] add org setting for org-wide suggestions - [ ] possibly adopt `Recommended` badges from figma - [ ] open configurationId instead of cloneUrl if possible * Conditionally show top sections * Refactor PillLabel component usage and improve workspace card layout * Reduce PR scope * Behave nicely in dedicated emulated preview envs * Make Getting started dismissible * Still show old empty ws page for PAYG * Use ff to display * accordions are stylish (and clean u user prefs) * Approach accordions differently (feat. @geropl) * Revert things for later * Get rid of debug logs! * Use pk colors
1 parent 4a5f02e commit 5c8700e

File tree

8 files changed

+287
-45
lines changed

8 files changed

+287
-45
lines changed

‎components/dashboard/src/components/Modal.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ type Props = {
2929
autoFocus?: boolean;
3030
disableFocusLock?: boolean;
3131
className?: string;
32+
containerClassName?: string;
3233
disabled?: boolean;
3334
onClose: () => void;
3435
onSubmit?: () => void | Promise<void>;
@@ -44,6 +45,7 @@ export const Modal: FC<Props> = ({
4445
autoFocus = false,
4546
disableFocusLock = false,
4647
className,
48+
containerClassName,
4749
disabled = false,
4850
onClose,
4951
onSubmit,
@@ -87,6 +89,7 @@ export const Modal: FC<Props> = ({
8789
"pointer-events-none relative",
8890
"h-dvh w-auto", // small screens
8991
"min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]", // large screens
92+
containerClassName,
9093
)}
9194
>
9295
<FocusOn

‎components/dashboard/src/components/PillLabel.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7+
import { cn } from "@podkit/lib/cn";
8+
79
export type PillType = "info" | "warn" | "success" | "neutral";
810

911
const PillClsMap: Record<PillType, string> = {
@@ -27,6 +29,6 @@ const PillClsMap: Record<PillType, string> = {
2729
*/
2830
export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
2931
const type = props.type || "info";
30-
const style = `px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]} ${props.className}`;
31-
return <span className={style}>{props.children}</span>;
32+
const className = cn(`px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]}`, props.className);
33+
return <span className={className}>{props.children}</span>;
3234
}

‎components/dashboard/src/dedicated-setup/SetupCompleteStep.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const SetupCompleteStep: FC<Props> = ({ onComplete }) => {
4242
<Subheading>Your teammates can now sign in to Gitpod using single sign-on (SSO).</Subheading>
4343

4444
<div className="flex flex-row items-center space-x-2 mt-4">
45-
<div className="flex flex-row items-center space-x-1 font-mono text-sm text-gray-500 dark:text-gray-600">
45+
<div className="flex flex-row items-center space-x-1 font-mono text-sm text-pk-content-secondary">
4646
{/* Keep the caret in a separate tag so triple clicking url doesn't select caret too */}
4747
<pre>{`>`}</pre>
4848
<pre>{url}</pre>

‎components/dashboard/src/user-settings/Preferences.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function Preferences() {
157157
<LoadingButton
158158
type="submit"
159159
loading={updateDotfileRepo.isLoading}
160-
disabled={updateDotfileRepo.isLoading || (dotfileRepo === user?.dotfileRepo ?? "")}
160+
disabled={updateDotfileRepo.isLoading || dotfileRepo === user?.dotfileRepo}
161161
>
162162
Save
163163
</LoadingButton>
@@ -201,9 +201,7 @@ export default function Preferences() {
201201
loading={timeoutUpdating}
202202
disabled={
203203
workspaceTimeout ===
204-
converter.toDurationString(
205-
user?.workspaceTimeoutSettings?.inactivity,
206-
) ?? ""
204+
converter.toDurationString(user?.workspaceTimeoutSettings?.inactivity)
207205
}
208206
>
209207
Save

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

+48-27
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,64 @@
66

77
import { LinkButton } from "@podkit/buttons/LinkButton";
88
import { Heading2, Subheading } from "@podkit/typography/Headings";
9-
import { trackVideoClick } from "../Analytics";
10-
9+
import { StartWorkspaceModalKeyBinding } from "../App";
1110
import { VideoSection } from "../onboarding/VideoSection";
11+
import { trackVideoClick } from "../Analytics";
12+
import { useInstallationConfiguration } from "../data/installation/default-workspace-image-query";
1213

1314
export const EmptyWorkspacesContent = () => {
15+
const { data: installationConfig } = useInstallationConfiguration();
16+
const isDedicatedInstallation = !!installationConfig?.isDedicatedInstallation;
17+
1418
const handlePlay = () => {
1519
trackVideoClick("create-new-workspace");
1620
};
1721

1822
return (
1923
<div className="app-container flex flex-col space-y-2">
2024
<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">
21-
<VideoSection
22-
metadataVideoTitle="Gitpod demo"
23-
playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
24-
poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
25-
playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
26-
className="w-[535px] rounded-xl"
27-
/>
28-
<div className="flex flex-col items-center xl:items-start justify-center">
29-
<Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
30-
<Subheading className="max-w-xs xl:text-left text-center">
31-
Write code in your personal development environment that’s running in the cloud
32-
</Subheading>
33-
<span className="flex flex-col space-y-4 w-fit">
34-
<LinkButton
35-
variant="secondary"
36-
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
37-
href={"/new?showExamples=true"}
38-
>
39-
Try a configured demo repository
40-
</LinkButton>
41-
<LinkButton href={"/new"} className="gap-1.5">
42-
Configure your own repository
43-
</LinkButton>
44-
</span>
45-
</div>
25+
{isDedicatedInstallation ? (
26+
<div className="flex flex-col items-center text-center justify-center">
27+
<Heading2 className="!font-semibold !text-lg">No workspaces</Heading2>
28+
<Subheading className="max-w-xs xl:text-left text-center">
29+
Create a new workspace to start coding
30+
</Subheading>
31+
<div className="flex flex-col mt-4 w-fit">
32+
<LinkButton href={"/new"} className="gap-1.5">
33+
New Workspace{" "}
34+
<span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
35+
</LinkButton>
36+
</div>
37+
</div>
38+
) : (
39+
<>
40+
<VideoSection
41+
metadataVideoTitle="Gitpod demo"
42+
playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
43+
poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
44+
playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
45+
className="w-[535px] rounded-xl"
46+
/>
47+
<div className="flex flex-col items-center xl:items-start justify-center">
48+
<Heading2 className="mb-4 !font-semibold !text-lg">Create your first workspace</Heading2>
49+
<Subheading className="max-w-xs xl:text-left text-center">
50+
Write code in your personal development environment that’s running in the cloud
51+
</Subheading>
52+
<span className="flex flex-col space-y-4 w-fit">
53+
<LinkButton
54+
variant="secondary"
55+
className="mt-4 border !border-pk-content-invert-primary text-pk-content-secondary bg-pk-surface-secondary"
56+
href={"/new?showExamples=true"}
57+
>
58+
Try a configured demo repository
59+
</LinkButton>
60+
<LinkButton href={"/new"} className="gap-1.5">
61+
Configure your own repository
62+
</LinkButton>
63+
</span>
64+
</div>
65+
</>
66+
)}
4667
</div>
4768
</div>
4869
);

0 commit comments

Comments
 (0)