gitpod-io · filiptronicek · Jan 31, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
@@ -53,6 +53,7 @@
     "react-focus-on": "^3.8.1",
     "react-intl-tel-input": "^8.2.0",
     "react-linkedin-login-oauth2": "^2.0.1",
+    "react-markdown": "^9.0.3",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-router-dom": "^5.2.0",

@@ -6,21 +6,31 @@
 -->
 
 <html>
+
 <head>
     <meta charset='utf-8'>
     <title>Done</title>
     <script>
         if (window.opener) {
             const search = new URLSearchParams(window.location.search);
             const message = search.get("message");
-            window.opener.postMessage(message, `https://${window.location.hostname}`);
+            const newUser = search.get("newUser");
+            window.opener.postMessage(message + "&newUser=" + newUser, `https://${window.location.hostname}`);
+
+            if (newUser === "true") {
+                localStorage.setItem("newUserOnboardingPending", newUser);
+            }
         } else {
             console.log("This page is supposed to be opened by Gitpod.")
             setTimeout("window.close();", 1000);
         }
     </script>
 </head>
+
 <body>
-    If this tab is not closed automatically, feel free to close it and proceed. <button className="px-4 py-2 my-auto bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out" type="button" onclick="window.open('', '_self', ''); window.close();">Close</button>
+    If this tab is not closed automatically, feel free to close it and proceed. <button
+        className="px-4 py-2 my-auto bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out"
+        type="button" onclick="window.open('', '_self', ''); window.close();">Close</button>
 </body>
+
 </html>
