[server,dashboard] improve org default image input placeholder (#18746)

* [server,dashboard] improve org default image input placeholder

* fix build failed

* Use null instead of `NULL_TO_UNDEFINED`

* fixup

* fixup toast not shown

Author: mustard-mh

components/dashboard/src/data/workspaces/default-workspace-image-query.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023 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 { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+
+export const useDefaultWorkspaceImageQuery = () => {
+    return useQuery<string>({
+        queryKey: ["default-workspace-image"],
+        staleTime: 1000 * 60 * 10, // 10 minute
+        queryFn: async () => {
+            const image = await getGitpodService().server.getDefaultWorkspaceImage();
+            return image;
+        },
+    });
+};

components/dashboard/src/teams/TeamSettings.tsx

@@ -22,6 +22,7 @@ import { gitpodHostUrl } from "../service/service";
 import { useCurrentUser } from "../user-context";
 import { OrgSettingsPage } from "./OrgSettingsPage";
 import { useToast } from "../components/toasts/Toasts";
+import { useDefaultWorkspaceImageQuery } from "../data/workspaces/default-workspace-image-query";
 
 export default function TeamSettingsPage() {
     const user = useCurrentUser();
@@ -169,6 +170,7 @@ export default function TeamSettingsPage() {
 function OrgSettingsForm(props: { org?: OrganizationInfo }) {
     const { org } = props;
     const { data: settings, isLoading } = useOrgSettingsQuery();
+    const { data: globalDefaultImage } = useDefaultWorkspaceImageQuery();
     const updateTeamSettings = useUpdateOrgSettingsMutation();
     const [defaultWorkspaceImage, setDefaultWorkspaceImage] = useState(settings?.defaultWorkspaceImage ?? "");
     const { toast } = useToast();
@@ -190,11 +192,10 @@ function OrgSettingsForm(props: { org?: OrganizationInfo }) {
             }
             try {
                 await updateTeamSettings.mutateAsync({
-                    // We don't want to have original setting passed, since defaultWorkspaceImage could be undefined
-                    // to bring compatibility when we're going to change Gitpod install value's defaultImage setting
+                    ...settings,
                     ...newSettings,
                 });
-                if (newSettings.defaultWorkspaceImage) {
+                if (newSettings.defaultWorkspaceImage !== undefined) {
                     toast("Default workspace image has been updated.");
                 }
             } catch (error) {
@@ -206,7 +207,7 @@ function OrgSettingsForm(props: { org?: OrganizationInfo }) {
                 );
             }
         },
-        [updateTeamSettings, org?.id, org?.isOwner, toast],
+        [updateTeamSettings, org?.id, org?.isOwner, settings, toast],
     );
 
     return (
@@ -241,6 +242,7 @@ function OrgSettingsForm(props: { org?: OrganizationInfo }) {
                 label="Default Image"
                 // TODO: Provide document links
                 hint="Use any official Gitpod Docker image, or Docker image reference"
+                placeholder={globalDefaultImage}
                 value={defaultWorkspaceImage}
                 onChange={setDefaultWorkspaceImage}
                 disabled={isLoading || !org?.isOwner}

components/gitpod-db/src/typeorm/entity/db-team-settings.ts

@@ -19,7 +19,7 @@ export class DBOrgSettings implements OrganizationSettings {
     workspaceSharingDisabled?: boolean;
 
     @Column("varchar", { nullable: true })
-    defaultWorkspaceImage?: string | null; // TODO: migration
+    defaultWorkspaceImage?: string | null;
 
     @Column()
     deleted: boolean;

components/gitpod-db/src/typeorm/team-db-impl.ts

@@ -377,15 +377,13 @@ export class TeamDBImpl extends TransactionalDBImpl<TeamDB> implements TeamDB {
     public async setOrgSettings(orgId: string, settings: Partial<OrganizationSettings>): Promise<void> {
         const repo = await this.getOrgSettingsRepo();
         const team = await repo.findOne({ where: { orgId, deleted: false } });
-        const update: Partial<OrganizationSettings> = {};
-        if (settings.workspaceSharingDisabled != undefined) {
-            update.workspaceSharingDisabled = settings.workspaceSharingDisabled;
-        }
-        // Set to null if defaultWorkspaceImage is empty string, so that we can fallback to default when getting org settings
-        if (settings.defaultWorkspaceImage?.trim() === "") {
+        const update: Partial<OrganizationSettings> = {
+            defaultWorkspaceImage: settings.defaultWorkspaceImage,
+            workspaceSharingDisabled: settings.workspaceSharingDisabled,
+        };
+        // Set to null if defaultWorkspaceImage is empty string, so that it can fallback to default image
+        if (update.defaultWorkspaceImage?.trim() === "") {
             update.defaultWorkspaceImage = null;
-        } else if (settings.defaultWorkspaceImage != undefined) {
-            update.defaultWorkspaceImage = settings.defaultWorkspaceImage;
         }
         if (!team) {
             await repo.insert({

components/gitpod-protocol/go/gitpod-service.go

@@ -2256,8 +2256,8 @@ type TeamMembershipInvite struct {
 }
 
 type OrganizationSettings struct {
-	WorkspaceSharingDisabled bool    `json:"workspaceSharingDisabled,omitempty"`
-	DefaultWorkspaceImage    *string `json:"defaultWorkspaceImage,omitempty"`
+	WorkspaceSharingDisabled bool   `json:"workspaceSharingDisabled,omitempty"`
+	DefaultWorkspaceImage    string `json:"defaultWorkspaceImage,omitempty"`
 }
 
 type Project struct {

components/gitpod-protocol/src/gitpod-service.ts

@@ -173,6 +173,8 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getOrgAuthProviders(params: GitpodServer.GetOrgAuthProviderParams): Promise<AuthProviderEntry[]>;
     deleteOrgAuthProvider(params: GitpodServer.DeleteOrgAuthProviderParams): Promise<void>;
 
+    getDefaultWorkspaceImage(): Promise<string>;
+
     // Dedicated, Dedicated, Dedicated
     getOnboardingState(): Promise<GitpodServer.OnboardingState>;
 

components/server/src/auth/rate-limiter.ts

@@ -111,6 +111,7 @@ const defaultFunctions: FunctionsConfig = {
     deleteTeam: { group: "default", points: 1 },
     getOrgSettings: { group: "default", points: 1 },
     updateOrgSettings: { group: "default", points: 1 },
+    getDefaultWorkspaceImage: { group: "default", points: 1 },
     getProviderRepositoriesForUser: { group: "default", points: 1 },
     createProject: { group: "default", points: 1 },
     getTeamProjects: { group: "default", points: 1 },

components/server/src/orgs/organization-service.ts

@@ -19,7 +19,6 @@ import { inject, injectable } from "inversify";
 import { Authorizer } from "../authorization/authorizer";
 import { ProjectsService } from "../projects/projects-service";
 import { TransactionalContext } from "@gitpod/gitpod-db/lib/typeorm/transactional-db-impl";
-import { Config } from "../config";
 
 @injectable()
 export class OrganizationService {
@@ -29,7 +28,6 @@ export class OrganizationService {
         @inject(ProjectsService) private readonly projectsService: ProjectsService,
         @inject(Authorizer) private readonly auth: Authorizer,
         @inject(IAnalyticsWriter) private readonly analytics: IAnalyticsWriter,
-        @inject(Config) protected readonly config: Config,
     ) {}
 
     async listOrganizations(
@@ -330,9 +328,6 @@ export class OrganizationService {
     async getSettings(userId: string, orgId: string): Promise<OrganizationSettings> {
         await this.auth.checkPermissionOnOrganization(userId, "read_settings", orgId);
         const settings = (await this.teamDB.findOrgSettings(orgId)) || {};
-        if (!settings.defaultWorkspaceImage) {
-            settings.defaultWorkspaceImage = this.config.workspaceDefaults.workspaceImage;
-        }
         return settings;
     }
 

components/server/src/workspace/gitpod-server-impl.ts

@@ -2497,6 +2497,12 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
         return this.organizationService.updateSettings(user.id, orgId, settings);
     }
 
+    async getDefaultWorkspaceImage(ctx: TraceContextWithSpan): Promise<string> {
+        const userId = this.userID;
+        traceAPIParams(ctx, { userId });
+        return this.config.workspaceDefaults.workspaceImage;
+    }
+
     public async getTeamProjects(ctx: TraceContext, teamId: string): Promise<Project[]> {
         traceAPIParams(ctx, { teamId });