Improve queries on workspace start page (#19590)

* Improve queries on workspace start page

* Fix disabled g1-standard always shows error

* update doc

* Address feedback

* Use lib `use-deep-compare-effect`

Author: mustard-mh

components/dashboard/package.json

@@ -57,6 +57,7 @@
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "url": "^0.11.1",
+    "use-deep-compare-effect": "^1.8.1",
     "util": "^0.11.1",
     "validator": "^13.9.0",
     "xterm": "^5.4.0-beta.37",

components/dashboard/src/components/SelectWorkspaceClassComponent.tsx

@@ -80,6 +80,8 @@ export default function SelectWorkspaceClassComponent({
         // if the selected workspace class is not supported, we set an error and ask the user to pick one
         if (selectedWorkspaceClass && !workspaceClasses?.find((c) => c.id === selectedWorkspaceClass)) {
             setError?.(`The workspace class '${selectedWorkspaceClass}' is not supported.`);
+        } else {
+            setError?.(undefined);
         }
     }, [
         loading,

components/dashboard/src/data/configurations/configuration-queries.ts

@@ -108,6 +108,8 @@ export const useConfiguration = (configurationId: string) => {
                 }
                 return true;
             },
+            cacheTime: 1000 * 60 * 5, // 5m
+            staleTime: 1000 * 30, // 30s
         },
     );
 };

components/dashboard/src/data/ide-options/ide-options-query.ts

@@ -13,6 +13,7 @@ import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organizat
 import { useMemo } from "react";
 import { useCurrentOrg } from "../organizations/orgs-query";
 import { useConfiguration } from "../configurations/configuration-queries";
+import { useDeepCompareMemoize } from "use-deep-compare-effect";
 
 const DEFAULT_WS_EDITOR = "code";
 
@@ -76,20 +77,24 @@ export const useAllowedWorkspaceEditorsMemo = (configurationId: string | undefin
         // So we will filter it out
         isLoading = isLoadingInstallationCls || isLoadingConfiguration;
     }
+    const depItems = [
+        installationOptions,
+        options?.ignoreScope,
+        orgSettings,
+        configuration?.workspaceSettings?.restrictedEditorNames,
+    ];
     const data = useMemo(() => {
         return getAllowedWorkspaceEditors(
             installationOptions,
             orgSettings,
             configuration?.workspaceSettings?.restrictedEditorNames,
             options,
         );
+        // react useMemo is using `Object.is` to compare dependencies so array / object will make re-render re-call useMemo,
+        // see also https://react.dev/reference/react/useMemo#every-time-my-component-renders-the-calculation-in-usememo-re-runs
+        //
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        installationOptions,
-        options?.ignoreScope,
-        orgSettings,
-        configuration?.workspaceSettings?.restrictedEditorNames,
-    ]);
+    }, [useDeepCompareMemoize(depItems)]);
     return { ...data, isLoading, usingConfigurationId: configuration?.id };
 };
 

components/dashboard/src/data/workspaces/workspace-classes-query.ts

@@ -13,6 +13,7 @@ import { useMemo } from "react";
 import { PlainMessage } from "@bufbuild/protobuf";
 import { useConfiguration } from "../configurations/configuration-queries";
 import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { useDeepCompareMemoize } from "use-deep-compare-effect";
 
 export const DEFAULT_WS_CLASS = "g1-standard";
 
@@ -123,6 +124,13 @@ export const useAllowedWorkspaceClassesMemo = (
 
     const isLoading = isLoadingOrgSettings || isLoadingInstallationCls || isLoadingConfiguration;
 
+    const depItems = [
+        installationClasses,
+        orgSettings,
+        options,
+        configuration?.workspaceSettings?.restrictedWorkspaceClasses,
+        configuration?.workspaceSettings?.workspaceClass,
+    ];
     const data = useMemo(() => {
         return getAllowedWorkspaceClasses(
             installationClasses,
@@ -131,12 +139,10 @@ export const useAllowedWorkspaceClassesMemo = (
             configuration?.workspaceSettings?.workspaceClass,
             options,
         );
-    }, [
-        installationClasses,
-        orgSettings,
-        options,
-        configuration?.workspaceSettings?.restrictedWorkspaceClasses,
-        configuration?.workspaceSettings?.workspaceClass,
-    ]);
+        // react useMemo is using `Object.is` to compare dependencies so array / object will make re-render re-call useMemo,
+        // see also https://react.dev/reference/react/useMemo#every-time-my-component-renders-the-calculation-in-usememo-re-runs
+        //
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useDeepCompareMemoize(depItems)]);
     return { ...data, isLoading };
 };

yarn.lock

@@ -6582,7 +6582,7 @@ deprecation@^2.0.0, deprecation@^2.3.1:
   resolved "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
 
-dequal@^2.0.3:
+dequal@^2.0.2, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -15254,6 +15254,14 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-deep-compare-effect@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
+  integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    dequal "^2.0.2"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"