WIP

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

components/dashboard/package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-query-devtools": "^4.29.19",
     "@tanstack/react-query-persist-client": "^4.29.19",
+    "@uiw/react-md-editor": "^4.0.5",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "buffer": "^4.3.0",

components/dashboard/src/components/podkit/forms/TextArea.tsx

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

components/dashboard/src/index.css

@@ -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,

components/dashboard/src/teams/TeamOnboarding.tsx

@@ -19,6 +19,16 @@ 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 MDEditor from "@uiw/react-md-editor";
+import { Textarea } from "@podkit/forms/TextArea";
+import Modal, { ModalFooter, ModalBody, ModalHeader } from "../components/Modal";
+import { Button } from "@podkit/buttons/Button";
+import { SwitchInputField } from "@podkit/switch/Switch";
+
+const sampleMarkdown = `“With Gitpod, you'll boost your productivity and streamline your workflow, giving you the freedom to work how you want while helping our team meet its efficiency goals.”
+
+**Hannah Cole** - CTO Acme, Inc.
+`;
 
 export default function TeamOnboardingPage() {
     useDocumentTitle("Organization Settings - Onboarding");
@@ -30,7 +40,9 @@ export default function TeamOnboardingPage() {
     const updateTeamSettings = useUpdateOrgSettingsMutation();
 
     const [internalLink, setInternalLink] = useState<string | undefined>(undefined);
-
+    const [welcomeMessage, setWelcomeMessage] = useState<string>(sampleMarkdown);
+    const [showWelcomeMessage, setShowWelcomeMessage] = useState<boolean>(true);
+    const [welcomeMessageEditorOpen, setWelcomeMessageEditorOpen] = useState<boolean>(false);
     const handleUpdateTeamSettings = useCallback(
         async (newSettings: Partial<PlainMessage<OrganizationSettings>>, options?: { throwMutateError?: boolean }) => {
             if (!org?.id) {
@@ -99,7 +111,100 @@ 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>
+
+                    <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
+                        welcomeMessage={welcomeMessage}
+                        setWelcomeMessageEditorOpen={setWelcomeMessageEditorOpen}
+                    />
+
+                    <Modal onClose={() => setWelcomeMessageEditorOpen(false)} visible={welcomeMessageEditorOpen}>
+                        <ModalHeader>Edit welcome message</ModalHeader>
+                        <ModalBody>
+                            <InputField
+                                label="Enabled"
+                                hint={<>Enable showing the message to new organization members.</>}
+                                id="show-welcome-message"
+                            >
+                                <SwitchInputField
+                                    id="show-welcome-message"
+                                    checked={showWelcomeMessage}
+                                    disabled={!isOwner || updateTeamSettings.isLoading}
+                                    onCheckedChange={setShowWelcomeMessage}
+                                    label=""
+                                />
+                            </InputField>
+                            <WelcomeMessageEditor
+                                welcomeMessage={welcomeMessage}
+                                setWelcomeMessage={setWelcomeMessage}
+                                disabled={!showWelcomeMessage}
+                            />
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button variant="secondary" onClick={() => setWelcomeMessageEditorOpen(false)}>
+                                Cancel
+                            </Button>
+                            <LoadingButton type="submit" loading={updateTeamSettings.isLoading} disabled={!isOwner}>
+                                Save
+                            </LoadingButton>
+                        </ModalFooter>
+                    </Modal>
+                </ConfigurationSettingsField>
             </div>
         </OrgSettingsPage>
     );
 }
+
+type WelcomeMessagePreviewProps = {
+    welcomeMessage: string;
+    setWelcomeMessageEditorOpen: (open: boolean) => void;
+};
+const WelcomeMessagePreview = ({ welcomeMessage, setWelcomeMessageEditorOpen }: WelcomeMessagePreviewProps) => {
+    return (
+        <div className="max-w-2xl mx-auto">
+            <div className="flex justify-between gap-2 items-center">
+                <Heading2 className="py-6">Welcome to Gitpod</Heading2>
+                <Button variant="secondary" onClick={() => setWelcomeMessageEditorOpen(true)}>
+                    Edit
+                </Button>
+            </div>
+            <Subheading>
+                Gitpod’s sandboxed, ephemeral development environments enable you to use your existing tools without
+                worrying about vulnerabilities impacting their local machines.
+            </Subheading>
+            {/* todo: sanitize md */}
+            <MDEditor.Markdown
+                source={welcomeMessage}
+                className="md-preview space-y-4 p-8 my-4 bg-pk-surface-secondary text-pk-content-primary rounded-xl text-center"
+            />
+        </div>
+    );
+};
+
+type WelcomeMessageEditorProps = {
+    welcomeMessage: string;
+    setWelcomeMessage: (welcomeMessage: string) => void;
+    disabled?: boolean;
+};
+const WelcomeMessageEditor = ({ welcomeMessage, setWelcomeMessage, disabled }: WelcomeMessageEditorProps) => {
+    return (
+        <InputField label="Welcome message" error={undefined} className="mb-4">
+            <Textarea
+                className="bg-pk-surface-secondary text-pk-content-primary w-full p-4 rounded-xl min-h-[400px]"
+                value={welcomeMessage}
+                placeholder="Write a welcome message to your organization members. Markdown formatting is supported."
+                onChange={(e) => setWelcomeMessage(e.target.value)}
+                disabled={disabled}
+            />
+        </InputField>
+    );
+};