Skip to content

[dashboard] Add org resources to the top of the workspace list #20520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Jan 16, 2025
Merged

[dashboard] Add org resources to the top of the workspace list #20520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8c7a725
UI reorg
filiptronicek Jan 7, 2025
9b95c5b
generated stuffs
filiptronicek Jan 7, 2025
c020e89
Make it woooooooork
filiptronicek Jan 7, 2025
95c3808
Enterprise workspace list overhaul
filiptronicek Jan 8, 2025
a7aeede
Merge branch 'main' into ft/suggestions-and-recommendations
filiptronicek Jan 13, 2025
8fe7943
Conditionally show top sections
filiptronicek Jan 13, 2025
f3c9f85
Refactor PillLabel component usage and improve workspace card layout
filiptronicek Jan 13, 2025
b0cdb79
Reduce PR scope
filiptronicek Jan 14, 2025
3848649
Behave nicely in dedicated emulated preview envs
filiptronicek Jan 14, 2025
d9b61cb
Make Getting started dismissible
filiptronicek Jan 14, 2025
1a31bc4
Still show old empty ws page for PAYG
filiptronicek Jan 14, 2025
a69c12d
Use ff to display
filiptronicek Jan 14, 2025
a5a206c
accordions are stylish (and clean u user prefs)
filiptronicek Jan 16, 2025
2de57df
Approach accordions differently (feat. @geropl)
filiptronicek Jan 16, 2025
19c6e2d
Revert things for later
filiptronicek Jan 16, 2025
6b5b157
Get rid of debug logs!
filiptronicek Jan 16, 2025
ca854fc
Use pk colors
filiptronicek Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/dashboard/src/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ type Props = {
autoFocus?: boolean;
disableFocusLock?: boolean;
className?: string;
containerClassName?: string;
disabled?: boolean;
onClose: () => void;
onSubmit?: () => void | Promise<void>;
Expand All @@ -44,6 +45,7 @@ export const Modal: FC<Props> = ({
autoFocus = false,
disableFocusLock = false,
className,
containerClassName,
disabled = false,
onClose,
onSubmit,
Expand Down Expand Up @@ -87,6 +89,7 @@ export const Modal: FC<Props> = ({
"pointer-events-none relative",
"h-dvh w-auto", // small screens
"min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]", // large screens
containerClassName,
)}
>
<FocusOn
Expand Down
6 changes: 4 additions & 2 deletions components/dashboard/src/components/PillLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* See License.AGPL.txt in the project root for license information.
*/

import { cn } from "@podkit/lib/cn";

export type PillType = "info" | "warn" | "success" | "neutral";

const PillClsMap: Record<PillType, string> = {
Expand All @@ -27,6 +29,6 @@ const PillClsMap: Record<PillType, string> = {
*/
export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
const type = props.type || "info";
const style = `px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]} ${props.className}`;
return <span className={style}>{props.children}</span>;
const className = cn(`px-3 py-0.5 text-xs uppercase rounded-xl font-semibold ${PillClsMap[type]}`, props.className);
return <span className={className}>{props.children}</span>;
}
2 changes: 1 addition & 1 deletion components/dashboard/src/dedicated-setup/SetupCompleteStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const SetupCompleteStep: FC<Props> = ({ onComplete }) => {
<Subheading>Your teammates can now sign in to Gitpod using single sign-on (SSO).</Subheading>

<div className="flex flex-row items-center space-x-2 mt-4">
<div className="flex flex-row items-center space-x-1 font-mono text-sm text-gray-500 dark:text-gray-600">
<div className="flex flex-row items-center space-x-1 font-mono text-sm text-pk-content-secondary">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a drive-by. I noticed that in the installation setup, the contrast of this text with the background is too small.

{/* Keep the caret in a separate tag so triple clicking url doesn't select caret too */}
<pre>{`>`}</pre>
<pre>{url}</pre>
Expand Down
6 changes: 2 additions & 4 deletions components/dashboard/src/user-settings/Preferences.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default function Preferences() {
<LoadingButton
type="submit"
loading={updateDotfileRepo.isLoading}
disabled={updateDotfileRepo.isLoading || (dotfileRepo === user?.dotfileRepo ?? "")}
disabled={updateDotfileRepo.isLoading || dotfileRepo === user?.dotfileRepo}
>
Save
</LoadingButton>
Expand Down Expand Up @@ -201,9 +201,7 @@ export default function Preferences() {
loading={timeoutUpdating}
disabled={
workspaceTimeout ===
converter.toDurationString(
user?.workspaceTimeoutSettings?.inactivity,
) ?? ""
converter.toDurationString(user?.workspaceTimeoutSettings?.inactivity)
}
>
Save
Expand Down
75 changes: 48 additions & 27 deletions components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,64 @@

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

import { StartWorkspaceModalKeyBinding } from "../App";
import { VideoSection } from "../onboarding/VideoSection";
import { trackVideoClick } from "../Analytics";
import { useInstallationConfiguration } from "../data/installation/default-workspace-image-query";

export const EmptyWorkspacesContent = () => {
const { data: installationConfig } = useInstallationConfiguration();
const isDedicatedInstallation = !!installationConfig?.isDedicatedInstallation;

const handlePlay = () => {
trackVideoClick("create-new-workspace");
};

return (
<div className="app-container flex flex-col space-y-2">
<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">
<VideoSection
metadataVideoTitle="Gitpod demo"
playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
className="w-[535px] rounded-xl"
/>
<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>
{isDedicatedInstallation ? (
<div className="flex flex-col items-center text-center justify-center">
<Heading2 className="!font-semibold !text-lg">No workspaces</Heading2>
<Subheading className="max-w-xs xl:text-left text-center">
Create a new workspace to start coding
</Subheading>
<div className="flex flex-col mt-4 w-fit">
<LinkButton href={"/new"} className="gap-1.5">
New Workspace{" "}
<span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
</LinkButton>
</div>
</div>
) : (
<>
<VideoSection
metadataVideoTitle="Gitpod demo"
playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
className="w-[535px] rounded-xl"
/>
<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
Loading
Loading