squashed (- oidc/newUser)

Tool: gitpod/catfood.gitpod.cloud

Author: geropl

components/dashboard/package.json

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

components/dashboard/src/components/forms/InputField.tsx

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

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/data/organizations/update-org-settings-mutation.ts

@@ -14,21 +14,25 @@ import { useOrgWorkspaceClassesQueryInvalidator } from "./org-workspace-classes-
 import { PlainMessage } from "@bufbuild/protobuf";
 import { useOrgRepoSuggestionsInvalidator } from "./suggested-repositories-query";
 
-type UpdateOrganizationSettingsArgs = Partial<
-    Pick<
-        PlainMessage<OrganizationSettings>,
-        | "workspaceSharingDisabled"
-        | "defaultWorkspaceImage"
-        | "allowedWorkspaceClasses"
-        | "pinnedEditorVersions"
-        | "restrictedEditorNames"
-        | "defaultRole"
-        | "timeoutSettings"
-        | "roleRestrictions"
-        | "maxParallelRunningWorkspaces"
-        | "onboardingSettings"
-        | "annotateGitCommits"
-    >
+export type UpdateOrganizationSettingsArgs = Partial<
+    Omit<
+        Pick<
+            PlainMessage<OrganizationSettings>,
+            | "workspaceSharingDisabled"
+            | "defaultWorkspaceImage"
+            | "allowedWorkspaceClasses"
+            | "pinnedEditorVersions"
+            | "restrictedEditorNames"
+            | "defaultRole"
+            | "timeoutSettings"
+            | "roleRestrictions"
+            | "maxParallelRunningWorkspaces"
+            | "annotateGitCommits"
+        >,
+        never
+    > & {
+        onboardingSettings?: Partial<PlainMessage<OrganizationSettings>["onboardingSettings"]>; // this enables us to not have to specify all of the onboarding settings on every update
+    }
 >;
 
 export const useUpdateOrgSettingsMutation = () => {
@@ -66,7 +70,14 @@ export const useUpdateOrgSettingsMutation = () => {
                 roleRestrictions,
                 updateRoleRestrictions: !!roleRestrictions,
                 maxParallelRunningWorkspaces,
-                onboardingSettings,
+                onboardingSettings: {
+                    ...onboardingSettings,
+                    updateRecommendedRepositories: !!onboardingSettings?.recommendedRepositories,
+                    welcomeMessage: {
+                        ...onboardingSettings?.welcomeMessage,
+                        featuredMemberResolvedAvatarUrl: undefined, // This field is not allowed to be set in the request.
+                    },
+                },
                 annotateGitCommits,
             });
             return settings.settings!;

components/dashboard/src/index.css

@@ -95,7 +95,7 @@
         margin: 0 auto !important;
     }
     p {
-        @apply text-sm text-gray-400 dark:text-gray-600;
+        @apply text-sm text-pk-content-secondary;
     }
 
     .app-container {
@@ -118,7 +118,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/login/SSOLoginForm.tsx

@@ -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();

components/dashboard/src/repositories/detail/general/ManageRepoSuggestion.tsx

@@ -36,7 +36,6 @@ export const ManageRepoSuggestion: FC<Props> = ({ configuration }) => {
             await updateTeamSettings.mutateAsync(
                 {
                     onboardingSettings: {
-                        ...orgSettings?.onboardingSettings,
                         recommendedRepositories: [...newRepositories],
                     },
                 },
@@ -47,7 +46,7 @@ export const ManageRepoSuggestion: FC<Props> = ({ configuration }) => {
                 },
             );
         },
-        [orgSettings?.onboardingSettings, toast, updateTeamSettings],
+        [orgSettings?.onboardingSettings?.recommendedRepositories, toast, updateTeamSettings],
     );
 
     const isSuggested = orgSettings?.onboardingSettings?.recommendedRepositories?.includes(configuration.id);

components/dashboard/src/start/StartWorkspace.tsx

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

components/dashboard/src/teams/TeamOnboarding.tsx

@@ -4,18 +4,19 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { Heading2, Heading3, Subheading } from "../components/typography/headings";
 import { useIsOwner } from "../data/organizations/members-query";
 import { useOrgSettingsQuery } from "../data/organizations/org-settings-query";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
-import { useUpdateOrgSettingsMutation } from "../data/organizations/update-org-settings-mutation";
+import {
+    UpdateOrganizationSettingsArgs,
+    useUpdateOrgSettingsMutation,
+} from "../data/organizations/update-org-settings-mutation";
 import { OrgSettingsPage } from "./OrgSettingsPage";
 import { ConfigurationSettingsField } from "../repositories/detail/ConfigurationSettingsField";
 import { useDocumentTitle } from "../hooks/use-document-title";
 import { useToast } from "../components/toasts/Toasts";
-import type { PlainMessage } from "@bufbuild/protobuf";
 import { InputField } from "../components/forms/InputField";
 import { TextInput } from "../components/forms/TextInputField";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
@@ -24,11 +25,16 @@ import { useOrgSuggestedRepos } from "../data/organizations/suggested-repositori
 import { RepositoryListItem } from "../repositories/list/RepoListItem";
 import { LoadingState } from "@podkit/loading/LoadingState";
 import { Table, TableHeader, TableRow, TableHead, TableBody } from "@podkit/tables/Table";
+import { WelcomeMessageConfigurationField } from "./onboarding/WelcomeMessageConfigurationField";
+
+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();
@@ -39,7 +45,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: UpdateOrganizationSettingsArgs, options?: UpdateTeamSettingsOptions) => {
             if (!org?.id) {
                 throw new Error("no organization selected");
             }
@@ -70,11 +76,10 @@ export default function TeamOnboardingPage() {
             await handleUpdateTeamSettings({
                 onboardingSettings: {
                     internalLink,
-                    recommendedRepositories: settings?.onboardingSettings?.recommendedRepositories ?? [],
                 },
             });
         },
-        [handleUpdateTeamSettings, internalLink, settings?.onboardingSettings?.recommendedRepositories],
+        [handleUpdateTeamSettings, internalLink],
     );
 
     useEffect(() => {
@@ -146,7 +151,7 @@ export default function TeamOnboardingPage() {
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
-                                {(suggestedRepos ?? []).map((repo) => (
+                                {suggestedRepos?.map((repo) => (
                                     <RepositoryListItem
                                         key={repo.configurationId}
                                         configuration={repo.configuration}
@@ -157,6 +162,8 @@ export default function TeamOnboardingPage() {
                         </Table>
                     )}
                 </ConfigurationSettingsField>
+
+                <WelcomeMessageConfigurationField handleUpdateTeamSettings={handleUpdateTeamSettings} />
             </div>
         </OrgSettingsPage>
     );

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

@@ -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 type { OnboardingSettings_WelcomeMessage } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { Button } from "@podkit/buttons/Button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@podkit/dropdown/DropDown";
+
+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>
+    );
+};

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

@@ -0,0 +1,58 @@
+/**
+ * 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 { useCallback, useEffect, useMemo, useState } from "react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../../components/Modal";
+import { storageAvailable } from "../../utils";
+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>
+    );
+};