Add default workspace image to org setting

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

@@ -10,16 +10,21 @@ import { getGitpodService } from "../../service/service";
 import { getOrgSettingsQueryKey, OrgSettingsResult } from "./org-settings-query";
 import { useCurrentOrg } from "./orgs-query";
 
-type UpdateOrganizationSettingsArgs = Pick<OrganizationSettings, "workspaceSharingDisabled">;
+type UpdateOrganizationSettingsArgs = Partial<
+    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,92 @@ 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({
+                    // 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
+                    ...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, 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}>
+                    Update Default Image
+                </Button>
+            )}
+        </form>
+    );
+}