@@ -16,16 +16,18 @@ type Props = {
     topMargin?: boolean;
     className?: string;
     disabled?: boolean;
+    labelHidden?: boolean;
 };
 
 export const InputField: FunctionComponent<Props> = memo(
-    ({ label, id, hint, error, topMargin = true, className, children, disabled = false }) => {
+    ({ label, id, hint, error, topMargin = true, className, children, disabled = false, labelHidden = false }) => {
         return (
             <div className={cn("flex flex-col space-y-2", { "mt-4": topMargin }, className)}>
                 {label && (
                     <label
                         className={cn(
                             "text-md font-semibold",
+                            { "sr-only": labelHidden },
                             disabled
                                 ? "text-gray-400 dark:text-gray-400"
                                 : error

@@ -0,0 +1,27 @@
+/**
+ * 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 * as React from "react";
+
+import { cn } from "@podkit/lib/cn";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    "flex min-h-[80px] w-full rounded-md border border-input bg-pk-surface-primary px-3 py-2 text-base ring-offset-background placeholder:text-pk-content-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    className,
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
@@ -95,7 +95,19 @@
         margin: 0 auto !important;
     }
     p {
-        @apply text-sm text-gray-400 dark:text-gray-600;
+        @apply text-sm text-pk-content-secondary;
+    }
+
+    .md-preview p {
+        @apply text-base;
+    }
+
+    .md-preview ol {
+        @apply list-decimal list-inside;
+    }
+
+    .md-preview ul {
+        @apply list-disc list-inside;
     }
 
     .app-container {
@@ -118,7 +130,7 @@
     }
 
     code {
-        @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
+        @apply bg-gray-100 dark:bg-gray-800 text-pk-content-primary px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
     }
 
     textarea,

@@ -16,10 +16,6 @@ import { useOnboardingState } from "../dedicated-setup/use-needs-setup";
 import { getOrgSlugFromQuery } from "../data/organizations/orgs-query";
 import { storageAvailable } from "../utils";
 
-type Props = {
-    onSuccess: () => void;
-};
-
 function getOrgSlugFromPath(path: string) {
     // '/login/acme' => ['', 'login', 'acme']
     const pathSegments = path.split("/");
@@ -29,6 +25,9 @@ function getOrgSlugFromPath(path: string) {
     return pathSegments[2];
 }
 
+type Props = {
+    onSuccess: () => void;
+};
 export const SSOLoginForm: FC<Props> = ({ onSuccess }) => {
     const location = useLocation();
     const { data: onboardingState } = useOnboardingState();

@@ -88,7 +88,7 @@ function parseParameters(search?: string): { notFound?: boolean } {
 
 export interface StartWorkspaceState {
     /**
-     * This is set to the istanceId we started (think we started on).
+     * This is set to the instanceId we started (think we started on).
      * We only receive updates for this particular instance, or none if not set.
      */
     startedInstanceId?: string;

@@ -19,6 +19,12 @@ import type { PlainMessage } from "@bufbuild/protobuf";
 import { InputField } from "../components/forms/InputField";
 import { TextInput } from "../components/forms/TextInputField";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { SwitchInputField } from "@podkit/switch/Switch";
+import { WelcomeMessagePreview } from "./onboarding/WelcomeMessagePreview";
+import { WelcomeMessageEditorModal } from "./onboarding/WelcomeMessageEditor";
+
+export const gitpodWelcomeSubheading =
+    `Gitpod’s sandboxed, ephemeral development environments enable you to use your existing tools without worrying about vulnerabilities impacting their local machines.` as const;
 
 export default function TeamOnboardingPage() {
     useDocumentTitle("Organization Settings - Onboarding");
@@ -30,6 +36,7 @@ export default function TeamOnboardingPage() {
     const updateTeamSettings = useUpdateOrgSettingsMutation();
 
     const [internalLink, setInternalLink] = useState<string | undefined>(undefined);
+    const [welcomeMessageEditorOpen, setWelcomeMessageEditorOpen] = useState<boolean>(false);
 
     const handleUpdateTeamSettings = useCallback(
         async (newSettings: Partial<PlainMessage<OrganizationSettings>>, options?: { throwMutateError?: boolean }) => {
@@ -99,6 +106,63 @@ export default function TeamOnboardingPage() {
                         </LoadingButton>
                     </form>
                 </ConfigurationSettingsField>
+
+                <ConfigurationSettingsField>
+                    <Heading3>Welcome message</Heading3>
+                    <Subheading>
+                        A welcome message to your organization members. This message will be shown to your organization
+                        members once they sign up and join your organization.
+                    </Subheading>
+
+                    <InputField
+                        label="Enabled"
+                        hint={<>Enable showing the message to new organization members.</>}
+                        id="show-welcome-message"
+                    >
+                        <SwitchInputField
+                            id="show-welcome-message"
+                            checked={settings?.onboardingSettings?.welcomeMessage?.enabled ?? false}
+                            disabled={!isOwner || updateTeamSettings.isLoading}
+                            onCheckedChange={(checked) => {
+                                if (checked) {
+                                    if (!settings?.onboardingSettings?.welcomeMessage?.message) {
+                                        toast("Please set up a welcome message first.");
+                                        return;
+                                    }
+                                }
+
+                                updateTeamSettings.mutate({
+                                    onboardingSettings: {
+                                        welcomeMessage: {
+                                            enabled: checked,
+                                            message: settings?.onboardingSettings?.welcomeMessage?.message,
+                                            featuredMemberId:
+                                                settings?.onboardingSettings?.welcomeMessage?.featuredMemberId,
+                                        },
+                                    },
+                                });
+                            }}
+                            label=""
+                        />
+                    </InputField>
+
+                    <WelcomeMessageEditorModal
+                        isLoading={updateTeamSettings.isLoading}
+                        isOwner={isOwner}
+                        isOpen={welcomeMessageEditorOpen}
+                        setIsOpen={setWelcomeMessageEditorOpen}
+                        handleUpdateTeamSettings={handleUpdateTeamSettings}
+                        settings={settings?.onboardingSettings?.welcomeMessage}
+                    />
+
+                    <span className="text-pk-content-secondary text-sm">
+                        Here's a preview of the welcome message that will be shown to your organization members:
+                    </span>
+                    <WelcomeMessagePreview
+                        setWelcomeMessageEditorOpen={setWelcomeMessageEditorOpen}
+                        disabled={!isOwner || updateTeamSettings.isLoading}
+                    />
+                </ConfigurationSettingsField>
             </div>
         </OrgSettingsPage>
     );

@@ -0,0 +1,67 @@
+/**
+ * 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 { useState } from "react";
+import { useListOrganizationMembers } from "../../data/organizations/members-query";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@podkit/dropdown/DropDown";
+import { Button } from "@podkit/buttons/Button";
+import type { OnboardingSettings_WelcomeMessage } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+
+type Props = {
+    settings: OnboardingSettings_WelcomeMessage | undefined;
+    setFeaturedMemberId: (featuredMemberId: string | undefined) => void;
+};
+export const OrgMemberAvatarInput = ({ settings, setFeaturedMemberId }: Props) => {
+    const { data: members } = useListOrganizationMembers();
+
+    const [avatarUrl, setAvatarUrl] = useState<string | undefined>(settings?.featuredMemberResolvedAvatarUrl);
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger>
+                <div className="flex flex-col justify-center items-center gap-2">
+                    {avatarUrl ? (
+                        <img src={avatarUrl} alt="" className="w-16 h-16 rounded-full" />
+                    ) : (
+                        <div className="w-16 h-16 rounded-full bg-[#EA71DE]" />
+                    )}
+                    <Button variant="secondary" size="sm" type="button">
+                        Change Photo
+                    </Button>
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+                <DropdownMenuItem
+                    key="disabled"
+                    onClick={() => {
+                        setFeaturedMemberId(undefined);
+                        setAvatarUrl(undefined);
+                    }}
+                >
+                    <div className="flex items-center gap-2">
+                        <div className="w-4 h-4 rounded-full bg-pk-surface-tertiary" />
+                        Disable image
+                    </div>
+                </DropdownMenuItem>
+                {members?.map((member) => (
+                    <DropdownMenuItem
+                        key={member.userId}
+                        onClick={() => {
+                            setFeaturedMemberId(member.userId);
+                            setAvatarUrl(member.avatarUrl);
+                        }}
+                    >
+                        <div className="flex items-center gap-2">
+                            <img src={member.avatarUrl} alt={member.fullName} className="w-4 h-4 rounded-full" />
+                            {member.fullName}
+                        </div>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
@@ -0,0 +1,61 @@
+/**
+ * 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 { Button } from "@podkit/buttons/Button";
+import { ModalHeader } from "../../components/Modal";
+import { ModalBody } from "../../components/Modal";
+import { ModalFooter } from "../../components/Modal";
+import { Modal } from "../../components/Modal";
+import { useMemo, useCallback, useState, useEffect } from "react";
+import { storageAvailable } from "../../utils";
+import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { WelcomeMessagePreview } from "./WelcomeMessagePreview";
+
+type Props = {
+    orgSettings: OrganizationSettings;
+};
+export const OrganizationJoinModal = ({ orgSettings }: Props) => {
+    const initialOrgOnboardingPending = useMemo(() => {
+        if (storageAvailable("localStorage")) {
+            return localStorage.getItem("newUserOnboardingPending") === "true";
+        }
+    }, []);
+    const dismissOrgOnboardingPending = useCallback(() => {
+        if (storageAvailable("localStorage")) {
+            localStorage.removeItem("newUserOnboardingPending");
+        }
+
+        setOrgOnboardingPending(false);
+    }, []);
+    const [orgOnboardingPending, setOrgOnboardingPending] = useState(initialOrgOnboardingPending ?? false);
+
+    // if the org-wide welcome message is not enabled, prevent showing it in the future
+    useEffect(() => {
+        if (!orgSettings?.onboardingSettings?.welcomeMessage?.enabled) {
+            dismissOrgOnboardingPending();
+        }
+    }, [orgSettings?.onboardingSettings?.welcomeMessage?.enabled, dismissOrgOnboardingPending]);
+
+    if (!orgSettings?.onboardingSettings?.welcomeMessage?.enabled) {
+        return null;
+    }
+
+    return (
+        <Modal
+            visible={orgOnboardingPending}
+            onClose={dismissOrgOnboardingPending}
+            containerClassName="min-[576px]:max-w-[650px]"
+        >
+            <ModalHeader>Welcome to Gitpod</ModalHeader>
+            <ModalBody>
+                <WelcomeMessagePreview hideHeader />
+            </ModalBody>
+            <ModalFooter>
+                <Button onClick={dismissOrgOnboardingPending}>Get Started</Button>
+            </ModalFooter>
+        </Modal>
+    );
+};