[dashboard] save default image

Author: mustard-mh

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/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,7 +14,7 @@ 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";
@@ -32,34 +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 [defaultWorkspaceImage, setDefaultWorkspaceImage] = useState(settings?.defaultWorkspaceImage ?? "");
-    const { toast } = useToast();
-
-    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 || "Oh no, there was a problem with our service.");
-            }
-        },
-        [updateTeamSettings, org?.id, org?.isOwner, settings, toast],
-    );
 
     const close = () => setModal(false);
 
@@ -116,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.
@@ -145,44 +111,16 @@ export default function TeamSettingsPage() {
                     )}
                 </form>
 
-                <form onSubmit={() => 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>
-
-                    <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}
-                    />
+                <OrgSettingsForm org={org} />
 
-                    <Heading2 className="pt-12">Workspace Settings</Heading2>
-                    <TextInputField
-                        label="Default Image"
-                        // TODO: ECR is dedicated only now
-                        // TODO: Provide document links
-                        hint="Use any workspace image from Gitpod, or any image from your private ECR registry, e.g. <xyz>.amazonaws.com/<your-image-name:tag>. "
-                        value={defaultWorkspaceImage}
-                        onChange={setDefaultWorkspaceImage}
-                        disabled={isLoading || !org?.isOwner}
-                    />
-
-                    {org?.isOwner && (
-                        <Button htmlType="submit" size="block" className="mt-4" disabled={!org.isOwner}>
-                            Save
-                        </Button>
-                    )}
-                </form>
                 {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>
@@ -227,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 a URL to an image."
+                value={defaultWorkspaceImage}
+                onChange={setDefaultWorkspaceImage}
+                disabled={isLoading || !org?.isOwner}
+            />
+
+            {org?.isOwner && (
+                <Button htmlType="submit" className="mt-4" disabled={!org.isOwner}>
+                    Save
+                </Button>
+            )}
+        </form>
+    );
+}