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

components/dashboard/src/components/Modal.tsx

@@ -29,6 +29,7 @@ type Props = {
     autoFocus?: boolean;
     disableFocusLock?: boolean;
     className?: string;
+    containerClassName?: string;
     disabled?: boolean;
     onClose: () => void;
     onSubmit?: () => void | Promise<void>;
@@ -44,6 +45,7 @@ export const Modal: FC<Props> = ({
     autoFocus = false,
     disableFocusLock = false,
     className,
+    containerClassName,
     disabled = false,
     onClose,
     onSubmit,
@@ -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

components/dashboard/src/components/PillLabel.tsx

@@ -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> = {
@@ -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>;
 }

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

@@ -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">
                     {/* Keep the caret in a separate tag so triple clicking url doesn't select caret too */}
                     <pre>{`>`}</pre>
                     <pre>{url}</pre>

components/dashboard/src/teams/EditorOptions.tsx

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { Button } from "@podkit/buttons/Button";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { IdeOptionsModifyModalProps, IdeOptions, IdeOptionsModifyModal } from "../components/IdeOptions";
+import { Heading3, Subheading } from "../components/typography/headings";
+import { useAllowedWorkspaceEditorsMemo } from "../data/ide-options/ide-options-query";
+import { ConfigurationSettingsField } from "../repositories/detail/ConfigurationSettingsField";
+
+type Props = {
+    settings: OrganizationSettings | undefined;
+    isOwner: boolean;
+    handleUpdateTeamSettings: (
+        newSettings: Partial<OrganizationSettings>,
+        options?: { throwMutateError?: boolean },
+    ) => Promise<void>;
+};
+export const EditorOptions = ({ isOwner, settings, handleUpdateTeamSettings }: Props) => {
+    const [showModal, setShowModal] = useState(false);
+    const { data: installationOptions, isLoading: installationOptionsIsLoading } = useAllowedWorkspaceEditorsMemo(
+        undefined,
+        {
+            filterOutDisabled: true,
+            ignoreScope: ["organization", "configuration"],
+        },
+    );
+    const { data: orgOptions, isLoading: orgOptionsIsLoading } = useAllowedWorkspaceEditorsMemo(undefined, {
+        filterOutDisabled: true,
+        ignoreScope: ["configuration"],
+    });
+
+    const updateMutation: IdeOptionsModifyModalProps["updateMutation"] = useMutation({
+        mutationFn: async ({ restrictedEditors, pinnedEditorVersions }) => {
+            const updatedRestrictedEditors = [...restrictedEditors.keys()];
+            const updatedPinnedEditorVersions = Object.fromEntries(pinnedEditorVersions.entries());
+
+            await handleUpdateTeamSettings(
+                { restrictedEditorNames: updatedRestrictedEditors, pinnedEditorVersions: updatedPinnedEditorVersions },
+                { throwMutateError: true },
+            );
+        },
+    });
+
+    const restrictedEditors = new Set<string>(settings?.restrictedEditorNames || []);
+    const pinnedEditorVersions = new Map<string, string>(Object.entries(settings?.pinnedEditorVersions || {}));
+
+    return (
+        <ConfigurationSettingsField>
+            <Heading3>Available editors</Heading3>
+            <Subheading>
+                Limit the available editors in your organization. Requires <span className="font-medium">Owner</span>{" "}
+                permissions to change.
+            </Subheading>
+
+            <IdeOptions
+                isLoading={orgOptionsIsLoading}
+                className="mt-4"
+                ideOptions={orgOptions}
+                pinnedEditorVersions={pinnedEditorVersions}
+            />
+
+            {isOwner && (
+                <Button className="mt-6" onClick={() => setShowModal(true)}>
+                    Manage Editors
+                </Button>
+            )}
+
+            {showModal && (
+                <IdeOptionsModifyModal
+                    isLoading={installationOptionsIsLoading}
+                    ideOptions={installationOptions}
+                    restrictedEditors={restrictedEditors}
+                    pinnedEditorVersions={pinnedEditorVersions}
+                    updateMutation={updateMutation}
+                    onClose={() => setShowModal(false)}
+                />
+            )}
+        </ConfigurationSettingsField>
+    );
+};

components/dashboard/src/teams/OrgSettingsPage.tsx

@@ -102,6 +102,10 @@ function getOrgSettingsMenu(params: {
             title: "Policies",
             link: [`/settings/policy`],
         },
+        {
+            title: "Onboarding",
+            link: [`/settings/onboarding`],
+        },
     ];
     if (!isDedicatedInstallation) {
         result.push(

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

@@ -25,6 +25,7 @@ import { converter, userClient } from "../service/public-api";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
 import { useOrgSettingsQuery } from "../data/organizations/org-settings-query";
 import Alert from "../components/Alert";
+import { GETTING_STARTED_DISMISSAL_KEY } from "../workspaces/Workspaces";
 
 export type IDEChangedTrackLocation = "workspace_list" | "workspace_start" | "preferences";
 
@@ -114,6 +115,30 @@ export default function Preferences() {
         toast("Workspace options have been cleared.");
     }, [updateUser, setUser, toast, user]);
 
+    const restartOrgOnboarding = useCallback(async () => {
+        const updatedUser = await updateUser.mutateAsync(
+            {
+                additionalData: {
+                    profile: {
+                        coachmarksDismissals: {
+                            [GETTING_STARTED_DISMISSAL_KEY]: "",
+                        },
+                    },
+                },
+            },
+            {
+                onError: (e) => {
+                    toast("Failed to reset onboarding.");
+                },
+            },
+        );
+
+        if (updatedUser) {
+            setUser(updatedUser);
+            toast("Onboarding has been restarted.");
+        }
+    }, [updateUser, toast, setUser]);
+
     return (
         <div>
             <PageWithSettingsSubMenu>
@@ -136,6 +161,12 @@ export default function Preferences() {
                     Reset Options
                 </Button>
 
+                <Heading3 className="mt-12">Organization onboarding</Heading3>
+                <Subheading>If you dismissed the onboarding process, you can restart it here.</Subheading>
+                <Button className="mt-4" variant="secondary" onClick={restartOrgOnboarding}>
+                    Restart Onboarding
+                </Button>
+
                 <ThemeSelector className="mt-12" />
 
                 <Heading2 className="mt-12">Dotfiles</Heading2>
@@ -157,7 +188,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>
@@ -201,9 +232,7 @@ export default function Preferences() {
                                         loading={timeoutUpdating}
                                         disabled={
                                             workspaceTimeout ===
-                                                converter.toDurationString(
-                                                    user?.workspaceTimeoutSettings?.inactivity,
-                                                ) ?? ""
+                                            converter.toDurationString(user?.workspaceTimeoutSettings?.inactivity)
                                         }
                                     >
                                         Save

components/dashboard/src/workspaces/EmptyWorkspacesContent.tsx

@@ -6,42 +6,23 @@
 
 import { LinkButton } from "@podkit/buttons/LinkButton";
 import { Heading2, Subheading } from "@podkit/typography/Headings";
-import { trackVideoClick } from "../Analytics";
-
-import { VideoSection } from "../onboarding/VideoSection";
+import { StartWorkspaceModalKeyBinding } from "../App";
 
 export const EmptyWorkspacesContent = () => {
-    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>
+                <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">
-                        Write code in your personal development environment that’s running in the cloud
+                        Create a new workspace to start coding
                     </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>
+                    <div className="flex flex-col mt-4 w-fit">
                         <LinkButton href={"/new"} className="gap-1.5">
-                            Configure your own repository
+                            New Workspace{" "}
+                            <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
                         </LinkButton>
-                    </span>
+                    </div>
                 </div>
             </div>
         </div>