Add default workspace image to org setting

components/dashboard/src/data/organizations/update-org-settings-mutation.ts

@@ -10,16 +10,19 @@ import { getGitpodService } from "../../service/service";
 import { getOrgSettingsQueryKey, OrgSettingsResult } from "./org-settings-query";
 import { useCurrentOrg } from "./orgs-query";
 
-type UpdateOrganizationSettingsArgs = Pick<OrganizationSettings, "workspaceSharingDisabled">;
+type UpdateOrganizationSettingsArgs = Pick<OrganizationSettings, "workspaceSharingDisabled" | "defaultWorkspaceImage">;
 
 export const useUpdateOrgSettingsMutation = () => {
     const queryClient = useQueryClient();
     const team = useCurrentOrg().data;
     const teamId = team?.id || "";
 
     return useMutation<OrganizationSettings, Error, UpdateOrganizationSettingsArgs>({
-        mutationFn: async ({ workspaceSharingDisabled }) => {
-            return await getGitpodService().server.updateOrgSettings(teamId, { workspaceSharingDisabled });
+        mutationFn: async ({ workspaceSharingDisabled, defaultWorkspaceImage }) => {
+            return await getGitpodService().server.updateOrgSettings(teamId, {
+                workspaceSharingDisabled,
+                defaultWorkspaceImage,
+            });
         },
         onSuccess: (newData, _) => {
             const queryKey = getOrgSettingsQueryKey(teamId);

components/dashboard/src/menu/OrganizationSelector.tsx

@@ -70,19 +70,19 @@ export default function OrganizationSelector() {
             separator: false,
             link: "/usage",
         });
-    }
-
-    // Show billing & settings if user is an owner of current org
-    if (currentOrg.data && currentOrg.data.isOwner) {
-        if (billingMode?.mode === "usage-based") {
-            linkEntries.push({
-                title: "Billing",
-                customContent: <LinkEntry>Billing</LinkEntry>,
-                active: false,
-                separator: false,
-                link: "/billing",
-            });
+        // Show billing if user is an owner of current org
+        if (currentOrg.data.isOwner) {
+            if (billingMode?.mode === "usage-based") {
+                linkEntries.push({
+                    title: "Billing",
+                    customContent: <LinkEntry>Billing</LinkEntry>,
+                    active: false,
+                    separator: false,
+                    link: "/billing",
+                });
+            }
         }
+        // Org settings is available for all members, but only owner can change them
         linkEntries.push({
             title: "Settings",
             customContent: <LinkEntry>Settings</LinkEntry>,

components/dashboard/src/teams/OrgSettingsPage.tsx

@@ -32,6 +32,7 @@ export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
                 billingMode: orgBillingMode.data,
                 ssoEnabled: oidcServiceEnabled,
                 orgGitAuthProviders,
+                isOwner: org.data?.isOwner,
             }),
         [org.data, orgBillingMode.data, oidcServiceEnabled, orgGitAuthProviders],
     );
@@ -51,8 +52,11 @@ export function OrgSettingsPage({ children }: OrgSettingsPageProps) {
         );
     }
 
+    // TODO: redirect when current page is not included in menu
+    const onlyForOwner = false;
+
     // After we've loaded, ensure user is an owner, if not, redirect
-    if (!org.data?.isOwner) {
+    if (onlyForOwner && !org.data?.isOwner) {
         return <Redirect to={"/"} />;
     }
 
@@ -68,27 +72,28 @@ function getTeamSettingsMenu(params: {
     billingMode?: BillingMode;
     ssoEnabled?: boolean;
     orgGitAuthProviders: boolean;
+    isOwner?: boolean;
 }) {
-    const { billingMode, ssoEnabled, orgGitAuthProviders } = params;
+    const { billingMode, ssoEnabled, orgGitAuthProviders, isOwner } = params;
     const result = [
         {
             title: "General",
             link: [`/settings`],
         },
     ];
-    if (ssoEnabled) {
+    if (isOwner && ssoEnabled) {
         result.push({
             title: "SSO",
             link: [`/sso`],
         });
     }
-    if (orgGitAuthProviders) {
+    if (isOwner && orgGitAuthProviders) {
         result.push({
             title: "Git Providers",
             link: [`/settings/git`],
         });
     }
-    if (billingMode?.mode !== "none") {
+    if (isOwner && billingMode?.mode !== "none") {
         // The Billing page handles billing mode itself, so: always show it!
         result.push({
             title: "Billing",

components/dashboard/src/teams/TeamSettings.tsx

@@ -5,7 +5,7 @@
  */
 
 import { OrganizationSettings } from "@gitpod/gitpod-protocol";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import Alert from "../components/Alert";
 import { Button } from "../components/Button";
 import { CheckboxInputField } from "../components/forms/CheckboxInputField";
@@ -14,13 +14,14 @@ import { TextInputField } from "../components/forms/TextInputField";
 import { Heading2, Subheading } from "../components/typography/headings";
 import { useUpdateOrgSettingsMutation } from "../data/organizations/update-org-settings-mutation";
 import { useOrgSettingsQuery } from "../data/organizations/org-settings-query";
-import { useCurrentOrg, useOrganizationsInvalidator } from "../data/organizations/orgs-query";
+import { OrganizationInfo, useCurrentOrg, useOrganizationsInvalidator } from "../data/organizations/orgs-query";
 import { useUpdateOrgMutation } from "../data/organizations/update-org-mutation";
 import { useOnBlurError } from "../hooks/use-onblur-error";
 import { teamsService } from "../service/public-api";
 import { gitpodHostUrl } from "../service/service";
 import { useCurrentUser } from "../user-context";
 import { OrgSettingsPage } from "./OrgSettingsPage";
+import { useToast } from "../components/toasts/Toasts";
 
 export default function TeamSettingsPage() {
     const user = useCurrentUser();
@@ -31,21 +32,6 @@ export default function TeamSettingsPage() {
     const [teamName, setTeamName] = useState(org?.name || "");
     const [updated, setUpdated] = useState(false);
     const updateOrg = useUpdateOrgMutation();
-    const { data: settings, isLoading } = useOrgSettingsQuery();
-    const updateTeamSettings = useUpdateOrgSettingsMutation();
-
-    const handleUpdateTeamSettings = useCallback(
-        (newSettings: Partial<OrganizationSettings>) => {
-            if (!org?.id) {
-                throw new Error("no organization selected");
-            }
-            updateTeamSettings.mutate({
-                ...settings,
-                ...newSettings,
-            });
-        },
-        [updateTeamSettings, org?.id, settings],
-    );
 
     const close = () => setModal(false);
 
@@ -60,6 +46,9 @@ export default function TeamSettingsPage() {
 
     const updateTeamInformation = useCallback(
         async (e: React.FormEvent) => {
+            if (!org?.isOwner) {
+                return;
+            }
             e.preventDefault();
 
             if (!orgFormIsValid) {
@@ -74,7 +63,7 @@ export default function TeamSettingsPage() {
                 console.error(error);
             }
         },
-        [orgFormIsValid, updateOrg, teamName],
+        [orgFormIsValid, updateOrg, teamName, org],
     );
 
     const deleteTeam = useCallback(async () => {
@@ -99,12 +88,6 @@ export default function TeamSettingsPage() {
                         <span>{updateOrg.error.message || "unknown error"}</span>
                     </Alert>
                 )}
-                {updateTeamSettings.isError && (
-                    <Alert type="error" closable={true} className="mb-2 max-w-xl rounded-md">
-                        <span>Failed to update organization settings: </span>
-                        <span>{updateTeamSettings.error.message || "unknown error"}</span>
-                    </Alert>
-                )}
                 {updated && (
                     <Alert type="message" closable={true} className="mb-2 max-w-xl rounded-md">
                         Organization name has been updated.
@@ -117,30 +100,27 @@ export default function TeamSettingsPage() {
                         value={teamName}
                         error={teamNameError.message}
                         onChange={setTeamName}
+                        disabled={!org?.isOwner}
                         onBlur={teamNameError.onBlur}
                     />
 
-                    <Button className="mt-4" htmlType="submit" disabled={org?.name === teamName || !orgFormIsValid}>
-                        Update Organization
-                    </Button>
-
-                    <Heading2 className="pt-12">Collaboration & Sharing</Heading2>
-                    <CheckboxInputField
-                        label="Workspace Sharing"
-                        hint="Allow workspaces created within an Organization to share the workspace with any authenticated user."
-                        checked={!settings?.workspaceSharingDisabled}
-                        onChange={(checked) => handleUpdateTeamSettings({ workspaceSharingDisabled: !checked })}
-                        disabled={isLoading}
-                    />
+                    {org?.isOwner && (
+                        <Button className="mt-4" htmlType="submit" disabled={org?.name === teamName || !orgFormIsValid}>
+                            Update Organization
+                        </Button>
+                    )}
                 </form>
 
-                {user?.organizationId !== org?.id && (
+                <OrgSettingsForm org={org} />
+
+                {user?.organizationId !== org?.id && org?.isOwner && (
                     <>
                         <Heading2 className="pt-12">Delete Organization</Heading2>
                         <Subheading className="pb-4 max-w-2xl">
                             Deleting this organization will also remove all associated data, including projects and
                             workspaces. Deleted organizations cannot be restored!
                         </Subheading>
+
                         <button className="danger secondary" onClick={() => setModal(true)}>
                             Delete Organization
                         </button>
@@ -185,3 +165,91 @@ export default function TeamSettingsPage() {
         </>
     );
 }
+
+function OrgSettingsForm(props: { org?: OrganizationInfo }) {
+    const { org } = props;
+    const { data: settings, isLoading } = useOrgSettingsQuery();
+    const updateTeamSettings = useUpdateOrgSettingsMutation();
+    const [defaultWorkspaceImage, setDefaultWorkspaceImage] = useState(settings?.defaultWorkspaceImage ?? "");
+    const { toast } = useToast();
+
+    useEffect(() => {
+        if (!settings) {
+            return;
+        }
+        setDefaultWorkspaceImage(settings.defaultWorkspaceImage ?? "");
+    }, [settings]);
+
+    const handleUpdateTeamSettings = useCallback(
+        async (newSettings: Partial<OrganizationSettings>) => {
+            if (!org?.id) {
+                throw new Error("no organization selected");
+            }
+            if (!org.isOwner) {
+                throw new Error("no organization settings change permission");
+            }
+            try {
+                await updateTeamSettings.mutateAsync({
+                    ...settings,
+                    ...newSettings,
+                });
+                if (newSettings.defaultWorkspaceImage) {
+                    toast("Default workspace image has been updated.");
+                }
+            } catch (error) {
+                console.error(error);
+                toast(
+                    error.message
+                        ? "Failed to update organization settings: " + error.message
+                        : "Oh no, there was a problem with our service.",
+                );
+            }
+        },
+        [updateTeamSettings, org?.id, org?.isOwner, settings, toast],
+    );
+
+    return (
+        <form
+            onSubmit={(e) => {
+                e.preventDefault();
+                handleUpdateTeamSettings({ defaultWorkspaceImage });
+            }}
+        >
+            <Heading2 className="pt-12">Collaboration & Sharing</Heading2>
+            <Subheading className="max-w-2xl">
+                Choose which workspace images you want to use for your workspaces.
+            </Subheading>
+
+            {updateTeamSettings.isError && (
+                <Alert type="error" closable={true} className="mb-2 max-w-xl rounded-md">
+                    <span>Failed to update organization settings: </span>
+                    <span>{updateTeamSettings.error.message || "unknown error"}</span>
+                </Alert>
+            )}
+
+            <CheckboxInputField
+                label="Workspace Sharing"
+                hint="Allow workspaces created within an Organization to share the workspace with any authenticated user."
+                checked={!settings?.workspaceSharingDisabled}
+                onChange={(checked) => handleUpdateTeamSettings({ workspaceSharingDisabled: !checked })}
+                disabled={isLoading || !org?.isOwner}
+            />
+
+            <Heading2 className="pt-12">Workspace Settings</Heading2>
+            <TextInputField
+                label="Default Image"
+                // TODO: Provide document links
+                hint="Use any official Gitpod Docker image, or Docker image reference"
+                value={defaultWorkspaceImage}
+                onChange={setDefaultWorkspaceImage}
+                disabled={isLoading || !org?.isOwner}
+            />
+
+            {org?.isOwner && (
+                <Button htmlType="submit" className="mt-4" disabled={!org.isOwner}>
+                    Save
+                </Button>
+            )}
+        </form>
+    );
+}

components/gitpod-cli/cmd/init.go

@@ -5,6 +5,7 @@
 package cmd
 
 import (
+	"context"
 	"errors"
 	"fmt"
 	"os"
@@ -31,9 +32,10 @@ var initCmd = &cobra.Command{
 Create a Gitpod configuration for this project.
 	`,
 	RunE: func(cmd *cobra.Command, args []string) error {
+		ctx := cmd.Context()
 		cfg := gitpodlib.GitpodFile{}
 		if interactive {
-			if err := askForDockerImage(&cfg); err != nil {
+			if err := askForDockerImage(ctx, &cfg); err != nil {
 				return err
 			}
 			if err := askForPorts(&cfg); err != nil {
@@ -52,7 +54,16 @@ Create a Gitpod configuration for this project.
 			return err
 		}
 		if !interactive {
-			d = []byte(`# List the start up tasks. Learn more: https://www.gitpod.io/docs/configure/workspaces/tasks
+			defaultImage, err := getDefaultWorkspaceImage(ctx)
+			if err != nil {
+				fmt.Printf("failed to get organization default workspace image: %v\n", err)
+				fmt.Println("fallback to gitpod default")
+				defaultImage = "gitpod/workspace-full"
+			}
+			yml := fmt.Sprintf(`# Image of workspace. Learn more: https://www.gitpod.io/docs/configure/workspaces/workspace-image
+image: %s
+
+# List the start up tasks. Learn more: https://www.gitpod.io/docs/configure/workspaces/tasks
 tasks:
   - name: Script Task
     init: echo 'init script' # runs during prebuild => https://www.gitpod.io/docs/configure/projects/prebuilds
@@ -66,7 +77,8 @@ ports:
     onOpen: open-preview
 
 # Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
-`)
+`, defaultImage)
+			d = []byte(yml)
 		} else {
 			fmt.Printf("\n\n---\n%s", d)
 		}
@@ -132,7 +144,7 @@ func ask(lbl string, def string, validator promptui.ValidateFunc) (string, error
 	return prompt.Run()
 }
 
-func askForDockerImage(cfg *gitpodlib.GitpodFile) error {
+func askForDockerImage(ctx context.Context, cfg *gitpodlib.GitpodFile) error {
 	prompt := promptui.Select{
 		Label: "Workspace Docker image",
 		Items: []string{"default", "custom image", "docker file"},
@@ -146,6 +158,11 @@ func askForDockerImage(cfg *gitpodlib.GitpodFile) error {
 	}
 
 	if chce == 0 {
+		defaultImage, err := getDefaultWorkspaceImage(ctx)
+		if err != nil {
+			return fmt.Errorf("failed to get organization default workspace image: %w", err)
+		}
+		cfg.SetImageName(defaultImage)
 		return nil
 	}
 	if chce == 1 {