[dashboard] use new api to configure workspace timeout setting

Author: iQQBot

components/dashboard/src/user-settings/Preferences.tsx

@@ -4,15 +4,15 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
 import SelectIDE from "./SelectIDE";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { ThemeSelector } from "../components/ThemeSelector";
-import CheckBox from "../components/CheckBox";
-import { WorkspaceTimeoutDuration } from "@gitpod/gitpod-protocol";
+import Alert from "../components/Alert";
+import { Link } from "react-router-dom";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
@@ -31,31 +31,21 @@ export default function Preferences() {
         }
     };
 
-    const [disabledClosedTimeout, setDisabledClosedTimeout] = useState<boolean>(
-        user?.additionalData?.disabledClosedTimeout ?? false,
-    );
-    const actuallySetDisabledClosedTimeout = async (value: boolean) => {
-        try {
-            const additionalData = user?.additionalData || {};
-            additionalData.disabledClosedTimeout = value;
-            await getGitpodService().server.updateLoggedInUser({ additionalData });
-            setDisabledClosedTimeout(value);
-        } catch (e) {
-            alert("Cannot set custom workspace timeout: " + e.message);
-        }
-    };
-
     const [workspaceTimeout, setWorkspaceTimeout] = useState<string>(user?.additionalData?.workspaceTimeout ?? "");
-    const actuallySetWorkspaceTimeout = async (value: string) => {
+    const actuallySetWorkspaceTimeout = useCallback(async (value: string) => {
         try {
-            const timeout = WorkspaceTimeoutDuration.validate(value);
-            const additionalData = user?.additionalData || {};
-            additionalData.workspaceTimeout = timeout;
-            await getGitpodService().server.updateLoggedInUser({ additionalData });
+            await getGitpodService().server.updateWorkspaceTimeoutSetting({ workspaceTimeout: value });
         } catch (e) {
             alert("Cannot set custom workspace timeout: " + e.message);
         }
-    };
+    }, []);
+
+    const [allowConfigureWorkspaceTimeout, setAllowConfigureWorkspaceTimeout] = useState<boolean>(false);
+    useEffect(() => {
+        getGitpodService()
+            .server.supportConfigureWorkspaceTimeout()
+            .then((r) => setAllowConfigureWorkspaceTimeout(r));
+    }, []);
 
     return (
         <div>
@@ -103,38 +93,44 @@ export default function Preferences() {
 
                 <h3 className="mt-12">Inactivity Timeout </h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">
-                    By default, workspaces stop following 30 minutes without user input (e.g. keystrokes or terminal
-                    input commands). You can increase the workspace timeout up to a maximum of 24 hours.
+                    Workspaces will stop after a period of inactivity without any user input.
                 </p>
                 <div className="mt-4 max-w-xl">
-                    <h4>Default Inactivity Timeout</h4>
-                    <span className="flex">
-                        <input
-                            type="text"
-                            className="w-96 h-9"
-                            value={workspaceTimeout}
-                            placeholder="timeout time, such as 30m, 1h, max 24h"
-                            onChange={(e) => setWorkspaceTimeout(e.target.value)}
-                        />
-                        <button
-                            className="secondary ml-2"
-                            onClick={() => actuallySetWorkspaceTimeout(workspaceTimeout)}
-                        >
-                            Save Changes
-                        </button>
-                    </span>
-                    <div className="mt-1">
-                        <p className="text-gray-500 dark:text-gray-400">
-                            Use minutes or hours, like <strong>30m</strong> or <strong>2h</strong>.
-                        </p>
-                    </div>
+                    <h4>Default Workspace Timeout</h4>
+
+                    {!allowConfigureWorkspaceTimeout && (
+                        <Alert type="message">
+                            Upgrade organization <Link to="/billing">billing</Link> plan to use a custom inactivity
+                            timeout.
+                        </Alert>
+                    )}
 
-                    <CheckBox
-                        title="Stop workspace when no active editor connection"
-                        desc={<span>Don't change workspace inactivity timeout when closing the editor.</span>}
-                        checked={disabledClosedTimeout}
-                        onChange={(e) => actuallySetDisabledClosedTimeout(e.target.checked)}
-                    />
+                    {allowConfigureWorkspaceTimeout && (
+                        <>
+                            <span className="flex mt-2">
+                                <input
+                                    type="text"
+                                    className="w-96 h-9"
+                                    value={workspaceTimeout}
+                                    disabled={!allowConfigureWorkspaceTimeout}
+                                    placeholder="e.g. 30m"
+                                    onChange={(e) => setWorkspaceTimeout(e.target.value)}
+                                />
+                                <button
+                                    className="secondary ml-2"
+                                    disabled={!allowConfigureWorkspaceTimeout}
+                                    onClick={() => actuallySetWorkspaceTimeout(workspaceTimeout)}
+                                >
+                                    Save Changes
+                                </button>
+                            </span>
+                            <div className="mt-1">
+                                <p className="text-gray-500 dark:text-gray-400">
+                                    Use minutes or hours, like <strong>30m</strong> or <strong>2h</strong>.
+                                </p>
+                            </div>
+                        </>
+                    )}
                 </div>
             </PageWithSettingsSubMenu>
         </div>