Improve welcome message configuration with error handling

- Extract UpdateTeamSettingsOptions type for consistent error handling
- Move gitpodWelcomeSubheading to WelcomeMessageConfigurationField
- Add error state and handling in WelcomeMessageEditor
- Refactor update methods to support optional error throwing

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

components/dashboard/src/teams/TeamOnboarding.tsx

@@ -26,13 +26,14 @@ import { LoadingState } from "@podkit/loading/LoadingState";
 import { Table, TableHeader, TableRow, TableHead, TableBody } from "@podkit/tables/Table";
 import { WelcomeMessageConfigurationField } from "./onboarding/WelcomeMessageConfigurationField";
 
-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 type UpdateTeamSettingsOptions = {
+    throwMutateError?: boolean;
+};
 
 export default function TeamOnboardingPage() {
     useDocumentTitle("Organization Settings - Onboarding");
     const { toast } = useToast();
-    const org = useCurrentOrg().data;
+    const { data: org } = useCurrentOrg();
     const isOwner = useIsOwner();
 
     const { data: settings } = useOrgSettingsQuery();
@@ -43,7 +44,7 @@ export default function TeamOnboardingPage() {
     const [internalLink, setInternalLink] = useState<string | undefined>(undefined);
 
     const handleUpdateTeamSettings = useCallback(
-        async (newSettings: Partial<PlainMessage<OrganizationSettings>>, options?: { throwMutateError?: boolean }) => {
+        async (newSettings: Partial<PlainMessage<OrganizationSettings>>, options?: UpdateTeamSettingsOptions) => {
             if (!org?.id) {
                 throw new Error("no organization selected");
             }

components/dashboard/src/teams/onboarding/WelcomeMessageConfigurationField.tsx

@@ -20,11 +20,15 @@ import type {
     OrganizationSettings,
 } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { PlainMessage } from "@bufbuild/protobuf";
+import { UpdateTeamSettingsOptions } from "../TeamOnboarding";
+
+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;
 
 type Props = {
     handleUpdateTeamSettings: (
         newSettings: Partial<PlainMessage<OrganizationSettings>>,
-        options?: { throwMutateError?: boolean },
+        options?: UpdateTeamSettingsOptions,
     ) => Promise<void>;
 };
 export const WelcomeMessageConfigurationField = ({ handleUpdateTeamSettings }: Props) => {
@@ -36,16 +40,19 @@ export const WelcomeMessageConfigurationField = ({ handleUpdateTeamSettings }: P
     const [welcomeMessageEditorOpen, setWelcomeMessageEditorOpen] = useState(false);
 
     const handleUpdateWelcomeMessage = useCallback(
-        async (newSettings: PlainMessage<OnboardingSettings_WelcomeMessage>) => {
-            await handleUpdateTeamSettings({
-                onboardingSettings: {
-                    welcomeMessage: {
-                        ...settings?.onboardingSettings?.welcomeMessage,
-                        ...newSettings,
+        async (newSettings: PlainMessage<OnboardingSettings_WelcomeMessage>, options?: UpdateTeamSettingsOptions) => {
+            await handleUpdateTeamSettings(
+                {
+                    onboardingSettings: {
+                        welcomeMessage: {
+                            ...settings?.onboardingSettings?.welcomeMessage,
+                            ...newSettings,
+                        },
+                        recommendedRepositories: settings?.onboardingSettings?.recommendedRepositories ?? [],
                     },
-                    recommendedRepositories: settings?.onboardingSettings?.recommendedRepositories ?? [],
                 },
-            });
+                options,
+            );
         },
         [
             handleUpdateTeamSettings,

components/dashboard/src/teams/onboarding/WelcomeMessageEditor.tsx

@@ -6,22 +6,27 @@
 
 import { PlainMessage } from "@bufbuild/protobuf";
 import type { OnboardingSettings_WelcomeMessage } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { Button } from "@podkit/buttons/Button";
+import { LoadingButton } from "@podkit/buttons/LoadingButton";
 import { Textarea } from "@podkit/forms/TextArea";
 import { FormEvent, useCallback, useState } from "react";
 import { Modal, ModalBody, ModalFooter, ModalHeader } from "../../components/Modal";
 import { InputField } from "../../components/forms/InputField";
 import { TextInput } from "../../components/forms/TextInputField";
-import { gitpodWelcomeSubheading } from "../TeamOnboarding";
-import { Button } from "@podkit/buttons/Button";
-import { LoadingButton } from "@podkit/buttons/LoadingButton";
 import { OrgMemberAvatarInput } from "./OrgMemberAvatarInput";
+import { gitpodWelcomeSubheading } from "./WelcomeMessageConfigurationField";
+import { UpdateTeamSettingsOptions } from "../TeamOnboarding";
+import Alert from "../../components/Alert";
 
 type Props = {
     settings: OnboardingSettings_WelcomeMessage | undefined;
     isLoading: boolean;
     isOwner: boolean;
     isOpen: boolean;
-    handleUpdateWelcomeMessage: (newSettings: PlainMessage<OnboardingSettings_WelcomeMessage>) => Promise<void>;
+    handleUpdateWelcomeMessage: (
+        newSettings: PlainMessage<OnboardingSettings_WelcomeMessage>,
+        options?: UpdateTeamSettingsOptions,
+    ) => Promise<void>;
     setIsOpen: (isOpen: boolean) => void;
 };
 export const WelcomeMessageEditorModal = ({
@@ -34,17 +39,29 @@ export const WelcomeMessageEditorModal = ({
 }: Props) => {
     const [message, setMessage] = useState<string | undefined>(settings?.message);
     const [featuredMemberId, setFeaturedMemberId] = useState<string | undefined>(settings?.featuredMemberId);
+    const [error, setError] = useState<string | undefined>(undefined);
 
     const updateWelcomeMessage = useCallback(
         async (e: FormEvent) => {
             e.preventDefault();
-            await handleUpdateWelcomeMessage({
-                message,
-                featuredMemberId,
-                enabled: settings?.enabled ?? false,
-            });
+            try {
+                await handleUpdateWelcomeMessage(
+                    {
+                        message,
+                        featuredMemberId,
+                        enabled: settings?.enabled ?? false,
+                    },
+                    {
+                        throwMutateError: true,
+                    },
+                );
+                setIsOpen(false);
+                setError(undefined);
+            } catch (error) {
+                setError(error.message);
+            }
         },
-        [handleUpdateWelcomeMessage, message, featuredMemberId, settings?.enabled],
+        [handleUpdateWelcomeMessage, message, featuredMemberId, settings?.enabled, setIsOpen],
     );
 
     return (
@@ -65,6 +82,12 @@ export const WelcomeMessageEditorModal = ({
                             onChange={(e) => setMessage(e.target.value)}
                         />
                     </InputField>
+
+                    {error && (
+                        <Alert type={"error"} closable={false}>
+                            <p>{error}</p>
+                        </Alert>
+                    )}
                 </form>
             </ModalBody>
             <ModalFooter>