[dashboard] use new api to configure workspace timeout setting

Author: iQQBot

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

@@ -4,15 +4,14 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext, useState } from "react";
+import { 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";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
@@ -31,32 +30,22 @@ 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) => {
         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>
             <PageWithSettingsSubMenu>
@@ -103,21 +92,29 @@ 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">
+                    <h4>Default Workspace Timeout</h4>
+
+                    {!allowConfigureWorkspaceTimeout && (
+                        <Alert type="message">
+                            Upgrade organization <a href="/billing">billing</a> plan to use a custom inactivity timeout.
+                        </Alert>
+                    )}
+
+                    <span className="flex mt-2">
                         <input
                             type="text"
                             className="w-96 h-9"
                             value={workspaceTimeout}
-                            placeholder="timeout time, such as 30m, 1h, max 24h"
+                            disabled={!allowConfigureWorkspaceTimeout}
+                            placeholder="e.g. 30m"
                             onChange={(e) => setWorkspaceTimeout(e.target.value)}
                         />
                         <button
                             className="secondary ml-2"
+                            disabled={!allowConfigureWorkspaceTimeout}
                             onClick={() => actuallySetWorkspaceTimeout(workspaceTimeout)}
                         >
                             Save Changes
@@ -128,13 +125,6 @@ export default function Preferences() {
                             Use minutes or hours, like <strong>30m</strong> or <strong>2h</strong>.
                         </p>
                     </div>
-
-                    <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)}
-                    />
                 </div>
             </PageWithSettingsSubMenu>
         </div>